forked from berteh/mindslide
/
MindSlide-Export.html
555 lines (542 loc) · 21.2 KB
/
MindSlide-Export.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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
<!DOCTYPE html><html lang="en" xmlns:my="local.uri">
<head>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MindSlide</title>
<meta name="description" content="Freeplane mindmap HTML presentation">
<meta name="author" content="Yours Respectfully">
<meta name="generator" content="Mindslide at http://berteh.github.io/mindslide/">
<!--Mindslide version 0.5-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<link rel="stylesheet" id="theme" href="reveal.js/css/theme/moon.css">
<!--For syntax highlighting-->
<link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
<style type="text/css">
a.connector, a.subsection {margin-left: 1ex; font-size: smaller}
.illustrations a {float:left; margin: 1ex 5px; max-width:100%}
.illustrations img {max-height:8em;}
.illustrations.w1 a {max-width:98%}
.illustrations.w2 a {max-width:47%}
.illustrations.w3 a, .illustrations.w6 a {max-width:31%}
.illustrations.w4 a, .illustrations.w7 a, .illustrations.w8 a {max-width:23%}
.illustrations.w5 a, .illustrations.w9 a, .illustrations.w10 a {max-width:18%}
/* bullet lists layout */
#mindslide li p {margin: 0 0;}
#mindslide section.content>ul li {font-size: 90%;}
#mindslide section.content>ul>li:first-of-type, #mindslide section.title>ul li {list-style:none; display:block; font-size: 120%; margin-bottom:1ex}
/* zenburn hack for inline code highlight */
pre.inline, .inline code {display:inline; width:auto;}
/* icons */
#mindslide.awesome section.content li.icon {list-style:none; margin-left: -1em}
#mindslide.awesome .fa {font-family: FontAwesome; margin-right: 1ex;}
</style>
<!--If the query includes 'print-pdf', use the PDF print sheet. works in Chrome, maybe not other browsers-->
<script type="text/javascript">
document.write( '<link rel="stylesheet" href="reveal.js/css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print" />' );
</script>
<!--
[if lt IE 9]>
<script src="reveal.js/lib/js/html5shiv.js"></script>
<![endif]
-->
<!--placeholder for custom header items (typically scripts or stylesheets)-->
</head>
<body>
<div class="reveal">
<!--Any section element inside of this container is displayed as a slide-->
<div id="mindslide" class="slides">
<section class="title" id="ID_1723255651">
<h1>MindSlide</h1>
<ul>
<li>View your Mindmap as an HTML presentation / slideshow</li>
<li>
<p></p>
<p style="text-align: center">
hit <code><space></code> to navigate
</p>
</li>
<li>
<p style="text-align: center">
<small><a href="https://github.com/berteh/mindslide/">source code</a> (on github) - <a href="https://donorbox.org/donate-98">donate</a> (on donorbox)</small>
</p>
</li>
</ul>
</section>
<section class="toc">
<h2>Table of Content</h2>
<ul>
<li>What is MindSlide?<a href="#/ID_1494003336" class="link subsection"> ↴</a>
</li>
<li>Features<a href="#/ID_684843493" class="link subsection"> ↴</a>
</li>
<li>How To<a href="#/ID_317184146" class="link subsection"> ↴</a>
</li>
<li>
Not supported yet<a href="#/ID_523970975" class="link subsection"> ↴</a>
</li>
<li>Acknowledgments<a href="#/ID_510184946" class="link subsection"> ↴</a>
</li>
</ul>
</section>
<section class="content" id="ID_1494003336">
<h2>What is MindSlide?</h2>
<ul>
<li>Mindslide is a Mindmap viewer. It turns your Freeplane / Freemind mindmaps into a stunning HTML presentation in a few seconds.</li>
<li>
<a href="https://github.com/berteh/mindslide/blob/master/MindSlide-Export.mm" class="link external">Demo mindmap</a>
</li>
<li>
<a href="http://berteh.github.io/mindslide/" class="link external">Demo HTML presentation</a>
</li>
<li>
<a href="http://freeplane.sourceforge.net" class="link external">Freeplane software</a>
</li>
<li>
<a href="https://github.com/hakimel/reveal.js/wiki/Browser-Support" class="link external">works in most recent browsers, desktop and mobile devices</a>
</li>
</ul>
<div class="illustrations w3">
<a href="assets/mindmap-slide-export-demo.png" class="image" title="Demo mindmap"><img src="assets/mindmap-slide-export-demo.png" alt="Demo mindmap"></a><a href="assets/themes.jpg" class="image" title="Demo HTML presentation"><img src="assets/themes.jpg" alt="Demo HTML presentation"></a><a href="assets/chrome_firefox_opera_safari_ie_dolphin.png" class="image" title="works in most recent browsers, desktop and mobile devices"><img src="assets/chrome_firefox_opera_safari_ie_dolphin.png" alt="works in most recent browsers, desktop and mobile devices"></a>
</div>
</section>
<!--new subsection-->
<section>
<section class="content" id="ID_684843493">
<h2>Features</h2>
<ul>
<li>MindSlide currently supports</li>
<li>
<p>
<a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker notes</a> (from the node notes) <small>hit "s"</small>
</p>
</li>
<li>
<p>
2D overview <small>(hit "esc" or "o")</small> and easy navigation <small>(space, arrows, click, touch)</small> help <small>(?)</small>
</p>
</li>
<li>
<p>
simple <font face="Courier New, Courier, Nimbus Mono L, serif, monospace"><b style="font-family: Courier New, Courier, Nimbus Mono L, serif, monospace">& rich-text</b></font><font color="#e1a71c"> <u>nodes</u></font>, including code highlight:
</p>
<pre>
<code class="css">@page:right { margin: 1cm 2cm 1.3cm 4cm; }</code>
</pre>
</li>
<li class="icon">
<span aria-hidden="true" class="fa fa-check"></span>links, images, icons and nodes connectors<a href="#/ID_1494003336" class="link connector"> ↝</a>
</li>
<li>
<p>
<a href="https://github.com/hakimel/reveal.js#leap-motion">gestures</a>, <a href="https://github.com/hakimel/reveal.js#markdown">markdown contents</a>, <a href="https://github.com/hakimel/reveal.js#pdf-export">PDF export</a>, <a href="https://github.com/hakimel/reveal.js#api">JavaScript API</a> and <a href="https://github.com/hakimel/reveal.js#instructions">more</a>.
</p>
</li>
<li>hidding mindmap nodes from slides<a href="#/ID_378704017" class="link connector"> ↝</a>
</li>
<li>Recent improvements<a href="#/ID_1665333044" class="link subsection"> ↴</a>
</li>
</ul>
<aside class="notes">
<p>
The presenter notes are displayed in the presenter view.
</p>
<p>
The current slide aggregates all notes of the nodes it contains, but for the nodes that have children.
</p>
<ul>
<li>
<font face="Times New Roman"><b>Rich text</b></font> <i>works in notes</i> too!
</li>
</ul>
<p>
Images support is only partial as it depends on the browser to find them, usually relative adress in a sub-directory is fine.
</p>
<p>
Help in improving this part is highly welcome.
</p>
<p>
Nodes connectors display with a cute "tilde character", any better idea is welcome (a small preview of the target slide on hover would be great, for instance)
</p>
</aside>
</section>
<section class="content" id="ID_1665333044">
<h3>Recent improvements</h3>
<ul>
<li class="icon">
<span aria-hidden="true" class="fa fa-smile-o"></span>Mindslide now shows nodes icons</li>
<li class="icon">
<span aria-hidden="true" class="fa fa-bookmark"></span>
<p>
The last update of Reveal.js now allows for
</p>
<ul>
<li>
more stunning transitions, including <i>fade, slide, convex, concave, zoom</i>.
</li>
<li>
parallax background (see <a href="http://berteh.github.io/mindslide/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg&parallaxBackgroundSize=2100px%20900px#/ID_1723255651">demo</a>)
</li>
<li>
slides shuffling
</li>
<li>
auto advancing slides (see <a href="https://github.com/hakimel/reveal.js#auto-sliding">documentation</a>)
</li>
</ul>
</li>
</ul>
</section>
</section>
<!--new subsection-->
<section>
<section class="content" id="ID_317184146">
<h2>How To</h2>
<ul>
<li>Some help and instructions</li>
<li>Requirements<a href="#/ID_965818761" class="link subsection"> ↴</a>
</li>
<li>Install MindSlide<a href="#/ID_1405033759" class="link subsection"> ↴</a>
</li>
<li>Use MindSlide<a href="#/ID_1592220697" class="link subsection"> ↴</a>
</li>
<li>Configure MindSlide<a href="#/ID_1593867677" class="link subsection"> ↴</a>
</li>
<li>Contribute / Contact<a href="#/ID_1128763901" class="link subsection"> ↴</a>
</li>
</ul>
</section>
<section class="content" id="ID_965818761">
<h3>Requirements</h3>
<ul>
<li>You need a recent browser with javascript support (Chrome and Firefox recommended)</li>
<li>
<a href="https://github.com/hakimel/reveal.js/wiki/Browser-Support" class="link external">browsers supported by reveal.js</a>
</li>
</ul>
</section>
<section class="content" id="ID_1405033759">
<h3>Install MindSlide</h3>
<ul>
<li>To install MindSlide takes about 2 minutes:</li>
<li>
<p>
Install from the archives:
</p>
<ol>
<li>
dowload and unpack <a href="https://github.com/berteh/mindslide/archive/master.zip">mindslide's master.zip</a> into "mindslide" directory (or pick any name you like)
</li>
<li>
download and unpack <a href="https://github.com/hakimel/reveal.js/archive/master.zip">reveal.js's master.zip</a> into mindslide/reveal.js directory
</li>
<li>
download and unpack <a href="https://github.com/FortAwesome/Font-Awesome/archive/master.zip">FontAwesome's master.zip</a> into mindslide/Font-Awesome directory
</li>
</ol>
</li>
<li>
<p>
(alternatively) you can also clone the source code:
</p>
<pre>
<code class="bash">git clone --recursive https://github.com/berteh/mindslide.git</code>
</pre>
</li>
<li>then copy mindslide/mindslide.xsl, mindslide/config.xml and mindslide/reveal-configuration.xsl into your freeplane/resources/xslt directory</li>
</ul>
</section>
<section class="content" id="ID_1592220697">
<h3>Use MindSlide</h3>
<ul>
<li>Easy as pie:</li>
<li>launch freemind, edit your mindmap to your liking.</li>
<li>
<p>
select <i>file > export > Animation MindSlide (.html)</i> to export your mindmap
</p>
</li>
<li>
<p>
<b>save the HTML presentation in your mindslide directory</b>! <small>(or edit settings in config.xml to use the online CDN hosts for both reveal and font awesome)</small>
</p>
<a href="#/ID_1593867677" class="link connector"> ↝</a>
</li>
<li>Hide Nodes<a href="#/ID_378704017" class="link subsection"> ↴</a>
</li>
<li>View Speakers Notes<a href="#/ID_1605694183" class="link subsection"> ↴</a>
</li>
</ul>
</section>
<section class="content" id="ID_378704017">
<h4>Hide Nodes</h4>
<ul>
<li>Great functionaliy for creating content in Freeplane, and presenting only when it's ready.</li>
<li>
<p>
To hide a node from your mindslides simply add the attribute "slide-hide" to it:
</p>
<pre> right-click > edit attribute in-line > add or select "slide-hide"</pre>
</li>
</ul>
<div class="illustrations w1">
<a href="assets/hidden-node.png" class="image" title="
To hide a node from your mindslides simply add the attribute "slide-hide" to it:
right-click > edit attribute in-line > add or select "slide-hide""><img src="assets/hidden-node.png" alt="
To hide a node from your mindslides simply add the attribute "slide-hide" to it:
right-click > edit attribute in-line > add or select "slide-hide""></a>
</div>
<aside class="notes">
<p>
The original mindmap has more content in this node... but it does not show in your slides (nor do their respective speakers notes).
</p>
<p></p>
<p>
Great for preparing content in Freeplane, and presenting every part only when it's ready.
</p>
</aside>
</section>
<section class="content" id="ID_1605694183">
<h4>View Speakers Notes</h4>
<ul>
<li>Including preview of the next slide, notes for current slide, and timer.</li>
<li>
<p>
Speaker notes require the presentation be served by a <b>webserver</b>, they don't work from a local file.
</p>
<p></p>
<p>
You can use a very simple webserver such as <a href="http://code.google.com/p/mongoose/">mongoose</a> that simply needs to be <a href="http://code.google.com/p/mongoose/downloads/list">downloaded</a> in mindslide directory and executed (clicked)... or execute the following line in mindslide directory if you have python installed:
</p>
<pre>
<code class="bash">python -m SimpleHTTPServer 8080</code>
</pre>
<p>
then browse to <a href="http://localhost:8080">http://localhost:8080</a>
</p>
</li>
</ul>
</section>
<section class="content" id="ID_1593867677">
<h3>Configure MindSlide</h3>
<ul>
<li>Many options are available</li>
<li>edit the config.xml in your freeplane/xslt directory (or the exported .html presentation file) for your prefered theme, transition, extra behaviour or functionality.</li>
<li>developpers may load extra librairies by editing reveal-configuration.xsl in freeplane/xslt too.</li>
<li>
<a href="https://github.com/hakimel/reveal.js#configuration" class="link external">see reveal.js configuration</a>
</li>
</ul>
<div class="illustrations w1">
<a href="assets/themes.jpg" class="image" title="edit the config.xml in your freeplane/xslt directory (or the exported .html presentation file) for your prefered theme, transition, extra behaviour or functionality."><img src="assets/themes.jpg" alt="edit the config.xml in your freeplane/xslt directory (or the exported .html presentation file) for your prefered theme, transition, extra behaviour or functionality."></a>
</div>
<aside class="notes">
<p>
</p>
</aside>
</section>
<section class="content" id="ID_1128763901">
<h3>Contribute / Contact</h3>
<ul>
<li>Contributions are welcome in all kinds:</li>
<li>
<a href="https://github.com/berteh/mindslide/issues" class="link external">Share your ideas</a>
</li>
<li>Improve the code<a href="#/ID_1869571896" class="link subsection"> ↴</a>
</li>
<li>
<p>
Spread the word about <a href="http://berteh.github.io/mindslide/">Mindslide</a>, <a href="http://freeplane.sourceforge.net/">Freeplane</a> and <a href="http://lab.hakim.se/reveal-js/">Reveal.js</a>
</p>
</li>
<li>
<p>
Another way to help keeping this project alive is to <a href="https://donorbox.org/donate-98">donate</a>.
</p>
</li>
</ul>
</section>
<section class="content" id="ID_1869571896">
<h4>Improve the code</h4>
<ul>
<li>
<ol>
<li>
<a href="https://github.com/berteh/mindslide">Fork the code</a> on github
</li>
<li>
Create your feature branch:
<pre class="inline">
<code class="bash">git checkout -b name-of-your-feature</code>
</pre>
</li>
<li>
Commit your changes:
<pre class="inline">
<code class="bash">git commit -am 'name and explain your feature'</code>
</pre>
</li>
<li>
Push to the branch:
<pre class="inline">
<code class="bash">git push origin name-of-your-feature</code>
</pre>
</li>
<li>
Create a <a href="https://github.com/berteh/mindslide/pulls">new Pull Request</a>
</li>
</ol>
</li>
</ul>
</section>
</section>
<!--new subsection-->
<section>
<section class="content" id="ID_523970975">
<h2>
Not supported yet</h2>
<ul>
<li>Many elements are still not supported. We welcome any pointers how to best do it, as well as help to do so!</li>
<li class="icon">
<span aria-hidden="true" class="fa fa-close"></span>node and edge style, clouds</li>
<li class="icon">
<span aria-hidden="true" class="fa fa-bell"></span>free "post-it" nodes are not marked differently from other nodes</li>
<li class="icon">
<span aria-hidden="true" class="fa fa-list"></span>node attributes, zoom on images, author informations</li>
<li class="icon">
<span aria-hidden="true" class="fa fa-paperclip"></span>packaging presentation with all its dependencies in a single portable file.</li>
<li class="icon">
<span aria-hidden="true" class="fa fa-lightbulb-o"></span><a href="https://github.com/berteh/mindslide/issues" class="link external">Put your suggestions on our "issues" list!</a>
</li>
<li class="icon">
<span aria-hidden="true" class="fa fa-warning"></span>Known Bugs<a href="#/ID_191827926" class="link subsection"> ↴</a>
</li>
<li>summary node</li>
</ul>
</section>
<section class="content" id="ID_1116046035">
<h3></h3>
<ul>
<li>summary node</li>
<li>summary node</li>
</ul>
</section>
<section class="content" id="ID_191827926">
<h3>Known Bugs</h3>
<ul>
<li>Various things we should fix, any pointer how to do so is welcome.</li>
<li>
<p>
improve styles, fonts and general support of richtext content, as for now some elements don't show or <font size="3">not nicely</font>
</p>
</li>
<li>nodes with only an image show as empty list item.</li>
<li>
<a href="https://github.com/berteh/mindslide/issues" class="link external">Report your bugs on our "issues" list!</a>
</li>
</ul>
<aside class="notes">
<p>
not showing nicely: font size changed in rich-text editor ar usually displayed too small. current workaround is to edit html code view to use relative size (small, tiny) instead of absolute size (4, 5)...
</p>
<p>
nodes containing but an image should not show as empty item. current workaround is to only add images on nodes that have some text.
</p>
</aside>
</section>
</section>
<section class="content" id="ID_510184946">
<h2>Acknowledgments</h2>
<ul>
<li>
<p>
This export tool relies on the fantastic <a href="http://lab.hakim.se/reveal-js/">Reveal.js</a> HTML presentation framework, and <a href="http://freeplane.sourceforge.net">Freeplane</a> mind mapping tool. It uses beautiful icons from <a href="http://fontawesome.io">Font Awesome</a>.
</p>
<p></p>
<p>
If this feature helps you saving valuable time kindly consider a <a href="https://donorbox.org/donate-98">donation</a> to help keeping it alive
</p>
</li>
</ul>
</section>
<section id="end">
<h1>The End</h1>
<h3 class="thanks">Thank You!</h3>
<p id="author">Yours Respectfully</p>
<p id="credits">
<small>Powered by <a href="http://berteh.github.io/mindslide/">Mindslide</a> for <a href="http://freeplane.sourceforge.net/">Freeplane</a>, using <a href="http://lab.hakim.se/reveal-js/#/">Reveal.js</a></small>
</p>
</section>
</div>
</div>
<footer class="info">MindSlide | <a href="http://berteh.github.io/mindslide/">Mindslide</a> v 0.5 | <a href="http://freeplane.sourceforge.net/">Freeplane</a> map vfreeplane 1.5.9</footer>
<script src="reveal.js/lib/js/head.min.js"></script><script src="reveal.js/js/reveal.js"></script><script>
//run reveal.js
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
slideNumber: false,
history: true,
keyboard: true,
overview: true,
center: true,
touch: true,
loop: false,
rtl: false,
shuffle: false,
fragments: true,
embedded: false,
help: true,
showNotes: false,
autoSlide: 0,
autoSlideStoppable: true,
autoSlideMethod: Reveal.navigateNext,
mouseWheel: true,
hideAddressBar: true,
previewLinks: false,
transition: 'slide',
transitionSpeed: 'default',
backgroundTransition: 'slide',
viewDistance: 3,
parallaxBackgroundImage: '',
parallaxBackgroundSize: '',
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null,
theme: Reveal.getQueryHash().theme || 'moon',
transition: Reveal.getQueryHash().transition || 'slide',
// Optional libraries used to extend on reveal.js - see https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src:'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src:'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src:'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src:'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
//{ src:'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector('[data-markdown]' ); } },
//{ src:'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector('[data-markdown]' ); } },
//{ src:'reveal.js/plugin/math/math.js', async: true }
]
});
</script>
<link rel="stylesheet" crossorigin="anonymous" href="Font-Awesome/css/font-awesome.min.css">
<script>
// add "awesome" class to #mindslide (only) if FontAwesome is loaded (for icons layout)
function css(element, property) {
return window.getComputedStyle(element, null).getPropertyValue(property);
}
window.onload = function () {
var span = document.createElement('span');
span.className = 'fa';
span.style.display = 'none';
document.body.insertBefore(span, document.body.firstChild);
if ((css(span, 'font-family')) == 'FontAwesome') {
var ms = document.getElementById("mindslide");
ms.className += " awesome";
}
document.body.removeChild(span);
};
</script>
</body>
</html>