change slider height to relative values
improve firefox UI appearance reverted last commit
This commit is contained in:
cschwinne
parent
c05b88a0f4
commit
2e4563d72c
5
TODO.txt
5
TODO.txt
@ -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
|
||||
|
||||
@ -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>
|
||||
@ -212,6 +196,6 @@
|
||||
<input type="range" class="sliders" name="SG" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div> <br>
|
||||
<div id="slR" class="sliderB">
|
||||
<input type="range" class="sliders" name="SB" value="0" min="0" max="255" step="1" onchange="GetCheck()"> </div> <br>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div></body></html>
|
||||
@ -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();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user