Building a Multi-Page Presentation

  • 5
  • Article
  • Updated 3 years ago
  • (Edited)
Building a Multi-Page Presentation



DEMO

A great way to display your content using the Rise Vision platform is in an interactive multi-page presentation. To help you get started, we have created a simple retro tv presentation with 3 pages and a timeout function, which we will use to take you through some of the key parts of the building process. The walkthrough uses some JavaScript terminology but we have tried to keep it in plain English as much as possible. If you don’t have any Javascript experience you can still experiment with the layout and look of the example presentation without having to worry about the functionality.

If you find that you want to build a more complex layout with more pages, interactions and functionality outside of pause and play, we recommend building it as a webpage and adding it to a presentation with the HTML Widget or Webpage Widget.


In addition to widgets, we have also produced a number of Web Components which you can use to add further great features to your presentations. Please check out this article to find out more about what a Web Component is, what it can do for you, and the different ones that are available.




Starting Out...

As a first step we suggest you head over here to and grab the HTML code for the presentation. You can copy and past this entire code into the HTML view of a new presentation in the Rise Vision editor.

You are now all set to follow along or experiment by making your own changes to the code.


The HTML Structure

The first step in building a multi-page presentation is to set up your pages. In our example we have 3 different pages; one containing an image slider, and the other two containing video. You can make a page by using a placeholder, so we will add 3 placeholders to the presentation and name them ‘home-page’, ‘page-1’, and ‘page-2’. Feel free to name them whatever you want, but we suggest you keep it simple to reduce headaches later on. You can also change the size and position of the pages to fit your design.



Next, we want to jump into the HTML view to make some changes to the placeholders we just created. To do this, click the ‘HTML’ tab at the top of the presentation.



We can now add in a CSS class of ‘page’ and a ‘data-index’ attribute that is equal to the page number. These values will be used later to navigate between the pages. The code for the pages of our presentation will look like this:




The next step is to click back into the ‘design’ tab and add the placeholders that will contain the widgets. For our example we have named the placeholders to match the widgets we will be using; image-slider, video-1 and video-2.


We also want to make sure that the ‘visible’ setting for the placeholders that are not on the home-page are unchecked. This makes the placeholder automatically hidden so none of the widgets contained in its playlist will play when you first load the presentation.



We can now move these placeholders into the pages we created earlier. To do this, head back into the HTML view once again and move the code for these placeholders inside the closing tag of the relevant page. For example, the code for the page containing the image-slider placeholder should now look like this:



The final step for the HTML structure is to add buttons to control the page selection. In the example, we use 3 placeholders named button-1, button-2 and button-3. These can be positioned according to your design, and for this example we have added an image background to each one. To trigger the page change function we need to add an ‘on-click’ attribute to each button that will call the relevant ‘showPage()’ function. The completed code for the button controller will now look like this (please note that we have given our buttons a background image. This allows you to style the buttons with whatever images you want as using the the image widget within the button placeholder won’t work):





Adding the Page Control

Now comes the fun part - adding the controls to switch between pages. All of this code will be added in the HTML view of the presentation between two tags, so go ahead and click on the HTML tab again and we will get started.


The first thing we want to do is define a variable which will hold the index of the previous page that was shown, like this:




The next part of the code is pretty complex. Be sure to take a look at the code in the example where we have added in some annotations and we will do our best to breakdown what is happening below.


In the first part of the function we add a variable which will hold the data-index value from the button of the page you want to navigate to. To help us select this value we will use a jQuery selector.

We want to hide the pages that we are not wanting to see, and we do this by referencing the ‘.page’ class that we added to our placeholders when we built the HTML. This is done with a function using the jQuery .hide() method.

In order to show the page for the button we click on, we use another function using the jQuery .show() method.


Finally, we add a function to tell our presentation to show the first page when it loads up.


Automatic Timeout
As a final piece of functionality we can add in an inactivity timeout which will put show the first page of the presentation if there has been no user interaction for a set period of time. To do this, we can take advantage of the jQuery idle timer plugin, which is available through a CDN here. We have added notes to the example code to show you where the CDN link should be placed as well as the function to call the timeout. For demonstration purposes, in the example presentation the timer is set for 20 seconds.



Controlling the Widget Playback

We now need to add some more code into what we have above to control pausing and restarting the widgets. We obviously want to play the widget that is on the page we are currently viewing, but at the same time we also should pause widgets on the other pages. This is especially important if you are using videos with sound as you don’t want these playing in the background when they are not visible.


To do this, we will create an array to hold our widget ids, as well as a reference to the page they appear on. The ids are named according to the placeholder that they are in, so for example the image widget inside the image-slider placeholder would be named ‘image-slider_0w’. The ‘_0w’ is specific to widgets, and should be added to all others when they are defined as seen in the example code. If you were adding a gadget, this suffix would be changed to ‘_0g’.

