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

styling

Browse Source
This commit is contained in:
0x1d
2017-11-03 00:24:47 +00:00
parent bd9ca29c34
commit f3508ce42b
15 changed files with 232 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
config/wifi.json
View File

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

77
data/index.html
View File

@@ -7,51 +7,60 @@
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script> <script src="scripts.js"></script>
</head> </head>
<body> <body class="sui">
<div class="content"> <div class="content">
<div id="prototypControls" class="spiro-control container"> <form id="prototypControls" class="spiro-control container">
<label>L</label> <span class="heading">Laser</span>
<input type="range" class="laser slider" value="1" min="1" max="128"> <ul>
<label>M1</label> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1"> <label>L</label>
<label>M2</label> <input type="range" class="laser slider" value="1" min="1" max="128">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2"> </li>
<label>M3</label> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3"> <label>M1</label>
</div> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
<div id="prototypControls"> </li>
<text class="sectionDesc">last uri:</text> <li class="form-row">
<div id="uriDiv"></div> <label>M2</label>
<text class="sectionDesc">last respone:</text> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
<br> </li>
<div id="response"> <li class="form-row">
</div> <label>M3</label>
<br> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
</div> </li>
</ul>
</form>
<div class="settings container"> <div class="settings container">
<span class="heading">Wifi Settings</span> <span class="heading">WiFi Settings</span>
<div class="content"></class>
<form> <form>
<ul class="flex-outer"> <li class="form-row">
<li> <label for="ap">AP Mode</label>
<label for="first-name">SSID</label> <span class="toggle"><input type="checkbox" name="ap"></span>
<input type="text" id="first-name" placeholder="service station id">
</li> </li>
<li> <li class="form-row">
<label for="last-name">Password</label> <label for="ssid">SSID</label>
<input type="text" id="last-name" placeholder="station password"> <input type="text" name="ssid" placeholder="Default AP: LaserSpiro">
</li> </li>
<li> <li class="form-row">
<p>Age</p> <label for="password">Password</label>
<ul class="flex-inner"> <input type="password" name="password" placeholder="Default: th3r31sn0sp00n">
<!-- list items here -->
</ul>
</li> </li>
<li> <li class="form-row">
<button type="submit">Submit</button> <button type="submit">Submit</button>
</li> </li>
</ul> </ul>
</form> </form>
</div> </div>
</div> </div>
<div id="prototypControls" class="container">
<text class="sectionDesc">last uri:</text>
<div id="uriDiv"></div>
<text class="sectionDesc">last respone:</text>
<br>
<div id="response">
</div>
<br>
</div>
</body> </body>
</html> </html>

99
data/styles.css
View File

