change slider height to relative values

improve firefox UI appearance

reverted last commit
This commit is contained in:
cschwinne 2016-10-20 22:03:56 +02:00
parent c05b88a0f4
commit 2e4563d72c
3 changed files with 119 additions and 69 deletions

View File

@ -5,8 +5,6 @@ fade transition
simple slide transition
add toolbar conf in settings
additional color picker field
change slider height to relative values
improve firefox UI appearance
implement all settings setters
implement OTA lock / security
implement button
@ -14,11 +12,8 @@ implement HSB slider option
implement ranges
implement discrete range color setter
implement discrete single color setter
change color submit from get to post, rewrite with args, requires no buffer
change color submit from rgb to hex
do not reboot after settings set -> add reboot button
svg icons in html
(get rid of spiffs, use progmem for html??)
BUGS
static ip disables mdns

View File

@ -9,11 +9,12 @@
function Startup()
{
setInterval('GetColor()', 5000);
GetColor();
setInterval('GetArduinoIO()', 5000);
GetArduinoIO();
}
function GetColor()
function GetArduinoIO()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
@ -30,13 +31,23 @@
}
}
// send HTTP request
request.open("GET", "/get", true);
request.open("GET", "ajax_in/" + strA + strR + strG + strB + nocache, true);
request.send(null);
strA = "";
strR = "";
strG = "";
strB = "";
}
function GetCheck()
{
strA = "&A=" + Ctrl_form.SA.value;
strR = "&R=" + Ctrl_form.SR.value;
strG = "&G=" + Ctrl_form.SG.value;
strB = "&B=" + Ctrl_form.SB.value;
UpdateVals();
post('/set', {'COL': rgb2hex(Ctrl_form.SR.value, Ctrl_form.SG.value, Ctrl_form.SB.value)});
GetArduinoIO();
}
function rgb2hex(red, green, blue) {
var rgb = blue | (green << 8) | (red << 16);
@ -53,26 +64,6 @@
{
window.open("/settings","_self");
}
function post(path, params, method) { //http://stackoverflow.com/questions/133925/
method = method || "post"; // Set method to post by default.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
for(var key in params) {
if(params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
</script>
<style>
.ctrl_box {
@ -87,6 +78,7 @@
}
.sliders {
width: 100%;
height: 12vh;
}
.sliderA {
margin-left: auto;
@ -142,36 +134,34 @@
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 102px;
height: 12vh;
cursor: pointer;
background: #DDDDDD;
}
input[type=range]::-webkit-slider-thumb {
height: 78px;
width: 78px;
height: 10vh;
width: 10vh;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: 12px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #DDDDDD;
margin-top: 1vh;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 102px;
height: 12vh;
cursor: pointer;
background: #DDDDDD;
}
input[type=range]::-moz-range-thumb {
height: 78px;
width: 78px;
height: 10vh;
width: 10vh;
background: #ffffff;
cursor: pointer;
margin-top: 1vh;
}
input[type=range]::-ms-track {
width: 100%;
height: 102px;
height: 12vh;
cursor: pointer;
background: transparent;
border-color: transparent;
@ -184,16 +174,10 @@
background: #DDDDDD;
}
input[type=range]::-ms-thumb {
width: 78px;
width: 10vh;
background: #ffffff;
cursor: pointer;
height: 78px;
}
input[type=range]:focus::-ms-fill-lower {
background: #DDDDDD;
}
input[type=range]:focus::-ms-fill-upper {
background: #DDDDDD;
height: 10vh;
}
</style>
<style id="holderjs-style" type="text/css"></style></head>

View File

@ -36,6 +36,8 @@ boolean only_ap = false;
int led_amount = 16;
int nopwrled = 1;
char HTTP_req[150];
ESP8266WebServer server(80);
ESP8266HTTPUpdateServer httpUpdater;
@ -296,6 +298,48 @@ void XML_response_settings()
server.send(200, "text/xml", resp);
}
char StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
return 0;
}
while (index < len) {
if (str[index] == sfind[found]) {
found++;
if (strlen(sfind) == found) {
return index;
}
}
else {
found = 0;
}
index++;
}
return 0;
}
uint8_t getNumberAfterStringPos(char str[], char spos)
{
String op;
boolean no_n = false;
int i = 0;
while (!no_n) {
if (str[spos + i + 1] > 47 && str[spos + i + 1] < 58)
{
op += str[spos + i + 1];
}
else {no_n = true;}
i++;
}
return op.toInt();
}
void handleSettingsSet()
{
if (server.hasArg("CSSID")) clientssid = server.arg("CSSID");
@ -394,19 +438,41 @@ void handleSettingsSet()
saveSettingsToEEPROM();
}
void handleSet()
boolean handleSet(String req)
{
if (server.hasArg("COL"))
{
String in = server.arg("COL");
// Get rid of '#' and convert it to integer
int num = (int) strtol( &in[1], NULL, 16);
col[0] = num >> 16;
col[1] = num >> 8 & 0xFF;
col[2] = num & 0xFF;
}
server.send(204);
setLeds();
Serial.println("handleSet:");
Serial.println(req);
req.toCharArray(HTTP_req, 150, 0);
if (!StrContains(HTTP_req, "ajax_in")) {
if (StrContains(HTTP_req, "get-settings"))
{
XML_response_settings();
return true;
}
return false;
}
int pos = 0;
pos = StrContains(HTTP_req, "A=");
if (pos > 0) {
bri = getNumberAfterStringPos(HTTP_req, pos);
}
pos = StrContains(HTTP_req, "R=");
if (pos > 0) {
col[0] = getNumberAfterStringPos(HTTP_req, pos);
}
pos = StrContains(HTTP_req, "G=");
if (pos > 0) {
col[1] = getNumberAfterStringPos(HTTP_req, pos);
}
pos = StrContains(HTTP_req, "B=");
if (pos > 0) {
col[2] = getNumberAfterStringPos(HTTP_req, pos);
}
Serial.println(col[0]);
XML_response();
setLeds();
return true;
}
//format bytes
@ -622,26 +688,31 @@ void setup() {
server.send(200, "text/plain", "Settings saved. Please wait for light to turn back on, then go to main page...");
reset();
});
server.on("/set", HTTP_POST, handleSet);
server.on("/get-settings", HTTP_GET, XML_response_settings);
if (!ota_lock){
//load editor
server.on("/edit", HTTP_GET, [](){
if(!handleFileRead("/edit.htm")) server.send(404, "text/plain", "FileNotFound");
});
//create file
server.on("/edit", HTTP_PUT, handleFileCreate);
//delete file
server.on("/edit", HTTP_DELETE, handleFileDelete);
//first callback is called after the request has ended with all parsed arguments
//second callback handles file uploads at that location
server.on("/edit", HTTP_POST, [](){ server.send(200, "text/plain", ""); }, handleFileUpload);
//list directory
server.on("/list", HTTP_GET, handleFileList);
//kill module
server.on("/down", HTTP_GET, down);
//clear eeprom
server.on("/cleareeprom", HTTP_GET, clearEEPROM);
//init ota page
httpUpdater.setup(&server);
}
//called when the url is not defined
//called when the url is not defined here, ajax-in; get-settings
server.onNotFound([](){
if(server.uri().indexOf("get")<0){
if(!handleSet(server.uri())){
server.send(404, "text/plain", "FileNotFound");
} else {
XML_response();
}
});