Crestron Components Lib - Showcase App

ch5-select: single selection specific attributes

Emulator Scenario (click to expand) (click to collapse)
    {
  "cues": [
    {
      "type": "number",
      "event": "volume_select_index_1",
      "trigger": "&change",
      "actions": [
        {
          "state": "volume_select_index_selected_1",
          "type": "number",
          "logic": "link"
        }
      ]
    },
    {
      "type": "number",
      "event": "volume_select_index_2",
      "trigger": "&change",
      "actions": [
        {
          "state": "volume_select_index_selected_2",
          "type": "number",
          "logic": "set",
          "value": 2
        }
      ]
    },
    {
      "type": "boolean",
      "event": "resetSelection",
      "trigger": true,
      "actions": [
        {
          "state": "volume_select_index_selected_2",
          "type": "number",
          "logic": "set",
          "value": 0
        }
      ]
    },
    {
      "type": "boolean",
      "event": "volume_select_1_on_click_1",
      "trigger": true,
      "actions": [
        {
          "state": "volume_select_index_selected_3",
          "type": "number",
          "logic": "set",
          "value": 1
        }
      ]
    },
    {
      "type": "boolean",
      "event": "volume_select_2_on_click_1",
      "trigger": true,
      "actions": [
        {
          "state": "volume_select_index_selected_3",
          "type": "number",
          "logic": "set",
          "value": 2
        }
      ]
    },
    {
      "type": "boolean",
      "event": "volume_select_3_on_click_1",
      "trigger": true,
      "actions": [
        {
          "state": "volume_select_index_selected_3",
          "type": "number",
          "logic": "set",
          "value": 3
        }
      ]
    },
    {
      "type": "boolean",
      "event": "volume_select_4_on_click_1",
      "trigger": true,
      "actions": [
        {
          "state": "volume_select_index_selected_3",
          "type": "number",
          "logic": "set",
          "value": 4
        }
      ]
    },
    {
      "type": "boolean",
      "event": "volume_select_1_on_click_2",
      "trigger": true,
      "actions": [
        {
          "state": "volume_select_index_selected_4",
          "type": "number",
          "logic": "set",
          "value": 1
        }
      ]
    },
    {
      "type": "boolean",
      "event": "volume_select_2_on_click_2",
      "trigger": true,
      "actions": [
        {
          "state": "volume_select_index_selected_4",
          "type": "number",
          "logic": "set",
          "value": 2
        }
      ]
    },
    {
      "type": "boolean",
      "event": "volume_select_3_on_click_2",
      "trigger": true,
      "actions": [
        {
          "state": "volume_select_index_selected_4",
          "type": "number",
          "logic": "set",
          "value": 3
        }
      ]
    },
    {
      "type": "boolean",
      "event": "volume_select_4_on_click_2",
      "trigger": true,
      "actions": [
        {
          "state": "volume_select_index_selected_4",
          "type": "number",
          "logic": "set",
          "value": 4
        }
      ]
    },
    {
      "type": "boolean",
      "event": "selectOpt3",
      "trigger": true,
      "actions": [
        {
          "state": "option_3_selected",
          "type": "boolean",
          "logic": "set",
          "value": true
        }
      ]
    },
    {
      "type": "boolean",
      "event": "unselectOpt3",
      "trigger": true,
      "actions": [
        {
          "state": "option_3_selected",
          "type": "boolean",
          "logic": "set",
          "value": false
        }
      ]
    }
  ],
  "onStart": [
    {
      "type": "b",
      "state": "option_3_selected",
      "value": false
    }
  ]
}
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": [
      ]
    }
    
Component Configuration (click to expand)
{
  "templatevariables": {
    "id": {
      "volume": [
          {"label":"Down", "fa-icon": "volume-down"},
          {"label":"Up", "fa-icon": "volume-up"},
          {"label":"Mute", "fa-icon": "volume-off"},
          {"label":"Speaker", "fa-icon": "phone-volume"}
        ]
    }
  }
}

Press the Load button to load the configuration.

Ch5 components can be preconfigured with default values for attributes and for templatevariables. The configuration can be done using Ch5Config and its methods:

  • loadConfig(config:TCh5Config) loads a new configuration and overrides the existing one.
  • setAttributeForId(elementId:string, attributeName:string, attributeValue:string) sets an attributeValue for an attributeName of the specified HTML elementId.
  • setAttributeForComponent(componentName:string, attributeName:string, attributeValue:string) sets an attributeValue for an attributeName of the specified ch5 component (componentName).
  • setTemplateVarsForId(elementId:string, tempVarsItems:any[]) sets the template variables for the ch5 component that have the specified elementId.
  • getConfig() returns the current configuration object.
  • getAttributesForId(elementId:string):TCh5ConfigAttributes returns the configrued attributes for the component that have the specified elementId.
  • getAttributesForComponent(componentName:string):TCh5ConfigAttributes returns all configured attributes for the component specified in componentName ( for example 'ch5-button').
  • getTemplateVarsForElementById(elementId:string):TCh5ConfigTemplateVars[] returns the configured template variables for the component that have the specified elementId.
  • getAttributesForElement(cr:Ch5Common):TCh5ConfigAttributes returns all configured attributes for a CH5 component.
  • getTemplateVarsForElement(cr:Ch5Common):TCh5ConfigTemplateVars[] returns all configured templatevariables for a CH5 component.


