Interactive presentation example

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I am gonna have to put together interactive directory presentation. I would really like to use RV tools for this because Spreadsheet Widget is going to be a big thing there, but I am not quite sure how do I do this.
I found this article: http://blog.risevision.com/building-multi-page-presentation/
But I would really like to reverse-engineer the exact presentation. Is it possible to get the code of this?

Also, in case I decided to make it in HTML editor, what would be the actual web address to presentation? Do I simply use preview link?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
  • ???

Posted 3 years ago

  • 1
Photo of Shea

Shea, Official Rep

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

This might help as well: https://help.risevision.com/developer/presentations/multi-page/multi-page-presentations  and I'll look to see if there is a more up to date demo we can share. 

I'm not sure I follow your question regarding preview and the web address of the presentation, could you please clarify it a bit.

Thanks,
Shea
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I was also thinking for my option B to make a page with an IFrame in it; navigation would bring different presentations to it. For that I need a webpage address of presentations. I could simply use preview address, but I sort of remember there was a better way.
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Darius,

If you use previews, they won't update with any changes you make to those Presentations until you Save and Publish the main Presentation. That would be something to keep in mind if you want to update those iFrame Presentations often.

Does the link Shea shared earlier help to accomplish Plan A? 
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Also Darius here is the code for an prototype interactive presentation we built. Let me know if that helps. Just paste the HTML code into the HTML tab of Rise Vision then save.

Thanks

http://codepen.io/anon/pen/mVEKGa?editors=100
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Shea, Robb,

Thanks a lot for your help. The link you gave me was the same I already looked at. Updating would not be a problem. Basically what I am making is a 4-5 page website where all, but 1 page would not see major changes. All I care is 1 page containing Spreadsheet Widget. I wonder if that would get updated when loaded to an IFrame?
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb
Hi Darius,

In order to pull the code from the preview you have linked us, you would need to click the "Show" button and then click "Copy Template". This will open the presentation in your editor, where you can view the HTML by clicking the HTML tab.



Let me know if this helps.

Also - if you could extend a bit more on the setup you would like to achieve would help me better assist you on this.

Ashleigh
(Edited)
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I just learned something new. Thank you Ashleigh.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Ha! So, it works when I am using Custom HTML placeholder. But initially I wanted to use Web Page Widget and it would not display anything in an IFrame. Not sure if it is something you might want to look at. Do you think it just was too much for Chrome browser?

Here is the preview link to my sketch: http://preview.risevision.com/?type=presentation&id=79880b96-0f01-4422-bd73-1980070b37f0&sho...
Photo of Shea

Shea, Official Rep

  • 5,188 Points 5k badge 2x thumb
Hey Darius,

What do each of those buttons link to? Are they each a preview URL displayed in a HTML Widget? 

Thanks
Photo of Ashleigh

Ashleigh

  • 3,740 Points 3k badge 2x thumb
Darius,

Could you link me to the presentation within the editor?

I do get 404 errors in the console but would like to verify a couple things first.

Ashleigh
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Ashleigh,

I simply forgot to remove the link to CSS file that is no more needed. I fixed that. Thank you for bringing this to my attention.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Shea, the buttons link to different RV presentations. There is nothing at the moment, but the very nice colored backgrounds :)
Photo of Joseph Mayberry

Joseph Mayberry

  • 1,206 Points 1k badge 2x thumb
It is super hack-y and can cause some issues with using that player ID again, but there is a way to get a direct link to a presentation that reflects the scheduling and the content the same way the player would.

1) Create your presentation and add it to a display like you normally would.
2) Launch the display and before you see the gray loading screen right click and select "Inspect" or "Inspect Element" from the menu (you only have a short window of time while the presentation is loading on the display, if you miss it just close the player and launch it again).
3) Once your presentation finishes loading you will see a div just inside the <body> tags for the page that is called "webview" this div will include a link that is a direct link to the presentation you are running. You can open this presentation in a browser (I have only attempted opening it in chrome... I suspect that other browsers could cause unexpected issues).


NOTE: There are a lot of issues that this can create with the original player and display ID used to pull the link. Attempting to relaunch the original player without changing the associated display ID will result in an error message (and potentially break that player). Attempting to open the link that you have pulled on multiple browsers, tabs, and/or machines at the same time will result in the same error. Basically, the same rules still apply:

1 Display ID to 1 Player. You are now treating your browser as a player, and the link that you have pulled is forever tied to that display ID.


There are a few additional benefits to this, from a development standpoint, as it gives you access to the network traffic, console logs, and timeline that are otherwise hidden when you are viewing the developer console for displays run through the actual player.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Joseph,

Interesting reading. You just convinced me to not try it :)
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
What are the downsides of using preview links, though? The Spreadsheet Widget is updating fine every time I select this placeholder to be displayed in the IFrame?
Photo of Joseph Mayberry

