Chat freely about anything...

User avatar
By villTech
#44500 here is the front end i have now with websocket @ port 81.
Image

html code:
Code: Select all"<!DOCTYPE html>"
"<html>"
    "<head>"
        "<meta name=\"viewport\" orient=\"landscape\" content=\"user-scalable=0\">"
        "<title>ESP8266 WS2812b WebSocket Controller</title>"
        "<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\">"
        "<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css\">"
        "<link rel=\"stylesheet\" href=\"http://villtech.comlu.com/esp8266WS.css\">"
        "<script src=\"http://code.jquery.com/jquery-1.11.0.js\"></script>"
        "<script src=\"https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js\"></script>"
        "<script src=\"http://villtech.comlu.com/esp8266WS-WS2812b.js\"></script>"
    "</head>"
    "<body>"
        "<div class=\"row\">"
            "<div class=\"col-sm-12\">"
                "<center>"
                    "<h1 id=\"wsData\"></h1>"
                "</center>"
            "</div>"
        "</div>"
        "<div class=\"row\">"
            "<div class=\"col-sm-6\">"
                "<div id=\"slider\"></div>"
            "</div>"
            "<div class=\"col-sm-6\">"
                "<div id=\"slider1\"></div>"
            "</div>"
        "</div>"
        "<div class=\"row\">"
            "<div class=\"col-sm-12\">"
                "<center>"
                "<div id=\"slider2\"></div>"
                "</center>"
            "</div>"
        "</div>"
    "</body>"   
"</html>"

you can use the WebSocketServer_LEDcontrol.ino from samples folder.
just replace the html code with the code posted above.

the client needs internet connection to access dependency files. and layout is made for iPhone. :D :D :D

thanks to roundSlider plugin: http://roundsliderui.com