lexgui 0.1.32 → 0.1.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/timeline.js +2059 -1443
- package/build/components/videoeditor.js +191 -100
- package/build/lexgui.css +27 -5
- package/build/lexgui.js +65 -30
- package/build/lexgui.module.js +62 -5
- package/changelog.md +7 -0
- package/examples/timeline.html +39 -24
- package/examples/video_editor.html +30 -13
- package/examples/video_editor2.html +118 -0
- package/package.json +1 -1
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
2
|
+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
5
|
+
<title>LexGUI Video Editor Demo</title>
|
|
6
|
+
<link rel="stylesheet" href="../build/lexgui.css">
|
|
7
|
+
<link rel="icon" href="../images/icon.png">
|
|
8
|
+
<script type="importmap">
|
|
9
|
+
{
|
|
10
|
+
"imports": {
|
|
11
|
+
"lexgui": "../build/lexgui.module.js",
|
|
12
|
+
"lexgui/components/": "../build/components/"
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
</head>
|
|
17
|
+
<body></body>
|
|
18
|
+
<script type="module">
|
|
19
|
+
|
|
20
|
+
import { LX } from 'lexgui';
|
|
21
|
+
import { VideoEditor } from 'lexgui/components/videoeditor.js';
|
|
22
|
+
|
|
23
|
+
// Init library and get main area
|
|
24
|
+
let area = LX.init();
|
|
25
|
+
const menubar = area.addMenubar( m => {
|
|
26
|
+
m.setButtonImage("Page", "../data/godot_pixelart.png", null, {float: "left"});
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
// Split main area
|
|
30
|
+
let [leftArea, rightArea] = area.split({sizes:["75%","25%"], minimizable: true});
|
|
31
|
+
let [topArea, bottomArea] = leftArea.split({sizes:["90%", null], minimizable: false, resize: false, type: "vertical"});
|
|
32
|
+
area.extend();
|
|
33
|
+
|
|
34
|
+
/* Create video area with a menubar */
|
|
35
|
+
const videoArea = new LX.Area({id:'video-area'});
|
|
36
|
+
|
|
37
|
+
/* Add video editor with the video into the area*/
|
|
38
|
+
const video = document.createElement('video');
|
|
39
|
+
video.src = "../data/video.mp4";
|
|
40
|
+
videoArea.attach(video);
|
|
41
|
+
const videoEditor = new LX.VideoEditor(topArea, {videoArea, video})
|
|
42
|
+
|
|
43
|
+
/* Add canvas above video */
|
|
44
|
+
const canvas = document.createElement('canvas');
|
|
45
|
+
canvas.width = video.clientWidth;
|
|
46
|
+
canvas.height = video.clientHeight;
|
|
47
|
+
const ctx = canvas.getContext("2d");
|
|
48
|
+
ctx.fillStyle = LX.getThemeColor("global-selected-light");
|
|
49
|
+
ctx.font = "40px Arial";
|
|
50
|
+
ctx.fillText("I'm a canvas above the video!", canvas.width/2, 100);
|
|
51
|
+
|
|
52
|
+
canvas.style.position = "absolute";
|
|
53
|
+
canvas.style.left = "0";
|
|
54
|
+
videoArea.attach(canvas);
|
|
55
|
+
leftArea.onresize = (size) => {
|
|
56
|
+
|
|
57
|
+
canvas.width = video.clientWidth;
|
|
58
|
+
canvas.height = video.clientHeight;
|
|
59
|
+
const ctx = canvas.getContext("2d");
|
|
60
|
+
ctx.fillStyle = LX.getThemeColor("global-selected-light");
|
|
61
|
+
ctx.font = "40px Arial";
|
|
62
|
+
ctx.fillText("I'm a canvas above the video!", canvas.width/2, 100);
|
|
63
|
+
//videoEditor.timebar.resize(size)
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Add show/hide right panel button*/
|
|
67
|
+
videoArea.addOverlayButtons([{
|
|
68
|
+
selectable: true,
|
|
69
|
+
selected: true,
|
|
70
|
+
icon: "fa-solid fa-info",
|
|
71
|
+
name: "Properties",
|
|
72
|
+
callback: (v, e) => {
|
|
73
|
+
if(area.split_extended) {
|
|
74
|
+
area.reduce();
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
area.extend();
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}], {float: 'tvr'});
|
|
81
|
+
|
|
82
|
+
let p = bottomArea.addPanel({width: "100%", height: "100%", style: {display: "flex", "flex-direction": "row", "justify-content": "center", "align-content": "flex-start", "flex-wrap": "wrap"}});
|
|
83
|
+
p.addButton(null, "Trim", (v) => {
|
|
84
|
+
console.log(videoEditor.getTrimedTimes())
|
|
85
|
+
|
|
86
|
+
videoArea.sections[1].root.resize(["20%", "20%"])
|
|
87
|
+
}, {width: "100px"})
|
|
88
|
+
p.addButton(null, null, (v) => {}, {width: "40px", icon: "fa-solid fa-rotate-left"})
|
|
89
|
+
|
|
90
|
+
/* Create right panel */
|
|
91
|
+
let panel = new LX.Panel({id:"Properties"});
|
|
92
|
+
panel = rightArea.addPanel({id:"Properties"});
|
|
93
|
+
createBlendShapesInspector({"Name 1": 0, "Name 2": 0, "Name 3": 0.5, "Name 4": 0, "Name 5": 1,},
|
|
94
|
+
{inspector: panel});
|
|
95
|
+
|
|
96
|
+
/* Functions */
|
|
97
|
+
function createBlendShapesInspector(bsNames, options = {}) {
|
|
98
|
+
|
|
99
|
+
let inspector = options.inspector || new LX.Panel({id:"blendshapes-inspector"});
|
|
100
|
+
|
|
101
|
+
if(options.clear) {
|
|
102
|
+
inspector.clear();
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
if(inspector.root.id) {
|
|
106
|
+
inspector.addTitle(inspector.root.id);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
for(let name in bsNames) {
|
|
110
|
+
inspector.addProgress(name, bsNames[name], {min: 0, max: 1, low: 0.3, optimum: 1, high: 0.6, editable: options.editable, showNumber: options.showNumber,
|
|
111
|
+
callback: (v,e) => {},
|
|
112
|
+
signal: "@on_change_au_" + name});
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
return inspector;
|
|
116
|
+
}
|
|
117
|
+
</script>
|
|
118
|
+
</html>
|