PIXILAB Wiki

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
blocks:app-note:sync-task [2021-08-05 12:49]
mattias [The Block] 		blocks:app-note:sync-task [2024-01-16 08:56] (current)
admin Added note about "Playback Controls"
Line 1: Line 1:
-=====Synchronize task progress to the progress of a video=====+=====Synchronize a task to the progress of a video=====
  
 ====Introduction==== ====Introduction====
Line 5: Line 5:
 This application note gives an example of how tasks can be synchronized to the progress of a video. In this case we just time some messages to appear to the screen but this setup can control any property available in Blocks. This application note gives an example of how tasks can be synchronized to the progress of a video. In this case we just time some messages to appear to the screen but this setup can control any property available in Blocks.
 There is an example Blocks root available to download from [[https://int.pixilab.se/outgoing/permanent/wiki/PIXILAB-Blocks-rootSynkTask.zip|here]]. General setup instructions can be found [[blocks:app-note:start|here]]. There is an example Blocks root available to download from [[https://int.pixilab.se/outgoing/permanent/wiki/PIXILAB-Blocks-rootSynkTask.zip|here]]. General setup instructions can be found [[blocks:app-note:start|here]].
-In this exanple it may be useful to allow the browser to autoplay a video with audio without any user interaction. Follow [[blocks:autoplay|this guide]] to enable autoplay on your personal computer.+In this example it may be useful to allow the browser to autoplay a video with audio without any user interaction. Follow [[blocks:autoplay|this guide]] to enable autoplay on your personal computer.
  
  
 ====Try it==== ====Try it====
  
-Open up the Blocks editor and open up a second browserwindow that will serve as our displayspot by type localhost:8080/spot in the URL bar. The display may have to be reassosiated to the DisplaySpot. +Open the Blocks editor and open up a second browserwindow that will serve as our displayspot by type localhost:8080/spot in the URL bar. The display may have to be reassociated to the DisplaySpot. 
  
 :!: Do not manually load the Example block on the displayspot. This will be done by the task. :!: Do not manually load the Example block on the displayspot. This will be done by the task.
  
-To test drive, just make sure you use the root block from above and then use the little playbutton to manually start the //MyCues// task.+To test drive, just make sure you use the root block from above and then use the little play button to manually start the //MyCues// task.
  
 The nice lady should appear on the display talking about Blocks and some messages should appear in sync with the content.  The nice lady should appear on the display talking about Blocks and some messages should appear in sync with the content. 
Line 20: Line 20:
 {{:blocks:app-note:sync_task:lady.jpg?800|}} {{:blocks:app-note:sync_task:lady.jpg?800|}}
  
-====How doe it work?====+====How does it work?====
  
  
Line 33: Line 33:
 {{:blocks:app-note:sync_task:1to3.jpg?800|}} {{:blocks:app-note:sync_task:1to3.jpg?800|}}
  
-Line 1:  We start with some housekeeping by resetting the realm variable textBulletToShow to 0. The statement shown on screen uses an opacity bahaviour that reveals the qoute when the value of the textBulletToShow matches the behaviours condition. +Line 1:  We start with some housekeeping by resetting the realm variable textBulletToShow to 0. The statement shown on screen uses an opacity behaviour that reveals the quote when the value of the textBulletToShow matches the behaviours condition. 
  
-Line 2: Assigns the Block we want on the spot. +Line 2: Assigns the Block we want on the spot.
  
 Line 3: Sets the display spots playing property to true. This is done by default when loading the block the first time. It is done by the synchronizer. This line set the video to play again after it finishes playing and we want it to loop. More on this later. Line 3: Sets the display spots playing property to true. This is done by default when loading the block the first time. It is done by the synchronizer. This line set the video to play again after it finishes playing and we want it to loop. More on this later.
Line 42: Line 42:
 {{:blocks:app-note:sync_task:4-10.jpg?800|}} {{:blocks:app-note:sync_task:4-10.jpg?800|}}
  
-Line 4-6 Loads the qoutes in to the vairables. Since we use bindings to this variables in text elements we can assign new qoutes  as the video progress.+Line 4-6 Loads the quotes into the variables. Since we use bindings to these variables in text elements, we can assign new quotes as the video progress.
  
-Line 7. This is where we got our first cue. It is simply a wait statement that subtracts the time property of the synchronised video from our target time, when the result is 0 we can move on and do what we need to do. In the exampel we just change the textBulletToShow to 1 and that in turn will make the qoute show up on the screen with the help of the opacity bahaviour on thet particular text Block.+Line 7. This is where we got our first cue. It is simply a wait statement that subtracts the time property of the synchronised video from our target time, when the result is 0 we can move on and do what we need to do. In the example we just change the textBulletToShow to 1 and that in turn will make the quote show up on the screen with the help of the opacity behaviour on that text Block.
  
-This cue pattern is then repeated and new text lines is loaded to the variables all the way to the end of this task.+This cue pattern is then repeated, and new text lines is loaded to the variables all the way to the end of this task.
  
  
Line 55: Line 55:
 :!: Since i have built my own mechanism to do the looping in the task I have disabled the loop property of the synchroniser inside the example block.  :!: Since i have built my own mechanism to do the looping in the task I have disabled the loop property of the synchroniser inside the example block. 
  
-Line 70 When the video has finished playing we want to restart the whole process, this is done by running the Loop task. +Line 70 When the video has finished playing, we want to restart the whole process, this is done by running the Loop task. 
  
  
Line 73: Line 73:
 ====The Block==== ====The Block====
  
-The Block is a composition with a synchronised video as background and the Dynamic_bubbles compoition as overlay.+The Block is a composition with a synchronised video as background and the Dynamic_bubbles composition as overlay.
  
 The synchroniser is there to allow us to track the spots time property but most of the "magic" happens in the overlay. Every text element is bound to one of the string realm variables. Some of them are bound to the same variable but never shown at the same time.  The synchroniser is there to allow us to track the spots time property but most of the "magic" happens in the overlay. Every text element is bound to one of the string realm variables. Some of them are bound to the same variable but never shown at the same time. 
-They all got a opacity behaviour that is bound to the textBulletToShow realm variable and set to be visible at a unique number. I also applies a very short minimum fade rate to make the appearance more appealing.+They all got a opacity behaviour that is bound to the textBulletToShow realm variable and set to be visible at a unique number. I also apply a very short minimum fade rate to make the appearance more appealing.
  
 {{:blocks:app-note:sync_task:textopacitybehaviour.jpg?800|}} {{:blocks:app-note:sync_task:textopacitybehaviour.jpg?800|}}
Line 83: Line 83:
 ====CSS file==== ====CSS file====
  
-The of you that noticed there is a stylesheet assigned to the block, it is just there to hide the play button that appears on the video when it is paused ot looping. +Those of you that noticed there is a stylesheet assigned to the block, it is just there to hide the play button that appears on the video when it is paused or looping. 
  
 <code> .play-btn-wrap { <code> .play-btn-wrap {
Line 90: Line 90:
 </code>  </code> 
  
-This is the only css-class. +This is the only css-class used in the project.
  
 +:!: **NOTE**: This CSS work-around isn't needed with later versions of Blocks. Just set "Playback Controls" to "None" for the video.