Target element (div#target) content will be updated using a subscription with a join number state name. The subscription is is made using subscribeState utility function (CrComLib.subscribeState('s','22', (value) => {...}).
* By default state name is `22`, but it can be changed from JS panel code.
Use bellow field to publish it's value using event name `22`.
(CrComLib.publishEvent('s','22', textarea.value)) * Above target div content will be updated (make sure target div subscription is on)
Get last 22 state value (CrComLib.getState())
Last state value:
The red bordered element contains the value of the subscribeStateScript function for the following template string
"\" City: {{s.24}}; Number: {{ n.23}}; Number*3: \"+{{ n.23 }}*3 "
{#You will need to change both 23 and 24 in order for the value to change from the default one.#}
<div class="content">
<h3>subscribeState, unsubscribeState</h3>
<p>Target element (div#target) content will be updated using a subscription with a join number state name.
The subscription is is made using subscribeState utility function
(CrComLib.subscribeState('s','22', (value) => {...}).</p>
<p>
<span class="info">* By default state name is `22`, but it can be changed from JS panel code.</span>
</p>
<div id="target">
Waiting for state value...
</div>
</div>
<div class="content">
<h3>publishEvent</h3>
<p>
Use bellow field to publish it's value using event name `22`.
</p>
<p>
<input id="inputValueForPublishBtn" type="textarea" placeholder="Enter event string value">
<button id="btn_publish" class="button is-info" type="button">Publish</button>
(CrComLib.publishEvent('s','22', textarea.value))
<span class="info">* Above target div content will be updated (make sure target div subscription is on)</span>
</p>
<p>
<button id="btn_unsub_sig" class="button is-info" type="button">Unsubscribe state 22</button>
</p>
</div>
<div class="content">
<h3>getState</h3>
<p>Get last 22 state value (CrComLib.getState())</p>
<p>
<button id="btn_get_signal" class="button is-info" type="button">Get 22 state value</button>
</p>
<p>Last state value: <span id="sig_value"></span></p>
</div>
<div class="content">
<h3>subscribeStateScript, unsubscribeStateScript</h3>
<p>
The red bordered element contains the value of the subscribeStateScript function for the following template string
<code>"\" City: {{s.24}}; Number: {{ n.23}}; Number*3: \"+{{ n.23 }}*3 "</code>
{#You will need to change both <b>23</b> and <b>24</b> in order for the value to change from the default one.#}
</p>
<p>
<ch5-button type="info" label="Update 23: 'New York' and 24: '5'"
sendEventOnClick="update_script_signals_1"></ch5-button>
<ch5-button type="info" label="Update 23: 'London' and 24: '10'"
sendEventOnClick="update_script_signals_2"></ch5-button>
</p>
<div id="updated-element" style="border:1px solid blue"></div>
<p style="margin-top: 24px;">
<button id="btn_unsub_script" class="button is-info" type="button">Unsubscribe state script</button>
</p>
</div>
(function(){
// CrComLib.subscribeState example
const sig22SubKey = CrComLib.subscribeState('s','22', function (value) {
console.log('received 22 signal value: ', value);
document.getElementById('target').textContent = value;
});
// CrComLib.unsubscribeState example
const unsubSig22 = document.querySelector('#btn_unsub_sig');
unsubSig22.addEventListener('click', (e) => {
CrComLib.unsubscribeState('s', '22', sig22SubKey);
});
// CrComLib.publishEvent example
const publishBtn = document.querySelector('#btn_publish');
const textarea = document.querySelector('#inputValueForPublishBtn');
publishBtn.addEventListener('click', (e) => {
if (!textarea.value) {
textarea.classList.add('error');
return;
} else {
textarea.classList.remove('error');
}
console.log('publishing value(using 22 signal): ', textarea.value);
CrComLib.publishEvent('s','22', textarea.value);
});
// CrComLib.getValue example
const getSigBtn = document.querySelector('#btn_get_signal');
const sigValueDisplayEl = document.querySelector('#sig_value');
getSigBtn.addEventListener('click', (e) => {
const sigValue = CrComLib.getState('s', '22', true);
sigValueDisplayEl.textContent = sigValue;
});
// CrComLib.subscribeStateScript example
const scriptSubEl = document.querySelector('#updated-element');
const signalScript = 'CrComLib.textformat("City: {1}, Number: {2}, Number*3: {3}","{{s.24}}",{{n.23}},{{n.23}}*3)';
const callback = (result) => {
console.log(result);
scriptSubEl.textContent = result;
}
const scriptSubKey = CrComLib.subscribeStateScript(signalScript, callback, 'defaultValue');
// CrComLib.unsubscribeStateScript example
const unsubSigScriptBtn = document.querySelector('#btn_unsub_script');
unsubSigScriptBtn.addEventListener('click', (e) => {
CrComLib.unsubscribeStateScript(scriptSubKey);
});
})();
.content + .content {
margin-top: 36px;
}
#target {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px;
min-height: 68px;
border: 1px solid #c6c8ca;
border-radius: 2px;
background-color: #f7f7f7;
}
#inputValueForPublishBtn {
display: block;
width: 100%;
padding: 8px;
border: 1px solid #c6c8ca;
border-radius: 2px;
margin-bottom: 24px;
}
#inputValueForPublishBtn.error {
border: 1px solid #ff0000;
}
.info {
display: block;
font-size: 14px;
margin: 8px 0;
}
#sig_value {
border: 1px solid #c6c8ca;
padding: 4px;
border-radius: 2px;
background-color: #f7f7f7;
}