add frontend dev toolchain

2025-12-14 18:15:22 +01:00 · 2017-10-22 16:24:57 +02:00
parent bbc3b195da
commit 944f2bbb34
15 changed files with 291 additions and 5 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1 @@
-
+node_modules/
--- a/config/config.json
+++ b/config/config.json
@@ -0,0 +1,5 @@
+{
+	"apMode": 0,
+	"SSID": "",
+	"Password": ""
+}
--- a/data/favicon-16x16.png
+++ b/data/favicon-16x16.png
--- a/data/favicon-32x32.png
+++ b/data/favicon-32x32.png
--- a/data/favicon-96x96.png
+++ b/data/favicon-96x96.png
--- a/data/favicon.ico
+++ b/data/favicon.ico
--- a/data/index.html
+++ b/data/index.html
@@ -3,7 +3,11 @@
 <head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Esp8266 laserspiro controller</title>  
-  <link rel="stylesheet" type="text/css" href="style.css">
+  <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="stylesheet" type="text/css" href="styles.css">
+
  <script type="text/javascript">
    function sendReq(arg) 
    {
--- a/data/styles.css
+++ b/data/styles.css
@@ -0,0 +1,100 @@
+body {
+  font-size: 14px;
+  font-family: "Bookman Old Style", "Serifa BT", "URW Bookman L", "itc bookman", times, serif;
+  background: #00979d none repeat scroll 0px 0px;
+  align: Center;
+}
+#Main {
+  width: 600px;
+  margin: 5px 3px 3px 12px;
+}
+text#titleGlitch {
+  fill: #006666;
+  font-weight: bold;
+  text-shadow: 2px 2px black;
+  font-family: sans-serif;
+  font-size: 36px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+text#titleText {
+  fill: #006666;
+  text-shadow: 1px 1px black;
+  font-family: sans-serif;
+  font-size: 26px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+svg {
+  border: solid 1px black;
+  width: 100%;
+  height: 50px;
+  display: block;
+  position: relative;
+  /*overflow: hidden; */
+  background: #66bebe;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+#prototypControls {
+  margin-top: 3px;
+  padding: 10px;
+  border: solid black 1px;
+  background: #66bebe;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-radius: 10px;
+}
+.sectionTitle {
+  font-size: 28px;
+  font-weight: bold;
+  font-family: "impact", "Bookman Old Style", "Serifa BT", "URW Bookman L", "itc bookman", times, serif;
+  float: left;
+  clear: left;
+  color: #006666;
+  text-shadow: 2px 2px black;
+}
+.sectionDesc {
+  font-weight: bold;
+  float: left;
+  clear: left;
+}
+#ledMacroButtonsCont {
+  padding: 18px 5px 15px 5px;
+  text-decoration: none;
+  float: none;
+  clear: left;
+}
+.ledMacroButton {
+  height: 50px;
+  background: #00989d;
+  background-image: -webkit-linear-gradient(top, #00989d, #0a787a);
+  background-image: -moz-linear-gradient(top, #00989d, #0a787a);
+  background-image: -ms-linear-gradient(top, #00989d, #0a787a);
+  background-image: -o-linear-gradient(top, #00989d, #0a787a);
+  background-image: linear-gradient(to bottom, #00989d, #0a787a);
+  -webkit-border-radius: 17;
+  -moz-border-radius: 17;
+  border-radius: 17px;
+  text-shadow: 6px 4px 4px #4d424d;
+  -webkit-box-shadow: 0px 1px 3px #666666;
+  -moz-box-shadow: 0px 1px 3px #666666;
+  box-shadow: 0px 1px 3px #666666;
+  color: #fafafa;
+  font-size: 12px;
+  padding: 10px 15px 10px 15px;
+  border: solid #26b3b3 4px;
+  text-decoration: none;
+  margin: 23px 4px 23px 6px;
+  position: relative;
+}
+.ledMacroButton:hover {
+  background: #307070;
+  background-image: -webkit-linear-gradient(top, #307070, #66bebe);
+  background-image: -moz-linear-gradient(top, #307070, #66bebe);
+  background-image: -ms-linear-gradient(top, #307070, #66bebe);
+  background-image: -o-linear-gradient(top, #307070, #66bebe);
+  background-image: linear-gradient(to bottom, #307070, #66bebe);
+  text-decoration: underline;
+}
--- a/frontend/pages/favicon-16x16.png
+++ b/frontend/pages/favicon-16x16.png
--- a/frontend/pages/favicon-32x32.png
+++ b/frontend/pages/favicon-32x32.png
--- a/frontend/pages/favicon-96x96.png
+++ b/frontend/pages/favicon-96x96.png
--- a/frontend/pages/favicon.ico
+++ b/frontend/pages/favicon.ico
--- a/frontend/pages/index.html
+++ b/frontend/pages/index.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<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="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>
+
+</head>
+<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="580px" height="45px" viewBox="0 0 580 45">
+				<defs>
+					<filter id="filter">
+						<feFlood flood-color="#66bebe" result="black" />
+						<feFlood flood-color="#206060" result="flood1" />
+						<feFlood flood-color="#369e9e" result="flood2" />
+						<feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
+						<feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
+						<feOffset in="SourceGraphic" dx="-4" dy="0" result="off2a"/>
+						<feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
+						<feComposite in="flood1" in2="off1a" operator="in"  result="comp1" />
+						<feComposite in="flood2" in2="off2a" operator="in" result="comp2" />
+
+						<feMerge x="0" width="100%" result="merge1">
+							<feMergeNode in = "black" />
+							<feMergeNode in = "comp1" />
+							<feMergeNode in = "off1b" />
+
+							<animate 
+								attributeName="y" 
+								id = "y"
+								dur ="4s"
+								
+								values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6ßpx; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'
+
+								keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
+
+								repeatCount = "indefinite" />
+			 
+							<animate attributeName="height" 
+								id = "h" 
+								dur ="4s"
+								
+								values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'
+
+								keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
+
+								repeatCount = "indefinite" />
+						</feMerge>
+						
+
+						<feMerge x="0" width="100%" y="60px" height="65px" result="merge2">
+							<feMergeNode in = "black" />
+							<feMergeNode in = "comp2" />
+							<feMergeNode in = "off2b" />
+
+							<animate attributeName="y" 
+								id = "y"
+								dur ="4s"
+								values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;' 
+
+								keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'
+
+								repeatCount = "indefinite" />
+			 
+							<animate attributeName="height" 
+								id = "h"
+								dur = "4s"
+								
+								values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'
+
+								keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513;  1'
+								 
+								repeatCount = "indefinite" />
+						</feMerge>
+						
+						<feMerge>
+							<feMergeNode in="SourceGraphic" />	
+
+							<feMergeNode in="merge1" /> 
+						<feMergeNode in="merge2" />
+
+						</feMerge>
+					</filter>
+				</defs>
+				<g>
+					<text id="titleGlitch" style="filter: url(#filter);" x="0" y="35">Laserspiro controller</text>
+				</g>
+			</svg>
+		</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>
+		</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>
+</html>
--- a/frontend/styles/main.less
+++ b/frontend/styles/main.less
@@ -9,9 +9,6 @@ body {
 	margin: 5px 3px 3px 12px;
 }

-	
-@import "compass/css3";
-
 text#titleGlitch {
 	fill: #006666;
 	font-weight: bold;
--- a/package.json
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "esp8266-laser",
+  "version": "1.0.0",
+  "description": "Wifi Host for the Arduino-Laser-Spirograph",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "clear": "rm -rf data/*",
+    "cp:config": "cp config/* data/",
+    "build:css": "lessc frontend/styles/main.less data/styles.css",
+    "build:html": "cp -r frontend/pages/* data/",
+    "build": "npm run build:css && 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:config": "nodemon -q -w config --ext \".\" --exec \"npm run cp:config\"",
+    "watch:livereload": "cd data && live-server",
+    "dev": "npm run clear && npm run build && npm-run-all --parallel watch:*"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/0x1d/esp8266-laser.git"
+  },
+  "author": "",
+  "license": "SEE LICENSE FILE",
+  "bugs": {
+    "url": "https://github.com/0x1d/esp8266-laser/issues"
+  },
+  "homepage": "https://github.com/0x1d/esp8266-laser#readme",
+  "devDependencies": {
+    "less": "^3.0.0-alpha.3",
+    "live-server": "^1.2.0",
+    "nodemon": "^1.12.1",
+    "npm-run-all": "^4.1.1"
+  }
+}