userbogd/WebguiappTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dmx settings and control frontend implementation

Browse Source
This commit is contained in:
Bogdan Pilyugin 2023-07-17 14:50:31 +02:00
parent 12d2408c39
commit b24b4ce3aa
8 changed files with 263 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
HTML/dmxmaster.html
View File

@ -5,31 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/styles.css">
<link rel="stylesheet" href="res/iconsfont.css">
<link rel="stylesheet" href="res/dmx.css">
<script src="res/main.js"></script>
<script src="res/res.js"></script>
<script src="res/vue.global.prod.js"></script>
<title>~name~</title>
<style>
.svldetails{
height: 60px;
width: 60px;
margin: 2px;
padding: 2px;
background-color: var(--first-color);
border-radius: 5px;
border: 1px solid var(--border-color);
overflow: hidden;
float: left;
}
.selection {
border: 3px solid var(--accent-color);;
}
.svldetails p{
margin: 0px;
vertical-align: middle;
}
</style>
</head>
<body>
<script>PageSurround();</script>
@ -42,18 +22,14 @@
<div class="mlp">
<div class="mlpc">
<div class="mlhdr">DMX1</div>
<div class='cntr' style='text-align:center;margin-top:20px'>
<devlist v-bind:slvdevices="slvdevices" v-bind:key="1"></devlist>
</div>
<sliders v-bind:sldat="sliderdata"></devlist>
</div>
</div>
<div class="mlp">
<div class="mlpc">
<div class="mlhdr">DMX2</div>
<div class='cntr' style='text-align:center;margin-top:20px'>
<devlist v-bind:slvdevices="slvdevices2" v-bind:key="2"></devlist>
</div>
<sliders v-bind:sldat="sliderdata2"></devlist>
</div>
</div>
</div>
@ -64,91 +40,7 @@
<script>
showMenu('header-toggle','navbar');
</script>
<script src="res/dmx.js"></script>
<script>
const app = Vue.createApp({
data(){
return {
slvdevices: [],
slvdevices2: [],
selecteddevs: []
}
}
});
app.component('svldetails', {
props: ["slvdev"],
methods:{
SelDev(){
this.slvdev.sel =!this.slvdev.sel;
}
},
template: `<div class="svldetails" :class="{ selection: slvdev.sel}" v-on:click="SelDev">
<p>{{slvdev.type}}</p>
<p>{{slvdev.addr}}</p>
</div>`
});
app.component('devlist', {
data() {return{
devtypes:[
{type:'RGBW', chls:4},
{type:'RGB', chls:3},
{type:'D', chls:1},
{type:'DIMMER', chls:8}
],
selectedtype:'RGB',
addrforadd:1
}},
props: ["slvdevices", "key"],
methods:
{
AddDevice(){
this.slvdevices.push({type: this.selectedtype, addr: this.addrforadd, sel: false});
for(i=0; i<this.devtypes.length; i++)
if(this.devtypes[i].type == this.selectedtype)
this.addrforadd += this.devtypes[i].chls;
},
DelDevice(){
for(i=0; i<this.slvdevices.length; i++)
{
while(this.slvdevices[i].sel == true)
this.slvdevices.splice(i,1);
}
},
PostData() {
alert("key="+this.key);
fetch("\dmxmaster.html", {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: JSON.stringify(this.slvdevices)
});
}
},
computed: {
selected: function(){
this.selecteddevs = this.slvdevices.filter(function (n) {
return this.slvdevices[n].sel;
})
}
},
template: `<div>
<button class="btn" v-on:click="AddDevice">Add device</button>
<select v-model="selectedtype">
<option v-for="dtype in devtypes" v-bind:value="dtype.type">{{dtype.type}}</option>
</select>
<input v-model="addrforadd" type="number"/>
<div class="container">
<svldetails v-for="slvdev in slvdevices" :key="slvdev.id" :slvdev="slvdev"></svldetails>
</div>
<button class="btn" v-on:click="DelDevice">Delete device</button>
<button class="btn" v-on:click="PostData">Save conf</button>
</div>`
});
app.mount('#app');
</script>
</body>
</html>

