Difference between revisions of "Interactivity"

From A-SMIL.org
Jump to: navigation, search
m (Simplified example)
(Visual Clues)
 
(11 intermediate revisions by the same user not shown)
Line 1: Line 1:
Certain SMIL media appliances support buttons for triggering playlists when user provides interactive input.  
+
Certain SMIL media appliances support buttons, motion sensors for triggering playlists when user provides interactive input.  
 +
 
 +
== Motion Events ==
 +
 
 +
With supporting hardware, motion event triggers can be programmed into SMIL using the <tt>accesskey</tt> event.
 +
 
 +
The following example illustrates that when the content runs, <tt>welcome.jpg</tt> is first played.
 +
When user passed by the motion sensor, the motion media items <tt>discount.jpg</tt> is played for 5 seconds
 +
 
 +
<source lang="smil">
 +
<smil>
 +
  <head />
 +
  <body>
 +
    <excl repeatCount="indefinite">
 +
      <priorityClass higher="stop" lower="never">
 +
        <par begin="accesskey(AUDIENCE)" end="audience_pl.endEvent" restart="whenNotActive">
 +
    <seq xml:id="audience_pl">
 +
                <img src="discount.jpg" dur="5s" fit="fill" />
 +
            </seq>
 +
        </par>
 +
      </priorityClass>
 +
      <priorityClass higher="stop">
 +
        <par begin="0">
 +
          <img src="welcome.jpg" dur="indefinite" fit="fill" />
 +
        </par>
 +
      </priorityClass>
 +
    </excl>
 +
  </body>
 +
</smil>
 +
</source>
  
 
== Button Events ==
 
== Button Events ==
Line 26: Line 55:
 
         </par>
 
         </par>
 
       </priorityClass>
 
       </priorityClass>
       <priorityClass>
+
       <priorityClass higher="stop" lower="never">
 
         <par begin="0">
 
         <par begin="0">
 
           <img src="welcome.jpg" dur="indefinite" fit="fill" />
 
           <img src="welcome.jpg" dur="indefinite" fit="fill" />
Line 36: Line 65:
 
</source>
 
</source>
  
== Visual Clues ==
+
== Visual Clues ==
  
 +
'''LED Light Bar''' <br>
 +
Light bars can be controlled using the <tt>adapi:lightControl</tt> pseudo content.
 +
For IAdea SmartSignboard XDS-1078 which has LED light bar in both sides, specify <tt>frame</tt> as the parameter to the pseudo content.
 +
Where setting value constant;level=n% to control the brightness , set n=0 turns the LED light bar off.
 +
