<div class="custom-div">
<p><strong>Example 1:</strong> ch5-select in mode plain. Each option description is set from global config
"templatevariables" (in this case).</p>
<ch5-select id="direction_select" size="4" indexId="Index" noneSelectedPrompt="Select">
<template>
<ch5-select-option>
<div>
<i class="fas fa-arrow-{{fa-icon}}"></i>
<span>item_{{Index}} {{description}}</span>
</div>
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="custom-div">
<p><strong>Example 2:</strong> ch5-select, multiselect=false, default template, iconPosition=first</p>
<ch5-select id="singleselect-icon-first" size="4" indexId="Index" noneSelectedPrompt="Select">
<template>
<ch5-select-option sendEventOnClick="user_select_clicked_{{Index}}" useDefaultTmpl
receiveStateLabel="label_signal_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="custom-div">
<p><strong>Example 3:</strong> ch5-select, multiselect=false, default template, iconPosition=last</p>
<ch5-select id="singleselect-icon-last" size="4" indexId="Index" noneSelectedPrompt="Select"
mode="panel">
<template>
<ch5-select-option sendEventOnClick="user_select_clicked_{{Index}}"
useDefaultTmpl iconPosition="last"
receiveStateLabel="label_signal_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="custom-div">
<p><strong>Example 4:</strong> ch5-select, multiselect=true, default template and iconPosition=first</p>
<p>
<strong>Note: </strong> for all multiselect examples option labels are set using the same receiveStateLabel
signals set. Also, receiveStateUrl signals are providing default template image URL.<br><br>
Since ch5-toggle has no receiveStateSelected attribute, ch5-select-option.receiveStateSelected is also used
to set ch5-toggle.receiveStateValue.<br><br>
For multiselect with default template ch5-select-option.sendEventOnClick
is not sent by option element, it is assigned to ch5-toggle.
</p>
<ch5-select id="multiselect_1" size="4" indexId="Index" noneSelectedPrompt="Select"
mode="panel" multiselect>
<template>
<ch5-select-option sendEventOnClick="multiselect_1_clicked_{{Index}}"
receiveStateSelected="multiselect_1_selected_{{Index}}"
useDefaultTmpl
receiveStateLabel="label_signal_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="custom-div">
<p><strong>Example 5:</strong> ch5-select, multiselect=true, default template and iconPosition=last</p>
<ch5-select id="multiselect_2" size="4" indexId="Index" noneSelectedPrompt="Select"
mode="panel" multiselect>
<template>
<ch5-select-option sendEventOnClick="multiselect_2_clicked_{{Index}}"
receiveStateSelected="multiselect_2_selected_{{Index}}"
useDefaultTmpl iconPosition="last"
receiveStateLabel="label_signal_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="custom-div">
<p><strong>Example 6:</strong> ch5-select, multiselect=true, default template and receiveStateScriptLabelHTML</p>
<p>- receiveStateScriptLabelHTML signal is used to set ch5-toggle label</p>
<ch5-select id="multiselect_3" size="4" indexId="Index" noneSelectedPrompt="Select"
mode="panel" multiselect>
<template>
<ch5-select-option sendEventOnClick="multiselect_3_clicked_{{Index}}"
receiveStateSelected="multiselect_3_selected_{{Index}}"
useDefaultTmpl
receiveStateLabel="label_signal_{{Index}}"
receiveStateScriptLabelHTML="receive_html_script_label_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="custom-div">
<p><strong>Example 7:</strong> ch5-select, multiselect=false, feedbackMode=submit and default template.</p>
<ch5-select id="default_tmpl_f_submit_single"
size="4" indexId="Idx"
receiveStateValue="item_selected_after_click"
feedbackMode="submit"
noneSelectedPrompt="Select"
mode="panel">
<template>
<ch5-select-option sendEventOnClick="select_item_{{Idx}}_on_click"
useDefaultTmpl
receiveStateLabel="label_signal_{{Idx}}"
receiveStateUrl="receive_image_url_{{Idx}}">
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px;">
Dirty: <span id="dirty-select-1"></span><br><br>
<ch5-button id="submit-btn-1" label="Submit"></ch5-button>
<ch5-button id="reset-btn-1" label="Reset"></ch5-button>
</p>
</div>
<div class="custom-div">
<p><strong>Example 8:</strong> ch5-select, multiselect=true, feedbackMode=submit and default template.</p>
<ch5-select id="default_tmpl_f_submit_multi"
size="4" indexId="Idx"
feedbackMode="submit"
noneSelectedPrompt="Select options(s)"
mode="panel" multiselect>
<template>
<ch5-select-option sendEventOnClick="multiselect_4_clicked_{{Idx}}"
receiveStateSelected="multiselect_4_selected_{{Idx}}"
useDefaultTmpl
receiveStateLabel="label_signal_{{Idx}}"
receiveStateUrl="receive_image_url_{{Idx}}">
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px;">
Dirty: <span id="dirty-select-2"></span><br><br>
<ch5-button id="submit-btn-2" label="Submit"></ch5-button>
<ch5-button id="reset-btn-2" label="Reset"></ch5-button>
</p>
</div>
<div class="custom-div">
<!-- TODO: remove this after issues are fixed -->
<strong>Issues using default template for multiselect:</strong>
<ul>
<li>using receiveStateScriptLabelHTML, UI looks bad with 2 labels (option label provided by receiveStateLabel) and
ch5-toggle label (provided by receiveStateScriptLabelHTML)</li>
<li>No way to set on/off ch5-toggle labels, unless we add 2 more new attributes on ch5-select-option</li>
</ul>
</div>
(function(){
const updateDirty = (container, selectEl) => {
container.innerHTML = selectEl.getDirty();
};
const initActions = (selectSelector, dirtyContainerSelector, submitBtnSelector, resetBtnSelector) => {
let dirtyValContainer = document.getElementById(dirtyContainerSelector);
let select = document.getElementById(selectSelector);
updateDirty(dirtyValContainer, select);
select.addEventListener('change', (e) => {
updateDirty(dirtyValContainer, select);
});
select.addEventListener('dirty', (e) => {
updateDirty(dirtyValContainer, select);
});
select.addEventListener('clean', (e) => {
updateDirty(dirtyValContainer, select);
});
let submitBtn = document.getElementById(submitBtnSelector);
submitBtn.addEventListener('click', (e) => {
select.submit();
updateDirty(dirtyValContainer, select);
});
let resetBtn = document.getElementById(resetBtnSelector);
resetBtn.addEventListener('click', (e) => {
select.reset();
updateDirty(dirtyValContainer, select);
});
};
initActions('default_tmpl_f_submit_single', 'dirty-select-1', 'submit-btn-1', 'reset-btn-1');
initActions('default_tmpl_f_submit_multi', 'dirty-select-2', 'submit-btn-2', 'reset-btn-2');
})();
.custom-div {
padding: 24px 0;
display: inline-block;
width: 100%;
}
.ch5-select__panel__item:not(.ch5-select__panel__item--selected) {
border: 1px solid #f8f9fa;
}
.ch5-select .ch5-select__panel__item__default_tmpl > *:not(:last-child){
margin-right: 16px;
}
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": [
]
}