mirror of
https://github.com/s00500/ESPUI.git
synced 2025-06-12 19:40:38 +00:00
Adding Labels and Pads
This commit is contained in:
@ -295,6 +295,7 @@
|
||||
|
||||
/* Lists
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/*
|
||||
ul {
|
||||
list-style: circle inside; }
|
||||
ol {
|
||||
@ -310,7 +311,7 @@
|
||||
font-size: 90%; }
|
||||
li {
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
*/
|
||||
|
||||
/* Code
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
@ -398,3 +399,85 @@
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both; }
|
||||
|
||||
/* ButtonPad
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.control {
|
||||
background-color: #ddd;
|
||||
background-image: linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1));
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.5),
|
||||
0 0 1px 1px hsla(0,0%,100%,.75),
|
||||
0 0 1px 2px hsla(0,0%,100%,.25),
|
||||
0 0 1px 3px hsla(0,0%,100%,.25),
|
||||
0 0 1px 4px hsla(0,0%,100%,.25),
|
||||
0 0 1px 6px hsla(0,0%,0%,.75);
|
||||
height: 9em;
|
||||
margin: 3em auto;
|
||||
position: relative;
|
||||
width: 9em;
|
||||
}
|
||||
.control ul {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.control li {
|
||||
border-radius: 100% 0 0 0;
|
||||
box-shadow: inset -1px -1px 1px hsla(0,0%,100%,.5),
|
||||
0 0 1px hsla(0,0%,0%,.75);
|
||||
display: inline-block;
|
||||
height: 50%;
|
||||
overflow: hidden;
|
||||
width: 50%;
|
||||
}
|
||||
.control ul li:nth-child(2) {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.control ul li:nth-child(3) {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.control ul li:nth-child(4) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.control ul a {
|
||||
height: 200%;
|
||||
position: relative;
|
||||
transform: rotate(-45deg);
|
||||
width: 200%;
|
||||
}
|
||||
.control a:hover,
|
||||
.control a:focus {
|
||||
background-color: hsla(0,0%,100%,.25);
|
||||
}
|
||||
.control a {
|
||||
border-radius: 50%;
|
||||
color: #333;
|
||||
display: block;
|
||||
font: bold 1em/3 sans-serif;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 1px hsla(0,0%,100%,.4);
|
||||
transition: .15s;
|
||||
}
|
||||
.control .confirm {
|
||||
background-color: #ddd;
|
||||
background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,100%,.25));
|
||||
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.5),
|
||||
0 0 1px 1px hsla(0,0%,100%,.25),
|
||||
0 0 1px 2px hsla(0,0%,100%,.25),
|
||||
0 0 1px 3px hsla(0,0%,100%,.25),
|
||||
0 0 1px 4px hsla(0,0%,100%,.25),
|
||||
0 0 1px 6px hsla(0,0%,0%,.85);
|
||||
left: 50%;
|
||||
line-height: 3;
|
||||
margin: -1.5em;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 3em;
|
||||
}
|
||||
.control .confirm:hover,
|
||||
.control .confirm:focus {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
@ -5,17 +5,18 @@
|
||||
<title>Control</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAPFBMVEUAAACA1VWR21qQ2liR3FqR3FqS3VuR3VqR3VuR3VqO21mS21uS3FqS3FqS21uJ2GKQ21qR3FuR3FoAAAB/3Gu7AAAAEnRSTlMABoA3kPBwz8i5Kzioxg4NVcU3uEJHAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+EFEhcEM+HpYwQAAABYSURBVBjThY/JDsAgCESt4lpX/v9jLQZJ6qF9t3khAyj1xXUKbQ4BVowDwqOYgExkkW4iY6lPaF06RqM8YItOuRbMaz6xjbsusDAW/drplBg47jP696cXE8bPA1eUDeK2AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTA1LTE4VDIzOjA0OjUxKzAyOjAwxE59ewAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wNS0xOFQyMzowNDo1MSswMjowMLUTxccAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC"/>
|
||||
|
||||
<link rel="stylesheet" href="/css/normalize.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
</head>
|
||||
<body onload="javascript:start();">
|
||||
<div><h4 id="mainHeader">Control<span id="conStatus" class="label">Offline</span></h4></div>
|
||||
|
||||
<div><h4><div id="mainHeader">Control</div> <span id="conStatus" class="label">Offline</span></h4></div>
|
||||
<hr />
|
||||
<div class="container">
|
||||
<div id="row" class="row u-full-width">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/zepto.js"></script>
|
||||
<script src="/js/controls.js"></script>
|
||||
</body>
|
||||
|
||||
118
examples/softAP_UI_Test/data/js/controls.js
vendored
118
examples/softAP_UI_Test/data/js/controls.js
vendored
@ -1,9 +1,20 @@
|
||||
// TASKS:
|
||||
|
||||
// Roadmap
|
||||
// Build changeable Labels
|
||||
// Roadmap:
|
||||
// Build a serial Console?
|
||||
|
||||
const UI_TITEL = 0;
|
||||
const UI_LABEL = 1;
|
||||
const UI_BUTTON = 2;
|
||||
const UI_SWITCHER = 3;
|
||||
const UI_PAD = 4;
|
||||
const UI_CPAD = 5;
|
||||
const UPDATE_LABEL = 6;
|
||||
|
||||
const FOR = 0;
|
||||
const BACK = 1;
|
||||
const LEFT = 2;
|
||||
const RIGHT = 3;
|
||||
const CENTER = 4;
|
||||
|
||||
var websock;
|
||||
function start() {
|
||||
websock = new WebSocket('ws://' + window.location.hostname + '/ws');
|
||||
@ -27,29 +38,88 @@ function start() {
|
||||
websock.onmessage = function(evt) {
|
||||
console.log(evt);
|
||||
var data = JSON.parse(evt.data);
|
||||
console.log(data);
|
||||
var e = document.body;
|
||||
if (data.type === 'domButton') {
|
||||
//initial rendering of the Buttons
|
||||
$('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button onClick='buttonclick(this)'' id="+data.id+"></button></div>");
|
||||
}
|
||||
if (data.type === 'domLabel') {
|
||||
//initial rendering of the Labels
|
||||
$('#row').append("<div class='two columns card'><h5>"+data.l_title+"</h5><hr /><h3><span class='label'>"+data.label+"</span></h3></div>");
|
||||
}
|
||||
else if (data.type === 'value') {
|
||||
// Display some kind of value
|
||||
}
|
||||
else {
|
||||
console.log('unknown event');
|
||||
var center = "";
|
||||
switch(data.type){
|
||||
case UI_TITEL:
|
||||
document.title = data.label;
|
||||
$('#mainHeader').html(data.label);
|
||||
break;
|
||||
case UI_LABEL:
|
||||
$('#row').append("<div class='two columns card'><h5 id='"+data.id+"'>"+data.label+"</h5></div>");
|
||||
break;
|
||||
case UI_BUTTON:
|
||||
$('#row').append("<div class='two columns card'><h5>"+data.label+"</h5><hr/><button onmousedown='buttonclick("+data.id+", true)' onmouseup='buttonclick("+data.id+", false)' id='"+data.id+"'></button></div>");
|
||||
$('#'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); buttonclick(data.id, true) } });
|
||||
$('#'+data.id).on({ 'touchend' : function(e){e.preventDefault(); buttonclick(data.id, false) } });
|
||||
break;
|
||||
case UI_CPAD:
|
||||
center = "<a class='confirm' onmousedown='padclick(CENTER, "+data.id+", true)' onmouseup='padclick(CENTER, "+data.id+", false)' href='#' id='c"+data.id+"'>OK</a>";
|
||||
//NO BREAK
|
||||
case UI_PAD:
|
||||
$('#row').append(
|
||||
"<div class='two columns card'><h5>"+data.label+"</h5><hr/>"+
|
||||
"<nav class='control'>"+
|
||||
"<ul>"+
|
||||
"<li><a onmousedown='padclick(FOR, "+data.id+", true)' onmouseup='padclick(FOR, "+data.id+", false)' href='#' id='f"+data.id+"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(RIGHT, "+data.id+", true)' onmouseup='padclick(RIGHT, "+data.id+", false)' href='#' id='r"+data.id+"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(LEFT, "+data.id+", true)' onmouseup='padclick(LEFT, "+data.id+", false)' href='#' id='l"+data.id+"'>▲</a></li>" +
|
||||
"<li><a onmousedown='padclick(BACK, "+data.id+", true)' onmouseup='padclick(BACK, "+data.id+", false)' href='#' id='b"+data.id+"'>▲</a></li>" +
|
||||
"</ul>"+
|
||||
center +
|
||||
"</nav>"+
|
||||
"</div>");
|
||||
|
||||
$('#f'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(FOR, data.id, true) } });
|
||||
$('#f'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(FOR, data.id, false) } });
|
||||
$('#l'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(LEFT, data.id, true) } });
|
||||
$('#l'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(LEFT, data.id, false) } });
|
||||
$('#r'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(RIGHT, data.id, true) } });
|
||||
$('#r'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(RIGHT, data.id, false) } });
|
||||
$('#b'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(BACK, data.id, true) } });
|
||||
$('#b'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(BACK,data.id, false) } });
|
||||
$('#c'+data.id).on({ 'touchstart' : function(e){e.preventDefault(); padclick(CENTER, data.id, true) } });
|
||||
$('#c'+data.id).on({ 'touchend' : function(e){e.preventDefault(); padclick(CENTER,data.id, false) } });
|
||||
|
||||
break;
|
||||
case UPDATE_LABEL:
|
||||
$('#'+data.id).html(data.label);
|
||||
break;
|
||||
default:
|
||||
console.error('Unknown type or event');
|
||||
break;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function buttonclick(e) {
|
||||
websock.send("bdown:"+e.id);
|
||||
/*
|
||||
if release
|
||||
websock.send("bup:"+e.id);
|
||||
*/
|
||||
|
||||
function buttonclick(number, isdown) {
|
||||
if(isdown)websock.send("bdown:"+number);
|
||||
else websock.send("bup:"+number);
|
||||
}
|
||||
|
||||
function padclick(type, number, isdown) {
|
||||
switch(type){
|
||||
case CENTER:
|
||||
if(isdown)websock.send("pcdown:"+number);
|
||||
else websock.send("pcup:"+number);
|
||||
break;
|
||||
case FOR:
|
||||
if(isdown)websock.send("pfdown:"+number);
|
||||
else websock.send("pfup:"+number);
|
||||
break;
|
||||
case BACK:
|
||||
if(isdown)websock.send("pbdown:"+number);
|
||||
else websock.send("pbup:"+number);
|
||||
break;
|
||||
case LEFT:
|
||||
if(isdown)websock.send("pldown:"+number);
|
||||
else websock.send("plup:"+number);
|
||||
break;
|
||||
case RIGHT:
|
||||
if(isdown)websock.send("prdown:"+number);
|
||||
else websock.send("prup:"+number);
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,36 +1,94 @@
|
||||
#include <WiFi.h>
|
||||
#include <EasyUI.h>
|
||||
|
||||
const char* ssid = "EasyUI";
|
||||
const char* ssid = "LARSUI";
|
||||
const char* password = "";
|
||||
|
||||
long oldTime = 0;
|
||||
|
||||
void setup(void) {
|
||||
Serial.begin(115200);
|
||||
WiFi.mode(WIFI_AP);
|
||||
WiFi.softAP(ssid, password);
|
||||
|
||||
WiFi.setHostname(ssid);
|
||||
WiFi.softAP(ssid);
|
||||
//WiFi.softAP(ssid, password);
|
||||
Serial.println("");
|
||||
Serial.print("IP address: ");
|
||||
Serial.println(WiFi.softAPIP());
|
||||
|
||||
EasyUI.title("LARSControl");
|
||||
EasyUI.label("Status: Maxim Stop");
|
||||
EasyUI.label("0");
|
||||
EasyUI.button("MaximDance Button", &callback2);
|
||||
EasyUI.pad("center", true, &callback3);
|
||||
EasyUI.pad("NoCenter", false, &callback3);
|
||||
|
||||
EasyUI.begin("LARS Control");
|
||||
|
||||
EasyUI.label("Label","123");
|
||||
EasyUI.label("Label2","456");
|
||||
EasyUI.label("Label3","789");
|
||||
EasyUI.button("LED", &callback1);
|
||||
EasyUI.begin();
|
||||
}
|
||||
|
||||
void loop(void) {
|
||||
if(millis()-oldTime> 5000){
|
||||
EasyUI.print(1, String(millis()));
|
||||
oldTime = millis();
|
||||
}
|
||||
}
|
||||
|
||||
void callback1(void) {
|
||||
Serial.println("CALLBACK UNO");
|
||||
void callback1(int id, int type) {
|
||||
switch (type) {
|
||||
case B_DOWN:
|
||||
Serial.println("Button DOWN");
|
||||
break;
|
||||
case B_UP:
|
||||
Serial.println("Button UP");
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
void callback2(void) {
|
||||
Serial.println("CALLBACK DOS");
|
||||
|
||||
void callback2(int id, int type) {
|
||||
switch (type) {
|
||||
case B_DOWN:
|
||||
Serial.println("Maxim Start DAnce######################");
|
||||
EasyUI.print(0, "Status: Maxim Start");
|
||||
break;
|
||||
case B_UP:
|
||||
Serial.println("Maxim STOP DAnce######################");
|
||||
EasyUI.print(0, "Status: Maxim Start");
|
||||
break;
|
||||
}
|
||||
}
|
||||
void callback3(void) {
|
||||
Serial.println("CALLBACK TRES");
|
||||
void callback3(int id, int value) {
|
||||
switch (value) {
|
||||
case P_LEFT_DOWN:
|
||||
Serial.println("left down");
|
||||
break;
|
||||
case P_LEFT_UP:
|
||||
Serial.println("left up");
|
||||
break;
|
||||
case P_RIGHT_DOWN:
|
||||
Serial.println("right down");
|
||||
break;
|
||||
case P_RIGHT_UP:
|
||||
Serial.println("right up");
|
||||
break;
|
||||
case P_FOR_DOWN:
|
||||
Serial.println("for down");
|
||||
break;
|
||||
case P_FOR_UP:
|
||||
Serial.println("for up");
|
||||
break;
|
||||
case P_BACK_DOWN:
|
||||
Serial.println("back down");
|
||||
break;
|
||||
case P_BACK_UP:
|
||||
Serial.println("back up");
|
||||
break;
|
||||
case P_CENTER_DOWN:
|
||||
Serial.println("center down");
|
||||
break;
|
||||
case P_CENTER_UP:
|
||||
Serial.println("center up");
|
||||
break;
|
||||
}
|
||||
Serial.println(id);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user