Setting color with HEX color value ( http://www.w3.org/TR/css3-color/#svg-color ).
 +
If the signboard supports only 12 bit color input, such as IAdea XDS-1078, signboard will self interpret by its supported color code.    For example, set "#FF0000" equals to "#F00000".
 +
 +
Below example shows how LED light bar being programmed as red, blue, yellow for 5 seconds each :
 +
 +
<source lang="smil">
 +
<seq repeatCount="indefinite">
 +
<ref src="adapi:lightControl" dur="5s">
 +
            <param name="frame" value="constant;level=100%;color=#FF0000" />
 +
</ref>
 +
<ref src="adapi:lightControl" dur="5s">
 +
            <param name="frame" value="constant;level=100%;color=#00FF00" />
 +
</ref>
 +
<ref src="adapi:lightControl" dur="5s">
 +
            <param name="frame" value="constant;level=100%;color=#0000FF" />
 +
</ref>
 +
</seq>
 +
</source>
 +
 +
 +
'''Touch Button Indicator'''<br>
 
Often indicator lights are available to inform the user that input is being accepted at the particular moment. Lights can be controlled using the <tt>adapi:lightControl</tt> pseudo content.
 
Often indicator lights are available to inform the user that input is being accepted at the particular moment. Lights can be controlled using the <tt>adapi:lightControl</tt> pseudo content.
 +
When controlling device's touch button indicators altogether, specify <tt>touchButton</tt> as the parameter to the pseudo content. <br /> For IAdea player XDS-1060/1062 which has 6 touch buttons, use <tt>touchButton<i>A</i></tt>, <tt>touchButton<i>B</i></tt>, <tt>touchButton<i>C</i></tt>, <tt>touchButton<i>X</i></tt>, <tt>touchButton<i>Y</i></tt> and <tt>touchButton<i>Z</i></tt> for buttons 1 to 6 (from left to right) respectively.
 +
 +
When controlling general-purpose output ports, use <tt>GPO<i>n</i></tt> where <i>n</i> matches the number of the output port.
  
 
<source lang="smil">
 
<source lang="smil">
Line 49: Line 106:
 
           <seq repeatCount="indefinite">
 
           <seq repeatCount="indefinite">
 
             <ref src="adapi:lightControl" dur="2s">
 
             <ref src="adapi:lightControl" dur="2s">
               <param name="touchButton" value="on" />
+
               <param name="touchButtonX" value="on" />
 +
              <param name="GPO1" value="on" />
 
             </ref>
 
             </ref>
 
             <ref src="adapi:lightControl" dur="0.5s">
 
             <ref src="adapi:lightControl" dur="0.5s">
               <param name="touchButton" value="off" />
+
               <param name="touchButtonX" value="off" />
 +
              <param name="GPO1" value="off" />
 
             </ref>
 
             </ref>
 
           </seq>
 
           </seq>
Line 59: Line 118:
 
</source>
 
</source>
  
The sample above turns the indicator lights on the touch buttons on for 2 seconds and off for 0.5 seconds, achieving a blinking visual effect to guide users to the buttons.
+
The sample above turns the indicator light on the 4th touch button and pin #1 of the GPIO board on for 2 seconds and off for 0.5 seconds, achieving a blinking visual effect to guide users to the buttons.
 +
<br />To control all indicators of the touch buttons, use <tt>touchButton</tt> instead.
  
 
== Combining Interactive Features ==
 
== Combining Interactive Features ==
Line 98: Line 158:
 
         </par>
 
         </par>
 
       </priorityClass>
 
       </priorityClass>
       <priorityClass>
+
       <priorityClass higher="stop" lower="never">
 
         <par begin="0">
 
         <par begin="0">
 
           <img src="welcome.jpg" dur="indefinite" fit="fill" />
 
           <img src="welcome.jpg" dur="indefinite" fit="fill" />

Latest revision as of 06:06, 26 November 2015

Certain SMIL media appliances support buttons, motion sensors for triggering playlists when user provides interactive input.

Motion Events

With supporting hardware, motion event triggers can be programmed into SMIL using the accesskey event.

The following example illustrates that when the content runs, welcome.jpg is first played. When user passed by the motion sensor, the motion media items discount.jpg is played for 5 seconds

<smil>
  <head />
  <body>
    <excl repeatCount="indefinite">
      <priorityClass higher="stop" lower="never">
        <par begin="accesskey(AUDIENCE)" end="audience_pl.endEvent" restart="whenNotActive">
	     <seq xml:id="audience_pl">
                <img src="discount.jpg" dur="5s" fit="fill" />
             </seq>
        </par>
      </priorityClass>
      <priorityClass higher="stop">
        <par begin="0">
          <img src="welcome.jpg" dur="indefinite" fit="fill" />
        </par>
      </priorityClass>
    </excl>
  </body>
</smil>

Button Events

With supporting hardware, external triggers can be programmed into SMIL using the accesskey event.

The following example illustrates playing different content when user presses one of the four buttons available. When the content runs, welcome.jpg is first played. When user pressed one of the four buttons, one of the four media items news.jpg, interest.jpg, exch.jpg or stock.jpg is played for 5 seconds.

<smil>
  <head />
  <body>
    <excl repeatCount="indefinite">
      <priorityClass>
        <par begin="accesskey(GPI0);accesskey(A)" dur="5s">
          <img src="news.jpg" dur="indefinite" fit="fill" />
        </par>
        <par begin="accesskey(GPI1);accesskey(B)" dur="5s">
          <img src="interest.jpg" dur="indefinite" fit="fill" />
        </par>
        <par begin="accesskey(GPI2);accesskey(C)" dur="5s">
          <img src="exch.jpg" dur="indefinite" fit="fill" />
        </par>
        <par begin="accesskey(GPI3);accesskey(D)" dur="5s">
          <img src="stock.jpg" dur="indefinite" fit="fill" />
        </par>
      </priorityClass>
      <priorityClass higher="stop" lower="never">
        <par begin="0">
          <img src="welcome.jpg" dur="indefinite" fit="fill" />
        </par>
      </priorityClass>
    </excl>
  </body>
</smil>

Visual Clues

LED Light Bar
Light bars can be controlled using the adapi:lightControl pseudo content. For IAdea SmartSignboard XDS-1078 which has LED light bar in both sides, specify frame as the parameter to the pseudo content. Where setting value constant;level=n% to control the brightness , set n=0 turns the LED light bar off. Setting color with HEX color value ( http://www.w3.org/TR/css3-color/#svg-color ). If the signboard supports only 12 bit color input, such as IAdea XDS-1078, signboard will self interpret by its supported color code. For example, set "#FF0000" equals to "#F00000".

Below example shows how LED light bar being programmed as red, blue, yellow for 5 seconds each :

	<seq repeatCount="indefinite">
		<ref src="adapi:lightControl" dur="5s">
            <param name="frame" value="constant;level=100%;color=#FF0000" />
		</ref>
		<ref src="adapi:lightControl" dur="5s">
            <param name="frame" value="constant;level=100%;color=#00FF00" />
		</ref>
		<ref src="adapi:lightControl" dur="5s">
            <param name="frame" value="constant;level=100%;color=#0000FF" />
		</ref>		
	</seq>


Touch Button Indicator
Often indicator lights are available to inform the user that input is being accepted at the particular moment. Lights can be controlled using the adapi:lightControl pseudo content. When controlling device's touch button indicators altogether, specify touchButton as the parameter to the pseudo content.
For IAdea player XDS-1060/1062 which has 6 touch buttons, use touchButtonA, touchButtonB, touchButtonC, touchButtonX, touchButtonY and touchButtonZ for buttons 1 to 6 (from left to right) respectively.

When controlling general-purpose output ports, use GPOn where n matches the number of the output port.

        <par>
 
          <seq>
            <!-- Foreground content here -->
          </seq>
 
          <seq repeatCount="indefinite">
            <ref src="adapi:lightControl" dur="2s">
              <param name="touchButtonX" value="on" /> 
              <param name="GPO1" value="on" />
            </ref>
            <ref src="adapi:lightControl" dur="0.5s">
              <param name="touchButtonX" value="off" />
              <param name="GPO1" value="off" />
            </ref>
          </seq>
 
        </par>

The sample above turns the indicator light on the 4th touch button and pin #1 of the GPIO board on for 2 seconds and off for 0.5 seconds, achieving a blinking visual effect to guide users to the buttons.
To control all indicators of the touch buttons, use touchButton instead.

Combining Interactive Features

Buttons are programmed by allowing playlists to be triggered by accesskey events.

The following example illustrates playing different content when user presses one of the four buttons available. When the content runs, welcome.jpg is first played and lights blink. When user pressed one of the four buttons, one of the four media items news.jpg, interest.jpg, exch.jpg or stock.jpg is played for 5 seconds, during which the lights are turned off.

<smil>
  <head />
  <body>
    <excl repeatCount="indefinite">
      <priorityClass>
        <par begin="accesskey(GPI0);accesskey(A)" dur="5s">
          <img src="news.jpg" dur="indefinite" fit="fill" />
          <ref src="adapi:lightControl" dur="indefinite">
            <param name="touchButton" value="off" />
          </ref>
        </par>
        <par begin="accesskey(GPI1);accesskey(B)" dur="5s">
          <img src="interest.jpg" dur="indefinite" fit="fill" />
          <ref src="adapi:lightControl" dur="indefinite">
            <param name="touchButton" value="off" />
          </ref>
        </par>
        <par begin="accesskey(GPI2);accesskey(C)" dur="5s">
          <img src="exch.jpg" dur="indefinite" fit="fill" />
          <ref src="adapi:lightControl" dur="indefinite">
            <param name="touchButton" value="off" />
          </ref>
        </par>
        <par begin="accesskey(GPI3);accesskey(D)" dur="5s">
          <img src="stock.jpg" dur="indefinite" fit="fill" />
          <ref src="adapi:lightControl" dur="indefinite">
            <param name="touchButton" value="off" />
          </ref>
        </par>
      </priorityClass>
      <priorityClass higher="stop" lower="never">
        <par begin="0">
          <img src="welcome.jpg" dur="indefinite" fit="fill" />
          <seq repeatCount="indefinite">
            <ref src="adapi:lightControl" dur="2s">
              <param name="touchButton" value="on" />
            </ref>
            <ref src="adapi:lightControl" dur="0.5s">
              <param name="touchButton" value="off" />
            </ref>
          </seq>
        </par>
      </priorityClass>
    </excl>
  </body>
</smil>