@@ -1,53 +1,94 @@
body { form .form-row {
display: flex;
justify-content: flex-end;
padding: .2em;
}
form .form-row > label {
padding: .5em 1em .5em 0;
flex: 1;
}
form .form-row > input {
flex: 2;
}
form .form-row > span {
flex: 2;
}
form .form-row > input,
form .form-row > button {
padding: .5em;
}
form .form-row input[type="checkbox"] {
margin-top: 12px;
}
@media screen and (min-width: 768px) {
form .form-row > input,
form .form-row > span {
flex: 3;
}
}
@media screen and (min-width: 992px) {
form .form-row > input,
form .form-row > span {
flex: 4;
}
}
@media screen and (min-width: 1200px) {
form .form-row > input,
form .form-row > span {
flex: 5;
}
}
.sui {
background: #000000; background: #000000;
color: #0eb8c0; color: #0eb8c0;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body ul { .sui ul {
padding: 0; padding: 0;
} }
body ul li { .sui ul li {
margin: 0 0 16px 0; margin: 0 0 0 0;
} }
body p { .sui p {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
body .content { .sui > .content {
padding: 32px; padding: 32px;
} }
body .content .heading { .sui > .content .heading {
font-size: 1.2em; font-size: 1.2em;
margin-bottom: 16px; margin-bottom: 16px;
display: block; display: block;
} }
body .content .container { .sui > .content .container {
background: #333333; background: #333333;
padding: 16px; padding: 16px;
border-radius: 4px;
border: solid 1px #555555;
margin-bottom: 8px;
} }
body .content input { .sui > .content input[type="text"] {
height: 24px; height: 16px;
} }
.settings .flex-outer li, .sui > .content input[type="checkbox"] {
.settings .flex-inner { transform: scale(2);
display: flex;
flex-wrap: wrap;
align-items: center;
} }
.settings .flex-outer > li > label, .sui > .content .form-row > button {
.settings .flex-outer li p { background: #097479;
flex: 1 0; color: white;
border: 0;
} }
.settings .flex-outer > li > label + *, /*
.settings .flex-inner { .spiro-control {
flex: 1 0; label {
} width: 10%;
.spiro-control label { display: inline-block;
width: 10%; }
display: inline-block; input[type="range"] {
} width: 80%;
.spiro-control input[type="range"] { display: inline-block;
width: 80%; }
display: inline-block;
} }
*/

4
data/wifi.json
View File

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

77
frontend/pages/index.html
View File

@@ -7,51 +7,60 @@
<link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script> <script src="scripts.js"></script>
</head> </head>
<body> <body class="sui">
<div class="content"> <div class="content">
<div id="prototypControls" class="spiro-control container"> <form id="prototypControls" class="spiro-control container">
<label>L</label> <span class="heading">Laser</span>
<input type="range" class="laser slider" value="1" min="1" max="128"> <ul>
<label>M1</label> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1"> <label>L</label>
<label>M2</label> <input type="range" class="laser slider" value="1" min="1" max="128">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2"> </li>
<label>M3</label> <li class="form-row">
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3"> <label>M1</label>
</div> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
<div id="prototypControls"> </li>
<text class="sectionDesc">last uri:</text> <li class="form-row">
<div id="uriDiv"></div> <label>M2</label>
<text class="sectionDesc">last respone:</text> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
<br> </li>
<div id="response"> <li class="form-row">
</div> <label>M3</label>
<br> <input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
</div> </li>
</ul>
</form>
<div class="settings container"> <div class="settings container">
<span class="heading">Wifi Settings</span> <span class="heading">WiFi Settings</span>
<div class="content"></class>
<form> <form>
<ul class="flex-outer"> <li class="form-row">
<li> <label for="ap">AP Mode</label>
<label for="first-name">SSID</label> <span class="toggle"><input type="checkbox" name="ap"></span>
<input type="text" id="first-name" placeholder="service station id">
</li> </li>
<li> <li class="form-row">
<label for="last-name">Password</label> <label for="ssid">SSID</label>
<input type="text" id="last-name" placeholder="station password"> <input type="text" name="ssid" placeholder="Default AP: LaserSpiro">
</li> </li>
<li> <li class="form-row">
<p>Age</p> <label for="password">Password</label>
<ul class="flex-inner"> <input type="password" name="password" placeholder="Default: th3r31sn0sp00n">
<!-- list items here -->
</ul>
</li> </li>
<li> <li class="form-row">
<button type="submit">Submit</button> <button type="submit">Submit</button>
</li> </li>
</ul> </ul>
</form> </form>
</div> </div>
</div> </div>
<div id="prototypControls" class="container">
<text class="sectionDesc">last uri:</text>
<div id="uriDiv"></div>
<text class="sectionDesc">last respone:</text>
<br>
<div id="response">
</div>
<br>
</div>
</body> </body>
</html> </html>

62
frontend/scripts/core/App.js
View File

@@ -1,62 +0,0 @@
import $ from 'jquery';
import * as Components from '../components/exports';
export default class App {
constructor() {
this.dataStores = [];
}
withDataStore(dataStore) {
this.dataStores[dataStore.constructor.name] = dataStore;
return this;
}
getStore(dataStore) {
return this.dataStores[dataStore];
}
run(ctx) {
this._loadComponents(ctx);
this._beforeInitComponents();
this._initComponents();
return this;
}
_loadComponents(ctx) {
this.components = this.components || [];
for (let c in Components) {
let nodes = ctx ? ctx.find('.' + c) : [];
for (let i = 0; i < nodes.length; i++) {
let component = new Components[c](this, $(nodes[i]));
this.components.push(component);
};
}
}
_initComponents() {
this.components.forEach(this._initComponent);
}
_beforeInitComponents() {
this.components.forEach(this._beforeInitComponent);
}
_initComponent(component) {
component.init();
}
_beforeInitComponent(component) {
component.beforeInit();
}
render() {
for (let component in this.components) {
this.components[component].render();
}
return this;
}
}

45
frontend/scripts/core/Component.js
View File

@@ -1,45 +0,0 @@
import Mustache from 'mustache';
import $ from 'jquery';
import DataField from './data/DataField';
export default class Component {
constructor(ctx, node, withTemplate = true) {
this.ctx = ctx;
this.node = node;
this.component = this.constructor.name;
this.template = withTemplate ? $.get(this.component + '.html') : undefined; //document.querySelector('#' + this.component).import.body.textContent;
this.data = {};
//console.log('init ' + this.component);
}
beforeInit() {
this.subscribe();
}
init() {}
subscribe() {}
templateHelpers() { return {}; }
bindData() {
let _this = this;
this.node.find('[data-bind]').each(function() {
var field = $(this);
_this.data[field.data('bind')] = new DataField(field);
});
}
render(data) {
if (data) data.helpers = this.templateHelpers();
return this.template
.then((template) => {
return new Promise((fulfill, reject) => {
this.node.html(Mustache.render(template, data));
this.bindData();
//this.ctx._loadComponents(this.node);
fulfill();
});
});
}
}

20
frontend/scripts/core/Mediator.js
View File

@@ -1,20 +0,0 @@
export default class Mediator {
constructor() {
this.events = [];
}
on(event, callback, context){
this.events[event] = this.events[event] || [];
this.events[event].push(context ? callback.bind(context) : callback);
};
trigger(event, args){
if(this.events[event]){
for (var i = this.events[event].length - 1; i >= 0; i--) {
this.events[event][i](args || {});
};
}
};
}

28
frontend/scripts/core/data/DataBinding.js
View File

@@ -1,28 +0,0 @@
import $ from 'jquery';
export default class DataBinding {
inputChange(node, model = {}) {
node.on('keyup', function() {
model.value = this.value;
});
return model;
}
inputHandler() {
return {
set: function(target, prop, newValue) {
if (prop == 'value' && target.id) {
target[prop] = newValue;
$('[data-bind="' + target.id + '"]').val(newValue);
return true;
} else return false;
},
get: function(target, name) {
return target[name];
}
};
}
}

23
frontend/scripts/core/data/DataField.js
View File

@@ -1,23 +0,0 @@
import DataBinding from './DataBinding';
export default class DataField {
constructor(node, data) {
this.node = node;
this.data = {
id: this.node.data('bind')
};
this.bind();
}
bind() {
this.dataBinding = new DataBinding();
this.dataBinding.inputChange(this.node, this.data);
this.proxy = new Proxy(this.data, this.dataBinding.inputHandler());
}
get value() {
return this.proxy.value;
}
set value(newValue) {
this.proxy.value = newValue;
}
}

9
frontend/scripts/core/store/DataStore.js
View File

@@ -1,9 +0,0 @@
export default class DataStore {
constructor(mediator){
this.mediator = mediator;
}
load(entry){}
save(entry){}
add(entry){}
delete(entry){}
}

37
frontend/scripts/core/store/RestStore.js
View File

@@ -1,37 +0,0 @@
import $ from 'jquery';
import Mediator from '../Mediator';
import DataStore from './DataStore';
import StoreAction from './StoreAction';
export default class RestStore extends DataStore {
constructor(endpoint, mediator = new Mediator()){
super(mediator);
this.endpoint = endpoint;
}
load(entry){
return this.request(StoreAction.LOAD, 'GET', entry);
}
save(entry){
return this.request(StoreAction.SAVE, 'POST', entry);
}
add(entry){
return this.request(StoreAction.ADD, 'PUT', entry);
}
delete(entry){
return this.request(StoreAction.DELETE, 'POST', entry);
}
request(event, type, payload){
return $.ajax({
url: this.endpoint,
type: type,
data: payload
})
.then(JSON.parse)
.then((response) => {
this.mediator.trigger(event, response);
});
}
on(event, subscriber, context){
this.mediator.on(event, subscriber, context);
}
}

6
frontend/scripts/core/store/StoreAction.js
View File

@@ -1,6 +0,0 @@
export default {
LOAD: 'load',
SAVE: 'save',
ADD: 'add',
DELETE: 'delete'
}

44
frontend/styles/form.less Normal file
View File

@@ -0,0 +1,44 @@
form {
.form-row {
display: flex;
justify-content: flex-end;
padding: .2em;
}
.form-row > label {
padding: .5em 1em .5em 0;
flex: 1;
}
.form-row > input {
flex: 2;
}
.form-row > span {
flex: 2;
}
.form-row > input,
.form-row > button {
padding: .5em;
}
.form-row input[type="checkbox"] {
margin-top: 12px;
}
.form-row input[type="range"] {
}
@media screen and (min-width: 768px) {
.form-row > input, .form-row > span {
flex: 3;
}
}
@media screen and (min-width: 992px) {
.form-row > input, .form-row > span {
flex: 4;
}
}
@media screen and (min-width: 1200px) {
.form-row > input, .form-row > span {
flex: 5;
}
}
}

53
frontend/styles/main.less
View File

@@ -1,17 +1,23 @@
@import "form.less";
@color-black: #000000; @color-black: #000000;
@color-white: #eeeeee; @color-white: #eeeeee;
@color-main: #0eb8c0; @color-main: #097479;
@color-main-light: #0eb8c0;
@color-container: #333333; @color-container: #333333;
@default-padding: 16px; @default-padding: 16px;
@default-margin: 16px; @default-margin: 16px;
@default-margin-small: 8px;
@default-border-radius: 4px;
@default-border-color: #555555;
@input-height: 24px; @input-text-height: 16px;
@input-checkbox-scale: 2;
body { .sui {
background: @color-black; background: @color-black;
color: @color-main; color: @color-main-light;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -19,7 +25,7 @@ body {
ul { ul {
padding: 0; padding: 0;
li { li {
margin: 0 0 @default-margin 0; margin: 0 0 0 0;
} }
} }
@@ -28,7 +34,7 @@ body {
margin: 0; margin: 0;
} }
.content { > .content {
padding: @default-padding * 2; padding: @default-padding * 2;
.heading { .heading {
font-size: 1.2em; font-size: 1.2em;
@@ -38,10 +44,22 @@ body {
.container { .container {
background: @color-container; background: @color-container;
padding: @default-padding; padding: @default-padding;
border-radius: @default-border-radius;
border: solid 1px @default-border-color;
margin-bottom: @default-margin-small;
} }
input { input[type="text"] {
height: @input-height; height: @input-text-height;
} }
input[type="checkbox"] {
transform: scale(@input-checkbox-scale);
}
.form-row > button {
background: @color-main;
color: white;
border: 0;
}
} }
.sidebar { .sidebar {
.item { .item {
@@ -51,24 +69,8 @@ body {
} }
.settings { .settings {
.flex-outer li,
.flex-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-outer > li > label,
.flex-outer li p {
flex: 1 0;
}
.flex-outer > li > label + *,
.flex-inner {
flex: 1 0;
}
} }
/*
.spiro-control { .spiro-control {
label { label {
width: 10%; width: 10%;
@@ -79,3 +81,4 @@ body {
display: inline-block; display: inline-block;
} }
} }
*/