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

semi working

Browse Source 
- will create AP "esptest" and http listen on 192.168.4.1:80
 - only motor/nr/value and laser/value are implemented now
This commit is contained in:
FrYakaTKoP
2017-10-08 00:16:50 +02:00
parent 81871b0965
commit 0104ec6874
3 changed files with 154 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
data/index.html
View File

@@ -2,142 +2,25 @@
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Esp8266 - FsWebserver</title>
<title>Esp8266 laserspiro controller</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
//var ledGpNames = [5, 4, 13, 12, 14, 16]; // 4 & 5 flipped on my board dirty hack here
function updateLeds(initial, cb)
{
var nocache = "&nocache=" + Math.random() *10001;
//var uri = "json.json";
var uri = "leds";
if(!initial) {
uri += "?LED=" + cb.value + "&state=" + (Number(cb.checked)) + nocache;
}
else
{
uri += "?" + nocache;
}
console.log(uri);
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 ledDiv;
if(initial)
{
var ledInput;
var ledLabel;
var ledBarDiv = document.getElementById("ledBar");
var clearAllMacroBtn = document.createElement("a");
clearAllMacroBtn.setAttribute("class", "ledMacroButton");
clearAllMacroBtn.setAttribute("href", "javascript:handleLedMarco(\"clearAll\")");
clearAllMacroBtn.innerHTML = "Clear All Leds";
}
for (var i = 0; i < res.leds.length; i++) {
var ledPin = res.leds[i][i][0];
var ledState = res.leds[i][i][1];
var ledName = "LED" + ledPin;
if(initial)
{
ledDiv = "";
ledInput = "";
ledLabel = "";
ledDiv = document.createElement("div");
ledDiv.setAttribute("class", "ledDiv");
ledBarDiv.appendChild(ledDiv);
ledInput = document.createElement("input");
ledInput.type = "checkbox";
ledInput.value = (Number(ledPin));
ledInput.setAttribute("id", ledName);
ledInput.setAttribute("name", ledName);
ledInput.setAttribute("onClick", "updateLeds(false, this)");
ledDiv.appendChild(ledInput);
ledLabel = document.createElement("label");
ledLabel.setAttribute("for", ledName);
ledLabel.innerHTML = ledPin;
ledDiv.appendChild(ledLabel);
}
var ledElement = document.getElementsByName(ledName)[0];
if(res.leds[i][i][1] === "1")
{
ledElement.checked = true;
}
else
{
ledElement.checked = false;
}
// }
if(initial)
{
ledBarDiv.appendChild(clearAllMacroBtn);
}
for (var i = 0; i < res.leds.length; i++) {
}
//}
//}
}
};
xh.overrideMimeType("text/json");
//console.log(uri);
xh.open("GET", uri, true);
xh.send(null);
};
function clearAll() {
};
function run(){
if(!running){
running = true;
updateLeds()();
}
}
function dec2bin(dec){
dec = parseInt(dec, 10)
return (dec >>> 0).toString(2);
}
function fillLedBar() {
updateLeds();
}
function handleLedMarco(arg)
function sendReq(arg)
{
arg = "/" + arg;
console.log("uri: " + 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);
for (var i = 0; i < res.leds.length; i++) {
var ledName = "LED" + i;
var ledElement = document.getElementsByName(ledName)[0];
if(res.leds[i] === "1")
{
ledElement.checked = true;
}
else
{
ledElement.checked = false;
}
}
var responseDiv = document.getElementById("responseDiv");
responseDiv.innerHTML = JSON.stringify(res, null, 1);
}
console.log("res: " + res);
}
}
};
@@ -146,20 +29,14 @@
xh.open("GET", arg, true);
xh.send(null);
}
function onBodyLoad(){
// init LEDbar
updateLeds(true);
// run the loop per default
//run();
}
</script>
</script>
</head>
<body id="index" style="margin:0; padding:0;" onload="onBodyLoad()">
<body id="index" style="margin:0; padding:0;">
<div id="Main">
<div id="pageTitle">
<!-- SVG Glitch from: http://codepen.io/DirkWeber/pen/ArFvk -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="460px" height="85px" viewBox="0 0 460 85">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="580px" height="45px" viewBox="0 0 580 45">
<defs>
<filter id="filter">
<feFlood flood-color="#66bebe" result="black" />
@@ -235,23 +112,29 @@
</filter>
</defs>
<g>
<text id="titleGlitch" style="filter: url(#filter);" x="0" y="45">ESP8266-Arduino</text>
<text id="titleText" x="10" y="75">AP Server Portal</text>
<text id="titleGlitch" style="filter: url(#filter);" x="0" y="35">Laserspiro controller</text>
</g>
</svg>
</div>
<div id="ledControls">
<text class="sectionTitle">LED Controls:</text>
<text class="sectionDesc">Click on the LEDs to light em Up! </text>
<div id="ledBar"></div>
<text class="sectionDesc">also try a Animation:</text>
<div class="ledMacroButtons">
<a class="ledMacroButton" href="javascript:handleLedMarco('rider')">Rider</a>
<a class="ledMacroButton" href="javascript:handleLedMarco('flipper')">Flipper</a>
<a class="ledMacroButton" href="javascript:handleLedMarco('clearAll')">stop & ClearAll</a>
<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/1/128')">/laser/1/128</a>
<a class="ledMacroButton" href="javascript:sendReq('/laser/1/13')">/laser/1/13</a>
<a class="ledMacroButton" href="javascript:sendReq('/laser/1/1')">/laser/1/1</a>
</div>
</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>
<br>
</div>
</div>
</body>

61
data/style.css
View File

@@ -5,7 +5,7 @@ body {
align: Center;
}
#Main {
width: 460px;
width: 600px;
margin: 5px 3px 3px 12px;
}
@@ -17,7 +17,7 @@ text#titleGlitch {
font-weight: bold;
text-shadow: 2px 2px black;
font-family: sans-serif;
font-size: 48px;
font-size: 36px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@@ -32,7 +32,7 @@ text#titleText {
svg {
border: solid 1px black;
width: 100%;
height: 80px;
height: 50px;
display: block;
position: relative;
/*overflow: hidden; */
@@ -41,7 +41,7 @@ svg {
-moz-border-radius: 10px;
border-radius: 10px;
}
#ledControls {
#prototypControls {
margin-top:3px;
padding: 10px;
border: solid black 1px;
@@ -64,63 +64,16 @@ svg {
float: left;
clear: left;
}
#ledBar {
float:none;
clear:left;
margin-left: 7px;
padding-top: 10px;
overflow: auto;
}
.ledDiv {
width: 40px;
height: 40px;
background: #add;
margin: 3px 3px;
float:left;
line-height: 30px;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}
.ledDiv label {
display: block;
width: 30px;
height: 30px;
border-radius: 100px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-o-transition: all .1s ease;
-ms-transition: all .1s ease;
transition: all .1s ease;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
background: #663300;
-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
}
.ledDiv input[type="checkbox"] {
visibility: hidden;
}
.ledDiv input[type=checkbox]:checked + label {
background: #ff9900;
}
.ledMacroButtons {
#ledMacroButtonsCont {
padding: 18px 5px 15px 5px;
text-decoration: none;
float:none;
clear:left;
}
.ledMacroButton {
height: 50px;
background: #00989d;