-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
225 lines (222 loc) · 9.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Raleway:wght@400;600&family=Roboto&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./authoring.css" />
</head>
<body>
<div class="header hasHelp">
<h1>JESSYINK</h1>
<h2> Cutroom </h2>
<div id="helpButton">help</div>
<div class="layerHelp helpBubble">
Select slide to edit.
</div>
</div>
<div class="sideMargin">
<div class ="topPanel hasHelp">
<div id="dropper">
<div class="iconBox">
<svg
class="boxIcon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 37 50"
>
<path
d="M 15.332365,3.3178299 V 39.752761 L 5.0844901,29.709417 c -2.971636,-2.971641 -7.2900792,1.402188 -4.36195008,4.454564 L 15.953285,49.087662 c 1.223863,1.223861 3.759143,1.219869 5.011897,-0.03289 L 36.171394,34.164926 c 3.194585,-2.896842 -1.382153,-7.58104 -4.352424,-4.454332 L 21.561528,39.75149 V 3.3190549 c 0,-4.413113 -6.16331,-4.4390222 -6.228974,4.7e-5 z"
></path>
</svg>
</div>
<div class="dropSozi">
Drop your JessyInk.svg here
</div>
<div class="dropclick">
or click to choose a file
</div>
<input
id="fileChooser"
type="file"
accept=".svg,.svg"
class="hidden"
/>
</div>
<div id="viewPanel">
<div class="viewWrap">
<div class="helpBox">
<h3>Presentation View</h3>
<p>
shows your Jessyink presentation.
Click it and navigate through slides, views and effects as usual.
</p>
<div class="imgCenter">
<img src="./files/Jessyink navigation.svg">
</div>
</div>
<iframe id="viewer"></iframe>
</div>
<div id="filePanel">
<div id="filename">this is not a filename</div>
<div class="buttonPanel">
<button id="download">download
<div class ="helpBubble">
Download edited presentation.
</div>
</button>
</div>
</div>
</div>
</div>
<div id="infoPanel">
<h3>Welcome to the JessyInk Cutroom</h3>
<p>
The cutroom is a brain friendly, visual editor for JessyInk presentations.
</p>
<p>
JessyInk is a build in extension of <a target="_blank" href="https://inkscape.org/">Inkscape</a> to
create animated presentations in a Sozi or Prezi like pan and zoom style.
</p>
<p>
Here is an <a target="_blank" href ="./files/JessyInkDemo.svg">EXAMPLE</a> including a basic how to.
</p>
<p>
JessyInk might feel a little lofi, but it's super simple workflow still makes it a handy tool for a vivid alternative to the next boring powerpoint.
</p>
<p>
Unfortunately Jessyink does not offer any kind of visual storyboard or graphic editor.
So creating complex presentations or reworking some old stuff quickly becomes a hassle.
</p>
<p>
The cutroom shows what happens when in your presentation and provides an easy drag and drop editor.
</p>
<h3 class="fancy">Update!</h3>
<p>
New features available:
<ul>
<li><span class="accent">Edit</span> effect duration and style (pop, appear, fade)</li>
<li>Add <span class="accent">easing</span> for more natural or accentured animation! </li>
<li>"Pop" effect now <span class="accent">really pops</span>, especially combined with easing!</li>
</ul>
watch this <a target="_blank" href="./files/NewFeaturesDemo.svg">DEMO</a>!
</p>
</div>
<div class="modelPane hasHelp">
<ul id="layers">
</ul>
<div class="modelWrap">
<div class="helpBox">
<h3>Step View</h3>
<p>
displays the current slide's views and effects in order of their appearance.
A blue border highlights the step currently shown in the presentation view.
</p>
<p>
Click on a step or use arrow up and down keys to switch the current step.
Arrows left and right also switch the step while playing the animations.
</p>
<h4>Editing</h4>
<p> to change the order of appearance, you can... </p>
<div class="imgCenter"> <img src="./files/Stepview dragging.svg"/></div>
<!-- <div class="demo">
<div class="order selected">
<div class="step">
<div class="orderNo">3</div>
<div class="part view"><div class="label">View</div><div class="icon"></div></div>
<div class="part effectIn"><div class="label">Effect In</div><div class="icon"></div></div>
<div class="part effectOut"><div class="label">Effect Out</div><div class="icon"></div></div>
</div>
</div>
</div>
-->
<p>
Drop targets are highlighted while dragging. However, there are some restrictions:<br>
<ul>
<li>Steps can only contain one view</li>
<li>Steps cannot contain effect in and effect out of the same object</li>
</ul>
</p>
<h4>Effect identification</h4>
<p>
moving the mouse over an effect will highlight the object in the presentation view.
If it does not show, the object is probably outside the current view bounds.
</p>
</div>
<ul id="model" tabindex="0">
</ul>
</div>
<div class="optionBar">
Time: <input id="effectTime" type="number">
Style: <div class="dropdown">
<span id="effectStyle" class="dropValue">Fade</span>
<ul>
<li>fade</li>
<li>pop</li>
<li>appear</li>
</ul>
</div>
Easing:
<div class="dropdown">
<span id="effectEasing" class="dropValue">InQuad</span>
<ul class="crowded">
<li>InSin</li>
<li>OutSin</li>
<li>InOutSin</li>
<li>InQuad</li>
<li>OutQuad</li>
<li>InOutQuad</li>
<li>InCubic</li>
<li>OutCubic</li>
<li>InOutCubic</li>
<li>InQuart</li>
<li>OutQuart</li>
<li>InOutQuart</li>
<li>InQuint</li>
<li>OutQuint</li>
<li>InOutQuint</li>
<li>InExpo</li>
<li>OutExpo</li>
<li>InOutExpo</li>
<li>InCirc</li>
<li>OutCirc</li>
<li>InOutCirc</li>
<li>InBack</li>
<li>OutBack</li>
<li>InOutBack</li>
<li>InElastic</li>
<li>OutElastic</li>
<li>InOutElastic</li>
<li>InBounce</li>
<li>OutBounce</li>
<li>InOutBounce</li>
<li>Linear</li>
</ul>
</div>
<div class="helpBubble">
edit effect duration, style and easing.
</div>
</div>
</div>
</div>
<!--
<img class="visitorBadge" src="https://visitor-badge.glitch.me/badge?page_id=tshoppainfo.jessyink-cutroom.dev" alt="visitor badge"/>
-->
<div class="templates">
<li id="templateview" class="part view">
<div class="label"></div>
<div class="icon"></div>
</li>
<li id="templateeffectIn" class="part effectIn">
<div class="label"></div>
<div class="icon"></div>
</li>
<li id="templateeffectOut" class="part effectOut">
<div class="label"></div>
<div class="icon"></div>
</li>
</div>
<script src="./authoring.js"></script>
</body>
</html>