MindSlide-Export.html

<!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>&lt;space&gt;</code>&nbsp;to navigate
    </p>
</li>
<li>
<p style="text-align: center">
<small><a href="https://github.com/berteh/mindslide/">source code</a>&nbsp;(on github) - <a href="https://donorbox.org/donate-98">donate</a>&nbsp;&nbsp;(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"> &#8628;</a>
</li>
<li>Features<a href="#/ID_684843493" class="link subsection"> &#8628;</a>
</li>
<li>How To<a href="#/ID_317184146" class="link subsection"> &#8628;</a>
</li>
<li>
      Not supported yet<a href="#/ID_523970975" class="link subsection"> &#8628;</a>
</li>
<li>Acknowledgments<a href="#/ID_510184946" class="link subsection"> &#8628;</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>&nbsp;(from the node notes) <small>hit "s"</small>
</p>
</li>
<li>
<p>
      2D overview <small>(hit "esc" or "o")</small>&nbsp;and easy navigation <small>(space, arrows, click, touch)</small>&nbsp;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">&amp; rich-text</b></font><font color="#e1a71c">&nbsp;<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"> &#8605;</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>&nbsp;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"> &#8605;</a>
</li>
<li>Recent improvements<a href="#/ID_1665333044" class="link subsection"> &#8628;</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>&nbsp;<i>works in notes</i>&nbsp;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&amp;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"> &#8628;</a>
</li>
<li>Install MindSlide<a href="#/ID_1405033759" class="link subsection"> &#8628;</a>
</li>
<li>Use MindSlide<a href="#/ID_1592220697" class="link subsection"> &#8628;</a>
</li>
<li>Configure MindSlide<a href="#/ID_1593867677" class="link subsection"> &#8628;</a>
</li>
<li>Contribute / Contact<a href="#/ID_1128763901" class="link subsection"> &#8628;</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>&nbsp;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>&nbsp;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>&nbsp;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 &gt; export &gt; Animation MindSlide (.html)</i>&nbsp;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"> &#8605;</a>
</li>
<li>Hide Nodes<a href="#/ID_378704017" class="link subsection"> &#8628;</a>
</li>
<li>View Speakers Notes<a href="#/ID_1605694183" class="link subsection"> &#8628;</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 &gt; edit attribute in-line &gt; 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 &quot;slide-hide&quot; to it:
          right-click > edit attribute in-line > add or select &quot;slide-hide&quot;"><img src="assets/hidden-node.png" alt="
      To hide a node from your mindslides simply add the attribute &quot;slide-hide&quot; to it:
          right-click > edit attribute in-line > add or select &quot;slide-hide&quot;"></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>&nbsp;that simply needs to be <a href="http://code.google.com/p/mongoose/downloads/list">downloaded</a>&nbsp;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>
      &nbsp;
    </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"> &#8628;</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>&nbsp;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>&nbsp;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"> &#8628;</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>&nbsp;HTML presentation framework, and <a href="http://freeplane.sourceforge.net">Freeplane</a>&nbsp;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>&nbsp; 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>