Skip to content

Version 1.0.1 #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 17, 2020
Merged

Version 1.0.1 #61

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5a2de12
Font style naming bug
graham-trott May 11, 2020
09cee44
Update presenter
graham-trott May 12, 2020
90c5484
Version 1.0.1
graham-trott May 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Version 1.0.1
  • Loading branch information
@graham-trott
graham-trott committed May 17, 2020
commit 90c54849aa9a307d077f8f16f5f71ec4cb1fb917
224 changes: 160 additions & 64 deletions presenter/demo.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"title": "JSON:Presenter",
"description": "A demo presentation that outlines some features of JSON:Presenter",
"aspectW": 16,
"aspectH": 9,
"title": "JSON::Presenter",
"description": "A demo presentation that outlines some features of JSON::Presenter",
"aspectW": 160,
"aspectH": 89,
"container": {
"border": "1px solid black",
"background": "black"
Expand All @@ -14,67 +14,104 @@
"fontStyle": "normal",
"fontColor": "white",
"textAlign": "left",
"blockLeft" : 0,
"blockTop" : 0,
"textMarginLeft": 0,
"textMarginTop": 0,
"blockLeft": 0,
"blockTop": 0,
"blockWidth": 1000,
"blockBackground" : "none",
"blockBackground": "none",
"blockBorder": "none",
"blockPaddingLeft": 20,
"blockPaddingTop": 0
"blockBorderRadius": 0
},
"blocks": {
"title": {
"type": "text",
"spec": {
"blockTop": 300,
"blockHeight": 300,
"textAlign": "center",
"fontSize": 200,
"fontWeight": "bold",
"fontColor": "#800000"
}
"blockTop": 300,
"blockHeight": 300,
"textAlign": "center",
"fontSize": 200,
"fontWeight": "bold",
"fontColor": "#800000"
},
"title 2": {
"type": "text",
"spec": {
"blockTop": 50,
"blockHeight": 150,
"textAlign": "center",
"fontSize": 100,
"fontWeight": "bold",
"fontColor": "#00dddd"
}
"blockTop": 50,
"blockHeight": 150,
"textAlign": "center",
"fontSize": 100,
"fontWeight": "bold",
"fontColor": "#dddd00"
},
"body": {
"type": "text",
"spec": {
"blockTop": 200,
"blockHeight": 800,
"blockPaddingLeft": 80,
"blockPaddingTop": 40,
"fontFamily": "Helvetica,sans-serif",
"fontColor": "#00ffff"
}
"blockLeft": 80,
"blockTop": 240,
"blockWidth": 840,
"blockHeight": 800,
"fontFamily": "Helvetica,sans-serif",
"fontColor": "#dddddd"
},
"body right": {
"blockLeft": 500,
"blockTop": 200,
"blockWidth": 420,
"blockHeight": 800,
"fontFamily": "Helvetica,sans-serif",
"fontColor": "#dddddd"
},
"left image": {
"blockLeft": 80,
"blockTop": 200,
"blockWidth": 370,
"blockHeight": 700,
"blockBorder": "1px solid black",
"blockBorderRadius": "1em"
}
},
"content": {
"presenter title": "JSON:Presenter",
"slide 1": [
"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.",

"Presentations can run from any host, including static; all you need is one CDN-hosted JavaScript file and you're good to go.",

"The JSON:Presenter<sup>&copy;</sup> engine is pure JavaScript. It can be used with any JavaScript framework, or with none."
]
"presenter title": {
"type": "text",
"content": "JSON::Presenter"
},
"slide 1": {
"type": "text",
"content": [
"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.",

"Presentations can run from any host, including static; all you need is one CDN-hosted JavaScript file and you're good to go.",

"The JSON::Presenter engine is pure JavaScript. It can be used with any JavaScript framework, or with none."
]
},
"slide 2": {
"type": "text",
"content": [
"JSON::Presenter offers a range of block types and transitions that make it easy to create slick, effective presentations.",

"This short demo illustrates some of the features of the system."
]
},
"slide 3": {
"type": "text",
"content": [
"Text and image blocks can be manipulated in a variety of different ways.",

"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.",

"The JSON::Presenter scripting language uses simple data JSON structures and is easy to read or write."
]
},
"flowers": {
"type": "image",
"url": "img/flowers.jpg"
},
"moon": {
"type": "image",
"url": "img/moon.jpg"
}
},
"steps": [
{
"comment": "-------------------- Create the title and body blocks",
"action": "create",
"blocks": [
"title",
"body"
]
"comment": "------------------------------- Pause before we start",
"action": "pause",
"duration": 2
},
{
"comment": "---------------------------------- Set up the content",
Expand All @@ -87,20 +124,18 @@
{
"block": "body",
"content": "slide 1"
},
{
"block": "left image",
"content": "flowers"
}
]
},
{
"comment": "----------------------------- A pause before we start",
"action": "hold",
"duration": 2
},
{
"comment": "-------------------------------- Show the intro title",
"comment": "----------------------------- Fade up the intro title",
"action": "fade up",
"blocks": "title",
"duration": 3,
"wait": true
"duration": 3
},
{
"comment": "-------------------------------------- Wait 4 seconds",
Expand All @@ -119,14 +154,75 @@
"block": "title",
"target": "title 2",
"duration": 1,
"wait": true
"continue": true
},
{
"comment": "----------------------------- Pause for half a second",
"action": "pause",
"duration": 0.5
},
{
"comment": "-------------------------------- Show the first slide",
"action": "fade up",
"blocks": "body",
"duration": 1,
"wait": true
"duration": 1
},
{
"comment": "------------------------------------- Wait 10 seconds",
"action": "hold",
"duration": 10
},
{
"comment": "-------------------------------- Change the body text",
"action": "crossfade",
"block": "body",
"target": "slide 2",
"duration": 1
},
{
"comment": "------------------------------------- Wait 5 seconds",
"action": "hold",
"duration": 5
},
{
"comment": "-------------------------- Move the body to the right",
"action": "transition",
"type": [
"block position",
"block size"
],
"block": "body",
"target": "body right",
"duration": 1
},
{
"comment": "----------------------------- Fade up the image block",
"action": "fade up",
"blocks": "left image",
"duration": 2
},
{
"comment": "-------------------------------------- Wait 8 seconds",
"action": "hold",
"duration": 8
},
{
"comment": "--------------------------------- Crossfade the image",
"action": "crossfade",
"block": "left image",
"target": "moon",
"duration": 1
},
{
"comment": "-------------------------------------- Wait 2 seconds",
"action": "hold",
"duration": 2
},
{
"comment": "-------------------------------- Change the body text",
"action": "set content",
"block": "body",
"content": "slide 3"
},
{
"comment": "------------------------------------- Wait 10 seconds",
Expand All @@ -138,10 +234,10 @@
"action": "fade down",
"blocks": [
"title",
"body"
"body",
"left image"
],
"duration": 3,
"wait": true
"duration": 3
}
]
}
13 changes: 9 additions & 4 deletions presenter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,15 @@

<body>

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

</body>
</html>
Loading