Crestron Components Lib - Showcase App

ch5-template receive state, send event

Emulator Scenario (click to expand) 
{
  "cues": [
    {
      "type": "boolean",
      "event": "directv.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": "directv.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": "directv.nexttrack_clicked",
      "trigger": true,
      "actions": [
        {
          "state": "selected_button",
          "type": "s",
          "logic": "set",
          "value": "next button clicked"
        },
        {
          "state": "receive.nexttrack_selected",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "directv.record_clicked",
      "trigger": true,
      "actions": [
        {
          "state": "selected_button",
          "type": "s",
          "logic": "set",
          "value": "record button clicked"
        },
        {
          "state": "receive.record_selected",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "directv.stop_clicked",
      "trigger": true,
      "actions": [
        {
          "state": "selected_button",
          "type": "s",
          "logic": "set",
          "value": "stop button clicked"
        },
        {
          "state": "receive.stop_selected",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "directv.pause_clicked",
      "trigger": true,
      "actions": [
        {
          "state": "selected_button",
          "type": "s",
          "logic": "set",
          "value": "pause button clicked"
        },
        {
          "state": "receive.pause_selected",
          "type": "boolean",
          "logic": "toggle"
        }
      ]
    }
  ],
  "onStart":[
    {
      "state": "selected_button",
      "type": "s",
      "value": "no button clicked"
    }
  ]
}

Press the Load button to load the scenario.

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

The Emulator Scenario JSON contains an array of cues and an optional array onStart A cue is defined by: type:string, signal:string, trigger:boolean|string|number, actions:array. An action is defined by: type:string, signal:string, logic:string ... plus other fields ( depending on type)

type for cue or for action can be the string:

  • b or boolean - for a boolean signal
  • n or number or numeric - for a number signal
  • s or string - for a string signal
  • o or object - for an object signal

signal for cue or for action is a string representing the name of the signal:

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

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. {"signal":"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 to incrementby. ie. {"signal":"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 to decrement by. ie. {"signal":"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 signal of RCB type:
{ "rcb":{ "value": numeric_value, "time": duration_in_ms } }
Scenario example: 


    {
      "cues": [
        {
          "type": "boolean",
          "signal": "trigger",
          "trigger": true,
          "actions": [
            {
              "signal": "action1",
              "type": "boolean",
              "logic": "toggle"
            },
            {
                "signal": "rcb_signal",
                "type": "object",
                "logic": "set",
                "value": {
                    "rcb":{
                        "value": 101,
                        "time": 1500
                    }
                }
            }
          ]
        }
      ],
      "onStart": [
      ]
    }

send and receive signals for components used with ch5-template(s)

All the buttons below are generated via ch5-template. When a button from the second row is clicked the corresponding button from the row above will be toggled.

The first ch5-template will receive an attribute "templateId" which represents the id of the template it needs to generate, in this case the id will be: "transportbuttons". The second attribute is the context: "TRANSBTNS:receive".

  • The first substring before the colon represents the original name of the signal while the second one represents the replacement name.
  • Therefore if a component has a receiveStateSelected="TRANSBTNS.prevtrack_selected" attribute, its value will become receiveStateSelected="receive.prevtrack_selected"
[Testing ch5-template]

The template can be reused again by providing another ch5-template, in this case the context is identical so the same signals will be used. 

    <p>
        All the buttons below are generated via ch5-template.
        When a button from the second row is clicked the corresponding button from the row above will be toggled.
    </p>

    <p>The first ch5-template will receive an attribute <i>"templateId"</i> which represents the id of the template it
        needs to
        generate, in this case the id will be: <i>"transportbuttons"</i>. The second attribute is the context:
        "TRANSBTNS:receive". </p>
    <ul>
        <li>
            The
            first substring before the colon represents the original name of the signal while the second one
            represents the replacement name.
        </li>
        <li>Therefore if a component has a receiveStateSelected="<i><b>TRANSBTNS</b>.prevtrack_selected"</i> attribute,
            its value will
            become receiveStateSelected="<i><b>receive</b>.prevtrack_selected"</i>
        </li>
    </ul>

    <template id="transportbuttons">
        <div class="TRANSBTNS">
            <ch5-button customClass="trnsbtns__prev"
                        id="TRANSBTNS.prevtrack"
                        shape="rounded-rectangle"
                        iconClass="material-icons fast_rewind"
                        sendEventOnClick="TRANSBTNS.prevtrack_clicked"
                        receiveStateSelected="TRANSBTNS.prevtrack_selected">
            </ch5-button>
            <ch5-button customClass="trnsbtns__play"
                        id="TRANSBTNS.play"
                        shape="rounded-rectangle"
                        iconClass="material-icons play_arrow"
                        sendEventOnClick="TRANSBTNS.play_clicked"
                        receiveStateSelected="TRANSBTNS.play_selected">
            </ch5-button>
            <ch5-button customClass="trnsbtns__next"
                        id="TRANSBTNS.nexttrack"
                        shape="rounded-rectangle"
                        iconClass="material-icons fast_forward"
                        sendEventOnClick="TRANSBTNS.nexttrack_clicked"
                        receiveStateSelected="TRANSBTNS.nexttrack_selected">
            </ch5-button>
            <ch5-button customClass="trnsbtns__record"
                        id="TRANSBTNS.record"
                        shape="rounded-rectangle"
                        iconClass="material-icons fiber_manual_record"
                        sendEventOnClick="TRANSBTNS.record_clicked"
                        receiveStateSelected="TRANSBTNS.record_selected">
            </ch5-button>
            <ch5-button customClass="trnsbtns__stop"
                        id="TRANSBTNS.stop"
                        shape="rounded-rectangle"
                        iconClass="material-icons stop"
                        sendEventOnClick="TRANSBTNS.stop_clicked">
            </ch5-button>
            <ch5-button customClass="trnsbtns__pause"
                        id="TRANSBTNS.pause"
                        shape="rounded-rectangle"
                        iconClass="material-icons pause"
                        sendEventOnClick="TRANSBTNS.pause_clicked"
                        receiveStateSelected="TRANSBTNS.pause_selected">
            </ch5-button>
        </div>
    </template>
    <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>
            <ch5-button shape="rounded-rectangle" type="text"
                        iconClass="material-icons fiber_manual_record"
                        receiveStateSelected="TRANSBTNS.record_selected">
            </ch5-button>
            <ch5-button shape="rounded-rectangle" type="text"
                        iconClass="material-icons stop"
                        receiveStateSelected="TRANSBTNS.stop_selected">
            </ch5-button>
            <ch5-button shape="rounded-rectangle" type="text"
                        iconClass="material-icons pause"
                        receiveStateSelected="TRANSBTNS.pause_selected">
            </ch5-button>
        </div>
    </template>


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

    <ch5-template id="directv"
                  receiveStateShow="directv.show"
                  templateid="transportbuttons"
                  context="TRANSBTNS:directv"></ch5-template>

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

    <p>
        The template can be reused again by providing another ch5-template, in this case the context is identical so the
        same signals will be used.
    </p>

    <ch5-template id="directv"
                  receiveStateShow="directv.show"
                  templateid="transportbuttons"
                  context="TRANSBTNS:directv"></ch5-template>