Skip to content

Commit 629f768

Browse files
thawkthawk
authored
Add relative move and rotate to rel plugin (#794)
The relative position in rel plugin is currently based on the world coordinate. So for the same effect, like fly in from the right-hand side, we must use different `data-rel-x/y/z` value. Why not let the plugin do the hard part? So I introduce a `data-rel-position`, when set to `relative`, all relative attribute is based on the position and rotation of previous slide. So no matter the rotation of previous slide, data-rel-x="1000" always looks like fly in from the right-hand side. We can change the position and rotation of one slide, and the position of all following slides will be changed too. When `data-rel-position` is set to `relative`, relative rotation has a clear meaning. It describes the relative rotations between slides. We don't need to set rotations for all slide, setting the key slides is enough. If `data-rel-position` is not relative, the effect of `data-rel-rotate-x/y/z` is not clear, so they're only used when `data-rel-position="relative"`. After the introduction of relative rotation, there're 6 attribute that will inherit from previous slide. If we want to set a relative X move, we have to set all other 5 attributes to 0. It's boring. So a `data-rel-clear` is used to set all 6 attributes to 0, and then the value specified in current slide is applied. The `examples/3D-positions/index.html` shows some usage. As you can see, the html code of two slide ring is the same, and slides except for the first two in a ring has no position attributes. It work by inheriting the previous one. This PR invokes a lot math calculations. Basically, the rotation of a slide is translated into the coordinate describing the directions of X/Y/Z axes. And `data-rel-x/y/z` can be easily calculated by that. The rotations is the hard part, I mainly use the algorithm in the Quaternions and spatial rotation - Wikipedia to compose two and more rotations. I'm not a math guy, hope I don't make much mistakes.
1 parent d3760df commit 629f768

File tree

18 files changed

+10559
-123
lines changed

18 files changed

+10559
-123
lines changed

‎build.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ var Terser = require("terser");
55

66
var files = ['src/impress.js'];
77
// Libraries from src/lib
8-
files.push('src/lib/gc.js', 'src/lib/util.js')
8+
files.push('src/lib/gc.js', 'src/lib/util.js', 'src/lib/rotation.js')
99
// Plugins from src/plugins
1010
files.push('src/plugins/autoplay/autoplay.js',
1111
'src/plugins/blackout/blackout.js',
@@ -71,4 +71,4 @@ html += '</body>\n</html>'
7171

7272
filename = path.resolve(__dirname, 'examples', 'index.html');
7373
fs.writeFileSync(filename, html);
74-
console.log(filename);
74+
console.log(filename);

‎examples/3D-positions/index.html‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>relative rotations</title>
6+
<link href="..\..\css\impress-common.css" rel="stylesheet" />
7+
<style type="text/css" media="screen">
8+
#overview {
9+
background: none;
10+
border: none;
11+
box-shadow: none;
12+
width: 1800px;
13+
height: 1300px;
14+
}
15+
16+
#overview div {
17+
width: 100%;
18+
height: 100%;
19+
}
20+
21+
.step {
22+
position: relative;
23+
width: 1000px;
24+
height: 1000px;
25+
padding: 40px 60px;
26+
margin: 20px auto;
27+
28+
box-sizing: border-box;
29+
30+
line-height: 1.5;
31+
32+
background-color: yellow;
33+
border-radius: 10px;
34+
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
35+
36+
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
37+
38+
font-family: 'Open Sans', Arial, sans-serif;
39+
font-size: 40pt;
40+
letter-spacing: -1px;
41+
border: solid 2px red;
42+
43+
opacity: 40%;
44+
}
45+
46+
.step.active {
47+
opacity: 100%;
48+
}
49+
50+
.step.ring2 {
51+
background-color: cyan;
52+
}
53+
54+
.step.box {
55+
background-color: purple;
56+
opacity: 70%;
57+
}
58+
59+
.step.box1 {
60+
background-color: lightblue;
61+
}
62+
</style>
63+
</head>
64+
65+
<body class="impress-not-supported">
66+
<div id="impress" data-width="2000" data-height="1500">
67+
<div id="overview" class="step overview" data-rel-position="relative" data-x="-1000" data-y="-1500" data-z="100" data-scale="3" data-rotate-x="45" data-rotate-y="10">
68+
<div>
69+
<h2>Demo of <code>data-rel-position</code></h2>
70+
<p>This demo use <code>data-rel-position="relative"</code><br>
71+
and <code>data-rel-rotate-x/y/z</code><br>
72+
to easy 3D positioning of slides.</p>
73+
</div>
74+
</div>
75+
76+
<div id="box-front" class="step box" data-x="-3000" data-y="0" data-z="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0">Front
77+
<p>There's two nested box here.</p>
78+
</div>
79+
<div id="box-front1" class="step box1" data-rel-reset data-rel-z="-200" data-scale="0.6">Inside Front</div>
80+
<div id="box-right1" class="step box1" data-rel-reset data-rel-x="300" data-rel-z="-300" data-rel-rotate-y="90" data-scale="0.6">Inside Right</div>
81+
<div id="box-right" class="step box" data-rel-reset data-rel-z="200">Right</div>
82+
<div id="box-back" class="step box" data-rel-reset data-rel-x="500" data-rel-z="-500" data-rel-rotate-y="90">Back</div>
83+
<div id="box-back1" class="step box1" data-rel-reset data-rel-z="-200" data-scale="0.6">Inside Back</div>
84+
<div id="box-top1" class="step box1" data-rel-reset data-rel-y="-300" data-rel-z="-300" data-rel-rotate-x="90" data-scale="0.6">Inside Top</div>
85+
<div id="box-top" class="step box" data-rel-reset data-rel-z="200">Top</div>
86+
<div id="box-left" class="step box" data-rel-reset data-rel-x="500" data-rel-z="-500" data-rel-rotate-y="90">Left</div>
87+
<div id="box-left1" class="step box1" data-rel-reset data-rel-z="-200" data-scale="0.6">Inside Left</div>
88+
<div id="box-bottom1" class="step box1" data-rel-reset data-rel-x="300" data-rel-z="-300" data-rel-rotate-y="90" data-scale="0.6">Inside Bottom</div>
89+
<div id="box-bottom" class="step box" data-rel-reset data-rel-z="200">Bottom</div>
90+
91+
<div id="ring1-1" class="step" data-rel-reset="all" data-x="0" data-y="0" data-z="0" data-rotate-y="10">
92+
<p>Slide one</p>
93+
<p>This is a ring of 8 slides.</p>
94+
<p>It's easy constucted with data-rel-position="relative" without calculates the coordinates of all slides.</p>
95+
</div>
96+
97+
<div id="ring1-2" class="step" data-rel-rotate-y="45" data-rel-z="-354" data-rel-x="854">
98+
<p>Slide two</p>
99+
<p>The position of this slide is calculated as relatived position and rotation of the first slide.</p>
100+
<p>The following slides don't need to set any position attributes, they are inherit from this slide.</p>
101+
</div>
102+
103+
<div id="ring1-3" class="step">
104+
<p>Slide three</p>
105+
</div>
106+
107+
<div id="ring1-4" class="step">
108+
<p>Slide four</p>
109+
</div>
110+
111+
<div id="ring1-5" class="step">
112+
<p>Slide five</p>
113+
</div>
114+
115+
<div id="ring1-6" class="step">
116+
<p>Slide six</p>
117+
</div>
118+
119+
<div id="ring1-7" class="step">
120+
<p>Slide seven</p>
121+
</div>
122+
123+
<div id="ring1-8" class="step">
124+
<p>Slide eight</p>
125+
</div>
126+
127+
<div id="ring2-1" class="step ring2" data-rel-reset="all" data-x="-500" data-y="0" data-z="-1514" data-rotate-x="90" data-rotate-y="270" data-rotate-z="0">
128+
<p>Slide one</p>
129+
<p>This is another ring of slides.</p>
130+
<p>Except for the this slide, its code is just cloned from the yellow ring.</p>
131+
<p>Just change the position of first slide, all the following slides are position relatived to it.</p>
132+
</div>
133+
134+
<div id="ring2-2" class="step ring2" data-rel-rotate-y="45" data-rel-z="-354" data-rel-x="854" data-rel-y="0">
135+
<p>Slide two</p>
136+
</div>
137+
138+
<div id="ring2-3" class="step ring2">
139+
<p>Slide three</p>
140+
</div>
141+
142+
<div id="ring2-4" class="step ring2">
143+
<p>Slide four</p>
144+
</div>
145+
146+
<div id="ring2-5" class="step ring2">
147+
<p>Slide five</p>
148+
</div>
149+
150+
<div id="ring2-6" class="step ring2">
151+
<p>Slide six</p>
152+
</div>
153+
154+
<div id="ring2-7" class="step ring2">
155+
<p>Slide seven</p>
156+
</div>
157+
158+
<div id="ring2-8" class="step ring2">
159+
<p>Slide eight</p>
160+
</div>
161+
</div>
162+
163+
<div id="impress-toolbar"></div>
164+
<div id="impress-help"></div>
165+
166+
<script type="text/javascript" src="../../js/impress.js"></script>
167+
<script>impress().init();</script>
168+
</body>
169+
<html>

