From b24b4ce3aaddedbc729274d320198e87e4af95e1 Mon Sep 17 00:00:00 2001 From: Bogdan Pilyugin Date: Mon, 17 Jul 2023 14:50:31 +0200 Subject: [PATCH] dmx settings and control frontend implementation --- HTML/dmxmaster.html | 120 ++------------------------------ HTML/dmxsettings.html | 46 +++++++++++++ HTML/espfs.paths | 72 ++++++++++---------- HTML/res/appstyles.css | 2 +- HTML/res/dmx.css | 20 ++++++ HTML/res/dmx.js | 151 +++++++++++++++++++++++++++++++++++++++++ HTML/res/sha256.js | Bin 0 -> 4367 bytes components/webguiapp | 2 +- 8 files changed, 263 insertions(+), 150 deletions(-) create mode 100644 HTML/dmxsettings.html create mode 100644 HTML/res/dmx.css create mode 100644 HTML/res/dmx.js create mode 100644 HTML/res/sha256.js diff --git a/HTML/dmxmaster.html b/HTML/dmxmaster.html index 4338260..0ba8f1e 100644 --- a/HTML/dmxmaster.html +++ b/HTML/dmxmaster.html @@ -5,55 +5,31 @@ + ~name~ -
-
+
DMX1
-
- -
+
DMX2
-
- -
+
@@ -64,91 +40,7 @@ - - + + \ No newline at end of file diff --git a/HTML/dmxsettings.html b/HTML/dmxsettings.html new file mode 100644 index 0000000..d6e3b7d --- /dev/null +++ b/HTML/dmxsettings.html @@ -0,0 +1,46 @@ + + + + + + + + + + + + ~name~ + + + + + +
+
+
+
+
+
+
DMX1 CONFIG
+ +
+
+ +
+
+
DMX2 CONFIG
+ +
+
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/HTML/espfs.paths b/HTML/espfs.paths index 7ef8f5e..d20f20a 100644 --- a/HTML/espfs.paths +++ b/HTML/espfs.paths @@ -1,35 +1,39 @@ -adapters.html -api -api/dbg.json -api/dbg2.json -api/gendata.json -api/mem.json -api/set1.json -api/set2.json -api/set3.json -api/stat.json -api/status.json -api/tmr.json -api/users.json -api/wifiscan.json -application.html -dmxmaster.html -favicon.ico -index.html -info.html -reboot.html -res -res/appstyles.css -res/ca_cert.pem -res/cron.js -res/crondata.js -res/dynamic.css -res/iconsfont.css -res/iconsfont.woff2 -res/logo.png -res/main.js -res/res.js -res/styles.css -res/vue.global.prod.js -services.html +adapters.html +api +api/dbg.json +api/dbg2.json +api/gendata.json +api/mem.json +api/set1.json +api/set2.json +api/set3.json +api/stat.json +api/status.json +api/tmr.json +api/users.json +api/wifiscan.json +application.html +dmxmaster.html +dmxsettings.html +favicon.ico +index.html +info.html +reboot.html +res +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 system.html \ No newline at end of file diff --git a/HTML/res/appstyles.css b/HTML/res/appstyles.css index 7233ef0..a70f66b 100644 --- a/HTML/res/appstyles.css +++ b/HTML/res/appstyles.css @@ -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); diff --git a/HTML/res/dmx.css b/HTML/res/dmx.css new file mode 100644 index 0000000..1f841d9 --- /dev/null +++ b/HTML/res/dmx.css @@ -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; + } + \ No newline at end of file diff --git a/HTML/res/dmx.js b/HTML/res/dmx.js new file mode 100644 index 0000000..dfcd6ac --- /dev/null +++ b/HTML/res/dmx.js @@ -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: `
+ +
` +}); + + +app.component('sliders', { + data() { + return { + + chnum: 4 + } + }, + + props: ["sldat"], + methods: { + + }, + template: `
+ +
` +}); + +app.component('svldetails', { + props: ["slvdev"], + methods: { + SelDev() { + this.slvdev.sel = !this.slvdev.sel; + } + }, + template: `
+

{{slvdev.type}}

+

{{slvdev.addr}}

+
` +}); +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: `
+ + + +
+ +
+ + +
` +}); +app.mount('#app'); diff --git a/HTML/res/sha256.js b/HTML/res/sha256.js new file mode 100644 index 0000000000000000000000000000000000000000..81bb16f409bbd0081049667d61332ace9b5a6539 GIT binary patch literal 4367 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