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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; }
(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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; } .horizontal-list-item { border: 1px solid transparent; color: #155724; background-color: #d4edda; border-color: #c3e6cb; display: table; width: 100%; height: 100%; } .horizontal-list-item span { display: table-cell; vertical-align: middle; text-align: center; } .red { background-color:red; color:white; } .green { background-color:green; color:white; } .blue { background-color:blue; color:white; }
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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; }
receiveStateValue="26"
receiveStateSize="27"
receiveStateTemplateVars="28"
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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; }
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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; }
Sample text
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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; } ch5-button, #ref-element-1 { position:relative; } .cols2 { display: flex; flex-direction: row; } .cols2 > div { padding: 0 8px 0 0; } .cols2 > div + div { padding: 0 0 0 8px; }
Inherits ch5-overlay-panel for receiveState attributes.
receiveStateShow
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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; }
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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; }
<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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; } .viewcontent { width:100%; height:200px; background: #999; display: table; } .viewcontent h1 { text-align: center; vertical-align: middle; display:table-cell; }
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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; }
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>
(function(){ // TODO })();
.content + .content { margin-top: 36px; }