Crestron Components Lib - Showcase App

Join Numbers as Signal Names

Emulator Scenario (click to expand)
{
  "cues": [
    {
      "type": "b",
      "event": "22",
      "trigger": true,
      "actions": [
        {
          "type": "b",
          "state": "22",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "n",
      "event": "26",
      "trigger": "&change",
      "actions": [
        {
          "state": "26",
          "type": "n",
          "logic": "link"
        }
      ]
    },
    {
      "type": "b",
      "event": "29",
      "trigger": true,
      "actions": [
        {
          "state": "29",
          "type": "b",
          "logic": "set",
          "value": true
        }
      ]
    },
    {
      "type": "b",
      "event": "30",
      "trigger": true,
      "actions": [
        {
          "state": "30",
          "type": "b",
          "logic": "set",
          "value": true
        }
      ]
    },
    {
      "type": "b",
      "event": "31",
      "trigger": true,
      "actions": [
        {
          "state": "31",
          "type": "b",
          "logic": "toggle"
        }
      ]
    },
    {
      "type": "b",
      "event": "trigger_pos_1",
      "trigger": true,
      "actions": [
        {
          "state": "33",
          "type": "s",
          "logic": "set",
          "value": "el-id-1"
        }
      ]
    },
    {
      "type": "b",
      "event": "trigger_pos_2",
      "trigger": true,
      "actions": [
        {
          "state": "33",
          "type": "s",
          "logic": "set",
          "value": "el-id-2"
        }
      ]
    },
    {
      "type": "b",
      "event": "trigger_pos_3",
      "trigger": true,
      "actions": [
        {
          "state": "34",
          "type": "string",
          "logic": "set",
          "value": "bottom-right"
        }
      ]
    },
    {
      "type": "b",
      "event": "trigger_pos_4",
      "trigger": true,
      "actions": [
        {
          "state": "34",
          "type": "string",
          "logic": "set",
          "value": "top-left"
        }
      ]
    },
    {
      "type": "b",
      "event": "35",
      "trigger": true,
      "actions": [
        {
          "state": "35",
          "type": "boolean",
          "logic": "set",
          "value": true
        }
      ]
    },
    {
      "type": "n",
      "event": "37",
      "trigger": "&change",
      "actions": [
        {
          "state": "36",
          "type": "n",
          "logic": "link"
        }
      ]
    },
    {
      "type": "b",
      "event": "36",
      "trigger": true,
      "actions": [
        {
          "state": "36",
          "type": "n",
          "logic": "set",
          "value": -13
        }
      ]
    },
    {
      "type": "number",
      "event": "slider.change",
      "trigger": "&change",
      "actions": [
        {
          "state": "38",
          "type": "number",
          "logic": "link"
        }
      ]
    },
    {
      "type": "number",
      "event": "sliderHigh.change",
      "trigger": "&change",
      "actions": [
        {
          "state": "39",
          "type": "number",
          "logic": "link"
        }
      ]
    },
    {
      "type": "b",
      "event": "trig1",
      "trigger": true,
      "actions": [
        {"state": "40", "value": 2, "type": "n","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "trig2",
      "trigger": true,
      "actions": [
        {"state": "40", "value": 3, "type": "n","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "41",
      "trigger": true,
      "actions": [
        {"state": "41", "value": true, "type": "b","logic": "set"},
        {"state": "42", "value": false, "type": "b","logic": "set"},
        {"state": "43", "value": false, "type": "b","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "42",
      "trigger": true,
      "actions": [
        {"state": "41", "value": false, "type": "b","logic": "set"},
        {"state": "42", "value": true, "type": "b","logic": "set"},
        {"state": "43", "value": false, "type": "b","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "43",
      "trigger": true,
      "actions": [
        {"state": "41", "value": false, "type": "b","logic": "set"},
        {"state": "42", "value": false, "type": "b","logic": "set"},
        {"state": "43", "value": true, "type": "b","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "44",
      "trigger": true,
      "actions": [
        {"state": "44", "value": true, "type": "b","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "45",
      "trigger": true,
      "actions": [
        {"state": "45", "value": "John Doe", "type": "s","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "46",
      "trigger": true,
      "actions": [
        {"state": "46", "value": 5, "type": "n","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "47",
      "trigger": true,
      "actions": [
        {"state": "47", "value": 10, "type": "n","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "48",
      "trigger": true,
      "actions": [
        {
          "state": "48",
          "type": "number",
          "logic": "increment",
          "offset": 5
        }
      ]
    },
    {
      "type": "b",
      "event": "49",
      "trigger": true,
      "actions": [
        {
          "state": "49",
          "type": "string",
          "logic": "set",
          "value": "[{\"label\":\"Rewind\",\"cssClass\":\"green\"},{\"label\":\"Play\",\"cssClass\":\"blue\"},{\"label\":\"FWD\",\"cssClass\":\"blue\"},{\"label\":\"Stop\",\"cssClass\":\"green\"},{\"label\":\"Record\",\"cssClass\":\"red\"}]"
        }
      ]
    },
    {
      "type": "b",
      "event": "50",
      "trigger": true,
      "actions": [
        {
          "state": "50",
          "type": "number",
          "logic": "increment",
          "offset": 10
        }
      ]
    }
  ],

  "onStart": [
    {
      "type": "s",
      "state": "23",
      "value": "Label received from state - emulator"
    },
    {
      "type": "s",
      "state": "24",
      "value": "He<b>ll</b>o <span style='color:red'>World</span><i style='color: blue;'>!</i>"
    },
    {
      "type": "s",
      "state": "25",
      "value": "https://www.crestron.com/Crestron/media/Crestron/GeneralSiteImages/Featured%20Pages/Digital%20Media/all-in-one.jpg"
    },
    {
      "type": "n",
      "state": "27",
      "value": "6"
    },
    {
      "state": "28",
      "type": "string",
      "value": "[{\"description\":\"North\"},{\"description\":\"South\"},{\"description\":\"East\"},{\"description\":\"West\"}]"
    },
    {
      "type": "s",
      "state": "301",
      "value": "Option 1"
    },
    {
      "type": "s",
      "state": "302",
      "value": "Option 2"
    },
    {
      "state": "32",
      "type": "s",
      "value": "<span style='color:green'>Hello</span><br/><span style='color:red'>W</span>orld!"
    },
    {
      "state": "48",
      "type": "n",
      "value": 10
    }
  ]
}

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

CH5 Button attributes that start with 'receiveState' example

All 'receiveState' attributes are validated for Join Number and if validation passes the final subscription is made with a signal name that is prefixed with `fb` (ex: attr value = 22, final subscription name will be fb22).

ch5-button

receiveStateSelected

receiveStateLabel
Button with receiveStateLabel attribute set to 23

receiveStateScriptLabelHtml
Button with receiveStateLabel attribute set to 24

<div class="content">
    <h3>ch5-button</h3>
    <p><strong>receiveStateSelected</strong></p>
    <p>
        <ch5-button type="info" label="Toggle selected by sending event '22'"
            sendEventOnClick="22"></ch5-button>
    </p>
    <p>
        <ch5-button type="success" label="Btn with receiveStateSelected='22'"
        receiveStateSelected="22"></ch5-button>
    </p>
    <p>
        <strong>receiveStateLabel</strong><br>
        Button with receiveStateLabel attribute set to <b>23</b>
        <ch5-button type="info"
            label="ReceiveLabelFromSignal"
            receiveStateLabel="23"></ch5-button>
    </p>

    <p>
        <strong>receiveStateScriptLabelHtml</strong><br>
        Button with receiveStateLabel attribute set to <b>24</b><br>
        <ch5-button type="info"
            label="ReceiveHtmlScriptLabelFromSignal"
            receiveStateScriptLabelHtml="24"></ch5-button>
    </p>
</div>

CH5 List attributes that start with 'receiveState' example

ch5-list

(receiveStateSize, receiveStateScrollTo, receiveStateTemplateVars)

<div class="content">
    <h3>ch5-list</h3>
    <p>(receiveStateSize, receiveStateScrollTo, receiveStateTemplateVars)</p>

    <p>
        <ch5-button label="Increment list size by 5" sendEventOnClick="48"></ch5-button>
        <ch5-button label="Update template vars" sendEventOnClick="49"></ch5-button>
        <ch5-button label="Increment scroll position with 10" sendEventOnClick="50"></ch5-button>
    </p>

    <ch5-list size="10"
            orientation="horizontal"
            indexId="idx"
            minWidth="250px"
            maxWidth="500px"
            minHeight="100px"
            maxHeight="150px"
            itemWidth="125px"
            itemHeight="75px"
            scrollbar="true"
            receiveStateSize="48"
            receiveStateTemplateVars="49"
            receiveStateScrollTo="50">
        <template>
            <div class="horizontal-list-item">
                <span class="{{cssClass}}">item_{{idx}} {{label}}</span>
            </div>
        </template>
    </ch5-list>
</div>


CH5 Image attributes that start with 'receiveState' example

ch5-image

receiveStateUrl="25", image URL will be received by "25" state subscription

<div class="content">
    <h3>ch5-image</h3>
    <p>receiveStateUrl="25", image URL will be received by "25" state subscription</p>
    <p>
        <ch5-image
            alt="Backyard image"
            height="200px"
            width="300px"
            receiveStateUrl="25">
        </ch5-image>
    </p>
</div>

CH5 Select attributes that start with 'receiveState' example

ch5-select

receiveStateValue="26"

receiveStateSize="27"

receiveStateTemplateVars="28"

ch5-select-option

receiveStateSelected values: 29, 30

receiveStateLabel values: 301, 302

<div class="content">
    <h3>ch5-select</h3>
    
    <p>
        <strong>receiveStateValue="26"</strong><br>
        <ch5-select size="4" indexId="Idx"
                    sendEventOnChange="26"
                    receiveStateValue="26"
                    noneSelectedPrompt="Select">
             <template>
                <ch5-select-option>
                    <span>Option {{Idx}}</span>
                </ch5-select-option>
             </template>
        </ch5-select>
    </p>
    <p>
        <strong>receiveStateSize="27"</strong><br>
        <ch5-select indexId="Index"
            receiveStateSize="27"
            noneSelectedPrompt="Select">
            <template>
                <ch5-select-option>
                    <span>Option {{Index}}</span>
                </ch5-select-option>
            </template>
        </ch5-select>
    </p>
    <p>
        <strong>receiveStateTemplateVars="28"</strong><br>
        <ch5-select size="4" indexId="Index"
            receiveStateTemplateVars="28"
            noneSelectedPrompt="Select">
            <template>
                <ch5-select-option>
                    <span>Option {{Index}} - {{description}}</span>
                </ch5-select-option>
            </template>
        </ch5-select>
    </p>

    <h3>ch5-select-option</h3>
    <p>
        <strong>receiveStateSelected values: 29, 30</strong><br>
        <ch5-select size="2" indexId="Idx" mode="panel" noneSelectedPrompt="Select">
             <template>
                <ch5-select-option sendEventOnClick="29{{Idx}}"
                                   receiveStateSelected="29{{Idx}}">
                    <span>Option {{Idx}}</span>
                </ch5-select-option>
             </template>
        </ch5-select>
    </p>
    <p>
        <strong>receiveStateLabel values: 301, 302</strong><br>
        <ch5-select size="2" indexId="Index" noneSelectedPrompt="Select">
            <template>
                <ch5-select-option useDefaultTmpl
                                   receiveStateLabel="301{{Index}}">
                </ch5-select-option>
            </template>
        </ch5-select>
    </p>
    

</div>

CH5 Toggle attributes that start with 'receiveState' example

ch5-toggle

receiveStateValue="31"

receiveStateScriptLabelHTML="32"

<div class="content">
    <h3>ch5-toggle</h3>
    <p>
        <strong>receiveStateValue="31"</strong><br>
        <ch5-toggle
            label="Alarm"
            labelOn="On"
            labeloff="Off"
            sendEventOnClick="31"
            receiveStateValue="31">
        </ch5-toggle>
    </p>

    <p>
        <strong>receiveStateScriptLabelHTML="32"</strong><br>
        <ch5-toggle
            label="receiveStateScriptLabelHTML"
            labelOn="On"
            labeloff="Off"
            receiveStateScriptLabelHtml="32">
        </ch5-toggle>
    </p>
</div>

CH5 Overlay Panel attributes that start with 'receiveState' example

ch5-overlay-panel

receiveStatePositionTo
Press this button to change the value of '33' signal to '#el-id-1'
Press this button to change the value of '33' signal to '#el-id-2'

Sample text

receiveStatePositionOffset

Press the button below to change the value of receiveStatePositionOffset to "bottom-right"

Sample text

<h3>ch5-overlay-panel</h3>
<div class="content">
    <strong>receiveStatePositionTo</strong><br>
    <div class="cols2">
        <div>
            Press this button to change the value of '33' signal to '#el-id-1'
            <br><ch5-button id="el-id-1" label="change" sendEventOnClick="trigger_pos_1"></ch5-button>
        </div>

        <div>
            Press this button to change the value of '33' signal to '#el-id-2'
            <br/><ch5-button id="el-id-2" label="change" sendEventOnClick="trigger_pos_2"></ch5-button>
        </div>
    </div>

    <ch5-overlay-panel
            show="true"
            receiveStatePositionTo="33"
            positionOffset="bottom-left"
            closable
            dismissable="false">
        <p>Sample text</p>
        <ch5-image
                id="ex1-img"
                url="https://picsum.photos/200/300/?random">
        </ch5-image>
    </ch5-overlay-panel>

</div>

<div class="content" style="margin: 450px 0 0 0;">
    <strong>receiveStatePositionOffset</strong><br>
    <ch5-button label="show overlay" sendEventOnClick="sig_trig_pulse1"></ch5-button>
    <p>
        Press the button below to change the value of receiveStatePositionOffset to "bottom-right"
        <ch5-button label="bottom-right" sendEventOnClick="trigger_pos_3"></ch5-button>
        <ch5-button label="top-left" sendEventOnClick="trigger_pos_4"></ch5-button>
    </p>

    <div id="ref-element-1" style="border: 1px solid red;width:150px;height:50px; margin-top: 300px;"></div>
    <ch5-overlay-panel
            receiveStateShowPulse="sig_trig_pulse1"
            receiveStatePositionOffset="34"
            positionTo="ref-element-1"
            positionoffset="bottom-left"
            closable
            dismissable="false">
        <p>Sample text</p>
        <ch5-image
                id="ex1-img"
                url="https://picsum.photos/150/100/?random">
        </ch5-image>
    </ch5-overlay-panel>

</div>

CH5 Modal Dialog attributes that start with 'receiveState' example

ch5-modal-dialog

Inherits ch5-overlay-panel for receiveState attributes.

receiveStateShow

Sample text

Also receiveStateShowPulse, receiveStatePositionTo and receiveStatePositionOffset will check for Join Number Signals (update emulator scenario signals as needed first).

<div class="content">
    <h3>ch5-modal-dialog</h3>
    <p>Inherits ch5-overlay-panel for receiveState attributes.</p>
    <p>
        <strong>receiveStateShow</strong><br>
        <ch5-button label="Trigger show" sendEventOnClick="35"></ch5-button><br>

        <ch5-modal-dialog receiveStateShow="35" closable>
            <span>Sample text</span>
            <ch5-image
                    id="ex1-img"
                    url="https://picsum.photos/200/300/?random">
            </ch5-image>
        </ch5-modal-dialog>
    </p>

    <p>
        Also receiveStateShowPulse, receiveStatePositionTo and receiveStatePositionOffset
        will check for Join Number Signals (update emulator scenario signals as needed first).
    </p>

</div>
Emulator Scenario (click to expand)
{
  "cues": [
    {
      "type": "b",
      "event": "100",
      "trigger": true,
      "actions": [
        {
          "state": "100",
          "type": "object",
          "logic": "set",
          "value": {
            "rcb": {
              "value": 30,
              "time": 1000
            }
          }
        }
      ]
    },
    {
      "type": "b",
      "event": "200",
      "trigger": true,
      "actions": [
        {
          "state": "200",
          "type": "object",
          "logic": "set",
          "value": {
            "rcb": {
              "value": 50,
              "time": 1000
            }
          }
        }
      ]
    },
    {
      "type": "n",
      "event": "99",
      "trigger": "&change",
      "actions": [
        {
          "state": "100",
          "type": "object",
          "logic": "link"
        },
        {
          "state": "100",
          "type": "number",
          "logic": "link"
        }
      ]
    },
    {
      "type": "n",
      "event": "199",
      "trigger": "&change",
      "actions": [
        {
          "state": "200",
          "type": "object",
          "logic": "link"
        },
        {
          "state": "200",
          "type": "number",
          "logic": "link"
        }
      ]
    }
  ],
  "onStart": [
    {
      "type": "n",
      "state": "100",
      "value": 5
    },
    {
      "type": "n",
      "state": "200",
      "value": 95
    }
  ]
}

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

CH5 Toggle attributes that start with 'receiveState' example

ch5-slider

receiveStateValue

Update the value of 36 signal to -13 ( See the Emulator section )

receiveStateValue and receiveStateValueHigh

<div class="content">
    <h3>ch5-slider</h3>
    <p><strong>receiveStateValue</strong></p>
    <p>Update the value of <b>36</b> signal to -13 ( See the Emulator section )</p>
    <p>
        <ch5-button label="Value -13" sendEventOnClick="36"></ch5-button>
    </p>
    <p>
        <ch5-slider
                ticks='{"0":"-60", "25":"-40", "50":"-20", "75":"-10", "100": "0" }'
                showTickValues="true" toolTipShowType="on"
                toolTipDisplayType="value" sendEventOnChange="37"
                receiveStateValue="36">
        </ch5-slider>
    </p>

    <p><strong>receiveStateValue and receiveStateValueHigh</strong></p>
    <div class="content">
        <p>
            <ch5-button label="RCB Value: 30" receiveStateSelected="100" sendEventOnClick="100"></ch5-button>
            <ch5-button label="RCB ValueHigh: 50" receiveStateSelected="200" sendEventOnClick="200"></ch5-button>
        </p>
    </div>
    <ch5-slider
            range="true"
            handleShape="rectangle"
            tapSettable="true"
            toolTipDisplayType="value"
            ticks='{"0":"0", "25":"25", "50":"50", "75":"75", "100": "100"}'
            showTickValues="true"
            step="5"
            toolTipShowType="on"
            sendEventOnChange="99"
            receiveStateValue="100"
            sendEventOnChangeHigh="199"
            receiveStateValueHigh="200"
    >
    </ch5-slider>
</div>

CH5 Triggerview attributes that start with 'receiveState' example

ch5-triggerview

receiveStateShow

First View

Second View

Third View

ch5-triggerview-child

receiveStateShow

First View

Second View

Third View

<h3>ch5-triggerview</h3>
<div class="content">
    <strong>receiveStateShow</strong><br>

    <ch5-button label="Activates Second View" sendEventOnClick="trig1"></ch5-button>

    <ch5-button label="Activates Third View" sendEventOnClick="trig2"></ch5-button>

    <ch5-triggerview
        receiveStateShowChildIndex="40">
        <ch5-triggerview-child>
            <div class="viewcontent">
                <h1>First View</h1>
            </div>
        </ch5-triggerview-child>
        <ch5-triggerview-child>
            <div class="viewcontent">
                <h1>Second View</h1>
            </div>
        </ch5-triggerview-child>
        <ch5-triggerview-child>
            <div class="viewcontent">
                <h1>Third View</h1>
            </div>
        </ch5-triggerview-child>
    </ch5-triggerview>
</div>

<h3>ch5-triggerview-child</h3>
<div class="content">
    <strong>receiveStateShow</strong><br>

    <ch5-button type="secondary" shape="tab" label="First"
            receiveStateSelected="41"
            sendEventOnClick="41"></ch5-button>
    <ch5-button type="secondary" shape="tab" label="Second"
        receiveStateSelected="42"
        sendEventOnClick="42"></ch5-button>
    <ch5-button type="secondary" shape="tab" label="Third"
        receiveStateSelected="43"
        sendEventOnClick="43"></ch5-button>
    <div>
        <ch5-triggerview id="demo">
            <ch5-triggerview-child receiveStateShow="41">
                <div class="viewcontent">
                    <h1>First View</h1>
                </div>
            </ch5-triggerview-child>
            <ch5-triggerview-child receiveStateShow="42">
                <div class="viewcontent">
                    <h1>Second View</h1>
                </div>
            </ch5-triggerview-child>
            <ch5-triggerview-child receiveStateShow="43">
                <div class="viewcontent">
                    <h1>Third View</h1>
                </div>
            </ch5-triggerview-child>
        </ch5-triggerview>
    </div>
</div>

CH5 Textinput attributes that start with 'receiveState' example

ch5-textinput

receiveStateFocus

receiveStateValue

<div class="content">
    <h3>ch5-textinput</h3>
    <p>
        <strong>receiveStateFocus</strong><br>
        <ch5-button
                type="info"
                sendEventOnClick="44"
                label="Focus the input">
        </ch5-button>
        <ch5-textinput
            receiveStateFocus="44"
            placeholder="Focus on me">
        </ch5-textinput>
    </p>
    <p>
        <strong>receiveStateValue</strong><br>
        <ch5-button
                type="info"
                sendEventOnClick="45"
                label="Give value to input">
        </ch5-button>
        <ch5-textinput
            receiveStateValue="45"
            feedbackMode="submit"
            placeholder="Click the button to get the value">
        </ch5-textinput>
    </p>
</div>

CH5 Spinner attributes that start with 'receiveState' example

ch5-spinner

receiveStateValue

receiveStateSize

<div class="content">
    <h3>ch5-spinner</h3>
    <p>
        <strong>receiveStateValue</strong><br>
        <ch5-spinner
            indexId="idx"
            label="item {{idx}}"
            receiveStateValue="46"
            itemHeight="40"
            size="7"></ch5-spinner>

        <ch5-button
            sendEventOnClick="46"
            label="Select item 5"></ch5-button>

    </p>
    <p>
        <strong>receiveStateSize</strong><br>
        <ch5-spinner
          label="item {{idx}}"
          indexId="idx"
          receiveStateSize="47"
          itemHeight="40"
          size="15"></ch5-spinner>

        <ch5-button
          sendEventOnClick="47"
          label="Reduce spinner size to 10"></ch5-button>
    </p>
</div>