type TCh5ConfigAttributes={
    [attrName:string]: string
}
type TCh5ConfigTemplateVars={
    [varName:string]: string
}
type TCh5Config={
    "attributes": {
        "id": {
            [id:string]:TCh5ConfigAttributes
        },
        "component": {
            [component:string]:TCh5ConfigAttributes
        }
    },
    "templatevariables": {
        "id": {
            [id:string]:TCh5ConfigTemplateVars[]
        }
    }
}

ch5-select: single selection

Attributes used:

  • - sendEventOnChange
  • - ch5-select-option.sendEventOnClick
  • - signalValueSyncTimeout (The default value is 1500ms)
  • - selectedValue (it will always contain the selected option index)
  • - receiveStateValue
  • - receiveStateSelected
  • - custom change event initiated when option selection has changed

On option click, sendEventOnChange is sent with option index value. The option is marked as selected on UI, then receiveStateValue is expected to confirm the selection within signalValueSyncTimeout ms. If receiveStateValue signal is returning other value or the no new value is received, then the selection is reset.

Examples using ch5-select-option.sendEventOnClick instead of sendEventOnChange

On this example you can also see the custom change event (see console logs)

receiveStateSelected example

In this example receiveStateValue will always return 2. If you select other option than 2, after signalValueSyncTimeout ms your selection will be reset to previous state.

Reset selection using receiveStateValue set to 0

<div class="row">
    <p>On option click, <strong>sendEventOnChange</strong> is sent with option index value. The option is marked as
    selected on UI, then <strong>receiveStateValue</strong> is expected to confirm the selection within
    <strong>signalValueSyncTimeout</strong> ms. If receiveStateValue signal is returning other value or the no new
    value is received, then the selection is reset.</p>
    
    <ch5-select id="volume"
                 size="4" indexId="Idx"
                 sendEventOnChange="volume_select_index_1"
                 receiveStateValue="volume_select_index_selected_1"
                 noneSelectedPrompt="Select">
         <template>
            <ch5-select-option>
                <i class="fas fa-{{fa-icon}}"></i>
                <span>{{label}}</span>
            </ch5-select-option>
         </template>
    </ch5-select>
    
</div>

<div class="row">
    <p>Examples using <strong>ch5-select-option.sendEventOnClick</strong> instead of
    <strong>sendEventOnChange</strong></p>
    
    <ch5-select id="volume"
                 size="4" indexId="Idx"
                 receiveStateValue="volume_select_index_selected_3"
                 noneSelectedPrompt="Select">
         <template>
            <ch5-select-option sendEventOnClick="volume_select_{{Idx}}_on_click_1">
                <i class="fas fa-{{fa-icon}}"></i>
                <span>{{label}}</span>
            </ch5-select-option>
         </template>
    </ch5-select>
    
</div>

<div class="row">
    <p>On this example you can also see the custom change event (see console logs)</p>
    
    <ch5-select id="volume" class="with-on-change" selectedValue="4"
                 size="4" indexId="Idx" mode="panel"
                 receiveStateValue="volume_select_index_selected_4"
                 noneSelectedPrompt="Select">
         <template>
            <ch5-select-option sendEventOnClick="volume_select_{{Idx}}_on_click_2">
                <i class="fas fa-{{fa-icon}}"></i>
                <span>{{label}}</span>
            </ch5-select-option>
         </template>
    </ch5-select>
    
</div>

<div class="row">
    <p><strong>receiveStateSelected</strong> example</p>
    
    <ch5-select size="4" indexId="Idx" mode="panel" noneSelectedPrompt="Select">
         <template>
            <ch5-select-option sendEventOnClick="option_{{Idx}}_on_click"
                                receiveStateSelected="option_{{Idx}}_selected">
                <span>Option {{Idx}}</span>
            </ch5-select-option>
         </template>
    </ch5-select>
    

    <p style="margin-top: 24px;">
        <ch5-button label="Select option 3" sendEventOnClick="selectOpt3"></ch5-button>
        <ch5-button label="Unselect option 3" sendEventOnClick="unselectOpt3"></ch5-button>
    </p>
</div>

<div class="row">
    <p>In this example <strong>receiveStateValue</strong> will always return 2. If you select other option than 2,
    after signalValueSyncTimeout ms your selection will be reset to previous state.</p>
    
    <ch5-select id="volume" selectedValue="4"
                 size="4" indexId="Idx" mode="panel"
                 sendEventOnChange="volume_select_index_2"
                 receiveStateValue="volume_select_index_selected_2"
                 noneSelectedPrompt="Select">
         <template>
            <ch5-select-option>
                <i class="fas fa-{{fa-icon}}"></i>
                <span>{{label}}</span>
            </ch5-select-option>
         </template>
    </ch5-select>
    
    <p>Reset selection using receiveStateValue set to 0</p>
    <p><ch5-button label="Reset selection" sendEventOnClick="resetSelection"></ch5-button></p>
</div>