46
HTML/dmxsettings.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="res/styles.css">
<link rel="stylesheet" href="res/iconsfont.css">
<link rel="stylesheet" href="res/dmx.css">
<script src="res/main.js"></script>
<script src="res/res.js"></script>
<script src="res/vue.global.prod.js"></script>
<title>~name~</title>
</head>
<body>
<script>PageSurround();</script>
<!--========== CONTENTS ==========-->
<main>
<section>
<div class="ml">
<div id="app">
<div class="mlp">
<div class="mlpc">
<div class="mlhdr">DMX1 CONFIG</div>
<devlist v-bind:slvdevices="slvdevices"></devlist>
</div>
</div>
<div class="mlp">
<div class="mlpc">
<div class="mlhdr">DMX2 CONFIG</div>
<devlist v-bind:slvdevices="slvdevices2"></devlist>
</div>
</div>
</div>
</div>
</section>
</main>
<script>
showMenu('header-toggle','navbar');
</script>
<script src="res/dmx.js"></script>
</body>
</html>

4
HTML/espfs.paths
View File

@ -14,6 +14,7 @@ api/users.json
api/wifiscan.json
application.html
dmxmaster.html
dmxsettings.html
favicon.ico
index.html
info.html
@ -23,12 +24,15 @@ res/appstyles.css
res/ca_cert.pem
res/cron.js
res/crondata.js
res/dmx.css
res/dmx.js
res/dynamic.css
res/iconsfont.css
res/iconsfont.woff2
res/logo.png
res/main.js
res/res.js
res/sha256.js
res/styles.css
res/vue.global.prod.js
services.html

2
HTML/res/appstyles.css
View File

