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,
"SSID": "myAP",
"Password": "myAP_password"
"SSID": "LaserSpiro",
"Password": "th3r31sn0sp00n"
}

65
data/index.html
View File

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

91
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;
color: #0eb8c0;
margin: 0;
padding: 0;
}
body ul {
.sui ul {
padding: 0;
}
body ul li {
margin: 0 0 16px 0;
.sui ul li {
margin: 0 0 0 0;
}
body p {
.sui p {
padding: 0;
margin: 0;
}
body .content {
.sui > .content {
padding: 32px;
}
body .content .heading {
.sui > .content .heading {
font-size: 1.2em;
margin-bottom: 16px;
display: block;
}
body .content .container {
.sui > .content .container {
background: #333333;
padding: 16px;
border-radius: 4px;
border: solid 1px #555555;
margin-bottom: 8px;
}
body .content input {
height: 24px;
.sui > .content input[type="text"] {
height: 16px;
}
.settings .flex-outer li,
.settings .flex-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
.sui > .content input[type="checkbox"] {
transform: scale(2);
}
.settings .flex-outer > li > label,
.settings .flex-outer li p {
flex: 1 0;
.sui > .content .form-row > button {
background: #097479;
color: white;
border: 0;
}
.settings .flex-outer > li > label + *,
.settings .flex-inner {
flex: 1 0;
}
.spiro-control label {
/*
.spiro-control {
label {
width: 10%;
display: inline-block;
}
.spiro-control input[type="range"] {
}
input[type="range"] {
width: 80%;
display: inline-block;
}
}
*/

4
data/wifi.json
View File

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

65
frontend/pages/index.html
View File

@@ -7,19 +7,53 @@
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<body class="sui">
<div class="content">
<div id="prototypControls" class="spiro-control container">
<form id="prototypControls" class="spiro-control container">
<span class="heading">Laser</span>
<ul>
<li class="form-row">
<label>L</label>
<input type="range" class="laser slider" value="1" min="1" max="128">
</li>
<li class="form-row">
<label>M1</label>
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="1">
</li>
<li class="form-row">
<label>M2</label>
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="2">
</li>
<li class="form-row">
<label>M3</label>
<input type="range" class="motor slider" value="1" min="1" max="128" data-motor-nr="3">
</li>
</ul>
</form>
<div class="settings container">
<span class="heading">WiFi Settings</span>
<div class="content"></class>
<form>
<li class="form-row">
<label for="ap">AP Mode</label>
<span class="toggle"><input type="checkbox" name="ap"></span>
</li>
<li class="form-row">
<label for="ssid">SSID</label>
<input type="text" name="ssid" placeholder="Default AP: LaserSpiro">
</li>
<li class="form-row">
<label for="password">Password</label>
<input type="password" name="password" placeholder="Default: th3r31sn0sp00n">
</li>
<li class="form-row">
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
<div id="prototypControls">
</div>
<div id="prototypControls" class="container">
<text class="sectionDesc">last uri:</text>
<div id="uriDiv"></div>
<text class="sectionDesc">last respone:</text>
@@ -28,30 +62,5 @@
</div>
<br>
</div>
<div class="settings container">
<span class="heading">Wifi Settings</span>
<form>
<ul class="flex-outer">
<li>
<label for="first-name">SSID</label>
<input type="text" id="first-name" placeholder="service station id">
</li>
<li>
<label for="last-name">Password</label>
<input type="text" id="last-name" placeholder="station password">
</li>
<li>
<p>Age</p>
<ul class="flex-inner">
<!-- list items here -->
</ul>
</li>
<li>
<button type="submit">Submit</button>
</li>
</ul>
</form>
</div>
</div>
</body>
</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-white: #eeeeee;
@color-main: #0eb8c0;
@color-main: #097479;
@color-main-light: #0eb8c0;
@color-container: #333333;
@default-padding: 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;
color: @color-main;
color: @color-main-light;
margin: 0;
padding: 0;
@@ -19,7 +25,7 @@ body {
ul {
padding: 0;
li {
margin: 0 0 @default-margin 0;
margin: 0 0 0 0;
}
}
@@ -28,7 +34,7 @@ body {
margin: 0;
}
.content {
> .content {
padding: @default-padding * 2;
.heading {
font-size: 1.2em;
@@ -38,10 +44,22 @@ body {
.container {
background: @color-container;
padding: @default-padding;
border-radius: @default-border-radius;
border: solid 1px @default-border-color;
margin-bottom: @default-margin-small;
}
input {
height: @input-height;
input[type="text"] {
height: @input-text-height;
}
input[type="checkbox"] {
transform: scale(@input-checkbox-scale);
}
.form-row > button {
background: @color-main;
color: white;
border: 0;
}
}
.sidebar {
.item {
@@ -51,24 +69,8 @@ body {
}
.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 {
label {
width: 10%;
@@ -79,3 +81,4 @@ body {
display: inline-block;
}
}
*/