docs/slides/14/14.html

<html>
    <head>
      <link rel="stylesheet" href="../../reveal.js/css/reveal.css">
      <link rel="stylesheet" href="../../reveal.js/css/theme/black.css" id="theme">
      <link rel="stylesheet" href="../../reveal.js/lib/css/zenburn.css">    
    </head>
    <body>
      <div class="reveal">
        <div class="slides">
          <section data-markdown="README.md"  
          data-separator="---"  
          data-separator-vertical="~~"  
          data-separator-notes="^Note:"  
          data-charset="utf-8">
       </section>
        </div>
      </div>
      <script src="../../reveal.js/lib/js/head.min.js"></script>    
      <script src="../../reveal.js/js/reveal.js"></script>
      <script>
        Reveal.initialize({
          controls: true,
          progress: true,
          history: true,
          center: true,
          // Optional libraries used to extend on reveal.js
          dependencies: [
            { src: '../../reveal.js/lib/js/classList.js', 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/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
            { src: '../../reveal.js/plugin/notes/notes.js' },
            { src: '../../reveal.js-menu/menu.js'},
            { src: '../../reveal.js-plugins/chalkboard/chalkboard.js' }
          ],
                  options: {
                        "highlightTheme": "darkula"
                  },
          menu: {
          // Specifies which side of the presentation the menu will 
          // be shown. Use 'left' or 'right'.
          side: 'left',
  
          // Add slide numbers to the titles in the slide list.
          // Use 'true' or format string (same as reveal.js slide numbers)
          numbers: false,
  
          // Specifies which slide elements will be used for generating
          // the slide titles in the menu. The default selects the first
          // heading element found in the slide, but you can specify any
          // valid css selector and the text from the first matching
          // element will be used.
          // Note: that a section data-menu-title attribute or an element
          // with a menu-title class will take precedence over this option
          titleSelector: 'h1, h2, h3, h4, h5, h6',
  
          // If slides do not have a matching title, attempt to use the
          // start of the text content as the title instead
          useTextContentForMissingTitles: false,
  
          // Hide slides from the menu that do not have a title.
          // Set to 'true' to only list slides with titles.
          hideMissingTitles: false,
  
          // Add markers to the slide titles to indicate the 
          // progress through the presentation
          markers: false,
  
          // Specify custom panels to be included in the menu, by
          // providing an array of objects with 'title', 'icon'
          // properties, and either a 'src' or 'content' property.
          custom: false,
  
          // Specifies the themes that will be available in the themes
          // menu panel. Set to 'false' to hide themes panel.
          themes: [
            { name: 'Black', theme: '../../reveal.js/css/theme/black.css' },
            { name: 'White', theme: '../../reveal.js/css/theme/white.css' },
            { name: 'League', theme: '../../reveal.js/css/theme/league.css' },
            { name: 'Sky', theme: '../../reveal.js/css/theme/sky.css' },
            { name: 'Beige', theme: '../../reveal.js/css/theme/beige.css' },
            { name: 'Simple', theme: '../../reveal.js/css/theme/simple.css' },
            { name: 'Serif', theme: '../../reveal.js/css/theme/serif.css' },
            { name: 'Blood', theme: '../../reveal.js/css/theme/blood.css' },
            { name: 'Night', theme: '../../reveal.js/css/theme/night.css' },
            { name: 'Moon', theme: '../../reveal.js/css/theme/moon.css' },
            { name: 'Solarized', theme: '../../reveal.js/css/theme/solarized.css' }
          ],
  
          // Specifies if the transitions menu panel will be shown.
          transitions: true,
  
          // Adds a menu button to the slides to open the menu panel.
          // Set to 'false' to hide the button.
          openButton: true,
  
          // If 'true' allows the slide number in the presentation to
          // open the menu panel. The reveal.js slideNumber option must 
          // be displayed for this to take effect
          openSlideNumber: false,
  
          // If true allows the user to open and navigate the menu using
          // the keyboard. Standard keyboard interaction with reveal
          // will be disabled while the menu is open.
          keyboard: true,
  
          // Normally the menu will close on user actions such as
          // selecting a menu item, or clicking the presentation area.
          // If 'true', the sticky option will leave the menu open
          // until it is explicitly closed, that is, using the close
          // button or pressing the ESC or m key (when the keyboard 
          // interaction option is enabled).
          sticky: false,
  
          // If 'true' standard menu items will be automatically opened
          // when navigating using the keyboard. Note: this only takes 
          // effect when both the 'keyboard' and 'sticky' options are enabled.
          autoOpen: true,
  
          // If 'true' the menu will not be created until it is explicitly
          // requested by calling RevealMenu.init(). Note this will delay
          // the creation of all menu panels, including custom panels, and
          // the menu button.
          delayInit: false
        },
        chalkboard: { 
          src: null,
          readOnly: undefined, 
          toggleChalkboardButton: { left: "100px", bottom: "30px", top: "auto", right: "auto" },
          toggleNotesButton: { left: "150px", bottom: "30px", top: "auto", right: "auto" },
          transition: 800,
          theme: "chalkboard",
          // configuration options for notes canvas and chalkboard
          color: [ 'rgba(0,0,255,1)', 'rgba(255,255,255,0.5)' ],
          background: [ 'rgba(127,127,127,.1)' , '../../reveal.js-plugins/chalkboard/img/blackboard.png' ],
          pen:  [ 'url(../../reveal.js-plugins/chalkboard/img/boardmarker.png), auto', 'url(../../reveal.js-plugins/chalkboard/img/chalk.png), auto' ],
        },
        keyboard: {
            67: function() { RevealChalkboard.toggleNotesCanvas() },	// toggle notes canvas when 'c' is pressed
            66: function() { RevealChalkboard.toggleChalkboard() },	// toggle chalkboard when 'b' is pressed
            46: function() { RevealChalkboard.clear() },	// clear chalkboard when 'DEL' is pressed
            8: function() { RevealChalkboard.reset() },	// reset chalkboard data on current slide when 'BACKSPACE' is pressed
            68: function() { RevealChalkboard.download() },	// downlad recorded chalkboard drawing when 'd' is pressed
          },
        });
      </script>
    </body>
  </html>