ESP8266-12 ON/OFF LED - Page 1
Forum section: electronics / general

author: alin_im
author_rank: Regular Contributor
timestamp: November 06, 2015, 04:17:17 pm
content: 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.

author: kripton2035
author_rank: Super Contributor
timestamp: November 06, 2015, 04:41:50 pm
content: here :http://iot-playground.com/esp8266-wifi-relay-switchreplace the transistor-relay module with the led

author: alin_im
author_rank: Regular Contributor
timestamp: November 06, 2015, 05:49:06 pm
content: Quote from: kripton2035 on November 06, 2015, 04:41:50 pmAlso I do not want to use others cloudforgot 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

author: alin_im
author_rank: Regular Contributor
timestamp: November 06, 2015, 06:18:16 pm
content: Quote from: obiwanjacobi on November 06, 2015, 05:52:22 pmThank you very much !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Very good tutorial, simple to understand.

author: macboy
author_rank: Super Contributor
timestamp: November 06, 2015, 06:29:33 pm
content: Quote from: alin_im on November 06, 2015, 05:49:06 pmSo 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:<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:<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.

author: kripton2035
author_rank: Super Contributor
timestamp: November 06, 2015, 06:48:23 pm
content: Quote from: alin_im on November 06, 2015, 05:49:06 pmthe EasyIOT module is optionnalforgot about that part, do the first part : copy-paste in your arduino idethen connect any browser to your esp8266 ip and that's all.

author: firepower
author_rank: Regular Contributor
timestamp: November 09, 2015, 04:46:22 am
content: this may help you, massive comment section as well.http://randomnerdtutorials.com/esp8266-web-server/

author: ludzinc
author_rank: Unknown
timestamp: November 09, 2015, 05:36:30 am
content: 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.

author: firepower
author_rank: Regular Contributor
timestamp: November 09, 2015, 07:03:21 am
content: Anyone have example code to control ESP8266 output to be controlled by momentary web button using onmousedown / onmouseupI want to control a motor controller relay forward button and backwards button by webpage but only when mouse button down on web button.

author: TJ232
author_rank: Frequent Contributor
timestamp: November 09, 2015, 12:35:38 pm
content: You can find below a easy to understand example of a simple Web Server and buttons implementation:ESP8266 WEB Switchand also a Slider/mouse dragging one, updatinf values on-the-fly, not needed any Submit button:ESP8266 WEB interface - slider

author: alin_im
author_rank: Regular Contributor
timestamp: November 09, 2015, 01:32:19 pm
content: Quote from: ludzinc on November 09, 2015, 05:36:30 amThank 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).

author: firepower
author_rank: Regular Contributor
timestamp: November 09, 2015, 02:07:54 pm
content: 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 buttononly 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  feet bed

author: TJ232
author_rank: Frequent Contributor
timestamp: November 09, 2015, 03:36:49 pm
content: Quote from: firepower on November 09, 2015, 02:07:54 pmLook 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.

author: macboy
author_rank: Super Contributor
timestamp: November 09, 2015, 05:39:34 pm
content: Quote from: alin_im on November 09, 2015, 01:32:19 pmYou 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.

author: alin_im
author_rank: Regular Contributor
timestamp: November 09, 2015, 05:49:42 pm
content: Quote from: macboy on November 09, 2015, 05:39:34 pmThank 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