‎examples/classic-slides/index.html‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -188,7 +188,7 @@ <h1>Bullet points</h1>
188188
Notation shouldn't be a surprise. We use `data-rotate="30"` attribute, meaning that this
189189
element should be rotated by 30 degrees clockwise.
190190
-->
191-
<div class="step slide" data-rel-x="2200" data-rel-y="600" data-rotate="30">
191+
<div class="step slide" data-rel-position="relative" data-rel-x="2200" data-rel-y="600" data-rel-rotate-z="30">
192192
<h1>A blockquote &amp; image</h1>
193193
<img src="images/3476636111_c551295ca4_b.jpg"
194194
alt="Mother Teresa holding a newborn baby"
@@ -200,10 +200,14 @@ <h1>A blockquote &amp; image</h1>
200200
</blockquote>
201201

202202
<div class="notes">
203+
We use <code>data-rel-position="relative"</code> to make <code>data-rel-rotate-*</code> work,
204+
and make <code>data-rel-x/data-rel-y/data-rel-y</code> be calculated at the coordination related to previous slide.
205+
The relative position and rotation will be inherited by following slides,
206+
so it's not necessary to repeat it again and again.
203207
</div>
204208
</div>
205209

206-
<div class="step slide" data-rel-x="1600" data-rel-y="1600" data-rotate="60">
210+
<div class="step slide">
207211
<h1>More text styles</h1>
208212
<p>As usual, use <em>em</em> to emphasize, <br />
209213
<strong>strong</strong> for strong, <u>u</u> for underline,<br />
@@ -216,7 +220,7 @@ <h1>More text styles</h1>
216220
</div>
217221
</div>
218222

