Crestron Components Lib - Showcase App

ch5-template context pairs

Emulator Scenario (click to expand) (click to collapse)
{
  "cues": [
    {
      "type": "boolean",
      "event": "MediaPlayer[0].prevtrack.clicked",
      "trigger": true,
      "actions": [
        {
          "state": "selected_button",
          "type": "s",
          "logic": "set",
          "value": "prev track clicked"
        },
        {
          "state": "receive.prevtrack_selected",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "MediaPlayer[0].play.clicked",
      "trigger": true,
      "actions": [
        {
          "state": "selected_button",
          "type": "s",
          "logic": "set",
          "value": "play clicked"
        },
        {
          "state": "receive.play_selected",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "MediaPlayer[0].nexttrack.clicked",
      "trigger": true,
      "actions": [
        {
          "state": "selected_button",
          "type": "s",
          "logic": "set",
          "value": "next button clicked"
        },
        {
          "state": "receive.nexttrack_selected",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    }
  ],
  "onStart": [
    {
      "state": "selected_button",
      "type": "s",
      "value": "no button clicked"
    }
  ]
}
Emulator actions

Press the Load button to load the scenario. This will also reload all of the existing examples on the page.

Press the Run button to run the scenario. You only need to do this if the scenario (the json) has an onStart key.

Events and states

The Emulator Scenario JSON contains an array of cues and an optional array onStart.

→ A cue is defined by: type:string, event:string, trigger:boolean|string|number, actions:array
→ An action is defined by: type:string, state:string, logic:string ... plus other fields ( depending on type)

The value of the state or event for a cue or for an action is a string which represents the name of that state or action.

Type field

The type for cue or for action can be the string:

  • b or boolean - for a boolean state or event
  • n or number or numeric - for a number state or event
  • s or string - for a string state or event
  • o or object - for an object state or event
Trigger field

The trigger can be either a fixed value of the same type as the state or event, or the string "&change". If it is a fixed value then, when the emulator detects that the state or event has changed to the value given in trigger, it also executes the actions for that state or event. If the value is the string is "&change", regardless of state or event type, the actions are executed on any change in the value of the state or event.

Logic Field

The logic can be:

  • link - passes the value received on the incoming join through to the outgoing join. Using this between incompatible join types will attempt to cast the value. In the event of a cast failure, the value will be set to false, 0 or "" (empty string).
  • set - assigns a specific value to the join. This requires a 5th key of 'value' and the specific value to assign. ie. {"state":"light_level", "type":"n", "logic": "set","value":5}. If the 5th key is omitted, the default value will be sent (false, 0, "" or {}).
  • toggle - (boolean Only) reads the current state and changes it to the opposite state.
  • pulse - (boolean Only) value goes high and then low.
  • increment - (Numeric Only) reads the current value of the analog and adds an offset. This logic accepts an optional 5th key of 'offset which determines how many times to increment by. ie. {"event":"volume_level","type":"n", "logic":"increment","offset":5}. If this 5th key is omitted, the default offset of 1 will be applied.
  • decrement - (Numeric Only) reads the current value of the analog and subtracts an offset. This logic accepts an optional 5th key of 'offset which determines how many times to decrement by. ie. {"event":"volume_level","type":"n", "logic":"decrement","offset":5}. If this 5th key is omitted, the default offset of 1 will be applied.
  • RCB logic can be accomplished by defining an action containing an object state or event of RCB type. A 5th key is expected as the amount of time in milliseconds to reach the level. {"signal":"light_level", "type":"n", "logic": "rcb","value":65535, "time":2000}
    { "rcb":{ "value": numeric_value, "time": duration_in_ms } }
Scenario example:

    {
      "cues": [
        {
          "type": "boolean",
          "event": "trigger",
          "trigger": true,
          "actions": [
            {
              "state": "action1",
              "type": "boolean",
              "logic": "toggle"
            },
            {
                "state": "rcb_signal",
                "type": "object",
                "logic": "set",
                "value": {
                    "rcb":{
                        "value": 101,
                        "time": 1500
                    }
                }
            }
          ]
        }
      ],
      "onStart": [
      ]
    }
    
ch5-template context pairs

In the following example, ch5-buttons are generated using nested ch5-templates with multiple context pairs.

It covers a couple of cases, the first ch5-template is used inside the template of the ch5-list, that ch5-template uses the outer template which contains 3 more ch5-templates. The main ch5-template uses context pairs which will influence the value of the sendEventOnClick attribute from the ch5-button.

The ch5-list is there to highlight the fact that the {{idx}} can be used, can be handy for more complex scenarios.

Behaviour explanation
  1. The first ch5-template used inside the ch5-list has multiple context pairs
  2. The first 3 pairs handle the value of the sendEventOnClick attribute from the ch5-button, the string which will be replaced in the end is INNER.
  3. To get there, the ch5-template uses a template with 3 other ch5-templates. Each of those templates will have the replacement string of their context replaced by the main ch5-template original replacement pair.
  4. For the first of the 3 ch5-templates, its context replacement string, BUTTON_prevtrack will become: MediaPlayer[0].prevtrack, the next 2 will follow the same logic
    • BUTTON_play => MediaPlayer[0].play
    • BUTTON_nexttrack => MediaPlayer[0].nexttrack
  5. Each of those 3 ch5-templates use the same template with the ch5-button, their context has been changed and now INNER will be replaced MediaPlayer[0].prevtrack and so on.

The labels of the generated ch5-buttons are equal to the final value of their respective sendEventOnClick attribute

[Testing ch5-template]

    <p>In the following example, ch5-buttons are generated using nested ch5-templates with multiple context
        pairs.</p>
    <p>It covers a couple of cases, the first ch5-template is used inside the template of the ch5-list,
        that ch5-template uses the outer template which contains 3 more ch5-templates. The main ch5-template
        uses
        context pairs which will influence the value of the <i>sendEventOnClick</i> attribute from the ch5-button.</p>
    <p>The ch5-list is there to highlight the fact that the <b>{{idx}}</b> can be used, can be handy for more complex
        scenarios.
    </p>
    <h5>Behaviour explanation</h5>
    <ol>
        <li>The first ch5-template used inside the ch5-list has multiple context pairs</li>
        <li>The first 3 pairs handle the value of the sendEventOnClick attribute from the ch5-button, the string which
            will be replaced in the end is <i>INNER</i>.
        </li>
        <li>To get there, the ch5-template uses a template with 3 other ch5-templates. Each of those templates will have
            the replacement string of their context replaced by the main
            ch5-template original replacement pair.
        </li>
        <li>For the first of the 3 ch5-templates, its context replacement string, <i>BUTTON_prevtrack</i> will become:
            MediaPlayer[0].prevtrack, the next 2
            will follow the same logic
            <ul>
                <li>BUTTON_play => MediaPlayer[0].play</li>
                <li>BUTTON_nexttrack => MediaPlayer[0].nexttrack</li>
            </ul>
        </li>
        <li>Each of those 3 ch5-templates use the same template with the <i>ch5-button</i>, their context has been
            changed and now <i>INNER</i>
            will be replaced MediaPlayer[0].prevtrack and so on.
        </li>
    </ol>

    <p>The labels of the generated ch5-buttons are equal to the final value of their respective <i>sendEventOnClick</i>
        attribute</p>

    <template id="innerId">
        <ch5-button class="media-predefined-class template-media-class" sendEventOnClick="INNER.clicked"
                    label="INNER"></ch5-button>
    </template>

    <template id="outerId">
        <div class="media-button-container">
            <ch5-template templateid="innerId" context="INNER:BUTTON_prevtrack"></ch5-template>
            <ch5-template templateid="innerId" context="INNER:BUTTON_play"></ch5-template>
            <ch5-template templateid="innerId" context="INNER:BUTTON_nexttrack"></ch5-template>
        </div>
    </template>

    <ch5-list indexid="idx" size="1">
        <template>
            <div>
                <ch5-template templateid="outerId"
                              context="BUTTON_prevtrack:MediaPlayer[{{idx}}].prevtrack;BUTTON_play:MediaPlayer[{{idx}}].play;BUTTON_nexttrack:MediaPlayer[{{idx}}].nexttrack;">
                </ch5-template>
            </div>
        </template>
    </ch5-list>


    <template id="transportbuttons_nextline">
        <div class="TRANSBTNS">
            <ch5-button shape="rounded-rectangle" type="text"
                        iconClass="material-icons fast_rewind"
                        receiveStateSelected="TRANSBTNS.prevtrack_selected">
            </ch5-button>
            <ch5-button shape="rounded-rectangle" type="text"
                        iconClass="material-icons play_arrow"
                        receiveStateSelected="TRANSBTNS.play_selected">
            </ch5-button>
            <ch5-button shape="rounded-rectangle" type="text"
                        iconClass="material-icons fast_forward"
                        receiveStateSelected="TRANSBTNS.nexttrack_selected">
            </ch5-button>
        </div>
    </template>


    <ch5-template id="receive"
                  templateid="transportbuttons_nextline"
                  context="TRANSBTNS:receive"></ch5-template>

    <div id="textcontent" class="b-red"
         data-ch5-textcontent="selected_button">
        [Testing ch5-template]
    </div>