lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2025-06-11 02:30:39 +00:00
Code Issues Releases Activity

#9 adjusting labels for wraping

Browse Source 
renaming datafiles
going on for numbers
This commit is contained in:
Lukas Bachschwell
2018-05-27 11:47:53 +02:00
parent 7646d4e629
commit e771320e6a
15 changed files with 100 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/gui/data/css/style.css
View File

@ -78,6 +78,12 @@
background-color: #999999;
margin-bottom: 10px;
}
.label-wrap {
width: 90%;
white-space: pre-wrap;
word-wrap: break-word;
}
.label.color-blue {
background-color: #6f9ad1;

2
examples/gui/data/css/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

56
examples/gui/data/js/controls.js vendored
View File

@ -1,14 +1,31 @@
const UI_TITEL = 0;
const UI_LABEL = 1;
const UPDATE_LABEL = 6;
const UI_BUTTON = 2;
const UI_SWITCHER = 3;
const UPDATE_SWITCHER = 7;
const UI_PAD = 4;
const UI_CPAD = 5;
const UPDATE_LABEL = 6;
const UPDATE_SWITCHER = 7;
const UI_SLIDER = 8;
const UPDATE_SLIDER = 9;
const UI_NUMBER = 10;
const UPDATE_NUMBER = 11;
const UI_TEXT_INPUT = 12;
const UPDATE_TEXT_INPUT = 13;
const UI_GRAPH = 14;
const CLEAR_GRAPH = 15;
const ADD_GRAPH_POINT = 16;
const FOR = 0;
const BACK = 1;
const LEFT = 2;
@ -97,7 +114,7 @@ function start() {
$('#mainHeader').html(data.label);
break;
case UI_LABEL:
$('#row').append("<div class='two columns card tcenter " + colorClass(data.color) + "'><h5 id='" + data.id + "'>" + data.label + "</h5><hr /><span id='l" + data.id + "' class='label'>" + data.value + "</span></div>");
$('#row').append("<div class='two columns card tcenter " + colorClass(data.color) + "'><h5 id='" + data.id + "'>" + data.label + "</h5><hr /><span id='l" + data.id + "' class='label label-wrap'>" + data.value + "</span></div>");
break;
case UI_BUTTON:
$('#row').append("<div class='one columns card tcenter " + colorClass(data.color) + "'><h5>" + data.label + "</h5><hr/><button onmousedown='buttonclick(" + data.id + ", true)' onmouseup='buttonclick(" + data.id + ", false)' id='" + data.id + "'>" + data.value + "</button></div>");
@ -234,6 +251,33 @@ function start() {
case UPDATE_SLIDER:
slider_move($('#sl' + data.id), data.value, '100', false);
break;
case UI_NUMBER:
$('#row').append(
"<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
"<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
"<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
"</div>"
);
break;
case UPDATE_NUMBER:
$('#num' + data.id).val(data.value);
break;
case UI_TEXT_INPUT:
$('#row').append(
"<div class='two columns card tcenter" + colorClass(data.color) + "'>" +
"<h5 id='" + data.id + "'>" + data.label + "</h5><hr />" +
"<input id='num" + data.id + "' type='number' value='" + data.value + "' onchange='numberchange(" + data.id + ")' />" +
"</div>"
);
break;
case UPDATE_TEXT_INPUT:
$('#num' + data.id).val(data.value);
break;
default:
console.error('Unknown type or event');
break;
@ -241,6 +285,12 @@ function start() {
};
}
function numberchange(number) {
var val = $('#num' + data.id).val();
websock.send("nchange:" + number + ":" + val);
console.log(val);
}
function buttonclick(number, isdown) {
if (isdown) websock.send("bdown:" + number);

4
examples/gui/gui.ino
View File

@ -144,6 +144,10 @@ void setup(void) {
ESPUI.slider("Slider one", &slider, COLOR_ALIZARIN, "30");
ESPUI.slider("Slider two", &slider, COLOR_NONE, "100");
/*
.begin loads and serves all files from PROGMEM directly.
If you want to serve the files from SPIFFS use .beginSPIFFS (.prepareFileSystem has to be run in an empty sketch before)
*/
ESPUI.begin("ESPUI Control");
}