Photon SoftAP Inputs

Troubleshooting
11

It’s not really complicated.
I can post my clumsy html page to give you a starter.
I usually first write the HTML on my PC in a plain text editor and open the file on the PC with a browser to see how it looks an once I’m “satisfied” replace " with \" (and some other minor things like wrapping it in double quotes to fit in a char[]) and copy that to my SoftAP code.

Here’s my control.html

const char ctrl[] = {
"<!DOCTYPE html>"
"<html lang=\"en\">"
"<head>"
"<meta charset=\"utf-8\">"
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0;\" />"
"<title>MikeStand</title>"
"<style>"
"form{"
"font: bold 15px/30px Georgia;"
"width: 100%;"
"height: 100%;"
"margin: 0 auto;"
"}"
"input[type=\"range\"].vertikal {"
"writing-mode: bt-lr; /* IE */"
"-webkit-appearance: slider-vertical; /* WebKit */"
"width: 10%;"
"height: 70%;"
"}"
"output {"
"position:absolute;"
"top:calc(50% - 2em);"
"width: 75%;"
"height: 2em;"
"text-align: center;"
"color: white;" 
"background-image: linear-gradient(160deg, white, lightgrey 10%, grey );"
"border-radius: 1em;"
"margin:0 auto;"
"padding:1em 0.5em;"
"display: inline-block;"
"}"
"output:after {"
"content: \"cm\";"
"width:2em;"
"}"
"</style>"
"</head>"
"<body>"
"<h1 style=\"text-align : center;\">HeightSetting</h1>"
"<form oninput=\"x.value=parseInt(dheight.value)\">"
"<div style=\"position:relative;\">"
"<input class=\"vertikal\" name=\"myValue\" id=\"dheight\" type=\"range\" min=\"-20\" value=\"0\" max=\"20\" orient=\"vertical\" >"
"<output name=\"x\" for=\"dheight\">0</output>"
"</div>"
"<br/>"
"<button submit style=\"width:100%;padding:0.5em;\">Go!</button>"
"</form>"
"</body>"
"</html>"
};

It features s slider to select a value -20cm ~ +20cm and a submit button and some CSS settings.
The only “interesting” part is the one between the <body>...</body> tags (and that could be made even simpler).

1 Like