Crestron Components Lib - Showcase App

data-ch5-appendclass

Emulator Scenario (click to expand)
{
  "cues": [
    {
      "type": "boolean",
      "event": "trigger_1",
      "trigger": true,
      "actions": [
        {
          "state": "security_system_mode_class",
          "type": "s",
          "logic": "set",
          "value": "blinking_red"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_2",
      "trigger": true,
      "actions": [
        {
          "state": "security_system_mode_class",
          "type": "s",
          "logic": "set",
          "value": ""
        },
        {
          "state": "security_system_mode_text",
          "type": "s",
          "logic": "set",
          "value": "Unarmed"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_6",
      "trigger": true,
      "actions": [
        {
          "state": "security_system_mode_class",
          "type": "s",
          "logic": "set",
          "value": ""
        },
        {
          "state": "security_system_mode_text",
          "type": "s",
          "logic": "set",
          "value": "Armed Away"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_3",
      "trigger": true,
      "actions": [
        {
          "state": "security_system_mode_class_2",
          "type": "s",
          "logic": "set",
          "value": "blinking_blue"
        },
        {
          "state": "security_system_mode_text_2",
          "type": "s",
          "logic": "set",
          "value": "Armed Away"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_4",
      "trigger": true,
      "actions": [
        {
          "state": "security_system_mode_class_2",
          "type": "s",
          "logic": "set",
          "value": "blinking_red"
        },
        {
          "state": "security_system_mode_text_2",
          "type": "s",
          "logic": "set",
          "value": "Warning. Alarm countdown triggered!"
        }
      ]
    },
    {
      "type": "boolean",
      "event": "trigger_5",
      "trigger": true,
      "actions": [
        {
          "state": "security_system_mode_class_2",
          "type": "s",
          "logic": "set",
          "value": "disarmed black"
        },
        {
          "state": "security_system_mode_text_2",
          "type": "s",
          "logic": "set",
          "value": "Disarmed :)"
        }
      ]
    }

  ],
  "onStart":[
    {
      "state": "security_system_mode_text",
      "type": "s",
      "value": "Armed Away"
    },
    {
      "state": "security_system_mode_class",
      "type": "s",
      "value": ""
    },
    {
      "state": "security_system_mode_text_2",
      "type": "s",
      "value": "Unarmed"
    },
    {
      "state": "security_system_mode_class_2",
      "type": "s",
      "value": ""
    },
    {
      "state": "security_system_mode_class_3",
      "type": "s",
      "value": ""
    }
  ]
}

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": [
      ]
    }
    

data-ch5-appendclass

The 'data-ch5-appendclass' custom HTML attribute appends the value of a signal to the 'class' attribute on a standard HTML element. A change in the value of the signal will remove the prior value of the signal and append the new value. As example, for an alarm system application is to have text display state of "Armed Away" until homeowner opens a door in which there is a short period to enter a code. During the period of entering code, the text of "Armed Away" turns red and blinks on and off. After code is entered, the display state is "Unarmed" and the text no longer is red and blinks on and off.

Initially the signals are as follows: Signal security_system_mode_text is set to "Armed Away" and signal security_system_mode_class is set to empty "". When door is opened Signal security_system_mode_class is changed to "blinking_red" which changes the "Armed Away" color to red and alternating visibility based upon the class "blinking_red" added to the span elements CSS class list. When code is entered, Signal security_system_mode_text is set to "Unarmed" and signal security_system_mode_class is set to empty "".

Security System mode:

DOM mutations example

Open console to see signal subscription updates (no arm, trigger, disarm data-ch5-appendclass signals set for this new value)


    <div class="alarm-system b-blue">
        Security System mode:
        <span class="alarm-status"
              data-ch5-textcontent="security_system_mode_text"
              data-ch5-appendclass="security_system_mode_class">
        </span>
    </div>

    <p>
        <ch5-button sendEventOnClick="trigger_1" label="Homeowner opens a door"></ch5-button>
        <ch5-button sendEventOnClick="trigger_2" label="Homeowner enters the code"></ch5-button>
        <ch5-button sendEventOnClick="trigger_6" label="Arm"></ch5-button>
    </p>

    <div id="mutations-parent" style="margin-top: 68px;">
        <p><strong>DOM mutations example</strong></p>
        <p>
            <ch5-button id="add" label="Add new el with data-ch5-appendclass attr"></ch5-button>
        </p>
        <p>
            <ch5-button id="update" label="Update data-ch5-appendclass attr"></ch5-button>
            <span> Open console to see signal subscription updates (no arm, trigger, disarm data-ch5-appendclass signals set for this new value)</span>
        </p>
        <p>
            <ch5-button id="remove" label="Remove el with data-ch5-appendclass attr"></ch5-button>
        </p>
        <p>
            <ch5-button sendEventOnClick="trigger_3" label="Arm"></ch5-button>
            <ch5-button sendEventOnClick="trigger_4" label="Homeowner opens a door"></ch5-button>
            <ch5-button sendEventOnClick="trigger_5" label="Homeowner enters the code"></ch5-button>
        </p>

    </div>