Crestron Components Lib - Showcase App

Join Numbers as Signal Names

Emulator Scenario (click to expand) (click to collapse)
{
  "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": "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": 1, "type": "n","logic": "set"}
      ]
    },
    {
      "type": "b",
      "event": "trig2",
      "trigger": true,
      "actions": [
        {"state": "40", "value": 2, "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
        }
      ]
    },
    {
      "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"
        },
        {
          "type": "n",
          "state": "100",
          "value": 5
        },
        {
          "type": "n",
          "state": "200",
          "value": 95
        }
      ]
    }
  ],

  "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
    },
    {
      "state": "36",
      "type": "n",
      "value": -13
    }
  ]
}
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": [
      ]
    }
    

The example demonstrates the usage of join numbers as Signal names for receiveStateSelected, receiveStateLabel, and receiveStateScriptLabelHtml in the CH5 Button component.


All receiveState* attributes are validated for join numbers and, if validation passes the final subscription, is made with a signal name that is prefixed with fb (Example: for the attribute value of 22, the final subscription name will be fb22).

ch5-button

receiveStateSelected


receiveStatelabel

Button with receiveStateLabel attribute set to 23

receiveStateScriptLabelHtml

Button with receiveStateScriptLabelHtml attribute set to 24

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

</div>

The example demonstrates the usage of join numbers as signal names for receiveStateSize, receiveStateScrollTo, and receiveStateTemplateVars in the CH5 List component.

ch5-list

receiveStateSize


receiveStateScrollTo


receiveStateTemplateVars


<div class="content">
    <h3>ch5-list</h3>
    <div>
        <h4>receiveStateSize</h4>
        <ch5-button label="Increment list size by 5" sendEventOnClick="48"></ch5-button>
    </div>
    <br/>
    <div>
        <h4>receiveStateScrollTo</h4>
        <ch5-button label="Update template vars" sendEventOnClick="49"></ch5-button>
    </div>
    <br/>
    <div>
        <h4>receiveStateTemplateVars</h4>
        <ch5-button label="Increment scroll position with 10" sendEventOnClick="50"></ch5-button>
    </div>
    <br/>
    <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>


The example demonstrates the usage of join numbers as signal names for receiveStateUrl in the CH5 Image component.

ch5-image

receiveStateUrl

The image URL will be received by 25 state subscription.

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



The example demonstrates the usage of join numbers as signal names for receiveStateValue, receiveStateSize, receiveStateTemplateVars, receiveStateSelected, and receiveStateLabel in the CH5 Select component.

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>
    <div>
        <h4>receiveStateValue="26"</h4>
        <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>
    </div>
    <br/>
    <div>
        <h4>receiveStateSize="27"</h4>
        <ch5-select indexId="Index"
            receiveStateSize="27"
            noneSelectedPrompt="Select">
            <template>
                <ch5-select-option>
                    <span>Option {{Index}}</span>
                </ch5-select-option>
            </template>
        </ch5-select>
    </div>
    <br/>
    <div>
        <h4>receiveStateTemplateVars="28"</h4>
         <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>
    </div>
    
    <h3>ch5-select-option</h3> 
    <div>
        <h4>receiveStateSelected values: 29, 30</h4>
         <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>
    </div>
    <br/>
        <div>
        <h4>receiveStateLabel values: 301, 302</h4>
        <ch5-select size="2" indexId="Index" noneSelectedPrompt="Select">
            <template>
                <ch5-select-option useDefaultTmpl
                                   receiveStateLabel="301{{Index}}">
                </ch5-select-option>
            </template>
        </ch5-select>
    </div>
    <br/>
</div>

The example demonstrates the usage of join numbers as signal names for receiveStateValue and receiveStateScriptLabelHtml in CH5 Toggle component.

ch5-toggle

receiveStateValue="31"


receiveStateScriptLabelHTML="32"

