Build

Real-time Presentation Remote Control: reveal.js + PubNub

3 min readPubNub Staff on Dec 9, 2016
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

We would like to introduce you to Salvatore Cordiano. He is a full stack web developer with over 6 years of experience in web, mobile and software development. He recently gave a talk at the Chatbots ...

We would like to introduce you to Salvatore Cordiano. He is a full stack web developer with over 6 years of experience in web, mobile and software development. He recently gave a talk at the Chatbots Milano Conference in Milan and he surprised the audience with his slides. He used PubNub to allow the audience to interact in real time with the presentation through a Telegram bot and he takes control of slides using this bot. To make his presentation he used reveal.js, the most famous HTML presentation framework. He wrote a plugin that is listed on reveal.js plugin page to control a reveal.js presentation remotely using a webpage or a Telegram bot. Salvatore kindly offered to write about how he created the app.

Introduction

Since the beginning of my professional career, I’ve attended many conferences, presentations and talks. Generally, speakers used to make their presentations using PowerPoint or Keynote, but now, some programmers are doing it with HTML code. Using HTML, you can make presentations rich with functionality, similar to that of a web or mobile app. This is very cool.

In the last few years, every time I did a public speech, I tried to do presentations unlike the traditional way. With that, I discovered reveal.js, a framework for creating awesome presentations using HTML and JavaScript. Reveal.js is very powerful: it supports markdown content, nested slides, PDF export and it allows to be extended by developing plugins.

I wrote a very simple reveal.js plugin to remote control slides using PubNub publish-subscribe API. It allows you to advance through your slides, for example, from a webpage, a Telegram bot or a mobile app. This is very useful for me when speaking.

Setting up reveal.js

Let’s assume both Node.js and Grunt are already installed on your machine, so we should execute the following list of commands.

git clone https://github.com/hakimel/reveal.js.git
cd reveal.js
npm install
grunt serve

Well, to view the presentation we can navigate using a web browser to http://localhost:8000.

Plugin Installation

Download from Clicking here pubnub-remote-control.js and copy it into the plugin folder of your reveal.js presentation, i.e. plugin.

Next, open index.html with a text editor and find reveal.js initialization block. Add the plugins to the dependencies in your presentation, as below.

Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'https://cdn.pubnub.com/pubnub-4.4.0.min.js', async: true },
{ src: 'plugin/pubnub-remote-control.js', async: true },
// ... 
]
});

Plugin Configuration

Now, we must configure our plugin. The pubnub-remote-control.js plugin has several parameters that you can set for your presentation by providing an pubnubRemoteControl option in the reveal.js initialization options.

To configure our plugin replace {SUBSCRIBE KEY} and {PUBLISH KEY} with PubNub valid keys.

Reveal.initialize({
// ...
pubnubRemoteControl: {
subscribeKey: '{SUBSCRIBE KEY}',    // PubNub subscribe key,
publishKey: '{PUBLISH KEY}',        // PubNub publish key
},
// ...
});

Test Drive

To test our plugin we can use PubNub debug console using the following configuration:

Publish Channel: 'input'
Subscribe Channel: 'output'
PubNub RevealJS

While we are displaying our presentation, we can interact with it sending a message like this:

{'button': 'left'}

or

{'button': 'right'}

Inside the GitHub project is also available a client to interact with slide using a webpage or a Telegram bot.

PubNub RevealJS PubNub RevealJS

A demo of the previous clients for this sample presentation is accessible from:

More from PubNub

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff