Anyone else have an issue with the arc radius when using the PolarArea chart from the ChartsJS plug-in? I had to add some conditional logic to prevent it from being less than zero.

I am not a developer, but it appears to me that the dependancies script at the bottom references both a /plugin folder for markdown and a /plugins folder for charts and other plugins. Not sure if that was intentional but it makes the index file fail the way the folder is set up here.

Hey there

as stated in the header, it seems like it would make a lot of sense to expose this cool stuff to npm so that it can be installed through a dependency in `package.json``

Any plan to go down this road ?

thanks in any case

Hi there,
I am building an Elixir & Phoenix app using Reveal js for presentations and currently synching slide change events via phoenix sockets - am keen to get the Chalkboard to work with this as well - I have built some JS to intercept the events that start and stop drawing so I can pass data packets with drawing coordinates - I am sending this to each client and the JS in the clients is receiving them - but I am unsure which events to correctly fire - I have reviewed the code in lines 530 - 590... in debug mode I can see that the draw segment event is fired - but I think I must be missing some data in the content of the event as nothing is drawn on the screen.. Any advice from your end would be greatly appreciated - THANKS

Hello,

Thank you for your plugin. I'm surprised at one thing though...
Did you deliberately avoid the up and down arrows? As you know, at reveal.js, those arrows govern the navigation towards the "basement levels" and map the keyboard's up/down keys.

I'm very surprised that your code makes no reference to this missing part, and with this plug in, you can only get left/right arrows going sideway presentation only... Or Am I missing something here?

Hi,

Thanks for the chalkboard plugin, it is very useful. I sometimes need to zoom on SVG image and annotate on them. I use the zoom plugin built in reveal.js but the chalkboard plugin does not work properly on zoomed object, it annotates on the wrong position. Do you think this can be a quick fix?

Abdellah
Thanks

I like this chalkboard feature very much. I want to request a feature to change the chalk and pen colour during the presentation. Also, a shortcut to delete (or undo) recent draw will be awesome.

I am giving a presentation, where I would like to use the multiplexer to control the student's devices, and fire up the chalkboard to add details. Unfortunately, it seems that what I write on my master presentation does not appear on the client's screen. Would it be possible to add this feature, or am I perhaps doing something wrong? I can control the client's screen from my master, but whatever I write on my screen does not appear on theirs. Thanks in advance for any help.
Best wishes,
Henry Laxen

In Mozilla Firefox 46.0 if you draw on the chalkboard or with the pen and then you change slide, when you return on the previous slide you aren't able to modify anything if you don't reset with backspace key.
Maybe it could be a feature (to protect previous drawing by editing) but I think it's a bug

The plugin works fine for inline svg but it does not work for external svg, e.g. loaded via . Maybe this is out of scope for this plugin, in any case, it would be nice to note this.

I am hoping to have a google spreadsheet connected to my presentation so that when a new row is added (maybe from a google form even) it would generate a new slide.

<section>
    <h1><!--column 1--></h1>
    <span><!--column 2--></span>
</section>

and the table would look like this:

Any nudges on how to start?

Hello.

I am using chartjs-plugin-datalabels last version v0.6.0 to this day.
Including it properly in the dependencies here and calling the plugin in globals:
this doesnt work

Reveal.initialize({
            controls: false,
            transition: "convex", // none/fade/slide/convex/concave/zoom
            transitionSpeed: "default", // default/fast/slow

            // Screen dimensions
            width: "100%",
            height: "100%",
            margin: 0,
            padding: 0,
            minScale: 1,
            maxScale: 1,

            // Chart parameters
            chart: {
                defaults: {
                    global: {
                        legend: false,
                        plugins: {
                            datalabels: {
                                display: true,
                                anchor: "end",
                                align: "end",
                                color: "red",
                                formatter: function (value, context) {
                                    return (value + '%').replace('.', ',');
                                }
                            }
                        },
                    }
                }
            },
            
            dependencies: [
                { src: "/lib/reveal/plugin/chart/Chart.min.js" },
                { src: "/lib/reveal/plugin/chart/csv2chart.js" },
                { src: "/lib/reveal/plugin/datalabels/chartjs-plugin-datalabels.min.js" },
            ]
        });

However embeding it in a particular slide HTML comment chart works. (I cut a part of it to show you here:)

		"data": {
			"labels" : @labels,
			"datasets" : [{
					"data":@dataPercent,
					"backgroundColor": @colors,
					"datalabels":{
						"align" : "end",
						"anchor" : "end",
						"color" : "red",
						"offset" : @CHART_OFFSET,
						"font": {
							"size" : 100,
							"family" : "FTV Impact",
							"weight" : 500
						}
					}
			}]
		},

Though I probably cant HTML comment my formatter function here. (thats the actual source of my problem)

In the Reveal initialization I have tried to put plugins in other levels but I can't find a way to make it works so that I have a global datalabel plugin configuration for every slide...

Does it recognize "plugins" ?

Thanks in Advance

I realy like this plugin, and it would be great if it would work together with the Speaker View. If I open the Speaker View I can draw in both windows, but the drawings are not synced in any way.

I've been testing out the chalkboard plugin across different browsers, and noticed that the handling of small marks (dots or the like) seems inconsistent, and in the case of Chrome, entirely missing. This makes any sort of writing nearly impossible with most browsers, since you can't use characters like i j . :, as well as superscripts and subscripts. As someone who uses reveal.js for lecturing, this is quite problematic.

It appears the cause of the issue is that, in Chrome and Firefox, touch event listeners are forced to be passive by default. As a consequence, the initial touch point registers at the correct place but at a later time, once the touch input has moved a relatively far distance away. The second event to register is then this farther point, leading to ignoring all interim movement. After the second registered point, everything works as expected.

Browsers tested:

• Windows 10, Chrome 69.0.3493.3 (dev) and 67.0.3396.99 (base): Doesn't register small marks using touch, stylus, or mouse. Small jittering while writing doesn't register either
• Windows 10, Firefox 61.0.1: Doesn't register small marks normally, but will on double tap if using a stylus.
• Windows 10, Edge: Works consistently with a pen. Requires slight movement for other input methods.
• Linux, Chrome 69.0.3464.0: Doesn't work with mouse (no touch/stylus for this machine).

The above matches with what you would expect, since Edge does not force passive handling.

I found a fix for Chrome, and have posted a PR for it: #51

I'm adding this Issue as well though, as my fix doesn't seem sufficient for Firefox.

Workaround: Use Edge.

No JS programmer here, please bear with me. I'm struggling to integrate Snap (http://snapsvg.io) into reveal.js. using Anything, I can insert Snap scripts to create SVG into Reveal slides. I can define fragments inside SVGs, and Reveal responds as expected showing or hiding these upon the event:

<section>
<div id="myid" class="snapsvg" width="100%" height="100%">
        <svg viewBox="0 0 600 400" width="100%" height="100%"></svg>
        <!--
        {
                "initialize" : "function(container) {
                        var svg = Snap('#myid svg');
                        var rect = svg.rect(20,20,50,60,2);
                        rect.addClass('fragment');
                }"
        }
        -->
</div>
</section>

...
{className: "snapsvg", initialize: (function(container, options) { if(options && options.initialize {options.initialize(container)} }) },
...

Now, I would like Snap SVG animations to be driven by the usual fragment workflow like Anything does for 'animate' class. I'd like to write my own JS+Snap functions and set them as callbacks to 'fragmentshown' or 'fragmenthidden' events. I was thinking of something along the lines of:

<!--
  {
      "initialize" : "function(container) {
              var svg = Snap('#myid svg');
              var rect = svg.rect(20,20,50,60,2);
              rect.addClass('fragment');
              var shownFn = function(){ /* some animation or whatever */ };
              rect.attr({ shown: shownFn });
         }"
 }
 -->

{className: "snapsvg",
       initialize: (function(container, options) {
             if(options && options.initialize) { options.initialize(container) }
             Reveal.addEventListener('fragmentshown', function(event) {
                             if(event.fragment.getAttribute('shown')) {
                                     var callback = event.fragment.getAttribute('shown');
                                     callback();
                             }
                      });
       })
 },

And similarly for 'fragmenthidden'. Now, this won't work, as the type of callback is string. I assume (one) problem is that I can't get JSON to hold a function value for a key. The closer I have been to success is by defining just a string of code in showFn and then making var callback a function by means of new Function(). However, this feels overly contrived and lets any syntax errors to lurk until the callback invocation. Is there any sane way of going about this?

Hi there, I'm build slideshow of images in background and need to attach multiple audio (mp3) with same slide so that when one audio finish second one start playing automatically and so on, and when all audio attached to that slide completed it should move to next slide. I can attach one audio like below but don't know how to make it working with multiple audios.

<section data-background="{{ asset('app') }}/{{ $photosRow->photoName }}" data-audio-src="<?php echo isset($audioArr[0]) ? $audioArr[0] : ''; ?>">
   <ul>
          <li>{{ $photosRow->photoDetails }}</li>
  </ul>
  </section>

On some network connections audio/video stream is lost, but slide change and other signals are working. An issue is filed here upstream: muaz-khan/RTCMultiConnection#495

Thanks for this wonderful plugin, Goel.

I am quite new to this area so I do not know how to add the dependencies to the reveal presentation of jupyter notebook. Can you suggest how to do that?

Some speakers choose to write out their speaker notes out in full, using the upstream Notes plugin (https://github.com/hakimel/reveal.js/tree/master/plugin/notes). It would be excellent if audio slideshow had a facility to parse the notes (from <aside class="notes">, the data-notes slide attribute, or Markdown Note: content), and read them out. This could either replace the data-audio-text attribute, or be supported alongside that attribute.

term vivibility looks like a typo on this line:

https://github.com/rajgoel/reveal.js-plugins/blob/master/chalkboard/chalkboard.js#L92

Hello,
I have found the code to be copy/paste is not correct, you should remove

<pre><code data-trim>

then it works like a charm ;-)
Thanks a lot for the plugin, really cool stuff.

Is this plugin not supposed to work on Chrome on a windows box ? Looks like the audio file format is not supported. Am I missing something obvious ?

As reported in #5 charts are not clickable on Chrome. Issue might be resolved if #19 is done.

I'm having this warning:

Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at http://momentjs.com/

But i did include moment.js in my dependencies and before Chart.js file.

Initially I've not included csv2chart.js because I thought I don't want to use CSV files etc. But then I realized that it is mandatory, because it is the plugin core. I guess the name should be changed, a bit misleading.

Moreover, i'd like to "animate" my chart when i come over the slide containing it, (i'd like to have the same effect shown on the chartjs.org > _"Six chart types"_ section. Any tips about it?

Why in the Chart Demo, texts are blurred?

It seems to me anything.js could allow me add a function that would store answers to questions in an html comment and with a key press reveal the answer ( in a span or as a fragment).

When the spacebar/arrow keys are pressed the answer would revert to being hidden and the presentation would animate to the next/previous slide as appropriate.

The problem is I have very little javascript knowledge and I keep getting errors when i try to call the function with a key. If this problem is not too difficult to solve I'd really appreciate any help.

Richie

Reveal.addKeyBinding( {keyCode: 114, key: 'r', description: 'Reveal Answer'}, function() {
anything: [
{ className: "answer",
initialize: (function(container, options)
{container.innerHTML = options.answer}
)
},
// ...
]
} )

I added the chart reveal plugin and copied the default configuration from the readme. Unfortunately this results in a JavaScript error.

I boiled it down to this simple configuration to reproduce the error:

/* ... */
chart: {
  defaults: { 
    global: { 
      scale: { 
        gridLines: { color: "rgba(255, 255, 255, 1)" }, 
      },
    },
  }
},
/* ... */

The error I get is:

Uncaught TypeError: Cannot read property 'minor' of undefined
    at n.mergeTicksOptions (:9000/bower_components/reveal.js/plugin/chart/Chart.min.js:10)
    at :9000/bower_components/reveal.js/plugin/chart/Chart.min.js:10
    at Object.each (:9000/bower_components/reveal.js/plugin/chart/Chart.min.js:10)
    at t.buildScales (:9000/bower_components/reveal.js/plugin/chart/Chart.min.js:10)
    at t.initialize (:9000/bower_components/reveal.js/plugin/chart/Chart.min.js:10)
    at t.construct (:9000/bower_components/reveal.js/plugin/chart/Chart.min.js:10)
    at new t (:9000/bower_components/reveal.js/plugin/chart/Chart.min.js:10)
    at createChart (:9000/bower_components/reveal.js/plugin/chart/csv2chart.js:100)
    at initializeCharts (:9000/bower_components/reveal.js/plugin/chart/csv2chart.js:114)
    at HTMLDivElement.<anonymous> (:9000/bower_components/reveal.js/plugin/chart/csv2chart.js:157)

How can i fix this?

Charts seems now unable to respect aspect ratio (modifying aspect ratio option won't work) and are currently drawn in an incorrect way.
They were visualized correctly in 2.3 now they are not anymore.

If page is reloaded then the chart is visualized correctly, I think the problem is related then to slidechange redraw function.
Wrong pic shows chart before reload and Correct shows after reload chart

Hi, I am new to reveal.js because I'd like to have an easy plugin for how to include tweets into a presentation. I found your plugin which seems to be really cool. But when I follow both the reveal.js installation guideline and your guideline for embed_tweet, I only get a blank page back. Does anyone see my error in using the plugin?

<!doctype html>
<html lang="en">    
<head>
    <meta charset="utf-8">
    <title>Reveal.js 3 Slide Demo</title>
    <link rel="stylesheet" href="css/reveal.min.css">
    <link rel="stylesheet" href="css/theme/default.css" id="theme"> 
    <!--Add support for earlier versions of Internet Explorer -->
    <!--[if lt IE 9]>
    <script src="lib/js/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <!-- Wrap the entire slide show in a div using the "reveal" class. -->
    <div class="reveal">
        <!-- Wrap all slides in a single "slides" class -->
        <div class="slides">

            <!-- ALL SLIDES GO HERE -->
            <!-- Each section element contains an individual slide -->
            <section>
                <div class="tweet" data-src="https://twitter.com/marcfbellemare/status/972558957645631488"></div>
            </section>

        </div>
    </div>
    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.min.js"></script>

    <script>
        // Required, even if empty.
        Reveal.initialize({
        // ...
             dependencies: [
                // ... 
                { src: 'plugin/embed-tweet/embed-tweet.js' },
                // ... 
            ]
        });
     </script>
</body>
</html> 

Here is an example of what I want to do:

http://www.chartjs.org/samples/latest/charts/combo-bar-line.html

But so far I have failed to make it work. My config is the same as the getting started example here, except this for the actual chart:

<canvas data-chart="bar">
	<!-- 
	{ "data": {
		"labels": ["January"," February"," March"," April"," May"," June"," July"],
		"datasets": [
			{
				"type":"line",
				"data":[99,99,99,99,99,99,99],
				"label":"SLA Target",
				"backgroundColor":"rgba(20,220,220,.8)"
			},	
			{
				"type":"bar",
				"data":[100,100,99.5,100,100,100,100],
				"label":"Actual","backgroundColor":"rgba(220,120,120,.8)"
			}
		]
	}, 
	"options": { "responsive": true, "scales": { "xAxes": [{ "stacked": true }], "yAxes": [{ "stacked": true }] } } }
	-->
</canvas>

Is it possible or am I flogging a dead horse?

Thanks,
R.

If section contains background-image and background-size the audio controls are visible but can not be clicked. Normaly on hover the controls get Opacity 1.0 and you can use them.
You can reproduce it just adding "background-size='100%' " in the section code.

section data-background-image='/media/tutorials/TUT1_de_slide20_img_portal.png' data-background-size='100%' data-audio-src='/media/tutorials/TUT1_de_slide20_frag_2.mp3'

other settings:
Reveal.initialize({
transition: 'none',
audio: {
prefix: '/media/tutorials/',
suffix: '.mp3',
autoplay: true,
defaultDuration: 0,
playerOpacity: 0.05,
playerStyle: 'position: fixed; bottom: 10px; left: 25%; width: 50%; height:60px; z-index: 33;',
},});

Would it make sense for the Audio slideshow plugin to use the Web Speech API, which by now is included in several popular browsers? https://developers.google.com/web/updates/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API?hl=en

The chart plugin is currently based on Chart.js version 2.0.0-beta2

Looks like this is the same bug:
https://code.google.com/p/chromium/issues/detail?id=573006&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&start=100

There is a way to cutomize pen/chalk image but not so for the brush. Is this an intentional limitation?

I want to make a plot with the plugin, but can't make it work with an external markdown file. I guess it has to do with the way the html comments are parsed. I tried adding an extra hyphen to the comments mark (<!---
... --->), but it didn't work either.

Is there a workaround for this?

Hi!

I can't figure out if it is possible to add a title to chart? Tried:

<!--
{
    "options": {
        "title": {
            "text": "my title",
        }
    },
}
-->

I have a single dataset and when I add an option like above, a new dataset color appears in legend.

By default, the menu submodule is pointing to commit 97d8561 (tag 0.6.0). There have been quite a number of nice improvements since that time. Perhaps time to update the commit that is being tracked?

(FWIW: In my local repo, I moved the menu commit all the way to the latest commit on the master branch. I had to update a few font-awesome paths, but everything worked just fine.)

I'd like to use the notes plugin with audio-slideshow. However, when I press s to open the speakers view, the audio gets played back several times: In the main browser window and in the new popup window. Besides, if the upcoming slide contains audio, that starts as well. An example (press s to open the speaker's view, then n to navigate through the fragments). Is there a workaround to start just one audio?

The audio controls show for every slide regardless if the slide has audio. Is there any way to hide the audio controls for certain slides?

Did anyone make chalk plugin work with org reveal?
I got a blank html with following code:
#+REVEAL_PLUGINS: (chalk) #+REVEAL_EXTRA_JS: ./revealjs_chalk.js

A BIG THANK YOU for this set of plugins. I use all of them heavily for my courses!!!
I would like to ask for help about audio plugin. I've tried to do some cut at them myself but I'm a lousier JS programmer than I thought.

1. When autoplay is set true in config(), muting the audio only works in the current piece of audio being played. I think it should stay muted until the user sets otherwise.
2. Having a toggle key to disable audio autoplay would be really OK IMO. Toggling again should reenable autoplay only if config says so.

Thank you in advance!!!

Would this be hard to implement?

This is how I have set my config:

chart: {
  defaults: { 
	  responsive: true,
		global: { 
			title: { fontColor: "#FFF" }, 
			tooltip: { bodyFontSize: 20, titleFontSize: 20, backgroundColor: "#FFF" }
		}, 
		legend: {
			display: true,
			labels: { fontColor: "#ff0000", fontSize: 20 }
		},
		scale: { 
			scaleLabel: { fontColor: "#FFF" }, 
			gridLines: { color: "#FFF", zeroLineColor: "#FFF" }, 
			ticks: { fontColor: "#FFF" }
		} 
	},
	line: { borderColor: [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ], "borderDash": [ [5,10], [0,0] ]}, 
	bar: { backgroundColor: [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ]}, 
	pie: { backgroundColor: [ ["rgba(0,0,0,.8)" , "rgba(220,20,20,.8)", "rgba(20,220,20,.8)", "rgba(220,220,20,.8)", "rgba(20,20,220,.8)"] ]},
	doughnut: { backgroundColor: [ ["rgba(0,0,0,.8)" , "rgba(220,20,20,.8)", "rgba(20,220,20,.8)", "rgba(220,220,20,.8)", "rgba(20,20,220,.8)"] ]},
	radar: { borderColor: [ "rgba(20,220,220,.8)" , "rgba(220,120,120,.8)", "rgba(20,120,220,.8)" ]}
}

I am showing a doughnut chart.

Especially the items under legend.labels (the font color and size) and the font size specified as global.tooltip.titleFontSize are ignored. Also legend.display: false is BTW ignored, if I set it, the label is always shown.

Firefox 56

Here a screenshot of the labels:

And tooltip:

I just saw your great demonstration slides for the anything plugin and was really intrigued by the animated svg in this slide. Could you provide a link to how this was created? I'd like to create a similar looking one for my projects. Thanks for your excellent work!

Knowing next to nothing about Javascript, I am shamelessly proud of my integration of asciinema to reveal.js using the anything plugin. Usage is really easy following this recipe so I thought I would share just in case.

Required:

• Download asciinema-player.js and asciinema-player.css from https://github.com/asciinema/asciinema-player to plugin/asciinema directory.
• Use asciinema rec <filename>.json to create your asciicast file.
• Include in your slide a <div class="asciicast"> containing a JSON reference to your file with an "URL" tag, inside a comment.

Relevant bits:

    <head>
        ...
        <link rel="stylesheet" type="text/css" href="plugin/asciinema/asciinema-player.css" />
       ....

    <section>
       <h2>Using the ping command</h2>
        <div class="asciicast">
           <!--
           {
             "URL": "ping.json"
           } 
           -->
       </div>
    </section>

    Reveal.initialize({
        ...
        anything: [ 
            ...
                  {className: "asciicast",
                           defaults: { theme: 'monokai', fontSize: '15px' },
                           initialize: (function(container, options) {
                                     asciinema.player.js.CreatePlayer(container, options.URL, options);
                            })
                   },
            ...
        dependencies: [
            ...
            { src: 'plugin/asciinema/asciinema-player.js' },
            { src: 'plugin/anything/anything.js' },
           ```