Here you can play with the Crestron Components Library and the Emulator by entering/modifying a JSON that defines an Emulator Scenario, by modifying component configuration or by adding/modifying HTML, JS and/or CSS
Ch5 button with an SVG icon
Ch5 image using an SVG source
The following elements are using defaults and template variables defined in the component configuration section
<div class="playground_btn_container content">
<button class="button is-info btn_playground1" type="button">Btn1</button>
<button class="button is-info btn_playground2" type="button">Btn2</button>
</div>
<ch5-button type="success"
shape="rectangle"
label="ReceiveLabelFromSignal"
receiveStateLabel="btn_receive_label"></ch5-button>
<p></p>
<p>
Ch5 button with an SVG icon
<br>
<ch5-button
label="SVG Icon"
iconClass="svg-icon"
></ch5-button>
</p>
<p>
Ch5 image using an SVG source
<br>
<ch5-image width="100px" url="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg">
</ch5-image>
</p>
<p></p>
<div class="row">
<p> The following elements are using defaults and template variables defined in the component configuration section</p>
<div>
<ch5-button></ch5-button>
<ch5-button id="btn1"></ch5-button>
<ch5-button id="btn2"></ch5-button>
</div>
<br>
<div>
<ch5-select id="volume1">
<template>
<ch5-select-option>
<i class="fas fa-{{fa-icon}}"></i>
<span>{{label}}</span>
</ch5-select-option>
</template>
</ch5-select>
</div>
</div>
<ch5-import-htmlsnippet class="buttons-page" id="buttonsPage" url="http://127.0.0.1:8082/ch5-button/ch5-button-types.html"></ch5-import-htmlsnippet>
(function(){
var btn1 = document.querySelector('.btn_playground1');
var btn2 = document.querySelector('.btn_playground2');
var sigName='btn_receive_label';
btn1.removeEventListener('click',btn1Listener);
btn2.removeEventListener('click',btn2Listener);
btn1.addEventListener('click',btn1Listener);
btn2.addEventListener('click',btn2Listener);
function btn1Listener(){
var label1='Label1';
CrComLib.publishEvent('s',sigName,label1);
}
function btn2Listener() {
var label2=CrComLib.textformat('{1} created on {2}. {1} text populated with {3}','Label',new Date(),'CrComLib.textcontent()');
CrComLib.publishEvent('s',sigName,label2);
}
})();
.my-css-class {
border: 1px dashed red;
}
.svg-icon {
background-image: url('https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg');
background-size:contain;
background-repeat:no-repeat;
width: 20px;
height: 20px;
display:inline-block;
}