219-
<div class="step slide" data-rel-x="600" data-rel-y="2200" data-rotate="90">
223+
<div id="motions" class="step slide">
220224
<h1>Motion effects 101</h1>
221225
<p>Items on the slide can</p>
222226
<p class="fly-in fly-out">Fly in</p>
@@ -246,22 +250,32 @@ <h1>Motion effects 101</h1>
246250
</div>
247251
</div>
248252

249-
<div id="addons" class="step slide title" data-rel-x="-600" data-rel-y="2200" data-rotate="120">
253+
<div id="zoom" class="step" data-rel-reset data-rel-x="-0.25w" data-rel-y="0.5h" data-scale="0.5">
254+
<div class="notes">
255+
<p>This step zoom in to left bottom of previous slide to see to small text.</p>
256+
<p>It's a empty and transparent.</p>
257+
<p><code>data-rel-reset</code> is used to prevent this step from inheriting the relative positioning from previous slide.</p>
258+
</div>
259+
</div>
260+
261+
<div id="addons" class="step slide title" data-rel-to="motions">
250262
<h2>Add-ons</h2>
251263
<div class="notes">
252264
<p>This version of impress.js includes several add-ons, striving to make this a
253265
full featured presentation app.</p>
266+
<p>The previous step breaks the slide flow, changes the relative position and rotation.</p>
267+
<p>This slide use <code>data-rel-to</code> to inherit relative position and rotation from the slide before previous slide.</p>
254268
</div>
255269
</div>
256270

