Author Topic: ESP8266-12 ON/OFF LED (Read 10875 times)

alin_im · « **on:** November 06, 2015, 04:17:17 pm »

Hey guys,

Can you help me with a piece of code for a project ?

I am trying to make a controlled LED over the Internet using an ESP8266. I am trying to host a webpage with the MCU that has 2 buttons ON and OFF for the LED. Also I want to program the MCU using Arduino IDE.

I found lots of information (use other compilers or Java or PHP) but there are beyond my understanding. I want something simple that can be done using simple HTML code and Arduino IDE without libraries made by someone else.

I also attached the libraries included by arduino ide for this module, feel free to have a look on them and come with some ideas about how can this be possible.

The part that connects the module to the wifi is done but now I am struggling with making an webpage interface so I can turn the LED on and off.

Kind regards,
Alin I.

kripton2035 · « **Reply #1 on:** November 06, 2015, 04:41:50 pm »

here : http://iot-playground.com/esp8266-wifi-relay-switch
replace the transistor-relay module with the led

alin_im · « **Reply #2 on:** November 06, 2015, 05:49:06 pm »

Quote from: kripton2035 on November 06, 2015, 04:41:50 pm

here : http://iot-playground.com/esp8266-wifi-relay-switch
replace the transistor-relay module with the led

Also I do not want to use others cloud

forgot to mention, I want the module to be stand alone and I want to port forward the ip address of it to access easily with a web page that is hosted by the MCU. The networking part with port forward is not a problem

obiwanjacobi · « **Reply #3 on:** November 06, 2015, 05:52:22 pm »

alin_im · « **Reply #4 on:** November 06, 2015, 06:18:16 pm »

Quote from: obiwanjacobi on November 06, 2015, 05:52:22 pm

Thank you very much !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Very good tutorial, simple to understand.

macboy · « **Reply #5 on:** November 06, 2015, 06:29:33 pm »

Quote from: alin_im on November 06, 2015, 05:49:06 pm

Quote from: kripton2035 on November 06, 2015, 04:41:50 pm
here : http://iot-playground.com/esp8266-wifi-relay-switch
replace the transistor-relay module with the led

Also I do not want to use others cloud forgot to mention, I want the module to be stand alone and I want to port forward the ip address of it to access easily with a web page that is hosted by the MCU. The networking part with port forward is not a problem

So you don't want to use EasyIoT but just want a simple little standalone server.

How much do you know about web servers?

Building a web server is simple. It sits there waiting for a connection request usually on port 80. After establishing a connection with the client, the client sends a http request. This is just a string specifying what the client wants (what file it wants to load). The server responds by sending the data requested. That's the simpliified view of it.

As I think about your problem, I see a simple (to me) solution. I'd have three different pages that could be requested: the default (say led.html) the On page (on.html) and the off page (off.html). If you load the main page, you get a little html page that shows you the present state of the LED, and has a button/link to turn it on or off. Clicking that will load the on.html or off.html page. When the server gets a request for on.html, it turns on the LED and sends the html content. When the server gets a request for off.html, it turns off the LED and sends the html content. Simple enough right? You will need to flesh out the details of how to open that TCP connection, and to respond to http requests. I'm sure google can find a bazillion or so examples.

The html page can be as simple as a single line of html code. When the LED is OFF, send:

Code: [Select]

<html><body>LED is OFF<p><a href=on.html>Turn ON</a> <a href=off.html>Turn OFF</a></html>And when it is off, send:

Code: [Select]

<html><body>LED is ON<p><a href=on.html>Turn ON</a> <a href=off.html>Turn OFF</a></html>Try it, create two text files, one called on.html and one off.html with the contents above. Open one of them. Click.
Your server needs to control the LED based on which page is requested, then send the appropriate html back. Depending on how much memory you want to use/waste, you can get all fancy with the HTML, but the above is pretty minimal (you could certainly even skip the <html> and <body> tags). The only difference is the word ON or OFF.

kripton2035 · « **Reply #6 on:** November 06, 2015, 06:48:23 pm »

Quote from: alin_im on November 06, 2015, 05:49:06 pm

Quote from: kripton2035 on November 06, 2015, 04:41:50 pm
here : http://iot-playground.com/esp8266-wifi-relay-switch
replace the transistor-relay module with the led

Also I do not want to use others cloud forgot to mention, I want the module to be stand alone and I want to port forward the ip address of it to access easily with a web page that is hosted by the MCU. The networking part with port forward is not a problem

the EasyIOT module is optionnal
forgot about that part, do the first part : copy-paste in your arduino ide
then connect any browser to your esp8266 ip and that's all.