@ -120,7 +120,7 @@ input:checked + span{background-color: var(--accent-color);}
.rngval {
-webkit-appearance: none;
margin: auto 10px;
width: 80%;
width: 70%;
height: 5px;
border: none;
background: var(--accent-color);

20
HTML/res/dmx.css Normal file
View File

@ -0,0 +1,20 @@
.svldetails{
height: 60px;
width: 60px;
margin: 2px;
padding: 2px;
background-color: var(--first-color);
border-radius: 5px;
border: 1px solid var(--border-color);
overflow: hidden;
float: left;
}
.selection {
border: 3px solid var(--accent-color);
}
.svldetails p{
margin: 0px;
vertical-align: middle;
}

151
HTML/res/dmx.js Normal file
View File

@ -0,0 +1,151 @@
const app = Vue.createApp({
data() {
return {
slvdevices: [],
slvdevices2: [],
selecteddevs: [],
sliderdata: [
{ id: 0, name: 'ch1', val: 0, min: 0, max: 255 },
{ id: 1, name: 'ch2', val: 2, min: 0, max: 255 },
{ id: 2, name: 'ch3', val: 4, min: 0, max: 255 },
{ id: 3, name: 'ch4', val: 8, min: 0, max: 255 },
{ id: 4, name: 'ch5', val: 16, min: 0, max: 255 },
{ id: 5, name: 'ch6', val: 32, min: 0, max: 255 },
{ id: 6, name: 'ch7', val: 64, min: 0, max: 255 },
{ id: 7, name: 'ch8', val: 128, min: 0, max: 255 },
{ id: 8, name: 'ch9', val: 255, min: 0, max: 255 }
],
sliderdata2: [
{ id: 9, name: 'ch1', val: 255, min: 0, max: 255 },
{ id: 10, name: 'ch2', val: 128, min: 0, max: 255 },
{ id: 11, name: 'ch3', val: 64, min: 0, max: 255 },
{ id: 12, name: 'ch4', val: 32, min: 0, max: 255 },
{ id: 13, name: 'ch5', val: 16, min: 0, max: 255 },
{ id: 14, name: 'ch6', val: 8, min: 0, max: 255 },
{ id: 15, name: 'ch7', val: 4, min: 0, max: 255 },
{ id: 16, name: 'ch8', val: 2, min: 0, max: 255 },
{ id: 17, name: 'ch9', val: 0, min: 0, max: 255 }
]
}
}
});
app.component('onesl', {
props: ["onesldat"],
methods: {
SliderChange() {
},
InputChange() {
}
},
template: `<div class="channel"><label class="chnam">{{onesldat.name}}</label>
<input class="rngval" type="range" :id="onesldat.id" :value="onesldat.val" :min="onesldat.min" :max="onesldat.max" v-on:change="SliderChange"\>
<input class="inpval" type="number" :id="onesldat.id" :value="onesldat.val" :min="onesldat.min" :max="onesldat.max" v-on:change="InputChange"\></div>`
});
app.component('sliders', {
data() {
return {
chnum: 4
}
},
props: ["sldat"],
methods: {
},
template: `<div class="sliders">
<onesl v-for="sld in sldat" :onesldat="sld"></onesl>
</div>`
});
app.component('svldetails', {
props: ["slvdev"],
methods: {
SelDev() {
this.slvdev.sel = !this.slvdev.sel;
}
},
template: `<div class="svldetails" :class="{ selection: slvdev.sel}" v-on:click="SelDev">
<p>{{slvdev.type}}</p>
<p>{{slvdev.addr}}</p>
</div>`
});
app.component('devlist', {
data() {
return {
devtypes: [
{ type: 'RGBW', chls: ["RED", "GREEN", "BLUE", "WHITE"] },
{ type: 'RGB', chls: ["RED", "GREEN", "BLUE"] },
{ type: 'D', chls: ["CH1"] },
{ type: 'DIMMER', chls: ["CH1", "CH2", "CH3", "CH4", "CH5", "CH6", "BRIGHT", "GAMMA", "SCENE"] }
],
selectedtype: 'RGB',
addrforadd: 1
}
},
props: ["slvdevices", "key"],
methods:
{
AddDevice() {
this.slvdevices.push({ type: this.selectedtype, addr: this.addrforadd, sel: false });
for (i = 0; i < this.devtypes.length; i++)
if (this.devtypes[i].type == this.selectedtype)
this.addrforadd += this.devtypes[i].chls.length;
},
DelDevice() {
for (i = 0; i < this.slvdevices.length; i++) {
while (this.slvdevices[i].sel == true)
this.slvdevices.splice(i, 1);
}
},
PostData() {
//uuid = uuidv4();
time = new Date().toISOString();
var mess = { data:{}};
mess.data.msgid = Math.floor(Date.now()/1000);
mess.data.time = time;
mess.data.msgtype = 1;
mess.data.payloadtype = 1;
var pload = {};
pload.devices = this.slvdevices;
mess.data.payload = pload;
//var hash = crypto.sha256.hmac.create(GetVal("shakey"));
//hash.update(JSON.stringify(mess.data));
//mess.signature = (hash.hex()).toUpperCase();
mess.signature = "123";
fetch("/api", {
method: 'post',
headers: { "Content-type": "application/json" },
body: JSON.stringify(mess)
});
}
},
computed: {
selected: function() {
this.selecteddevs = this.slvdevices.filter(function(n) {
return this.slvdevices[n].sel;
})
}
},
template: `<div>
<button class="btn" v-on:click="AddDevice">Add device</button>
<select v-model="selectedtype">
<option v-for="dtype in devtypes" v-bind:value="dtype.type">{{dtype.type}}</option>
</select>
<input v-model="addrforadd" type="number"/>
<div class="container">
<svldetails v-for="slvdev in slvdevices" :key="slvdev.id" :slvdev="slvdev"></svldetails>
</div>
<button class="btn" v-on:click="DelDevice">Delete device</button>
<button class="btn" v-on:click="PostData">Save conf</button>
</div>`
});
app.mount('#app');

BIN
HTML/res/sha256.js Normal file
View File

Binary file not shown.

2
components/webguiapp

@ -1 +1 @@
Subproject commit 49bab0ea5c2144896bf8537abe32168b0f7dede3
Subproject commit 51db5691cea130f8fe5b09c5ca2604942a8b96d0