Joseph Mayberry

  • 1,206 Points 1k badge 2x thumb
For most things preview links work fine. Content will update normally, and will cycle through playlists as you have set them up (to a point).

They won't reflect internal scheduling that you have set (all of this requires input from the player (though pulling the link from the player directly will allow the schedules to still work)). It will play in a straight "First to Last" order.

From a development side, there are some aspects of the code, and the network traffic that behave differently between the preview and the player. So when you are building custom content it is possible it will work (or not work) in the preview for one set of reasons but will behave completely differently in the player. 
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Yes, I noticed that Spreadsheet Widget updated itself just fine. Will put this presentation on my player for testing after lunch.
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Darius,

How did you make out?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Robb,

Still work in progress: http://preview.risevision.com/?type=p...

Getting errors with Image Widget.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Also, as I thought, there is no problem with my image sliders when using Image Item in the placeholder instead of Image Widget.: http://preview.risevision.com/Viewer....

Go figure...
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
To my little understanding images from the widget aren't making to the catch?... Is that correct?
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Darius,

I'm not sure. We'll investigate this further tomorrow and let you know what we find.

Thanks!
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb
Hi Darius,
Just to check, the errors that you have come across yesterday and posted here, is that related to the new thread about Image Widget/Image Item? 
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Yes, it is the same. I decided to swap Video Widget with Image Item and get rid of this problem for now. That is why I decided to create a new topic with both examples.
Photo of Robb

Robb, Official Rep

  • 76,676 Points 50k badge 2x thumb
Darius,

I'll go ahead and mark this as answered so we can track everything in that other forum thread Hannah referred to above.

Thanks!
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Yes, plz. This thread was not about Video Widget or Item.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
OK, i am gonna need some help from Rise Vision guys.


I started making multi-page presentation using your guidelines and provided example. All actually went well, but then I have gotten pretty weird results :) http://preview.risevision.com/?type=p...


Do not judge navigation as it is still work in progress. What bothers me is that I get only a top-left portion of any id element visible, except on the home page; home page is good. And it does that to every id on non-home page. If I made any other page as home page, all the id's in there then are shown properly... weird.


Instructions were not very clear, especially to me - a person totally not inclined towards JS'ing. I literally copy-pasted everything from your example presentation and made all the changes where applicable. There was one part I could not understand, the comments:

//Add an event handler for when a Gadget reports itself as Ready.

$(document).bind("gadgetReady", function(e, id) {

//Uncomment this when first building your Presentation in order to show the Gadget IDs in the console.

//console.log(id);


var newId = id.substring(9);


//Construct the Gadget's true ID.

for (var i = 0; i < ids.length; i++) {

if (newId == ids[i].id) {

ids[i].id = id;

break;

}

}

});


I removed the comments and left it like that:

//Add an event handler for when a Gadget reports itself as Ready.

$(document).bind("gadgetReady", function(e, id) {

console.log(id);


var newId = id.substring(9);


//Construct the Gadget's true ID.

for (var i = 0; i < ids.length; i++) {

if (newId == ids[i].id) {

ids[i].id = id;

break;

}

}

});


One more thing, any id I left in-visible (basically every id from non-home page) were not showing at all until I made them visible again. Perhaps this could be a clue to this behavior.


To my understanding, I am close because everything is working as intended, it is just something within the code that must be altered a bit. Can you help me wit that?


p.s.


How do I actually get home page reloaded instead of paused. It has some transitions going on, but they would not play again when I go back to home screen because the page was paused; it must be reloaded instead? Any ideas?

Link for RV guys: https://apps.risevision.com/editor/wo...
(Edited)
Photo of Joseph Mayberry

Joseph Mayberry

  • 1,206 Points 1k badge 2x thumb
It does sound like you are close, and I think I might be able to shed some light on a few of the issues described above:

1) The sizing issue with content outside of the Home Page. It looks like it is an issue in the HTML styling. The content within your placeholders on the main page is set to a height and width of 100%, but the same content inside of placeholders on your other pages is only set to a height and width of 100px.

I am not sure why this is, as far as I can tell the placeholders that you created are all sized correctly, but the content inside of them (the playlist items that you have added to each placeholder) are not being sized correctly.

This could be a result of the visibility settings that you are using... or it could be related to the second issue that you mentioned. I am not certain as the only time I have seen a similar issue was when I was trying to dynamically resize content which ended up being an unrelated issue.

