esp8266 websocket javascript example with css style button using arduino ide - NodeMcu

[@j.palmstedt9640]

//this is the esp32 version of the code. if you are using esp8266 change the libraries like it's shown in the video
#include
#include
#include
const char* ssid="";
const char* password="";
int LED=2;
int websocketMillis=50;
WebServer server(80);
WebSocketsServer webSocket=WebSocketsServer(88);
String webSite,JSONtxt;
boolean LEDonoff=true;
const char webSiteCont[] PROGMEM = R"=====(
InitWebSocket()
function InitWebSocket()
{
websock = new WebSocket("ws://"+window.location.hostname+":88/");
websock.onmessage=function(evt)
{
JSONobj = JSON.parse(evt.data);
document.getElementById('btn').innerHTML = JSONobj.LEDonoff;
if(JSONobj.LEDonoff == 'ON')
{
document.getElementById('btn').style.background='#FFA200';
document.getElementById('btn').style["boxShadow"]="0px 0px 0px 0px #FFA200";
}else{
document.getElementById('btn').style.background='#111111';
document.getElementById('btn').style["boxShadow"]="0px 0px 0px 8px #111111";

}
}
}
function button(){
btn = 'LEDonoff=ON';
if(document.getElementById('btn').innerHTML === 'ON')
{
btn = 'LEDonoff=OFF';
}
websock.send(btn);
}
#btn{
display: inline-block;
text-decoration:none;
background: #8cd460;
color: rgba(255,255,255, 0.80);
font: 100px arial, sans-serif;
font-weight: bold;
line-height: 320px;
width: 320px;
height: 320px;
border-radius: 50%;
margin:30%;
margin-top:60px;
text-align: center;
vertical-align: middle;
overflow: hidden;
box-shadow: 0px 0px 0px 8px #8cd460;
border: solid 2px rgba(255,255,255,0.47);
transition: 0.4s;
}
)=====";
void WebSite(){
server.send(200,"text/html",webSiteCont);
}
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t welength)
{
String payloadString = (const char *)payload;
Serial.print("payloadString= ");
Serial.println(payloadString);
if(type == WStype_TEXT)
{
byte seperator=payloadString.indexOf('=');
String var = payloadString.substring(0,seperator);
Serial.print("var= ");
Serial.println(var);
String val = payloadString.substring(seperator+1);
Serial.print(" ");
if(var == "LEDonoff"){
LEDonoff = false;
if(val == "ON"){
LEDonoff = true;
}
}
}
}
void setup() {
Serial.begin(115200);
pinMode(LED,OUTPUT);
WiFi.begin(ssid,password);
while(WiFi.status() != WL_CONNECTED)
{
Serial.println(":");
delay(500);
}
WiFi.mode(WIFI_STA);
Serial.println("Start Esp");
Serial.println(WiFi.localIP());
server.on("/",WebSite);
server.begin();
webSocket.begin();
webSocket.onEvent(webSocketEvent);
}
void loop() {
webSocket.loop();
server.handleClient();
if(LEDonoff == true)
{
digitalWrite(LED,HIGH);
}else{
digitalWrite(LED,LOW);
}
String LEDswitch = "OFF";
if(LEDonoff == true){
LEDswitch = "ON";
}
JSONtxt ="{\"LEDonoff\":\""+LEDswitch+"\"}";
webSocket.broadcastTXT(JSONtxt);
}

[@ЕвгенийФоменко-ъ5т]

Thank you very much! it works!!

[@phamxuantruong8753]

thanks very good

[@tapasgupta7481]

Can you link the webserver.h file or directory ? Arduino is giving error at this library

[@narendrashiva9360]

could you help me to implement it for multiple buttons?

[@anibalvilelarj]

Congratulations, Mr. Dikme !
Could I try to transcript this code and post it here on the comments area ?
I would like to test it in my ESP8266.
Thank you !

[@techman9111]

Very, very nice! How do you handle two or three buttons with one style ?

[@Jinpachi91]

Very nice work. Congratulations. Which WebSocket librarie did you use ? Can you link the download page ? ^^,

[@PhG1961]

Look really interesting ! Please hurry with the code example !

[@SONUKOL1]

Overall best work, but starting automatic not connecting (without refresh page)👌

[@KellerG68]

Is it soon now ?

[@craiginboro679]

it doesn't work. no matter what i try i cant initiate the Javascript. im confused about the String webSite,JSONtxt; line of code what does webSite hold? What is Website variable and what is websiteContent variable? Also should there be "===" 3x= in
.innerHTML === 'ON')
function button(){
document.getElementById("demo").innerHTML = 5 + 6;
btn = 'LEDonoff=ON';
if(document.getElementById('btn').innerHTML === 'ON')
{
btn = 'LEDonoff=OFF';
}
websock.send(btn);

[@Strepfen1]

How about sharing the code? It would be more easy to copy rather read form the video. Thx

[@anibalvilelarj]

I have transcripted the code from video. Would you like to get it ?

[@gabrielvazquez3727]

@@anibalvilelarj I would like to have a copy of this code

[@ismailmuse926]

@@anibalvilelarj I want a copy

[@davejwaugh]

@Anibal Vilela I want a copy

[@murshedulhasan699]

@@anibalvilelarj I would like to have a copy of that.

[@johnnypongerard6648]

merci beaucoup ,ce tuto va m’être d'une grande utilité

[@enjoyinside8156]

it can use more than one switch button?

[@dansv9778]

I think you can make as many buttons, sending different texts like "LEDonoff" and adding different if statements

[@enjoyinside8156]

@@dansv9778 i did it drive.google.com/file/d/1Vp0hpWEW6ievx-JV1bbaO-DwKHxzRp7U/view?usp=sharing

[@marcosgiovanni9682]

@@enjoyinside8156 share the code in the email [e-mail]

[@marciooliveira8017]

Code please? 🤓

[@stivensvelez2475]

thank you and... where is the code? :/

[@rsl10demo89]

Has anyone tried this on an ESP32?

[@longphi-no3vr]

code please

[@OzgurUrhan]

Bunu javascript degilde html ve css ile gösterebilirmisin

[@ulasdikme7307]

Html ve css de kullandım zaten ama sen hiç javascript olmadan mı butonu yapma mı istiyorsun ?

[@สุพงศ์เอง]

i want two chanel

[@MegaBitmap]

Music = ua-cam.com/video/Z_itPV3Hy9w/v-deo.html

[@salmon_line]

Typed all of this up real fast, hopefully without any mistakes
pastebin.com/NHY0eRyW