Here is an example of how this is set out:


We then add two functions which will pause and play the widgets depending on which page is being viewed. To call these functions we make use of the previousIndex variable that we defined earlier. You don’t need to worry about what these functions do, but essentially they check through all of the index numbers that we gave the widgets, and then play or pause the ones that match.

Here is how we set out this code:


When the widget starts to play it will fire the ‘playCommand’ event. We can make use of this by listening for this event and attaching an event handler, and then immediately get a reference to the id of the widget’s container when it is called.

We also want to make sure that the placeholder that the widget is in is visible. As we didn’t select the ‘visible’ setting earlier, we will add some more code to make sure the placeholder shows up when we want it too.


Ok, almost there for this part! We also need to include some code to show the widget itself, not just the placeholders. To do this, we check for each possible transition that could be applied to the placeholder and assign a predefined CSS class to the widget to make sure it is visible.

Please check out the example presentation to see how we set out all of these functions.

Images

While we have gone for a retro 70s style TV theme for this example, we know that bright orange probably isn’t everyone’s colour of choice. In our example we used this TV template as an image overlay by setting it as a background to a placeholder, and giving it at a higher z-index than everything apart from the 3 buttons. If you haven’t come across the z-index before you can think of it like looking down at a deck of cards - their z-indexes would be 1 to 52, with only the card that has z-index 52 visible. If you wanted to see the card at the bottom of the pile, just change its z-index to 53 and ta-dah! Simplest magic trick ever.

You can change the tv-overlay placeholder to contain a different overlay image, or you can change its z-index to be behind the pages so it would then act as a background. Just remember that the placeholders with the highest z-indexes must be the buttons.

Animations

You may have noticed that when you click on one of the buttons, the dials above them spin. This animation effect is created by applying new CSS values via a class to the specific dials using a little more JavaScript, so when the button is pressed the values are added. If you take a look at the example code you can see that the CSS class is defined between style tags and then applied to the dials through a further JavaScript function defined between the script tags. We have added some more notes in the code to help you understand what each part is doing.

The sky is pretty much the limit for what you can do with animations, and they are a great way to add some more interest to an interactive presentation.

We hope you found this article helpful for building your own multi-page presentations. We can't wait to see what you come up with!
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb

Posted 3 years ago

  • 5
Photo of Brent Hillsman

Brent Hillsman

  • 112 Points 100 badge 2x thumb
How do you copy the presentation if there is no "Copy Template" link in the preview window?
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Hi Brent,

Sorry about that, can you take a look at this codepen and copy the code from the HTML tab then copy and paste the code into the HTML tab of a new presentation. 

If you have any trouble please let me know. We'll also update this post. 

http://codepen.io/anon/pen/obPYWQ

Thanks,
Shea
Photo of Brent Hillsman

Brent Hillsman

  • 112 Points 100 badge 2x thumb
Got it.
Thanks.
Photo of Nidal HADDAD

Nidal HADDAD

  • 418 Points 250 badge 2x thumb
Hi Peter, thank you for this explanatory article. I have a question, i am counting on using the same approach but with html and animation instead of videos or images widget. 
How can i replay the animation of the webpage (mimic a refresh effect ) when i click on the button.
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Nidal,

Thank you for your comment. In terms of using html and animation, are you looking to  build the entire presentation in html, or will you also be using widgets?

If you were just wanting to use html, you could add in the html page along with the animation by using the HTML widget. That way the buttons would be on the same page and you could add in the functionality you need to restart the animation when the relevant button is clicked. This way is great if your presentation is using CSS animations and JavaScript for the button controls as you can put everything in one html file. To mimic the refresh effect you could assign your animations to a CSS class, and add and remove this when the buttons are clicked.

Alternatively, if you are using jQuery or another external library for the animations, you could store all of the files in rise storage and link to the html file by using the Web Page Widget in your presentation. 

Hope this helps, and thank you again for the question!

Peter
Photo of Nidal HADDAD

Nidal HADDAD

  • 418 Points 250 badge 2x thumb
Hi Peter, well the main idea was that a person comes in front of a display, opens his phone, and using RFID/Beacon/QRCode he gets another web page, and he will be able to select any presentation to play, i am trying to test this capability on every type of media Rise can deliver throw a display (video, HTML page with animation, images  etc etc ) every example beside the HTML was explicit in your Demo/tutorial,

so i think i'll be using Jquery to remove class and Re-add it so it can play the animation when i am using html widget.

And if anyone wants to know more about this project i am glad to share what i've learned till now.
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Nidal,

That sounds like an awesome project! It would be great to hear how it goes so please do let us know how you are getting on with it as there will definitely be other community members who would really like to hear about this too.

Thanks!

Peter
Photo of Nidal HADDAD