257-
<div class="step slide" data-rel-x="-1600" data-rel-y="1600" data-rotate="150" data-autoplay="3">
271+
<div class="step slide" data-autoplay="3">
258272
<h1>Impress.js plugins</h1>
259273
<ul>
260274
<li>A new <a href="https://github.com/impress/impress.js/blob/master/src/plugins/README.md">plugin framework</a> allows for rich extensibility,
261275
without bloating the core rendering library.
262276
<ul>
263277
<li class="substep">Press 'P' to open a presenter console.</li>
264-
<li class="substep">When you move the mouse, navigation controls are visible on your bottom left</li>
278+
<li class="substep">When you move the mouse, navigation controls are visible on your bottom right</li>
265279
<li class="substep">Autoplay makes the slides advance after a timeout</li>
266280
<li class="substep">Relative positioning plugin is often a more convenient way to position your slides when editing. (<a href="https://github.com/impress/impress.js/blob/master/examples/classic-slides/index.html">See html for this presentation.</a>)</li>
267281
</ul>
@@ -277,7 +291,7 @@ <h1>Impress.js plugins</h1>
277291
</div>
278292
</div>
279293

280-
<div class="step slide" data-rel-x="-2200" data-rel-y="600" data-rotate="180">
294+
<div class="step slide">
281295
<h1>Highlight.js</h1>
282296
<pre><code>
283297
// `init` API function that initializes (and runs) the presentation.
@@ -303,7 +317,7 @@ <h1>Highlight.js</h1>
303317
</div>
304318
</div>
305319

306-
<div class="step slide" data-rel-x="-2200" data-rel-y="-600" data-rotate="210">
320+
<div class="step slide">
307321
<h1>Mermaid.js</h1>
308322
<div class="mermaid">
309323
%% This is a comment in mermaid markup
@@ -330,7 +344,7 @@ <h1><a href="http://docs.mathjax.org/en/latest/start.html">MathJax.js</a></h1>
330344
</div>
331345
</div>
332346

333-
<div id="markdown" class="step slide markdown" data-rel-x="-1600" data-rel-y="-1600" data-rotate="240">
347+
<div id="markdown" class="step slide markdown">
334348
# Markdown.js
335349

336350
* [Markdown.js](https://github.com/evilstreak/markdown-js) integration: for authors in a hurry!
@@ -344,7 +358,7 @@ <h1><a href="http://docs.mathjax.org/en/latest/start.html">MathJax.js</a></h1>
344358
* [A more advanced Markdown presentation is here.](../markdown/)
345359
</div>
346360

347-
<div id="acme" class="step slide" data-rel-x="-600" data-rel-y="-2200" data-rotate="270">
361+
<div id="acme" class="step slide">
348362
<ul>
349363
<li>Remember, in <em>impress.js</em> the full power of HTML5, CSS3 &amp; JavaScript is always at your fingertips!</li>
350364
<li>For example, you can use tables, forms, or dynamic charts as you would on any web page:</li>

‎examples/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<body><h1>Example presentations</h1>
66
<ul><br />
77
<li><a href="2D-navigation/">2D-navigation</a></li>
8+
<li><a href="3D-positions/">3D-positions</a></li>
89
<li><a href="3D-rotations/">3D-rotations</a></li>
910
<li><a href="classic-slides/">classic-slides</a></li>
1011
<li><a href="cube/">cube</a></li>

0 commit comments

Comments
 (0)
⚡