442 lines
12 KiB
JavaScript
442 lines
12 KiB
JavaScript
class EventBox extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: 'open' });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
.outer-container {
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
border: 1px solid #ccc;
|
|
padding: 5px 20px 5px 20px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
|
width:90%;
|
|
}
|
|
.select-container {
|
|
margin-bottom: 15px;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
.row > * {
|
|
flex: 0 0 calc(50% - 20px);
|
|
margin-bottom: 15px;
|
|
}
|
|
.row:last-child {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 1px;
|
|
}
|
|
select, input[type="range"], input[type="color"] {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
width: 100%;
|
|
}
|
|
select{
|
|
width: 90%;
|
|
font-size: large;
|
|
height: auto;
|
|
}
|
|
input[type="color"] {
|
|
height: 30px;
|
|
padding: 0;
|
|
width: 30px;
|
|
}
|
|
.checkbox-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: left;
|
|
}
|
|
.try-button-container {
|
|
display: flex;
|
|
justify-content: right;
|
|
width: 100%;
|
|
}
|
|
button {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.center-text {
|
|
text-align: center;
|
|
font-size: larger;
|
|
font-weight: bold;
|
|
}
|
|
input[type="checkbox"] {
|
|
transform: scale(2.5);
|
|
margin-left: 20px;
|
|
}
|
|
input[type="checkbox"].css-checkbox + label.css-label {
|
|
display: inline-block;
|
|
margin-left: 30px;
|
|
}
|
|
.label-check{
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
<div class="outer-container">
|
|
<div class="container">
|
|
<legend class="center-text" id="center-text">Event0</legend><br>
|
|
<div class="row">
|
|
<div>
|
|
<label for="animation-list" id="list-label">Animations:</label>
|
|
<select id="animation-list">
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<hue-select id="hue-selector"></hue-select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div>
|
|
<label for="speed" id="speed-label">Speed:</label>
|
|
<input type="range" id="speed" min="1" max="10">
|
|
</div>
|
|
<div>
|
|
<label for="huerange" id="huerange-label">Hue Range:</label>
|
|
<input type="range" id="huerange" min="0" max="100">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div>
|
|
<label for="param1" id="param1-label">Param1:</label>
|
|
<input type="range" id="param1" min="0" max="50">
|
|
</div>
|
|
<div>
|
|
<label for="param2" id="param2-label">Param2:</label>
|
|
<input type="range" id="param2" min="0" max="100">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="check1">
|
|
<label class="label-check" id="check1-label">Check1</label>
|
|
</div>
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="check3">
|
|
<label class="label-check" id="check3-label">Check3</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="check2">
|
|
<label class="label-check" id="check2-label">Check2</label>
|
|
</div>
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="check4">
|
|
<label class="label-check" id="check4-label">50% Lum</label>
|
|
<div class="try-button-container">
|
|
<button id="try-button">Try</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
`;
|
|
this.Title = this.shadowRoot.querySelector('#center-text');
|
|
this.hueSelect = this.shadowRoot.querySelector('#hue-selector');
|
|
this.AnimationList = this.shadowRoot.getElementById('animation-list');
|
|
this.Speed = this.shadowRoot.getElementById('speed');
|
|
this.HueRange = this.shadowRoot.querySelector('#huerange');
|
|
this.Param1 = this.shadowRoot.querySelector('#param1');
|
|
this.Param2 = this.shadowRoot.querySelector('#param2');
|
|
this.Check1 = this.shadowRoot.querySelector('#check1');
|
|
this.Check2 = this.shadowRoot.querySelector('#check2');
|
|
this.Check3 = this.shadowRoot.querySelector('#check3');
|
|
this.Check4 = this.shadowRoot.querySelector('#check4');
|
|
|
|
this.AnimationListLabel = this.shadowRoot.querySelector('#list-label');
|
|
this.SpeedLabel = this.shadowRoot.querySelector('#speed-label');
|
|
this.HueRangeLabel = this.shadowRoot.querySelector('#huerange-label');
|
|
this.Param1Label = this.shadowRoot.getElementById('param1-label');
|
|
this.Param2Label = this.shadowRoot.getElementById('param2-label');
|
|
this.Check1Label = this.shadowRoot.getElementById('check1-label');
|
|
this.Check2Label = this.shadowRoot.getElementById('check2-label');
|
|
this.Check3Label = this.shadowRoot.getElementById('check3-label');
|
|
this.Check4Label = this.shadowRoot.getElementById('check4-label');
|
|
|
|
this.AnimationPropsJson;
|
|
|
|
this.SpeedCaption = "";
|
|
this.HueRangeCaption = "";
|
|
this.Param1Caption = "";
|
|
this.Param2Caption = "";
|
|
this.Check1Caption = "";
|
|
this.Check2Caption = "";
|
|
this.Check3Caption = "";
|
|
|
|
this.setSpeedCaption(`Speed: `);
|
|
this.Speed.min = 0;
|
|
this.Speed.max = 100;
|
|
|
|
this.setHueRangeCaption(`Hue Range: `);
|
|
this.HueRange.min = 0;
|
|
this.HueRange.max = 360;
|
|
|
|
this.setParam1Caption(`Param1: `);
|
|
this.Param1.min = 0;
|
|
this.Param1.max = 100;
|
|
|
|
this.setParam2Caption(`Param2: `);
|
|
this.Param2.min = 0;
|
|
this.Param2.max = 100;
|
|
|
|
this.setCheck1Caption(`Check1`);
|
|
this.setCheck2Caption(`Check2`);
|
|
this.setCheck3Caption(`Check3`);
|
|
this.setCheck4Caption(`50% Lum`);
|
|
|
|
this.Index = 0;
|
|
|
|
this.Speed.addEventListener('input', () => { this.updateSpeedLabel(); });
|
|
this.HueRange.addEventListener('input', () => { this.updateHueRangeLabel(); });
|
|
this.Param1.addEventListener('input', () => { this.updateParam1Label(); });
|
|
this.Param2.addEventListener('input', () => { this.updateParam2Label(); });
|
|
|
|
this.TryButton = this.shadowRoot.querySelector('#try-button');
|
|
this.TryButton.addEventListener('click', () => {
|
|
this.handleTryButtonClick();
|
|
});
|
|
|
|
this.AnimationList.addEventListener('change', this.handleAnimationListChange.bind(this));
|
|
}
|
|
|
|
setIndex(i){ this.Index = i; }
|
|
getIndex(){ return this.Index; }
|
|
updateSpeedLabel(){
|
|
if(!this.Speed.hidden){
|
|
this.SpeedLabel.innerHTML = this.SpeedCaption + this.getSpeedValue();
|
|
}
|
|
}
|
|
updateHueRangeLabel(){
|
|
if(!this.HueRange.hidden){
|
|
this.HueRangeLabel.innerHTML = this.HueRangeCaption + this.getHueRangeValue();
|
|
}
|
|
}
|
|
updateParam1Label(){
|
|
if(!this.Param1.hidden){
|
|
this.Param1Label.innerHTML = this.Param1Caption + this.getParam1Value();
|
|
}
|
|
}
|
|
updateParam2Label(){
|
|
if(!this.Param2.hidden){
|
|
this.Param2Label.innerHTML = this.Param2Caption + this.getParam2Value();
|
|
}
|
|
}
|
|
setTitle(text){
|
|
this.Title.textContent = text;
|
|
}
|
|
addOptionToList(value, text){
|
|
const optionElement = document.createElement('option');
|
|
optionElement.value = value;
|
|
optionElement.textContent = text;
|
|
this.AnimationList.appendChild(optionElement);
|
|
}
|
|
setHidden(hidden){ this.hidden = hidden; }
|
|
getHidden(){ return this.hidden; }
|
|
setHueValue(value){ this.hueSelect.setHue(value); }
|
|
getHueValue(){ return this.hueSelect.getSelectedHue(); }
|
|
setSpeedValue(value){
|
|
this.Speed.value = value;
|
|
this.updateSpeedLabel();
|
|
}
|
|
setSpeedCaption(caption){
|
|
let hid = false;
|
|
if(caption.trim() === ""){
|
|
hid = true;
|
|
}
|
|
this.SpeedCaption = caption;
|
|
this.SpeedLabel.innerHTML = caption;
|
|
this.Speed.hidden = hid;
|
|
this.SpeedLabel.hidden = hid;
|
|
}
|
|
getSpeedValue(){ return this.Speed.value; }
|
|
setHueRangeValue(value){
|
|
this.HueRange.value = value;
|
|
this.updateHueRangeLabel()
|
|
}
|
|
setHueRangeCaption(caption){
|
|
let hid = false;
|
|
if(caption.trim() === ""){
|
|
hid = true;
|
|
}
|
|
this.HueRangeCaption = caption;
|
|
this.HueRangeLabel.innerHTML = caption;
|
|
this.HueRange.hidden = hid;
|
|
this.HueRangeLabel.hidden = hid;
|
|
}
|
|
getHueRangeValue(){ return this.HueRange.value; }
|
|
setParam1Value(value){
|
|
this.Param1.value = value;
|
|
this.updateParam1Label()
|
|
}
|
|
setParam1Caption(caption){
|
|
let hid = false;
|
|
if(caption.trim() === ""){
|
|
hid = true;
|
|
}
|
|
this.Param1Caption = caption;
|
|
this.Param1Label.innerHTML = caption;
|
|
this.Param1.hidden = hid;
|
|
this.Param1Label.hidden = hid;
|
|
}
|
|
getParam1Value(){ return this.Param1.value; }
|
|
setParam2Value(value){
|
|
this.Param2.value = value;
|
|
this.updateParam2Label()
|
|
}
|
|
setParam2Caption(caption){
|
|
let hid = false;
|
|
if(caption.trim() === ""){
|
|
hid = true;
|
|
}
|
|
this.Param2Caption = caption;
|
|
this.Param2Label.innerHTML = caption;
|
|
this.Param2.hidden = hid;
|
|
this.Param2Label.hidden = hid;
|
|
}
|
|
getParam2Value(){ return this.Param2.value; }
|
|
|
|
setCheck1Value(value){ this.Check1.checked = value; }
|
|
setCheck1Caption(caption){
|
|
let hid = false;
|
|
if(caption.trim() === ""){
|
|
hid = true;
|
|
}
|
|
this.Check1Label.innerHTML = caption;
|
|
this.Check1.hidden = hid;
|
|
this.Check1Label.hidden = hid;
|
|
}
|
|
getCheck1Value(){ return this.Check1.checked; }
|
|
|
|
setCheck2Value(value){ this.Check2.checked = value; }
|
|
setCheck2Caption(caption){
|
|
let hid = false;
|
|
if(caption.trim() === ""){
|
|
hid = true;
|
|
}
|
|
this.Check2Label.innerHTML = caption;
|
|
this.Check2.hidden = hid;
|
|
this.Check2Label.hidden = hid;
|
|
}
|
|
getCheck2Value(){ return this.Check2.checked; }
|
|
|
|
setCheck3Value(value){ this.Check3.checked = value; }
|
|
setCheck3Caption(caption){
|
|
let hid = false;
|
|
if(caption.trim() === ""){
|
|
hid = true;
|
|
}
|
|
this.Check3Label.innerHTML = caption;
|
|
this.Check3.hidden = hid;
|
|
this.Check3Label.hidden = hid;
|
|
}
|
|
getCheck3Value(){ return this.Check3.checked; }
|
|
|
|
setCheck4Value(value){ this.Check4.checked = value; }
|
|
setCheck4Caption(caption){
|
|
let hid = false;
|
|
if(caption.trim() === ""){
|
|
hid = true;
|
|
}
|
|
this.Check4Label.innerHTML = caption;
|
|
this.Check4.hidden = hid;
|
|
this.Check4Label.hidden = hid;
|
|
}
|
|
getCheck4Value(){ return this.Check4.checked; }
|
|
|
|
setAnimationIndex(index){
|
|
this.AnimationList.selectedIndex = index;
|
|
const changeEvent = new Event('change');
|
|
this.AnimationList.dispatchEvent(changeEvent);
|
|
}
|
|
getAnimationIndex(){
|
|
return this.AnimationList.selectedIndex;
|
|
}
|
|
|
|
handleTryButtonClick() {
|
|
const eventIndexValue = this.getIndex();
|
|
const animIndexValue = this.getAnimationIndex();
|
|
const hueValue = this.getHueValue();
|
|
const speedValue = this.getSpeedValue();
|
|
const colorRangeValue = this.getHueRangeValue();
|
|
const param1Value = this.getParam1Value();
|
|
const param2Value = this.getParam2Value();
|
|
const check1Value = this.getCheck1Value();
|
|
const check2Value = this.getCheck2Value();
|
|
const check3Value = this.getCheck3Value();
|
|
const check4Value = this.getCheck4Value();
|
|
|
|
this.dispatchEvent(new CustomEvent('tryClick', {
|
|
detail: {
|
|
eventIndex: eventIndexValue,
|
|
animIndex: animIndexValue,
|
|
hue: hueValue,
|
|
speed: speedValue,
|
|
colorRange: colorRangeValue,
|
|
param1: param1Value,
|
|
param2: param2Value,
|
|
check1: check1Value,
|
|
check2: check2Value,
|
|
check3: check3Value,
|
|
check4: check4Value
|
|
}
|
|
}));
|
|
}
|
|
|
|
setAnimationCaptions(propsJson){
|
|
this.AnimationPropsJson = propsJson;
|
|
|
|
//add options to list
|
|
let x = 0;
|
|
this.AnimationPropsJson.forEach(props => {
|
|
this.addOptionToList(x, props.name);
|
|
x++;
|
|
});
|
|
|
|
}
|
|
|
|
handleAnimationListChange(){
|
|
const selectedIndex = this.getAnimationIndex();
|
|
const selectedProps = this.AnimationPropsJson[selectedIndex];
|
|
|
|
this.updateControlProps(selectedProps);
|
|
}
|
|
|
|
updateControlProps(props){
|
|
this.setSpeedCaption(props.speed);
|
|
let s = props['hue-range'];
|
|
this.setHueRangeCaption(s || "");
|
|
this.setParam1Caption(props.param1 || "");
|
|
this.setParam2Caption(props.param2 || "");
|
|
this.setCheck1Caption(props.check1 || "");
|
|
this.setCheck2Caption(props.check2 || "");
|
|
this.setCheck3Caption(props.check3 || "");
|
|
this.setCheck4Caption(props.check4 || "");
|
|
|
|
this.updateSpeedLabel();
|
|
this.updateHueRangeLabel();
|
|
this.updateParam1Label();
|
|
this.updateParam2Label();
|
|
}
|
|
|
|
}
|
|
|
|
customElements.define('event-box', EventBox);
|
|
|