Nidal HADDAD

  • 418 Points 250 badge 2x thumb
Hi peter, i am finishing the project that i began, do you want me to send it to you and then you post it on the forum or do you want me to post it in this thread ? 
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Nidal,

That's great to hear you are finishing up the project! We are really looking forward to seeing what you have come up with so if you can post it in here that would be great to let others see what you have been working on.

Thanks again!

Peter
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
In the section on "Controlling the Widget Playback", I'm missing something here:

     //Play all Widgets on a particular page.      function play(index) {
        for (var i = 0; i < ids.length; i++) {
          if (ids[i].index == index) {
            playCmd(ids[i].id);
          }
        }
      }


Where do the methods playCmd(id) and pauseCmd(id) come from?  Are they part of the Gadget API?  Do I have to include a script to use these methods or are they already part of the context?

I felt that the developer documentation was unclear on this point.
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Steve,

Thanks for your question. The two functions playCmd( )  and pauseCmd( ) are within a file that is automatically loaded by the Player, so there is no need to load an external file if they are being referenced within script tags in the HTML of the template itself, as per the above multipage example. 

The functions themselves can be found in this file: http://rvashow2.appspot.com/gadgets/gadgets.min.js

Hopefully this helps!

Peter
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
Thanks, Peter, that is helpful.  I am working on understanding how the Rise Vision components work together, and how widgets can interact with their containers and sibling widgets.
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
Hi Peter - I have found that playCmd() and pauseCmd() are not defined within gadgets.min.js, but actually within presentationScripts.js, so they're automatically present in the context of the presentation template, as you said.

My application is a little different:  My presentation has three placeholders, one showing a video via the video widget, another playing an image slideshow via the image widget, and a third placeholder with the web page widget pointing to a page served from my local node.js server, and I would like to enable the JavaScript in this local page to send play/pause/stop commands to the other two placeholders.

Is that possible?  Can I dynamically catch the placeholder id's and then issue play/pause/stop commands from JavaScript within one placeholder to widgets in sibling placeholders?  

Thanks for any hints!

-Steve
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
...Otherwise, is it possible for my locally hosted page, including gadgets.min.js, to send messages up to the presentation container using gadgets.rpc.call()?  i.e. There would be a gadgets.rpc.register in the presentation HTML and a matching gadgets.rpc.call in the script contained within the web page widget.  I've been trying to set it up this way but I'm getting the javascript error: 
No relay set (used as window.postMessage targetOrigin), cannot send cross-domain message
...which I think means that I can't send a cross-domain rpc call from a page hosted on my local node.js server to a page hosted on RV storage.

Anyway, the bottom line is that I'm seeking a method for passing occasional simple messages like "Activate Page 1" from my local machine environment (including a node.js server) to the Rise Vision presentation environment, where the Rise Vision player is running on the same machine but the presentation HTML is hosted on Rise storage.  Is that possible, or have I gone to cross-domain hell?

Thanks!
-Steve
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Steve,

Sorry to hear you are running into cross domain issues - I know what that is like! Regarding your questions on passing the messages and the local machine environment, I will check with our content team tomorrow to see if they can shed any light on this. 

Just so I understand your current setup, you have three placeholders with video, image and web page widgets respectively. The webpage widget is pointing to a webpage hosted on your local server, and it is from this page that you are trying to trigger commands via Javascript to play/pause/stop the content within the video and image placeholders? I haven't yet tried this setup using the locally hosted page, but I will see if anyone can shed some light on this.

Thanks!

Peter
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
Yes, that's exactly the setup that I am experimenting with.

The third placeholder with the web page widget currently displays status messages from the node server, and it is here that I am hoping to generate triggers to switch pages in the multi-page presentation.

If a different solution could be found that doesn't involve the web page widget, I could work with that too.  For example, if it's possible to send trigger messages via rpc from the node server to the RV presentation directly, I could set it up that way, but I don't know whether that's possible.  Or maybe I could author a custom widget for the purpose of catching local messages and passing them up to the presentation.  In either case I think I'm up against cross-domain scripting restrictions.

The code in the article above is a good model for how I want my page switching to work, if I could just replace the three "channel" buttons with my "message from node" triggers.
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Hi Steve,

I looked into this with the content team and unfortunately they don't believe that there are any commands that can be sent using this method via gadgets rpc that will target the presentation template's presentationScripts.js file, which in turn would allow you to emit the play/pause/stop commands using the widget ids. We are trying to think of an alternative solution that would allow the widgets to be targeted, and I will definitely keep you updated on our progress.

Thanks!

Peter
Photo of Steve Gregory

Steve Gregory, Champion

  • 1,186 Points 1k badge 2x thumb
Thanks, Peter, I appreciate your help.  Is this something that might be done with Firebase is future editions?

Today I am working on a possible solution using postMessage.  I will let you know how it goes!