ESP8266 Industrial webserver

Projects Networking, Protocols, and Devices
1

I have a requirement to serve a user interactive Webpage as per the design below. Basically the load set slider will send a out a Integer variable and the actual load on the motor will be received as a Integer variable too. Apart from this there are two booleans to control the motor start.

I guess for this I must use the SPIFF and store the designed web page into it. I would like to know if there are standard libraries for the items like KW Meter / Loading slider ? What I have shown is a very simple sample but these are about the general widgets in all my requirements.

So does one have to go about designing all of above from scratch or there are some regular libraries ? And for a UI like this is there any web design software available that can make the job easy instead of plain HTML.

InstrumentPanel.JPG

InstrumentPanel.JPG

2

I have an ESP8266 on order from china, so I can't speak to that part. I've made slider web pages in the past to control servos using the arduino with an ethernet shield. If the image you posted is an actual html slider page, you should be able to tweak it to work with a ESP8266 web server. If that is an actual slider page, post up the html code and I caan see if it looks similat to what I've used. Note that when the slider is moved, nothing is sent to the server until the mouse button is released.

3

i have done couple of ESP web server scripting , it's quite fun when you code things raw ( from scratch )

first off i create my .html files, i put scripts in it, intensively test it with browser

i then create header files for the ESP, saving scripts into flash with this

const char calib_Page[] PROGMEM = R"=====(

// my html scripts here ( html tags, CSS, JS, Ajax(XMLHttpRequest) )

// no need of escaping special characters

)=====";

and on ESP side i usually use this to render the page

server.send_P(200, "text/html", calib_Page, sizeof(calib_Page) );

that makes sure no script is loaded into RAM ( you stay from stack crash )

on client side, i deploy Ajax ( 100% ) to talk to ESP server

as for the case of rendering image and i convert them from this link here , https://www.base64-image.de/ , into Base64 and embed the obtained long string into html script with

<style>
body{
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYA.......asweuryerudl');
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

</style>

see sample of my work here ( this one actually got 5 web pages, each with background ( and in block ) images )

and all info are sent back and forth to the ESP over Ajax ( XMLHttpRequest() )

https://filebin.net/3es54oi61kwh2vo1

4

Wow... this is a bit heavy on the web design side. Let me try and study the whole thing in detail.

Thanks.