<div class="content">
    <h3>ch5-toggle</h3>
    <div>
        <h4>receiveStateValue="31"</h4>
        <ch5-toggle
            label="Alarm"
            labelOn="On"
            labeloff="Off"
            sendEventOnClick="31"
            receiveStateValue="31">
        </ch5-toggle>
    </div>
    <br/>
    <div>
        <h4>receiveStateScriptLabelHTML="32"</h4>
        <ch5-toggle
            label="receiveStateScriptLabelHTML"
            labelOn="On"
            labeloff="Off"
            receiveStateScriptLabelHtml="32">
        </ch5-toggle>
    </div>
</div>

The example demonstrates the usage of join numbers as signal names for receiveStatePositionTo and receiveStatePositionOffset in CH5 Overlay Panel component.

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

<div class="content">
    <h3>ch5-overlay-panel</h3>
    <div>
        <h4>receiveStatePositionTo</h4>
        <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>
    <br/>
    <div style="margin: 450px 0 0 0;">
        <h4>receiveStatePositionOffset</h4>
        <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>
</div>


The example demonstrates the usage of join numbers as signal names for receiveStateShow and receiveStateShowPulse in the CH5 Modal Dialog component.

ch5-modal-dialog

Inherits ch5-overlay-panel for receiveState attributes.

receiveStateShow


Sample text


receiveStateShowPulse


Sample text

<div class="content">
    <h3>ch5-modal-dialog</h3>
    <p>Inherits ch5-overlay-panel for receiveState attributes.</p>
    <div>
        <h4>receiveStateShow</h4>
        <p>
            <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>
    </div>
    <br/>
        <div>
        <h4>receiveStateShowPulse</h4>
        <p>
            <ch5-button label="Trigger show by pulse" sendEventOnClick="sig_pulse_show"></ch5-button><br>

            <ch5-modal-dialog 
                receiveStateShowPulse="sig_pulse_show"
                closable
            >
                <span>Sample text</span>
                <ch5-image
                        id="ex2-img"
                        url="https://picsum.photos/200/300/?random">
                </ch5-image>
            </ch5-modal-dialog>
        </p>
    </div>
</div>

The example demonstrates the usage of join numbers as signal names for receiveStateValue, receiveStateValueHigh, and receiveStateScriptLabelHtml in the CH5 Slider component.

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>
    <div>
        <h4>receiveStateValue</h4>
        <p>Update the value of <b>36</b> signal to -13 ( See the Emulator section )</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>
    </div>
    <br/>
    <div>
        <h4>receiveStateValue and receiveStateValueHigh</h4>
        <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>
        <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>
    <br/>
</div>

The example demonstrates the usage of join numbers as signal names for receiveStateShowChildIndex and receiveStateShow in CH5 TriggerView component.

ch5-triggerview

receiveStateShowChildIndex

First View

Second View

Third View


receiveStateShow

First View

Second View

Third View

<div class="content">
    <h3>ch5-triggerview</h3>
    <div>
        <h4>receiveStateShowChildIndex</h4>
        <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>
    <br/>
    <div>
        <h4>receiveStateShow</h4>
        <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>
</div>

The example demonstrates the usage of join numbers as signal names for receiveStateFocus and receiveStateValue in CH5 Textinput component.

ch5-textinput

receiveStateFocus


receiveStateValue

<div class="content">
    <h3>ch5-textinput</h3>
    <div>
        <h4>receiveStateFocus</h4>
        <ch5-button
                type="info"
                sendEventOnClick="44"
                label="Focus the input">
        </ch5-button>
        <ch5-textinput
            receiveStateFocus="44"
            placeholder="Focus on me">
        </ch5-textinput>
    </div>
    <br/>
    <div>
        <h4>receiveStateValue</h4>
        <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>
    </div>
</div>

The example demonstrates the usage of join numbers as signal names for receiveStateValue and receiveStateSize in CH5 Spinner component.

ch5-spinner

receiveStateValue


receiveStateSize

<div class="content">
    <h3>ch5-spinner</h3>
    <div>
        <h4>receiveStateValue</h4>
        <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>
    </div>
    <br/>
    <div>
        <h4>receiveStateSize</h4>
        <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>
    </div>
</div>