mirror of
https://github.com/0x1d/esp8266-laser.git
synced 2025-12-15 18:38:20 +01:00
setup base frontend framework
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
@@ -3,38 +3,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
<title>Esp8266 laserspiro controller</title>
|
<title>Esp8266 laserspiro controller</title>
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-32x32.png">
|
||||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.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 type="text/javascript">
|
|
||||||
function sendReq(arg)
|
|
||||||
{
|
|
||||||
var nocache = "?n=" + Math.random() * 100234;
|
|
||||||
arg = arg + nocache;
|
|
||||||
var uriDiv = document.getElementById("uriDiv");
|
|
||||||
uriDiv.innerHTML = arg;
|
|
||||||
var xh = new XMLHttpRequest();
|
|
||||||
xh.onreadystatechange = function(){
|
|
||||||
if (xh.readyState == 4){
|
|
||||||
if(xh.status == 200) {
|
|
||||||
if (this.responseText != null) {
|
|
||||||
var res = JSON.parse(xh.responseText);
|
|
||||||
var responseDiv = document.getElementById("responseDiv");
|
|
||||||
responseDiv.innerHTML = JSON.stringify(res, null, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xh.overrideMimeType("text/json");
|
|
||||||
//console.log(uri);
|
|
||||||
xh.open("GET", arg, true);
|
|
||||||
xh.send(null);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body id="index" style="margin:0; padding:0;">
|
<body id="index" style="margin:0; padding:0;">
|
||||||
<div id="Main">
|
<div id="Main">
|
||||||
@@ -122,21 +93,21 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="prototypControls">
|
<div id="prototypControls">
|
||||||
<text class="sectionDesc">some tests:</text>
|
<label>L</label>
|
||||||
<div id="ledMacroButtonsCont">
|
<input type="range" class="laser slider" value="0" max="128">
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/motor/1/128')">/motor/1/128</a>
|
<label>M1</label>
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/motor/2/3')">/motor/2/3</a>
|
<input type="range" class="motor slider" value="0" max="128" data-motor-nr="0">
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/laser/128')">/laser/1/128</a>
|
<label>M2</label>
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/laser/13')">/laser/1/13</a>
|
<input type="range" class="motor slider" value="0" max="128" data-motor-nr="1">
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/laser/1')">/laser/1/1</a>
|
<label>M3</label>
|
||||||
</div>
|
<input type="range" class="motor slider" value="0" max="128" data-motor-nr="2">
|
||||||
</div>
|
</div>
|
||||||
<div id="prototypControls">
|
<div id="prototypControls">
|
||||||
<text class="sectionDesc">last uri:</text>
|
<text class="sectionDesc">last uri:</text>
|
||||||
<div id="uriDiv"></div>
|
<div id="uriDiv"></div>
|
||||||
<text class="sectionDesc">last respone:</text>
|
<text class="sectionDesc">last respone:</text>
|
||||||
<br>
|
<br>
|
||||||
<div id="responseDiv">
|
<div id="response">
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
185
data/scripts.js
Normal file
185
data/scripts.js
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
/**
|
||||||
|
* Poor Man's JQuery
|
||||||
|
* Lightweight DOM manipulation utility
|
||||||
|
*/
|
||||||
|
var $ = function(selector){
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
var element = selector.nodeType === 1 ? selector : {};
|
||||||
|
|
||||||
|
// utility functions
|
||||||
|
this.util = {
|
||||||
|
// build a fragment from a given html string
|
||||||
|
buildFragment: function(html){
|
||||||
|
// set the html to a temporary element
|
||||||
|
var nodeHolder = document.createElement('div');
|
||||||
|
nodeHolder.innerHTML = html;
|
||||||
|
// create a document fragment and append all input nodes
|
||||||
|
var fragment = document.createDocumentFragment();
|
||||||
|
while(nodeHolder.firstChild){
|
||||||
|
fragment.appendChild(nodeHolder.firstChild);
|
||||||
|
}
|
||||||
|
return fragment;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// check if the input selector is already an element or a css selector
|
||||||
|
if(selector.nodeType === 1){ // is element
|
||||||
|
if(selector.is$ ? selector.is$() : false){ // check if the element is already extended
|
||||||
|
return selector;
|
||||||
|
}
|
||||||
|
element = selector; // set the element to be extended
|
||||||
|
} else { // the element is in fact a css selector
|
||||||
|
element = document.querySelector(selector); // search for the element
|
||||||
|
}
|
||||||
|
|
||||||
|
// overload the innerHTML attribute
|
||||||
|
element.html = function(val){
|
||||||
|
this.innerHTML = val;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
// overload the value attribute
|
||||||
|
element.val = function(val){
|
||||||
|
this.value = val;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
// append the given string as child fragment
|
||||||
|
element.append = function(html){
|
||||||
|
var fragment = that.util.buildFragment(html);
|
||||||
|
this.appendChild(fragment);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
// prepend the given string as child fragment
|
||||||
|
element.prepend = function(html){
|
||||||
|
var fragment = that.util.buildFragment(html);
|
||||||
|
this.insertBefore(fragment,this.firstChild);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
// search for an element inside of an element
|
||||||
|
element.find = function(what){
|
||||||
|
var found = $(what);
|
||||||
|
if(found){
|
||||||
|
return $(found);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get parent of the current element
|
||||||
|
element.parent = function(){
|
||||||
|
if(this.parentElement){
|
||||||
|
return $(this.parentElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// indicates that this element is a $ function
|
||||||
|
element.is$ = function(){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
element.on = function(event, func, useCapture) {
|
||||||
|
this.addEventListener(event, func, useCapture);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
return element;
|
||||||
|
};var Sui = {
|
||||||
|
ready: (callback) => {
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
callback();
|
||||||
|
}, false);
|
||||||
|
},
|
||||||
|
select: (selector) => {
|
||||||
|
return document.querySelectorAll(selector);
|
||||||
|
},
|
||||||
|
link: function(node){
|
||||||
|
return (actuator) => {
|
||||||
|
let update = function(endpoint, method, props) {
|
||||||
|
Sui.http.ajax({
|
||||||
|
method: method,
|
||||||
|
endpoint: node.api[endpoint] + props.join('/'),
|
||||||
|
cache: false
|
||||||
|
}, actuator.onResponse || null);
|
||||||
|
};
|
||||||
|
Sui.select(actuator.selector).forEach( (domEl) =>{
|
||||||
|
let handle = function(event) {
|
||||||
|
data = [this.value];
|
||||||
|
actuator.data ? data.push(actuator.data.call(this)) : undefined;
|
||||||
|
update.call(this, actuator.api, 'GET', data);
|
||||||
|
}
|
||||||
|
$(domEl).on(actuator.event, handle)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
},
|
||||||
|
util: {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* serialize a flat json object
|
||||||
|
*/
|
||||||
|
serialize: (obj) => {
|
||||||
|
var str = [];
|
||||||
|
for(var p in obj){
|
||||||
|
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
|
||||||
|
}
|
||||||
|
return str.join("&");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
http: {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ajax request
|
||||||
|
* {
|
||||||
|
* method: <'GET', 'POST', whatever >,
|
||||||
|
* endpoint: <URL to the service endpoint>,
|
||||||
|
* async: <true or false>, (default true)
|
||||||
|
* data: <json object with data to transmit>,
|
||||||
|
* cache: <true or false> (default false)
|
||||||
|
* }
|
||||||
|
*/
|
||||||
|
ajax: (config, callback) => {
|
||||||
|
var cache = config.cache || false;
|
||||||
|
var data = config.data || {};
|
||||||
|
if(!cache) {
|
||||||
|
data['_'] = new Date().getTime();
|
||||||
|
}
|
||||||
|
var serializedData = Sui.util.serialize(data);
|
||||||
|
var endPointUrl = (config.method === 'GET' || config.method === 'DELETE') && data ? config.endpoint+'?'+serializedData : config.endpoint;
|
||||||
|
var postData = config.method === 'POST' || config.method === 'PUT' ? serializedData : null;
|
||||||
|
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
request.open(config.method, endPointUrl, config.async || true);
|
||||||
|
request.onreadystatechange = function () {
|
||||||
|
// TODO handle response properly
|
||||||
|
callback ? callback(request.responseText, request.status) : undefined;
|
||||||
|
};
|
||||||
|
request.send(postData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};Sui.ready(() => {
|
||||||
|
let debugResponse = (data) => {
|
||||||
|
$('#response').html(data);
|
||||||
|
};
|
||||||
|
[{
|
||||||
|
api: 'MOTOR',
|
||||||
|
method: 'GET',
|
||||||
|
selector: '.motor.slider',
|
||||||
|
event: 'change',
|
||||||
|
data: function(){
|
||||||
|
return this.getAttribute('data-motor-nr');
|
||||||
|
},
|
||||||
|
onResponse: debugResponse
|
||||||
|
}, {
|
||||||
|
api: 'LASER',
|
||||||
|
method: 'GET',
|
||||||
|
selector: '.laser.slider',
|
||||||
|
event: 'change',
|
||||||
|
onResponse: debugResponse
|
||||||
|
}].forEach(Sui.link({
|
||||||
|
api: {
|
||||||
|
MOTOR: '/motor/', // {motorNr}/{value}
|
||||||
|
LASER: '/laser/' // {value}
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
});
|
||||||
@@ -1,3 +1,11 @@
|
|||||||
|
label {
|
||||||
|
width: 10%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
width: 80%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: "Bookman Old Style", "Serifa BT", "URW Bookman L", "itc bookman", times, serif;
|
font-family: "Bookman Old Style", "Serifa BT", "URW Bookman L", "itc bookman", times, serif;
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
@@ -3,38 +3,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||||
<title>Esp8266 laserspiro controller</title>
|
<title>Esp8266 laserspiro controller</title>
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-32x32.png">
|
||||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
|
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.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 type="text/javascript">
|
|
||||||
function sendReq(arg)
|
|
||||||
{
|
|
||||||
var nocache = "?n=" + Math.random() * 100234;
|
|
||||||
arg = arg + nocache;
|
|
||||||
var uriDiv = document.getElementById("uriDiv");
|
|
||||||
uriDiv.innerHTML = arg;
|
|
||||||
var xh = new XMLHttpRequest();
|
|
||||||
xh.onreadystatechange = function(){
|
|
||||||
if (xh.readyState == 4){
|
|
||||||
if(xh.status == 200) {
|
|
||||||
if (this.responseText != null) {
|
|
||||||
var res = JSON.parse(xh.responseText);
|
|
||||||
var responseDiv = document.getElementById("responseDiv");
|
|
||||||
responseDiv.innerHTML = JSON.stringify(res, null, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xh.overrideMimeType("text/json");
|
|
||||||
//console.log(uri);
|
|
||||||
xh.open("GET", arg, true);
|
|
||||||
xh.send(null);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body id="index" style="margin:0; padding:0;">
|
<body id="index" style="margin:0; padding:0;">
|
||||||
<div id="Main">
|
<div id="Main">
|
||||||
@@ -122,21 +93,21 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="prototypControls">
|
<div id="prototypControls">
|
||||||
<text class="sectionDesc">some tests:</text>
|
<label>L</label>
|
||||||
<div id="ledMacroButtonsCont">
|
<input type="range" class="laser slider" value="0" max="128">
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/motor/1/128')">/motor/1/128</a>
|
<label>M1</label>
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/motor/2/3')">/motor/2/3</a>
|
<input type="range" class="motor slider" value="0" max="128" data-motor-nr="0">
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/laser/128')">/laser/1/128</a>
|
<label>M2</label>
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/laser/13')">/laser/1/13</a>
|
<input type="range" class="motor slider" value="0" max="128" data-motor-nr="1">
|
||||||
<a class="ledMacroButton" href="javascript:sendReq('/laser/1')">/laser/1/1</a>
|
<label>M3</label>
|
||||||
</div>
|
<input type="range" class="motor slider" value="0" max="128" data-motor-nr="2">
|
||||||
</div>
|
</div>
|
||||||
<div id="prototypControls">
|
<div id="prototypControls">
|
||||||
<text class="sectionDesc">last uri:</text>
|
<text class="sectionDesc">last uri:</text>
|
||||||
<div id="uriDiv"></div>
|
<div id="uriDiv"></div>
|
||||||
<text class="sectionDesc">last respone:</text>
|
<text class="sectionDesc">last respone:</text>
|
||||||
<br>
|
<br>
|
||||||
<div id="responseDiv">
|
<div id="response">
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
88
frontend/scripts/pmjq.js
Normal file
88
frontend/scripts/pmjq.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
/**
|
||||||
|
* Poor Man's JQuery
|
||||||
|
* Lightweight DOM manipulation utility
|
||||||
|
*/
|
||||||
|
var $ = function(selector){
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
var element = selector.nodeType === 1 ? selector : {};
|
||||||
|
|
||||||
|
// utility functions
|
||||||
|
this.util = {
|
||||||
|
// build a fragment from a given html string
|
||||||
|
buildFragment: function(html){
|
||||||
|
// set the html to a temporary element
|
||||||
|
var nodeHolder = document.createElement('div');
|
||||||
|
nodeHolder.innerHTML = html;
|
||||||
|
// create a document fragment and append all input nodes
|
||||||
|
var fragment = document.createDocumentFragment();
|
||||||
|
while(nodeHolder.firstChild){
|
||||||
|
fragment.appendChild(nodeHolder.firstChild);
|
||||||
|
}
|
||||||
|
return fragment;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// check if the input selector is already an element or a css selector
|
||||||
|
if(selector.nodeType === 1){ // is element
|
||||||
|
if(selector.is$ ? selector.is$() : false){ // check if the element is already extended
|
||||||
|
return selector;
|
||||||
|
}
|
||||||
|
element = selector; // set the element to be extended
|
||||||
|
} else { // the element is in fact a css selector
|
||||||
|
element = document.querySelector(selector); // search for the element
|
||||||
|
}
|
||||||
|
|
||||||
|
// overload the innerHTML attribute
|
||||||
|
element.html = function(val){
|
||||||
|
this.innerHTML = val;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
// overload the value attribute
|
||||||
|
element.val = function(val){
|
||||||
|
this.value = val;
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
// append the given string as child fragment
|
||||||
|
element.append = function(html){
|
||||||
|
var fragment = that.util.buildFragment(html);
|
||||||
|
this.appendChild(fragment);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
// prepend the given string as child fragment
|
||||||
|
element.prepend = function(html){
|
||||||
|
var fragment = that.util.buildFragment(html);
|
||||||
|
this.insertBefore(fragment,this.firstChild);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
// search for an element inside of an element
|
||||||
|
element.find = function(what){
|
||||||
|
var found = $(what);
|
||||||
|
if(found){
|
||||||
|
return $(found);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// get parent of the current element
|
||||||
|
element.parent = function(){
|
||||||
|
if(this.parentElement){
|
||||||
|
return $(this.parentElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// indicates that this element is a $ function
|
||||||
|
element.is$ = function(){
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
element.on = function(event, func, useCapture) {
|
||||||
|
this.addEventListener(event, func, useCapture);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
return element;
|
||||||
|
};
|
||||||
73
frontend/scripts/sui.js
Normal file
73
frontend/scripts/sui.js
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
var Sui = {
|
||||||
|
ready: (callback) => {
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
callback();
|
||||||
|
}, false);
|
||||||
|
},
|
||||||
|
select: (selector) => {
|
||||||
|
return document.querySelectorAll(selector);
|
||||||
|
},
|
||||||
|
link: function(node){
|
||||||
|
return (actuator) => {
|
||||||
|
let update = function(endpoint, method, props) {
|
||||||
|
Sui.http.ajax({
|
||||||
|
method: method,
|
||||||
|
endpoint: node.api[endpoint] + props.join('/'),
|
||||||
|
cache: false
|
||||||
|
}, actuator.onResponse || null);
|
||||||
|
};
|
||||||
|
Sui.select(actuator.selector).forEach( (domEl) =>{
|
||||||
|
let handle = function(event) {
|
||||||
|
data = [this.value];
|
||||||
|
actuator.data ? data.push(actuator.data.call(this)) : undefined;
|
||||||
|
update.call(this, actuator.api, 'GET', data);
|
||||||
|
}
|
||||||
|
$(domEl).on(actuator.event, handle)
|
||||||
|
});
|
||||||
|
};
|
||||||
|
},
|
||||||
|
util: {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* serialize a flat json object
|
||||||
|
*/
|
||||||
|
serialize: (obj) => {
|
||||||
|
var str = [];
|
||||||
|
for(var p in obj){
|
||||||
|
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
|
||||||
|
}
|
||||||
|
return str.join("&");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
http: {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ajax request
|
||||||
|
* {
|
||||||
|
* method: <'GET', 'POST', whatever >,
|
||||||
|
* endpoint: <URL to the service endpoint>,
|
||||||
|
* async: <true or false>, (default true)
|
||||||
|
* data: <json object with data to transmit>,
|
||||||
|
* cache: <true or false> (default false)
|
||||||
|
* }
|
||||||
|
*/
|
||||||
|
ajax: (config, callback) => {
|
||||||
|
var cache = config.cache || false;
|
||||||
|
var data = config.data || {};
|
||||||
|
if(!cache) {
|
||||||
|
data['_'] = new Date().getTime();
|
||||||
|
}
|
||||||
|
var serializedData = Sui.util.serialize(data);
|
||||||
|
var endPointUrl = (config.method === 'GET' || config.method === 'DELETE') && data ? config.endpoint+'?'+serializedData : config.endpoint;
|
||||||
|
var postData = config.method === 'POST' || config.method === 'PUT' ? serializedData : null;
|
||||||
|
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
request.open(config.method, endPointUrl, config.async || true);
|
||||||
|
request.onreadystatechange = function () {
|
||||||
|
// TODO handle response properly
|
||||||
|
callback ? callback(request.responseText, request.status) : undefined;
|
||||||
|
};
|
||||||
|
request.send(postData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
26
frontend/scripts/zMain.js
Normal file
26
frontend/scripts/zMain.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
Sui.ready(() => {
|
||||||
|
let debugResponse = (data) => {
|
||||||
|
$('#response').html(data);
|
||||||
|
};
|
||||||
|
[{
|
||||||
|
api: 'MOTOR',
|
||||||
|
method: 'GET',
|
||||||
|
selector: '.motor.slider',
|
||||||
|
event: 'change',
|
||||||
|
data: function(){
|
||||||
|
return this.getAttribute('data-motor-nr');
|
||||||
|
},
|
||||||
|
onResponse: debugResponse
|
||||||
|
}, {
|
||||||
|
api: 'LASER',
|
||||||
|
method: 'GET',
|
||||||
|
selector: '.laser.slider',
|
||||||
|
event: 'change',
|
||||||
|
onResponse: debugResponse
|
||||||
|
}].forEach(Sui.link({
|
||||||
|
api: {
|
||||||
|
MOTOR: '/motor/', // {motorNr}/{value}
|
||||||
|
LASER: '/laser/' // {value}
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
});
|
||||||
@@ -1,3 +1,15 @@
|
|||||||
|
|
||||||
|
label {
|
||||||
|
width: 10%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
width: 80%;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: "Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif;
|
font-family: "Bookman Old Style","Serifa BT","URW Bookman L","itc bookman",times,serif;
|
||||||
|
|||||||
@@ -8,10 +8,12 @@
|
|||||||
"clear": "rm -rf data/*",
|
"clear": "rm -rf data/*",
|
||||||
"cp:config": "cp config/* data/",
|
"cp:config": "cp config/* data/",
|
||||||
"build:css": "lessc frontend/styles/main.less data/styles.css",
|
"build:css": "lessc frontend/styles/main.less data/styles.css",
|
||||||
|
"build:js": "cat frontend/scripts/* > data/scripts.js",
|
||||||
"build:html": "cp -r frontend/pages/* data/",
|
"build:html": "cp -r frontend/pages/* data/",
|
||||||
"build": "npm run build:css && npm run build:html",
|
"build": "npm run build:css && npm run build:html && npm run build:js",
|
||||||
"watch:html": "nodemon -q -w frontend/pages/ --ext \".\" --exec \"npm run build:html\"",
|
"watch:html": "nodemon -q -w frontend/pages/ --ext \".\" --exec \"npm run build:html\"",
|
||||||
"watch:css": "nodemon -q -w frontend/styles --ext \".\" --exec \"npm run build:css\"",
|
"watch:css": "nodemon -q -w frontend/styles --ext \".\" --exec \"npm run build:css\"",
|
||||||
|
"watch:js": "nodemon -q -w frontend/scripts --ext \".\" --exec \"npm run build:js\"",
|
||||||
"watch:config": "nodemon -q -w config --ext \".\" --exec \"npm run cp:config\"",
|
"watch:config": "nodemon -q -w config --ext \".\" --exec \"npm run cp:config\"",
|
||||||
"watch:livereload": "cd data && live-server",
|
"watch:livereload": "cd data && live-server",
|
||||||
"dev": "npm run clear && npm run build && npm-run-all --parallel watch:*"
|
"dev": "npm run clear && npm run build && npm-run-all --parallel watch:*"
|
||||||
|
|||||||
Reference in New Issue
Block a user