2) The code that you included in your post is for constructing the complete id for content items within your placeholders. Right now you are using the placeholder IDs, but you need to use the Gadget IDs (you can find these by opening the developer tools for your preview and viewing the console tab.

A Gadget ID will look like this: sc0_pre0_home-intro_0w (you won't need the sc0_pre0 at the start of this, just the end for each gadget).


3 - 4) The visibility issues and the paused content on the home page should be addressed by fixing the second issue that you mentioned, though I can't say that with absolute certainty for the visibility as I have not needed to adjusted visibility settings in my own interactive presentations.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
Joseph,

You are the man! With the first part you were off, though :), but I was too. It was late yesterday, so I did not check, but I was thinking the problem is in styling, too. However, upon checking it today, I found there no issues because the were none. All that 100% and 100px actually belongs to RV preview code and not to the actual presentation.

BUT

The second part nailed it. I did not understand the instructions and provided example and, like you posted, I used placeholder IDs instead of Widget or Item IDs. Looked at it again today, fixed temporary code a bit, got IDs I needed and Wuala!!! it works.

However, I am not too happy :) Because presentation is loading all the content once and then pausing it, and now I am missing some of the transition effects that otherwise would be seen at the beginning. All this switching between content looks quite mediocre in these days. I wonder if there is a way to actually reload widgets instead or pausing them?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I am gonna bum this up with a question and hope for a response :)

As I have mentioned above, everything is working, but the problem I have is that paused&hidden widgets start playing again from where they were paused this way killing any initial transitions you would otherwise see on loading the first time.

Is this the code I found in documentation that was supposed to take care of that:

'Finally, we have to add some code to show the Gadget itself. We include checks for each possible Placeholder transition, and assign the appropriate CSS class to the Gadget. The CSS will take care of making the Gadget visible:
if ($gadget.hasClass("none_hide")) {
  $gadget.removeClass("none_hide").addClass("none_show");
}
else if ($gadget.hasClass("fade_hide")) {
  $gadget.removeClass("fade_hide").addClass("fade_show");
}
else if ($gadget.hasClass("slide-right_hide")) {
  $gadget.removeClass("slide-right_hide").addClass("slide-right_show");
}
else if ($gadget.hasClass("slide-left_hide")) {
  $gadget.removeClass("slide-left_hide").addClass("slide-left_show");
}
else if ($gadget.hasClass("slide-up_hide")) {
  $gadget.removeClass("slide-up_hide").addClass("slide-up_show");
}
else if ($gadget.hasClass("slide-down_hide")) {
  $gadget.removeClass("slide-down_hide").addClass("slide-down_show");
}'

If so do you have any idea why it is not working? That is really a deal breaker in my situation; nobody wants to be looking at boring presentation and expect to be seeing woosh-woosh all over the place.

Also, not really important - just wanted to pay your attention RV, Video Folder images just cycle once and stop.

Preview: http://preview.risevision.com/?type=presentation&id=8beba72d-6eab-47d5-a447-29022fd9eaa7&showui=false
(Edited)
Photo of Joseph Mayberry

Joseph Mayberry

  • 1,206 Points 1k badge 2x thumb
Unfortunately I am not sure I remember enough from when I was still using the Rise Vision transitions to give you a definite answer. I believe I tried exploiting embedded presentations to force content to begin again from the start and had some luck getting the transitions to show consistently in that fashion, but I don't remember.

As I understand it the normal transitions are applied to the hide event for playlist items, and the code that you copied modifies these transitions to apply on the show event for those playlist items.

This by itself isn't going to dictate if the transition is played or not, that issue comes down to the commands that you are sending to the widgets/gadgets.

Specifically, this section:

//Pause all Gadgets on a particular page.
function pause(index) {
     for (var i = 0; i < ids.length; i++) {
          if (ids[i].index == index) {
               pauseCmd(ids[i].id);
          }
     }
}

This part of the code is 'pausing' your widgets. Depending on how the widget is coded this will typically just stop it where it is and allow it to resume content at that point (basically when you pause a widget you aren't going to have a show or hide event that will trigger the transition animations).

It is possible that modifying this to send a 'stopCmd' rather than a 'pauseCmd' will resolve this issue but that depends entirely on how the widgets that you are using are coded, and could potentially vary wildly (especially with third party widgets).


An alternative, and one that I have been using myself, is to create your own transition animations directly through the HTML and CSS. There are quite a few clever CSS (and JS) animations and effects that you can find guides for through google.

I would note that I have found that fade effects, at least ones that make use of div transparencies do not seem to work well with the Rise Vision platform (at least the ones that I have tried have caused unexpected bugs).


I stripped out most of the content from one of my presentations so you can take a look at what I mean: http://preview.risevision.com/Viewer.html?type=presentation&id=dcdf8dcc-ee2a-4852-bbc6-ee4d10497...

It takes a bit more coding, but I've found that it is much easier to make really slick looking animation effects this way... so potentially worth the additional trips to google to bone up on your CSS and JS
(Edited)