How to create a menu to select which scenes will appear in a playlist loop


I would like to have scenes rotate in a playlist i.e. a new scene/timeline.
I would then like to have a separate menu that would allow selecting of which scenes will play in the playlist.
I’m thinking the way to do it would be to have all the scene on a timeline, then “skip” the non selections via time line actions.
The selection menu needs to be a separate screen, that will disappear when the “playlist” plays at full screen.
I am not the best at coding, but this may need some custom scripting?

any thoughts?

(Jonathan Deutsch) #2

In theory I think this could be accomplished without code via very clever use of alternate timelines. You could use a technique where each item had a toggle timeline (see this example, but it may need to be modified(?)), and then the timeline action you are proposing would do a continue timeline action without restarting the timeline; in this manner if it was already toggled (ie at the end of a timeline) no action would happen.

At least that’s the theory, it is a rather involved setup! I think using a little bit of code to keep track of the state of each item would be significantly simpler. You could just check this state with the timeline action, and then use the Hype API to go to the particular scene.

My recommendation would be to do this within a Persistent Symbol if you want it to be on the same page. Fullscreen is another issue, but you could probably hide/pause the persistent symbol using a little code for when you go into fullscreen mode. Otherwise you’ll need to setup communication via another means if it is on a different .html page.


Thank you for your quick response!
Let me give a better overview. This project is a kiosk display that will be placed near a live show area. The kiosk will show a rotating view of promos/title cards for the shows being given on that day.
At different times of the day when a show is actually live, the kiosk will be set to the promo or title card of the corresponding live show. When the live show is completed, the kiosk will be set back to the attract loop of the promos/title cards.
To accomplish this I’ve envisioned an “admin” panel scene.
46 AM
To start a show promo or card, simply select it in the show select, and this triggers that specific promo scene/html.
The “Loop Select” section is where you would be able to choose which show promos would go into the attract loop rotation. The highlighted show button will indicated the shows that will play in the loop. Then the loop scene/html is launched full screen by pressing “Play Loop”. To get out of the loop, I have a hidden button with a password to get to the admin scene.
The question now is how to create the looping playlist, where scene/timelines are able to be added and removed.
Is this skipping to a timeline point if the current point is flagged i.e non selected scene?
Or is this a external php or xml list generated by the “Loop Select” section calling the scenes that need to be played?
I know what I want to happen, I’m just anemic when it comes to making it happen programatically.

Btw, I’m currently using Hype for other information kiosks installations.
This is a new use case, so here comes the lack of knowledge and learning curve.
I feel I’m close. The forum community here is excellent!
Once again, thank for your expedient response time.

(Jonathan Deutsch) #4

Thanks for the additional details. From your description it sounds like the admin panel is in the same Hype document as the animations and just accessed via secret meansand thus the admin page is not in a separate .html page or on a separate device. This makes things a bit easier.

I would definitely use javascript for this.

Probably the flow I would recommend is that at the end of a timeline (I’m assuming probably each scene just has a main timeline?), I’d call a timeline action. This would run javascript (“function A”) and figure out what to do next.

The admin panel would have each button run javascript code that could toggle state. You could potentially give each button an element id, and then in the javascript check that id so you really only need one reaction function (“function B”). Thus the “function A” would look at this state to decide what to do.

You might also want an On Scene Load handler for a first scene to setup the initial state (“function C”).

There’s definitely other approaches to take though! That’s just how I’d do it.

The trickier part is figuring out how you want to store the state and read it to control :slight_smile:.


As Jonathan says, 6 scenes that have a timeline action at whatever time suits (let’s say 6 seconds) and this action will “Run Javascript…” a function that inside will contain a conditional statement to check the “state” i.e if the scene is looping or if it needs to continue to the next.

Function A

if (show1isNotLooping){
    //do something like
} else {
    hypeDocument.startTimelineNamed("Main Timeline", hypeDocument.kDirectionForward);

This would check a global variable “show1isNotLooping” (can be named anything) and if it is true then show the next scene. If false then return to the start of the scene and therefore begin a loop. Until at some point you would click one of the buttons in your menu to change the state.

This is the basic premise. (The “show select” section) The added complexity would be when you don’t want all “shows” to play in sequence (which is what I believe you want in your “loop select” section of your admin panel) so instead of


You would need to use


Here “nextScene” would be the scene that has to play next. If it were me I would create an array of the scenes and depending on which buttons have been selected, remove or add the scene name to the array. Then cycle through the array and change the “nextScene” variable to the next “scene name” in the array and you can use a counter for this. i.e (array[0], array[1], … array[counter]). That’s my logic :slight_smile: It’s a little more involved so needs a little thought as to how you would do this. There are other ways of course. :wink: