iot/esp8266-laser
1
0
Fork 0
mirror of https://github.com/0x1d/esp8266-laser.git synced 2025-12-14 10:06:49 +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>
<html>
<head>
<title>LaserSpirograph</title>
<title>LaserSpirograph</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<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="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
</head>
<body class="sui">
<div class="content">
<form id="prototypControls" class="spiro-control container collapsible open">
<span class="heading">Laser</span>
<div class="content">
<ul>
<li class="form-row info">
<label>Frequency</label>
<label data-actuator-id="laser">1</label>
</li>
<li class="form-row">
<input type="range" class="laser slider" value="1" min="1" max="128">
</li>
<li class="form-row info">
<label>Motor 1</label>
<label data-actuator-id="motor1">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
</li>
<li class="form-row info">
<label>Motor 3</label>
<label data-actuator-id="motor2">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
</li>
<li class="form-row info">
<label>Motor 3</label>
<label data-actuator-id="motor3">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
</li>
</ul>
</div>
</form>
<form id="prototypControls" class="container collapsible">
<span class="heading">Makros</span>
<div class="content">
<div class="form-row">
<label>Stop</label>
<button>Run</button>
</div>
<div class="form-row">
<label>Preset Mode</label>
<button>Run</button>
</div>
<div class="form-row">
<label>Do stuff</label>
<button>Run</button>
</div>
</div>
</form>
<div class="settings container collapsible">
<span class="heading">WiFi Settings</span>
<div class="content">
<form>
<li class="form-row">
<label for="ap">AP Mode</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
<li class="form-row">
<label for="ssid">SSID</label>
<input type="text" name="ssid" placeholder="Default AP: LaserSpiro">
</li>
<li class="form-row">
<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 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 class="content">
<form id="prototypControls" class="spiro-control container collapsible open">
<span class="heading">Laser</span>
<div class="content">
<ul>
<li class="form-row info">
<label>Frequency</label>
<label data-actuator-id="laser">1</label>
</li>
<li class="form-row">
<input type="range" class="laser slider" value="1" min="1" max="128">
</li>
<li class="form-row info">
<label>Motor 1</label>
<label data-actuator-id="motor1">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
</li>
<li class="form-row info">
<label>Motor 3</label>
<label data-actuator-id="motor2">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
</li>
<li class="form-row info">
<label>Motor 3</label>
<label data-actuator-id="motor3">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
</li>
<div class="form-row">
<label for="ap">Preset Mode</label>
<label class="switch preset-mode" data-state="false">
<input type="checkbox" name="presetMode">
<span class="slider round" data-state="false"></span>
</label>
<button class="disabled">Add</button>
</div>
</ul>
</div>
</form>
<form id="prototypControls" class="container collapsible">
<span class="heading">Makros</span>
<div class="content">
<div class="form-row">
<label>Stop</label>
<button>Run</button>
</div>
<div class="form-row">
<label>Preset Mode</label>
<button>Run</button>
</div>
<div class="form-row">
<label>Do stuff</label>
<button>Run</button>
</div>
</div>
</form>
<form id="prototypControls" class="container collapsible">
<span class="heading">Presets</span>
<div class="content">
<li class="form-row">
<label for="ap">Preset Mode</label>
<label class="switch preset-mode" data-state="0">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
<div class="form-row">
<label>Do stuff</label>
<button>Run</button>
</div>
</div>
</form>
<div class="settings container collapsible open">
<span class="heading">WiFi Settings</span>
<div class="content">
<form>
<li class="form-row">
<label for="ap">AP Mode</label>
<label class="switch ap-mode">
<input type="checkbox" name="apMode">
<span class="slider round" data-bind="apMode" data-state="false"></span>
</label>
</li>
<li class="form-row">
<label for="ssid">SSID</label>
<input type="text" name="ssid" placeholder="Default AP: LaserSpiro">
</li>
<li class="form-row">
<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 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>
</html>

64
data/scripts.js
View File

@@ -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'
}
}));
});

12
data/styles.css
View File

@@ -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;

2
data/wifi.json
View File

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

216
frontend/pages/index.html
View File

@@ -1,108 +1,134 @@
<!DOCTYPE html>
<html>
<head>
<title>LaserSpirograph</title>
<title>LaserSpirograph</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<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="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
</head>
<body class="sui">
<div class="content">
<form id="prototypControls" class="spiro-control container collapsible open">
<span class="heading">Laser</span>
<div class="content">
<ul>
<li class="form-row info">
<label>Frequency</label>
<label data-actuator-id="laser">1</label>
</li>
<li class="form-row">
<input type="range" class="laser slider" value="1" min="1" max="128">
</li>
<li class="form-row info">
<label>Motor 1</label>
<label data-actuator-id="motor1">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
</li>
<li class="form-row info">
<label>Motor 3</label>
<label data-actuator-id="motor2">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
</li>
<li class="form-row info">
<label>Motor 3</label>
<label data-actuator-id="motor3">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
</li>
</ul>
</div>
</form>
<form id="prototypControls" class="container collapsible">
<span class="heading">Makros</span>
<div class="content">
<div class="form-row">
<label>Stop</label>
<button>Run</button>
</div>
<div class="form-row">
<label>Preset Mode</label>
<button>Run</button>
</div>
<div class="form-row">
<label>Do stuff</label>
<button>Run</button>
</div>
</div>
</form>
<div class="settings container collapsible">
<span class="heading">WiFi Settings</span>
<div class="content">
<form>
<li class="form-row">
<label for="ap">AP Mode</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
<li class="form-row">
<label for="ssid">SSID</label>
<input type="text" name="ssid" placeholder="Default AP: LaserSpiro">
</li>
<li class="form-row">
<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 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 class="content">
<form id="prototypControls" class="spiro-control container collapsible open">
<span class="heading">Laser</span>
<div class="content">
<ul>
<li class="form-row info">
<label>Frequency</label>
<label data-actuator-id="laser">1</label>
</li>
<li class="form-row">
<input type="range" class="laser slider" value="1" min="1" max="128">
</li>
<li class="form-row info">
<label>Motor 1</label>
<label data-actuator-id="motor1">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
</li>
<li class="form-row info">
<label>Motor 3</label>
<label data-actuator-id="motor2">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
</li>
<li class="form-row info">
<label>Motor 3</label>
<label data-actuator-id="motor3">1</label>
</li>
<li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
</li>
<div class="form-row">
<label for="ap">Preset Mode</label>
<label class="switch preset-mode" data-state="false">
<input type="checkbox" name="presetMode">
<span class="slider round" data-state="false"></span>
</label>
<button class="disabled">Add</button>
</div>
</ul>
</div>
</form>
<form id="prototypControls" class="container collapsible">
<span class="heading">Makros</span>
<div class="content">
<div class="form-row">
<label>Stop</label>
<button>Run</button>
</div>
<div class="form-row">
<label>Preset Mode</label>
<button>Run</button>
</div>
<div class="form-row">
<label>Do stuff</label>
<button>Run</button>
</div>
</div>
</form>
<form id="prototypControls" class="container collapsible">
<span class="heading">Presets</span>
<div class="content">
<li class="form-row">
<label for="ap">Preset Mode</label>
<label class="switch preset-mode" data-state="0">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
<div class="form-row">
<label>Do stuff</label>
<button>Run</button>
</div>
</div>
</form>
<div class="settings container collapsible open">
<span class="heading">WiFi Settings</span>
<div class="content">
<form>
<li class="form-row">
<label for="ap">AP Mode</label>
<label class="switch ap-mode">
<input type="checkbox" name="apMode">
<span class="slider round" data-bind="apMode" data-state="false"></span>
</label>
</li>
<li class="form-row">
<label for="ssid">SSID</label>
<input type="text" name="ssid" placeholder="Default AP: LaserSpiro">
</li>
<li class="form-row">
<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 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>
</html>

16
frontend/scripts/sui.js
View File

@@ -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)
});

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(() => {
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'
}
}));
});

9
frontend/styles/base.less
View File

@@ -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;
}
}

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

@@ -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 {

1
frontend/styles/theme.less
View File

@@ -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;