firepower · « **Reply #7 on:** November 09, 2015, 04:46:22 am »

this may help you, massive comment section as well.

http://randomnerdtutorials.com/esp8266-web-server/

ludzinc · « **Reply #8 on:** November 09, 2015, 05:36:30 am »

I found this example to be very helpful!

http://tutorial.cytron.com.my/2015/07/30/esp8266-tutorial-part-iii-customise-your-web-server-with-arduino/

It builds on the example that comes with the Arduino IDE and through mDNS magic you can simply look up the name of your device, you don't need to know the IP address.

firepower · « **Reply #9 on:** November 09, 2015, 07:03:21 am »

Anyone have example code to control ESP8266 output to be controlled by momentary web button using onmousedown / onmouseup
I want to control a motor controller relay forward button and backwards button by webpage but only when mouse button down on web button.

TJ232 · « **Reply #10 on:** November 09, 2015, 12:35:38 pm »

You can find below a easy to understand example of a simple Web Server and buttons implementation:

ESP8266 WEB Switch

and also a Slider/mouse dragging one, updatinf values on-the-fly, not needed any Submit button:

ESP8266 WEB interface - slider

alin_im · « **Reply #11 on:** November 09, 2015, 01:32:19 pm »

Quote from: ludzinc on November 09, 2015, 05:36:30 am

I found this example to be very helpful!

http://tutorial.cytron.com.my/2015/07/30/esp8266-tutorial-part-iii-customise-your-web-server-with-arduino/

It builds on the example that comes with the Arduino IDE and through mDNS magic you can simply look up the name of your device, you don't need to know the IP address.

Thank you, I like the idea of making a site and then implement in the C code, I do not know if it is real time...My problem is how can send information form server to MCU. For example how can I link the HTML button for example with a function in Arduino IDE ( i tried with "onclick" function of HTML).

firepower · « **Reply #12 on:** November 09, 2015, 02:07:54 pm »

thanks for links but first is still the common toggle method, I dont want toggle but same as a momentary switch but activated by a web button
only active when mouse button down over web button. like volume buttons up or down on tv remote.

I plan to build ESP8266 to control a hospital bed 3 motors, head, feet, and bed position. tapping into wired remote in parallel.
so was going to be 6 buttons, patient has only use of thumbs of cloded fist, but can operate a mouse or tablet, so planed to use web browser to control via wifi.

head [up] [down]
feet [up][down]
bed [up][down]

TJ232 · « **Reply #13 on:** November 09, 2015, 03:36:49 pm »

Quote from: firepower on November 09, 2015, 02:07:54 pm

thanks for links but first is still the common toggle method, I dont want toggle but same as a momentary switch but activated by a web button
only active when mouse button down over web button. like volume buttons up or down on tv remote.

I plan to build ESP8266 to control a hospital bed 3 motors, head, feet, and bed position. tapping into wired remote in parallel.
so was going to be 6 buttons, patient has only use of thumbs of cloded fist, but can operate a mouse or tablet, so planed to use web browser to control via wifi.

head [up] [down]
feet [up][down]
bed [up][down]

Look at the slider example given above. Ergonomic interface: nothing easier to be used than have 3 sliders on your tablet screen for your 3 servos.

Did you managed to certify ESP8266 for medical grade application? That will be good news.

macboy · « **Reply #14 on:** November 09, 2015, 05:39:34 pm »

Quote from: alin_im on November 09, 2015, 01:32:19 pm

Quote from: ludzinc on November 09, 2015, 05:36:30 am
I found this example to be very helpful!

http://tutorial.cytron.com.my/2015/07/30/esp8266-tutorial-part-iii-customise-your-web-server-with-arduino/

It builds on the example that comes with the Arduino IDE and through mDNS magic you can simply look up the name of your device, you don't need to know the IP address.

Thank you, I like the idea of making a site and then implement in the C code, I do not know if it is real time...My problem is how can send information form server to MCU. For example how can I link the HTML button for example with a function in Arduino IDE ( i tried with "onclick" function of HTML).

You want some user action on the web page to result in something happening on the server. You need a better understanding of how web pages and web servers work - how the web client (Firefox, etc.) interacts with the server (your connected Arduino). This is the HTTP protocol.

In its most basic form, a web page will consist of some information and a few links to take you to other pages. Clicking on a link will result in the client (Firefox) requesting the linked page from the server ("GET /something.html"). That is how my example above works. Clicking the "on" link results in the client requesting the "on.html" page from the server "(GET /on.html"). The server (Arduino) needs to wait and watch for that specifc GET request and when it sees it, send the contents of "on.html" back to the client for display, and perform another action (like calling a function that actually does turn on the LED). Ditto for "GET /off.html".

