diff --git a/data/index.html b/data/index.html index 0508149..93d8bf0 100644 --- a/data/index.html +++ b/data/index.html @@ -1,108 +1,134 @@ + - LaserSpirograph + LaserSpirograph + -
-
- Laser -
-
    -
  • - - -
    • -
  • - -
    • -
  • - - -
    • -
  • - -
    • -
  • - - -
    • -
  • - -
    • -
  • - - -
    • -
  • - -
    • - -
-
-
-
- Makros -
-
- - -
-
- - -
-
- - -
-
-
-
- WiFi Settings -
-
-
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - -
    • - -
    -
    -
    -
    - Debug -
    - Free Heap -
    - last uri: -
    - last respone: -
    -
    -
    -
    -
    -
    +
    +
    + Laser +
    +
      +
    • + + +
      • +
    • + +
      • +
    • + + +
      • +
    • + +
      • +
    • + + +
      • +
    • + +
      • +
    • + + +
      • +
    • + +
      • +
      + + + +
      +
    +
    +
    +
    + Makros +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    + Presets +
    +
  • + + +
    • +
    + + +
    +
    +
    +
    + WiFi Settings +
    +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + +
    • + +
    +
    +
    + Debug +
    + Free Heap +
    + last uri: +
    + last respone: +
    +
    +
    +
    +
    +
    +
    + \ No newline at end of file diff --git a/data/scripts.js b/data/scripts.js index 517c435..1f51373 100644 --- a/data/scripts.js +++ b/data/scripts.js @@ -96,22 +96,18 @@ var $ = function(selector){ }, link: (node) => { return (actuator) => { - let update = function(endpoint, method, props) { + let update = actuator.handler || function(actuator) { Sui.http.ajax({ - method: method, - endpoint: node.api[endpoint], - data: props, + method: actuator.method, + endpoint: actuator.api, + data: actuator.data ? + actuator.data.call(this) : [this.value], cache: false }, actuator.onResponse || null); }; Sui.select(actuator.selector).forEach( (domEl) =>{ let handle = function(event) { - update.call(this, - actuator.api, - actuator.method, - actuator.data ? - actuator.data.call(this) : [this.value] - ); + update.call(this, actuator); } domEl.addEventListener(actuator.event, handle) }); @@ -161,7 +157,20 @@ var $ = function(selector){ request.send(postData); } } - };Sui.ready(() => { + }; +let click = element => element.click(); +let check = element => element.setAttribute('checked','checked'); +let uncheck = element => element.removeAttribute('checked'); + +let switchElementState = element => { + let state = element.getAttribute('data-state') == 'false'; + element.setAttribute('data-state', state); + return state; +}; +let bindData = (element, attribute, data) => { + element.setAttribute('data-' + attribute, data); +}; +Sui.ready(() => { let debugResponse = (data) => { document.querySelector('#response').innerHTML = data; }; @@ -175,7 +184,33 @@ var $ = function(selector){ // init actuators [{ - api: 'MOTOR', + api: '/wificonfig', + method: 'POST', + selector: '.switch.ap-mode .slider', + event: 'click', + onResponse: debugResponse, + handler: function() { + let nextState = switchElementState(this); + /*let bindingName = this.getAttribute('data-bind'); + Sui.select('.switch.ap-mode [name="'+ bindingName+'"]') + .forEach(check);*/ + console.log(nextState); + } + },{ + api: '/presetMode', + method: 'POST', + selector: '.switch.preset-mode .slider', + event: 'click', + onResponse: debugResponse, + data: function() { + let state = switchElementState(this); + console.log(state); + return Sui.util.serialize({ + mode: state ? 1 : 0 + }); + } + },{ + api: '/spirograph', method: 'POST', selector: '.slider.motor', event: 'change', @@ -193,7 +228,7 @@ var $ = function(selector){ return Sui.util.serialize(payload); } }, { - api: 'LASER', + api: '/spirograph', method: 'POST', selector: '.slider.laser', event: 'change', @@ -210,7 +245,8 @@ var $ = function(selector){ }].forEach(Sui.link({ api: { MOTOR: '/spirograph', // {motorNr}/{value} - LASER: '/spirograph' // {value} + LASER: '/spirograph', // {value} + PRESET: '/presetMode' } })); }); \ No newline at end of file diff --git a/data/styles.css b/data/styles.css index 89e6e3f..73397a4 100644 --- a/data/styles.css +++ b/data/styles.css @@ -4,6 +4,9 @@ .shown { display: block; } +.disabled { + opacity: 0.65; +} .sui { background: #000000; color: #0eb8c0; @@ -23,9 +26,11 @@ } .sui button { background: #097479; - color: white; + color: #eeeeee; + font-size: 0.9em; border: 0; padding: .8em; + margin: 0 .4em; } .heading { font-size: 1.2em; @@ -157,10 +162,11 @@ input[type=range]:focus::-ms-fill-upper { left: 0; right: 0; bottom: 0; - background-color: #b3b2b2; + background-color: #7b7b7b; -webkit-transition: .4s; transition: .4s; - margin-left: -40px; + margin-left: -50px; + margin-top: 4px; } .switch .slider:before { position: absolute; diff --git a/data/wifi.json b/data/wifi.json index c9a0a97..5ebce94 100644 --- a/data/wifi.json +++ b/data/wifi.json @@ -1,5 +1,5 @@ { - "apMode": 0, + "apMode": 1, "SSID": "LaserSpiro", "Password": "th3r31sn0sp00n" } \ No newline at end of file diff --git a/frontend/pages/index.html b/frontend/pages/index.html index 0508149..93d8bf0 100644 --- a/frontend/pages/index.html +++ b/frontend/pages/index.html @@ -1,108 +1,134 @@ + - LaserSpirograph + LaserSpirograph + -
    -
    - Laser -
    -
      -
    • - - -
      • -
    • - -
      • -
    • - - -
      • -
    • - -
      • -
    • - - -
      • -
    • - -
      • -
    • - - -
      • -
    • - -
      • - -
    -
    -
    -
    - Makros -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    - WiFi Settings -
    -
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - -
    • - -
    -
    -
    -
    - Debug -
    - Free Heap -
    - last uri: -
    - last respone: -
    -
    -
    -
    -
    -
    +
    +
    + Laser +
    +
      +
    • + + +
      • +
    • + +
      • +
    • + + +
      • +
    • + +
      • +
    • + + +
      • +
    • + +
      • +
    • + + +
      • +
    • + +
      • +
      + + + +
      +
    +
    +
    +
    + Makros +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    + Presets +
    +
  • + + +
    • +
    + + +
    +
    +
    +
    + WiFi Settings +
    +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + +
    • + +
    +
    +
    + Debug +
    + Free Heap +
    + last uri: +
    + last respone: +
    +
    +
    +
    +
    +
    +
    + \ No newline at end of file diff --git a/frontend/scripts/sui.js b/frontend/scripts/sui.js index e904a18..821f121 100644 --- a/frontend/scripts/sui.js +++ b/frontend/scripts/sui.js @@ -9,22 +9,18 @@ var Sui = { }, link: (node) => { return (actuator) => { - let update = function(endpoint, method, props) { + let update = actuator.handler || function(actuator) { Sui.http.ajax({ - method: method, - endpoint: node.api[endpoint], - data: props, + method: actuator.method, + endpoint: actuator.api, + data: actuator.data ? + actuator.data.call(this) : [this.value], cache: false }, actuator.onResponse || null); }; Sui.select(actuator.selector).forEach( (domEl) =>{ let handle = function(event) { - update.call(this, - actuator.api, - actuator.method, - actuator.data ? - actuator.data.call(this) : [this.value] - ); + update.call(this, actuator); } domEl.addEventListener(actuator.event, handle) }); diff --git a/frontend/scripts/zMain.js b/frontend/scripts/zMain.js index 839b8e2..235d1ca 100644 --- a/frontend/scripts/zMain.js +++ b/frontend/scripts/zMain.js @@ -1,3 +1,16 @@ + +let click = element => element.click(); +let check = element => element.setAttribute('checked','checked'); +let uncheck = element => element.removeAttribute('checked'); + +let switchElementState = element => { + let state = element.getAttribute('data-state') == 'false'; + element.setAttribute('data-state', state); + return state; +}; +let bindData = (element, attribute, data) => { + element.setAttribute('data-' + attribute, data); +}; Sui.ready(() => { let debugResponse = (data) => { document.querySelector('#response').innerHTML = data; @@ -12,7 +25,33 @@ Sui.ready(() => { // init actuators [{ - api: 'MOTOR', + api: '/wificonfig', + method: 'POST', + selector: '.switch.ap-mode .slider', + event: 'click', + onResponse: debugResponse, + handler: function() { + let nextState = switchElementState(this); + /*let bindingName = this.getAttribute('data-bind'); + Sui.select('.switch.ap-mode [name="'+ bindingName+'"]') + .forEach(check);*/ + console.log(nextState); + } + },{ + api: '/presetMode', + method: 'POST', + selector: '.switch.preset-mode .slider', + event: 'click', + onResponse: debugResponse, + data: function() { + let state = switchElementState(this); + console.log(state); + return Sui.util.serialize({ + mode: state ? 1 : 0 + }); + } + },{ + api: '/spirograph', method: 'POST', selector: '.slider.motor', event: 'change', @@ -30,7 +69,7 @@ Sui.ready(() => { return Sui.util.serialize(payload); } }, { - api: 'LASER', + api: '/spirograph', method: 'POST', selector: '.slider.laser', event: 'change', @@ -47,7 +86,8 @@ Sui.ready(() => { }].forEach(Sui.link({ api: { MOTOR: '/spirograph', // {motorNr}/{value} - LASER: '/spirograph' // {value} + LASER: '/spirograph', // {value} + PRESET: '/presetMode' } })); }); \ No newline at end of file diff --git a/frontend/styles/base.less b/frontend/styles/base.less index 6c08b7a..56abe86 100644 --- a/frontend/styles/base.less +++ b/frontend/styles/base.less @@ -6,6 +6,10 @@ display: block; } +.disabled { + opacity: 0.65; +} + .sui { background: @color-black; color: @color-main-light; @@ -18,7 +22,6 @@ -webkit-tap-highlight-color: transparent; } - > .content { padding: @default-padding; } @@ -29,8 +32,10 @@ button { background: @color-main; - color: white; + color: @color-white; + font-size: 0.9em; border: 0; padding: .8em; + margin: 0 .4em; } } \ No newline at end of file diff --git a/frontend/styles/form/switch.less b/frontend/styles/form/switch.less index 07377dd..0fc106c 100644 --- a/frontend/styles/form/switch.less +++ b/frontend/styles/form/switch.less @@ -15,10 +15,11 @@ left: 0; right: 0; bottom: 0; - background-color: @color-grey; + background-color: @color-grey2; -webkit-transition: .4s; transition: .4s; - margin-left: -40px; + margin-left: -50px; + margin-top: 4px; } .slider:before { diff --git a/frontend/styles/theme.less b/frontend/styles/theme.less index 721511b..dac0b4a 100644 --- a/frontend/styles/theme.less +++ b/frontend/styles/theme.less @@ -3,6 +3,7 @@ @color-black: #000000; @color-white: #eeeeee; @color-grey: #b3b2b2; +@color-grey2: #7b7b7b; @color-main: #097479; @color-main-light: #0eb8c0; @color-container: #333333;