mirror of
https://github.com/0x1d/esp8266-laser.git
synced 2025-12-14 18:15:22 +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>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>Esp8266 laserspiro controller</title>
|
||||
<link rel="icon" type="image/png" sizes="32x32" 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="icon" type="image/png" sizes="16x16" href="/favicon-32x32.png">
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
|
||||
<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>
|
||||
|
||||
<script src="scripts.js"></script>
|
||||
</head>
|
||||
<body id="index" style="margin:0; padding:0;">
|
||||
<div id="Main">
|
||||
@@ -122,21 +93,21 @@
|
||||
</div>
|
||||
|
||||
<div id="prototypControls">
|
||||
<text class="sectionDesc">some tests:</text>
|
||||
<div id="ledMacroButtonsCont">
|
||||
<a class="ledMacroButton" href="javascript:sendReq('/motor/1/128')">/motor/1/128</a>
|
||||
<a class="ledMacroButton" href="javascript:sendReq('/motor/2/3')">/motor/2/3</a>
|
||||
<a class="ledMacroButton" href="javascript:sendReq('/laser/128')">/laser/1/128</a>
|
||||
<a class="ledMacroButton" href="javascript:sendReq('/laser/13')">/laser/1/13</a>
|
||||
<a class="ledMacroButton" href="javascript:sendReq('/laser/1')">/laser/1/1</a>
|
||||
</div>
|
||||
<label>L</label>
|
||||
<input type="range" class="laser slider" value="0" max="128">
|
||||
<label>M1</label>
|
||||
<input type="range" class="motor slider" value="0" max="128" data-motor-nr="0">
|
||||
<label>M2</label>
|
||||
<input type="range" class="motor slider" value="0" max="128" data-motor-nr="1">
|
||||
<label>M3</label>
|
||||
<input type="range" class="motor slider" value="0" max="128" data-motor-nr="2">
|
||||
</div>
|
||||
<div id="prototypControls">
|
||||
<text class="sectionDesc">last uri:</text>
|
||||
<div id="uriDiv"></div>
|
||||
<text class="sectionDesc">last respone:</text>
|
||||
<br>
|
||||
<div id="responseDiv">
|
||||
<div id="response">
|
||||
</div>
|
||||
<br>
|
||||
</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 {
|
||||
font-size: 14px;
|
||||
font-family: "Bookman Old Style", "Serifa BT", "URW Bookman L", "itc bookman", times, serif;
|
||||
|
||||
Reference in New Issue
Block a user