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;
}