A slightly more advanced web page might contain a form. This might have some fields like text boxes, check boxes, radio buttons, etc. that you can interact with to provide data to the server. An example you might have seen is a "send us your comments" form with text boxes for your name, e-mail address, and comments. Clicking "send" button will send that data to the server. You usually use a POST request to send this data to the server. That is how the slider dimmer example linked by someone else works. Moving the slider causes the client to execute the function specified for "onInput" which performs a POST to the server with the new slider value. The server is waiting and watching for those POSTS from the client side and it responds appropriately. That is how the real-time interaction is realized.

You need to do some research and learn about this HTTP stuff if you intend to build your project. If you don't know this stuff then you won't get anywhere.

alin_im · « **Reply #15 on:** November 09, 2015, 05:49:42 pm »

Quote from: macboy on November 09, 2015, 05:39:34 pm

Quote from: alin_im on November 09, 2015, 01:32:19 pm
Quote from: ludzinc on November 09, 2015, 05:36:30 am
I found this example to be very helpful!

http://tutorial.cytron.com.my/2015/07/30/esp8266-tutorial-part-iii-customise-your-web-server-with-arduino/

It builds on the example that comes with the Arduino IDE and through mDNS magic you can simply look up the name of your device, you don't need to know the IP address.

Thank you, I like the idea of making a site and then implement in the C code, I do not know if it is real time...My problem is how can send information form server to MCU. For example how can I link the HTML button for example with a function in Arduino IDE ( i tried with "onclick" function of HTML).

You want some user action on the web page to result in something happening on the server. You need a better understanding of how web pages and web servers work - how the web client (Firefox, etc.) interacts with the server (your connected Arduino). This is the HTTP protocol.

In its most basic form, a web page will consist of some information and a few links to take you to other pages. Clicking on a link will result in the client (Firefox) requesting the linked page from the server ("GET /something.html"). That is how my example above works. Clicking the "on" link results in the client requesting the "on.html" page from the server "(GET /on.html"). The server (Arduino) needs to wait and watch for that specifc GET request and when it sees it, send the contents of "on.html" back to the client for display, and perform another action (like calling a function that actually does turn on the LED). Ditto for "GET /off.html".

A slightly more advanced web page might contain a form. This might have some fields like text boxes, check boxes, radio buttons, etc. that you can interact with to provide data to the server. An example you might have seen is a "send us your comments" form with text boxes for your name, e-mail address, and comments. Clicking "send" button will send that data to the server. You usually use a POST request to send this data to the server. That is how the slider dimmer example linked by someone else works. Moving the slider causes the client to execute the function specified for "onInput" which performs a POST to the server with the new slider value. The server is waiting and watching for those POSTS from the client side and it responds appropriately. That is how the real-time interaction is realized.

You need to do some research and learn about this HTTP stuff if you intend to build your project. If you don't know this stuff then you won't get anywhere.

Thank you very much for your thoughts, I will start read about HTTP protocol.

Another question, for example I have ledON.html and ledOFF.html that turns the a led on and off, I understand that I need to have 2 separate pages that needed to be accessed individuality. Now if I want to also send from the MCU to the 2 sites the temperature, in real time, I need to make a function that reloads my webpage so the temperature updates or I need more advance stuff so I can see the update without reloading the page


EEVblog Main Site	EEVblog on Youtube	EEVblog on Twitter	EEVblog on Facebook	EEVblog on Odysee

EEVblog Electronics Community Forum

Author Topic: ESP8266-12 ON/OFF LED (Read 10875 times)

alin_im

ESP8266-12 ON/OFF LED

kripton2035

Re: ESP8266-12 ON/OFF LED

alin_im

Re: ESP8266-12 ON/OFF LED

obiwanjacobi

Re: ESP8266-12 ON/OFF LED

alin_im

Re: ESP8266-12 ON/OFF LED

macboy

Re: ESP8266-12 ON/OFF LED

kripton2035

Re: ESP8266-12 ON/OFF LED

firepower

Re: ESP8266-12 ON/OFF LED

ludzinc

Re: ESP8266-12 ON/OFF LED

firepower

Re: ESP8266-12 ON/OFF LED

TJ232

Re: ESP8266-12 ON/OFF LED

alin_im

Re: ESP8266-12 ON/OFF LED

firepower

Re: ESP8266-12 ON/OFF LED

TJ232

Re: ESP8266-12 ON/OFF LED

macboy

Re: ESP8266-12 ON/OFF LED

alin_im

Re: ESP8266-12 ON/OFF LED

Share me