Skip to content

Commit 90c5484

Browse files
graham-trottgraham-trott
committed
Version 1.0.1
1 parent 09cee44 commit 90c5484

File tree

3 files changed

+715
-425
lines changed

3 files changed

+715
-425
lines changed

‎presenter/demo.json

Lines changed: 160 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"title": "JSON:Presenter",
3-
"description": "A demo presentation that outlines some features of JSON:Presenter",
4-
"aspectW": 16,
5-
"aspectH": 9,
2+
"title": "JSON::Presenter",
3+
"description": "A demo presentation that outlines some features of JSON::Presenter",
4+
"aspectW": 160,
5+
"aspectH": 89,
66
"container": {
77
"border": "1px solid black",
88
"background": "black"
@@ -14,67 +14,104 @@
1414
"fontStyle": "normal",
1515
"fontColor": "white",
1616
"textAlign": "left",
17-
"blockLeft" : 0,
18-
"blockTop" : 0,
17+
"textMarginLeft": 0,
18+
"textMarginTop": 0,
19+
"blockLeft": 0,
20+
"blockTop": 0,
1921
"blockWidth": 1000,
20-
"blockBackground" : "none",
22+
"blockBackground": "none",
2123
"blockBorder": "none",
22-
"blockPaddingLeft": 20,
23-
"blockPaddingTop": 0
24+
"blockBorderRadius": 0
2425
},
2526
"blocks": {
2627
"title": {
27-
"type": "text",
28-
"spec": {
29-
"blockTop": 300,
30-
"blockHeight": 300,
31-
"textAlign": "center",
32-
"fontSize": 200,
33-
"fontWeight": "bold",
34-
"fontColor": "#800000"
35-
}
28+
"blockTop": 300,
29+
"blockHeight": 300,
30+
"textAlign": "center",
31+
"fontSize": 200,
32+
"fontWeight": "bold",
33+
"fontColor": "#800000"
3634
},
3735
"title 2": {
38-
"type": "text",
39-
"spec": {
40-
"blockTop": 50,
41-
"blockHeight": 150,
42-
"textAlign": "center",
43-
"fontSize": 100,
44-
"fontWeight": "bold",
45-
"fontColor": "#00dddd"
46-
}
36+
"blockTop": 50,
37+
"blockHeight": 150,
38+
"textAlign": "center",
39+
"fontSize": 100,
40+
"fontWeight": "bold",
41+
"fontColor": "#dddd00"
4742
},
4843
"body": {
49-
"type": "text",
50-
"spec": {
51-
"blockTop": 200,
52-
"blockHeight": 800,
53-
"blockPaddingLeft": 80,
54-
"blockPaddingTop": 40,
55-
"fontFamily": "Helvetica,sans-serif",
56-
"fontColor": "#00ffff"
57-
}
44+
"blockLeft": 80,
45+
"blockTop": 240,
46+
"blockWidth": 840,
47+
"blockHeight": 800,
48+
"fontFamily": "Helvetica,sans-serif",
49+
"fontColor": "#dddddd"
50+
},
51+
"body right": {
52+
"blockLeft": 500,
53+
"blockTop": 200,
54+
"blockWidth": 420,
55+
"blockHeight": 800,
56+
"fontFamily": "Helvetica,sans-serif",
57+
"fontColor": "#dddddd"
58+
},
59+
"left image": {
60+
"blockLeft": 80,
61+
"blockTop": 200,
62+
"blockWidth": 370,
63+
"blockHeight": 700,
64+
"blockBorder": "1px solid black",
65+
"blockBorderRadius": "1em"
5866
}
5967
},
6068
"content": {
61-
"presenter title": "JSON:Presenter",
62-
"slide 1": [
63-
"JSON:Presenter<sup>&copy;</sup> is a presentation format using JSON scripts and an engine that runs those scripts in a browser to create presentations. These may be similar to those created using PowerPoint or they can be considerably more elaborate, with extensive animation and even sound. In some cases they can take the place of video yet still offer a dynamic experience.",
64-
65-
"Presentations can run from any host, including static; all you need is one CDN-hosted JavaScript file and you're good to go.",
66-
67-
"The JSON:Presenter<sup>&copy;</sup> engine is pure JavaScript. It can be used with any JavaScript framework, or with none."
68-
]
69+
"presenter title": {
70+
"type": "text",
71+
"content": "JSON::Presenter"
72+
},
73+
"slide 1": {
74+
"type": "text",
75+
"content": [
76+
"JSON::Presenter is a presentation format using JSON scripts, and an engine that runs those scripts in a browser to create presentations. These may be similar to those created using PowerPoint or they can be considerably more elaborate, with extensive animation and even sound. In some cases they can take the place of video yet still offer a dynamic experience.",
77+
78+
"Presentations can run from any host, including static; all you need is one CDN-hosted JavaScript file and you're good to go.",
79+
80+
"The JSON::Presenter engine is pure JavaScript. It can be used with any JavaScript framework, or with none."
81+
]
82+
},
83+
"slide 2": {
84+
"type": "text",
85+
"content": [
86+
"JSON::Presenter offers a range of block types and transitions that make it easy to create slick, effective presentations.",
87+
88+
"This short demo illustrates some of the features of the system."
89+
]
90+
},
91+
"slide 3": {
92+
"type": "text",
93+
"content": [
94+
"Text and image blocks can be manipulated in a variety of different ways.",
95+
96+
"Any block can be resized or moved; text can be substituted or have its size or color change; images can be assigned to blocks. Any block can be faded or transformed using animations.",
97+
98+
"The JSON::Presenter scripting language uses simple data JSON structures and is easy to read or write."
99+
]
100+
},
101+
"flowers": {
102+
"type": "image",
103+
"url": "img/flowers.jpg"
104+
},
105+
"moon": {
106+
"type": "image",
107+
"url": "img/moon.jpg"
108+
}
69109
},
70110
"steps": [
71111
{
72-
"comment": "-------------------- Create the title and body blocks",
73-
"action": "create",
74-
"blocks": [
75-
"title",
76-
"body"
77-
]
112+
"comment": "------------------------------- Pause before we start",
113+
"action": "pause",
114+
"duration": 2
78115
},
79116
{
80117
"comment": "---------------------------------- Set up the content",
@@ -87,20 +124,18 @@
87124
{
88125
"block": "body",
89126
"content": "slide 1"
127+
},
128+
{
129+
"block": "left image",
130+
"content": "flowers"
90131
}
91132
]
92133
},
93134
{
94-
"comment": "----------------------------- A pause before we start",
95-
"action": "hold",
96-
"duration": 2
97-
},
98-
{
99-
"comment": "-------------------------------- Show the intro title",
135+
"comment": "----------------------------- Fade up the intro title",
100136
"action": "fade up",
101137
"blocks": "title",
102-
"duration": 3,
103-
"wait": true
138+
"duration": 3
104139
},
105140
{
106141
"comment": "-------------------------------------- Wait 4 seconds",
@@ -119,14 +154,75 @@
119154
"block": "title",
120155
"target": "title 2",
121156
"duration": 1,
122-
"wait": true
157+
"continue": true
158+
},
159+
{
160+
"comment": "----------------------------- Pause for half a second",
161+
"action": "pause",
162+
"duration": 0.5
123163
},
124164
{
125165
"comment": "-------------------------------- Show the first slide",
126166
"action": "fade up",
127167
"blocks": "body",
128-
"duration": 1,
129-
"wait": true
168+
"duration": 1
169+
},
170+
{
171+
"comment": "------------------------------------- Wait 10 seconds",
172+
"action": "hold",
173+
"duration": 10
174+
},
175+
{
176+
"comment": "-------------------------------- Change the body text",
177+
"action": "crossfade",
178+
"block": "body",
179+
"target": "slide 2",
180+
"duration": 1
181+
},
182+
{
183+
"comment": "------------------------------------- Wait 5 seconds",
184+
"action": "hold",
185+
"duration": 5
186+
},
187+
{
188+
"comment": "-------------------------- Move the body to the right",
189+
"action": "transition",
190+
"type": [
191+
"block position",
192+
"block size"
193+
],
194+
"block": "body",
195+
"target": "body right",
196+
"duration": 1
197+
},
198+
{
199+
"comment": "----------------------------- Fade up the image block",
200+
"action": "fade up",
201+
"blocks": "left image",
202+
"duration": 2
203+
},
204+
{
205+
"comment": "-------------------------------------- Wait 8 seconds",
206+
"action": "hold",
207+
"duration": 8
208+
},
209+
{
210+
"comment": "--------------------------------- Crossfade the image",
211+
"action": "crossfade",
212+
"block": "left image",
213+
"target": "moon",
214+
"duration": 1
215+
},
216+
{
217+
"comment": "-------------------------------------- Wait 2 seconds",
218+
"action": "hold",
219+
"duration": 2
220+
},
221+
{
222+
"comment": "-------------------------------- Change the body text",
223+
"action": "set content",
224+
"block": "body",
225+
"content": "slide 3"
130226
},
131227
{
132228
"comment": "------------------------------------- Wait 10 seconds",
@@ -138,10 +234,10 @@
138234
"action": "fade down",
139235
"blocks": [
140236
"title",
141-
"body"
237+
"body",
238+
"left image"
142239
],
143-
"duration": 3,
144-
"wait": true
240+
"duration": 3
145241
}
146242
]
147243
}

‎presenter/index.html

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,15 @@
66

77
<body>
88

9-
<div id="jp-container" style="width:100%"></div>
10-
<pre id="jp-script" style="display:none">demo.json?v=1.0.0</pre>
11-
<!--script src="https://cdn.jsdelivr.net/gh/easycoder/json-presenter/jsonPresenter.js?v=1.0.0"></script-->
12-
<script src="jsonPresenter.js"></script>
9+
<div id="jp-container" style="text-align:center;width:100%">
10+
<b>JSON::Presenter</b><br>
11+
Click/Tap or press any key to start.<br>
12+
Click/Tap or key Space/RightArrow to advance.<br>
13+
Key Enter to toggle auto/manual mode.
14+
</div>
15+
<pre id="jp-script" style="display:none">https://cdn.jsdelivr.net/gh/easycoder/json-presenter/demo.json?v=1.0.1</pre>
16+
<pre id="jp-mode" style="display:none">manual</pre>
17+
<script src="https://cdn.jsdelivr.net/gh/easycoder/json-presenter/jsonPresenter.js?v=1.0.1"></script>
1318

1419
</body>
1520
</html>

0 commit comments

Comments
 (0)