iot/esp8266-laser
1
0
Fork 0
mirror of https://github.com/0x1d/esp8266-laser.git synced 2025-12-14 18:15:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

oidshfs

Browse Source
This commit is contained in:
0x1d
2017-11-25 00:42:04 +01:00
parent 99b662ab6a
commit d7e9e22828
10 changed files with 362 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
data/index.html
View File

@@ -1,108 +1,134 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>LaserSpirograph</title> <title>LaserSpirograph</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-32x32.png">
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script> <script src="scripts.js"></script>
</head> </head>
<body class="sui"> <body class="sui">
<div class="content"> <div class="content">
<form id="prototypControls" class="spiro-control container collapsible open"> <form id="prototypControls" class="spiro-control container collapsible open">
<span class="heading">Laser</span> <span class="heading">Laser</span>
<div class="content"> <div class="content">
<ul> <ul>
<li class="form-row info"> <li class="form-row info">
<label>Frequency</label> <label>Frequency</label>
<label data-actuator-id="laser">1</label> <label data-actuator-id="laser">1</label>
</li> </li>
<li class="form-row"> <li class="form-row">
<input type="range" class="laser slider" value="1" min="1" max="128"> <input type="range" class="laser slider" value="1" min="1" max="128">
</li> </li>
<li class="form-row info"> <li class="form-row info">
<label>Motor 1</label> <label>Motor 1</label>
<label data-actuator-id="motor1">1</label> <label data-actuator-id="motor1">1</label>
</li> </li>
<li class="form-row"> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1"> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
</li> </li>
<li class="form-row info"> <li class="form-row info">
<label>Motor 3</label> <label>Motor 3</label>
<label data-actuator-id="motor2">1</label> <label data-actuator-id="motor2">1</label>
</li> </li>
<li class="form-row"> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2"> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
</li> </li>
<li class="form-row info"> <li class="form-row info">
<label>Motor 3</label> <label>Motor 3</label>
<label data-actuator-id="motor3">1</label> <label data-actuator-id="motor3">1</label>
</li> </li>
<li class="form-row"> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3"> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
</li> </li>
<div class="form-row">
</ul> <label for="ap">Preset Mode</label>
</div> <label class="switch preset-mode" data-state="false">
</form> <input type="checkbox" name="presetMode">
<form id="prototypControls" class="container collapsible"> <span class="slider round" data-state="false"></span>
<span class="heading">Makros</span> </label>
<div class="content"> <button class="disabled">Add</button>
<div class="form-row"> </div>
<label>Stop</label> </ul>
<button>Run</button> </div>
</div> </form>
<div class="form-row"> <form id="prototypControls" class="container collapsible">
<label>Preset Mode</label> <span class="heading">Makros</span>
<button>Run</button> <div class="content">
</div> <div class="form-row">
<div class="form-row"> <label>Stop</label>
<label>Do stuff</label> <button>Run</button>
<button>Run</button> </div>
</div> <div class="form-row">
</div> <label>Preset Mode</label>
</form> <button>Run</button>
<div class="settings container collapsible"> </div>
<span class="heading">WiFi Settings</span> <div class="form-row">
<div class="content"> <label>Do stuff</label>
<form> <button>Run</button>
<li class="form-row"> </div>
<label for="ap">AP Mode</label> </div>
<label class="switch"> </form>
<input type="checkbox"> <form id="prototypControls" class="container collapsible">
<span class="slider round"></span> <span class="heading">Presets</span>
</label> <div class="content">
</li> <li class="form-row">
<li class="form-row"> <label for="ap">Preset Mode</label>
<label for="ssid">SSID</label> <label class="switch preset-mode" data-state="0">
<input type="text" name="ssid" placeholder="Default AP: LaserSpiro"> <input type="checkbox">
</li> <span class="slider round"></span>
<li class="form-row"> </label>
<label for="password">PW</label> </li>
<input type="password" name="password" placeholder="Default: th3r31sn0sp00n"> <div class="form-row">
</li> <label>Do stuff</label>
<li class="form-row"> <button>Run</button>
<button type="submit">Save</button> </div>
</li> </div>
</ul> </form>
</form> <div class="settings container collapsible open">
</div> <span class="heading">WiFi Settings</span>
</div> <div class="content">
<div id="prototypControls" class="container collapsible"> <form>
<span class="heading">Debug</span> <li class="form-row">
<div class="content"> <label for="ap">AP Mode</label>
<span>Free Heap</span> <label class="switch ap-mode">
<br> <input type="checkbox" name="apMode">
<text class="sectionDesc">last uri:</text> <span class="slider round" data-bind="apMode" data-state="false"></span>
<div id="uriDiv"></div> </label>
<text class="sectionDesc">last respone:</text> </li>
<br> <li class="form-row">
<div id="response"> <label for="ssid">SSID</label>
</div> <input type="text" name="ssid" placeholder="Default AP: LaserSpiro">
<br> </li>
</div> <li class="form-row">
</div> <label for="password">PW</label>
<input type="password" name="password" placeholder="Default: th3r31sn0sp00n">
</li>
<li class="form-row">
<button type="submit">Save</button>
</li>
</ul>
</form>
</div>
</div> </div>
<div id="prototypControls" class="container collapsible">
<span class="heading">Debug</span>
<div class="content">
<span>Free Heap</span>
<br>
<text class="sectionDesc">last uri:</text>
<div id="uriDiv"></div>
<text class="sectionDesc">last respone:</text>
<br>
<div id="response">
</div>
<br>
</div>
</div>
</div>
</body> </body>
</html> </html>

64
data/scripts.js
View File

@@ -96,22 +96,18 @@ var $ = function(selector){
}, },
link: (node) => { link: (node) => {
return (actuator) => { return (actuator) => {
let update = function(endpoint, method, props) { let update = actuator.handler || function(actuator) {
Sui.http.ajax({ Sui.http.ajax({
method: method, method: actuator.method,
endpoint: node.api[endpoint], endpoint: actuator.api,
data: props, data: actuator.data ?
actuator.data.call(this) : [this.value],
cache: false cache: false
}, actuator.onResponse || null); }, actuator.onResponse || null);
}; };
Sui.select(actuator.selector).forEach( (domEl) =>{ Sui.select(actuator.selector).forEach( (domEl) =>{
let handle = function(event) { let handle = function(event) {
update.call(this, update.call(this, actuator);
actuator.api,
actuator.method,
actuator.data ?
actuator.data.call(this) : [this.value]
);
} }
domEl.addEventListener(actuator.event, handle) domEl.addEventListener(actuator.event, handle)
}); });
@@ -161,7 +157,20 @@ var $ = function(selector){
request.send(postData); 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) => { let debugResponse = (data) => {
document.querySelector('#response').innerHTML = data; document.querySelector('#response').innerHTML = data;
}; };
@@ -175,7 +184,33 @@ var $ = function(selector){
// init actuators // 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', method: 'POST',
selector: '.slider.motor', selector: '.slider.motor',
event: 'change', event: 'change',
@@ -193,7 +228,7 @@ var $ = function(selector){
return Sui.util.serialize(payload); return Sui.util.serialize(payload);
} }
}, { }, {
api: 'LASER', api: '/spirograph',
method: 'POST', method: 'POST',
selector: '.slider.laser', selector: '.slider.laser',
event: 'change', event: 'change',
@@ -210,7 +245,8 @@ var $ = function(selector){
}].forEach(Sui.link({ }].forEach(Sui.link({
api: { api: {
MOTOR: '/spirograph', // {motorNr}/{value} MOTOR: '/spirograph', // {motorNr}/{value}
LASER: '/spirograph' // {value} LASER: '/spirograph', // {value}
PRESET: '/presetMode'
} }
})); }));
}); });

12
data/styles.css
View File

@@ -4,6 +4,9 @@
.shown { .shown {
display: block; display: block;
} }
.disabled {
opacity: 0.65;
}
.sui { .sui {
background: #000000; background: #000000;
color: #0eb8c0; color: #0eb8c0;
@@ -23,9 +26,11 @@
} }
.sui button { .sui button {
background: #097479; background: #097479;
color: white; color: #eeeeee;
font-size: 0.9em;
border: 0; border: 0;
padding: .8em; padding: .8em;
margin: 0 .4em;
} }
.heading { .heading {
font-size: 1.2em; font-size: 1.2em;
@@ -157,10 +162,11 @@ input[type=range]:focus::-ms-fill-upper {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #b3b2b2; background-color: #7b7b7b;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
margin-left: -40px; margin-left: -50px;
margin-top: 4px;
} }
.switch .slider:before { .switch .slider:before {
position: absolute; position: absolute;

2
data/wifi.json
View File

@@ -1,5 +1,5 @@
{ {
"apMode": 0, "apMode": 1,
"SSID": "LaserSpiro", "SSID": "LaserSpiro",
"Password": "th3r31sn0sp00n" "Password": "th3r31sn0sp00n"
} }

216
frontend/pages/index.html
View File

@@ -1,108 +1,134 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>LaserSpirograph</title> <title>LaserSpirograph</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-32x32.png">
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script> <script src="scripts.js"></script>
</head> </head>
<body class="sui"> <body class="sui">
<div class="content"> <div class="content">
<form id="prototypControls" class="spiro-control container collapsible open"> <form id="prototypControls" class="spiro-control container collapsible open">
<span class="heading">Laser</span> <span class="heading">Laser</span>
<div class="content"> <div class="content">
<ul> <ul>
<li class="form-row info"> <li class="form-row info">
<label>Frequency</label> <label>Frequency</label>
<label data-actuator-id="laser">1</label> <label data-actuator-id="laser">1</label>
</li> </li>
<li class="form-row"> <li class="form-row">
<input type="range" class="laser slider" value="1" min="1" max="128"> <input type="range" class="laser slider" value="1" min="1" max="128">
</li> </li>
<li class="form-row info"> <li class="form-row info">
<label>Motor 1</label> <label>Motor 1</label>
<label data-actuator-id="motor1">1</label> <label data-actuator-id="motor1">1</label>
</li> </li>
<li class="form-row"> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1"> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
</li> </li>
<li class="form-row info"> <li class="form-row info">
<label>Motor 3</label> <label>Motor 3</label>
<label data-actuator-id="motor2">1</label> <label data-actuator-id="motor2">1</label>
</li> </li>
<li class="form-row"> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2"> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
</li> </li>
<li class="form-row info"> <li class="form-row info">
<label>Motor 3</label> <label>Motor 3</label>
<label data-actuator-id="motor3">1</label> <label data-actuator-id="motor3">1</label>
</li> </li>
<li class="form-row"> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3"> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
</li> </li>
<div class="form-row">
</ul> <label for="ap">Preset Mode</label>
</div> <label class="switch preset-mode" data-state="false">
</form> <input type="checkbox" name="presetMode">
<form id="prototypControls" class="container collapsible"> <span class="slider round" data-state="false"></span>
<span class="heading">Makros</span> </label>
<div class="content"> <button class="disabled">Add</button>
<div class="form-row"> </div>
<label>Stop</label> </ul>
<button>Run</button> </div>
</div> </form>
<div class="form-row"> <form id="prototypControls" class="container collapsible">
<label>Preset Mode</label> <span class="heading">Makros</span>
<button>Run</button> <div class="content">
</div> <div class="form-row">
<div class="form-row"> <label>Stop</label>
<label>Do stuff</label> <button>Run</button>
<button>Run</button> </div>
</div> <div class="form-row">
</div> <label>Preset Mode</label>
</form> <button>Run</button>
<div class="settings container collapsible"> </div>
<span class="heading">WiFi Settings</span> <div class="form-row">
<div class="content"> <label>Do stuff</label>
<form> <button>Run</button>
<li class="form-row"> </div>
<label for="ap">AP Mode</label> </div>
<label class="switch"> </form>
<input type="checkbox"> <form id="prototypControls" class="container collapsible">
<span class="slider round"></span> <span class="heading">Presets</span>
</label> <div class="content">
</li> <li class="form-row">
<li class="form-row"> <label for="ap">Preset Mode</label>
<label for="ssid">SSID</label> <label class="switch preset-mode" data-state="0">
<input type="text" name="ssid" placeholder="Default AP: LaserSpiro"> <input type="checkbox">
</li> <span class="slider round"></span>
<li class="form-row"> </label>
<label for="password">PW</label> </li>
<input type="password" name="password" placeholder="Default: th3r31sn0sp00n"> <div class="form-row">
</li> <label>Do stuff</label>
<li class="form-row"> <button>Run</button>
<button type="submit">Save</button> </div>
</li> </div>
</ul> </form>
</form> <div class="settings container collapsible open">
</div> <span class="heading">WiFi Settings</span>
</div> <div class="content">
<div id="prototypControls" class="container collapsible"> <form>
<span class="heading">Debug</span> <li class="form-row">
<div class="content"> <label for="ap">AP Mode</label>
<span>Free Heap</span> <label class="switch ap-mode">
<br> <input type="checkbox" name="apMode">
<text class="sectionDesc">last uri:</text> <span class="slider round" data-bind="apMode" data-state="false"></span>
<div id="uriDiv"></div> </label>
<text class="sectionDesc">last respone:</text> </li>
<br> <li class="form-row">
<div id="response"> <label for="ssid">SSID</label>
</div> <input type="text" name="ssid" placeholder="Default AP: LaserSpiro">
<br> </li>
</div> <li class="form-row">
</div> <label for="password">PW</label>
<input type="password" name="password" placeholder="Default: th3r31sn0sp00n">
</li>
<li class="form-row">
<button type="submit">Save</button>
</li>
</ul>
</form>
</div>
</div> </div>
<div id="prototypControls" class="container collapsible">
<span class="heading">Debug</span>
<div class="content">
<span>Free Heap</span>
<br>
<text class="sectionDesc">last uri:</text>
<div id="uriDiv"></div>
<text class="sectionDesc">last respone:</text>
<br>
<div id="response">
</div>
<br>
</div>
</div>
</div>
</body> </body>
</html> </html>

16
frontend/scripts/sui.js
View File

@@ -9,22 +9,18 @@ var Sui = {
}, },
link: (node) => { link: (node) => {
return (actuator) => { return (actuator) => {
let update = function(endpoint, method, props) { let update = actuator.handler || function(actuator) {
Sui.http.ajax({ Sui.http.ajax({
method: method, method: actuator.method,
endpoint: node.api[endpoint], endpoint: actuator.api,
data: props, data: actuator.data ?
actuator.data.call(this) : [this.value],
cache: false cache: false
}, actuator.onResponse || null); }, actuator.onResponse || null);
}; };
Sui.select(actuator.selector).forEach( (domEl) =>{ Sui.select(actuator.selector).forEach( (domEl) =>{
let handle = function(event) { let handle = function(event) {
update.call(this, update.call(this, actuator);
actuator.api,
actuator.method,
actuator.data ?
actuator.data.call(this) : [this.value]
);
} }
domEl.addEventListener(actuator.event, handle) domEl.addEventListener(actuator.event, handle)
}); });

46
frontend/scripts/zMain.js
View File

@@ -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(() => { Sui.ready(() => {
let debugResponse = (data) => { let debugResponse = (data) => {
document.querySelector('#response').innerHTML = data; document.querySelector('#response').innerHTML = data;
@@ -12,7 +25,33 @@ Sui.ready(() => {
// init actuators // 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', method: 'POST',
selector: '.slider.motor', selector: '.slider.motor',
event: 'change', event: 'change',
@@ -30,7 +69,7 @@ Sui.ready(() => {
return Sui.util.serialize(payload); return Sui.util.serialize(payload);
} }
}, { }, {
api: 'LASER', api: '/spirograph',
method: 'POST', method: 'POST',
selector: '.slider.laser', selector: '.slider.laser',
event: 'change', event: 'change',
@@ -47,7 +86,8 @@ Sui.ready(() => {
}].forEach(Sui.link({ }].forEach(Sui.link({
api: { api: {
MOTOR: '/spirograph', // {motorNr}/{value} MOTOR: '/spirograph', // {motorNr}/{value}
LASER: '/spirograph' // {value} LASER: '/spirograph', // {value}
PRESET: '/presetMode'
} }
})); }));
}); });

9
frontend/styles/base.less
View File

@@ -6,6 +6,10 @@
display: block; display: block;
} }
.disabled {
opacity: 0.65;
}
.sui { .sui {
background: @color-black; background: @color-black;
color: @color-main-light; color: @color-main-light;
@@ -18,7 +22,6 @@
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
> .content { > .content {
padding: @default-padding; padding: @default-padding;
} }
@@ -29,8 +32,10 @@
button { button {
background: @color-main; background: @color-main;
color: white; color: @color-white;
font-size: 0.9em;
border: 0; border: 0;
padding: .8em; padding: .8em;
margin: 0 .4em;
} }
} }

5
frontend/styles/form/switch.less
View File

@@ -15,10 +15,11 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: @color-grey; background-color: @color-grey2;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
margin-left: -40px; margin-left: -50px;
margin-top: 4px;
} }
.slider:before { .slider:before {

1
frontend/styles/theme.less
View File

@@ -3,6 +3,7 @@
@color-black: #000000; @color-black: #000000;
@color-white: #eeeeee; @color-white: #eeeeee;
@color-grey: #b3b2b2; @color-grey: #b3b2b2;
@color-grey2: #7b7b7b;
@color-main: #097479; @color-main: #097479;
@color-main-light: #0eb8c0; @color-main-light: #0eb8c0;
@color-container: #333333; @color-container: #333333;