ESP8266 Control NeoPixels From iOS Using Arduino and XCode | iPhone IoT Mac OSX

ESP8266 Control NeoPixels From iOS Using Arduino and XCode | iPhone IoT Mac OSX

[Intro Music] SONIA: What’s up YouTube. I am Sonia and in this video, I’m gonna show you how to build a web application on the ESP8266, and an iOS app that will communicate with that Web application through an API. First we are gonna go over the firmware for the web application. Then we’re gonna go over building the iOS app. Let’s go over the firmware, which is available at our Github page. Also all the code that you see in this video is available in links in the description bellow. In the program you gonna see all the usual things that you see in most sketches written in the Arduino IDE namely a loop function, and a setup function, as well as some user defined functions. First we’ve included some libraries that are for the ESP8266 using Wi-Fi general usage and setting up a web server. Here we have where you put your Wi-Fi information, network name and password In this line we’ve got an object, which is an instance of the web server class, and that establishes that we’re gonna be communicating through port 80. We have three user defined functions. The first is to tell our users how to use our web application. The second one is to control the LEDs, and the third is to generate an error in case our web application receives a request that doesn’t understand. In the setup function, we set up the pins to be outputs we initiate them in a low state, and it’s also where we connect to Wi-Fi and we output messages to the serial monitor, namely the IP address that gets assigned to our ESP8266 port. It’s also where we set up our web server. And in the loop function there is only one line which is an object of the web server class and it continuously listens for incoming web traffic. Go ahead and download the program, and when that’s finished open up your serial monitor. If you see information that doesn’t make sense to you try hitting the reset button on your board. Copy and paste the IP address that appears on the serial monitor because that’s what we are gonna take and put into a web browser. You’ll see a message come up on your web browser. Those are the instructions for your user. If we go back to the program you can see where in the program we attach that URL path to a user defined function. which is ‘handleRoot’. That ‘handleRoot’ function generates a HTTP 200 message, which is to say everything is OK and it puts out a message in plain text that is the instructions for our user. Let’s go ahead and follow those instructions. We’re gonna type out a URL path that is described by the message we received. After that IP address we’re gonna insert a slash setleds And everything that is after the question mark are parameters one for each LED, and they are separated by an ampersand symbol When you hit ‘Enter’ you’ll see that the LEDs have come on, which is pretty cool. Those LEDs came on, because that URL path within our program is associated with the ‘handleSetLeds’ function. And that function has actual instructions that manually turns on those LEDs. And that’s how we use the web browser to generate Web traffic that our Web application understands, and then does things within the ESP8266 port. which in our case is switching LEDs on and off. Next we’re gonna build an iOS app that’s gonna do the same thing that the Web browser did. That is generate Web traffic that the Web server interprets, and the Web application uses. To build our iOS App we’re gonna use Xcode. Once you’re in Xcode just follow the wizard that comes up when you start a new project. When it asks you for the product name, you can put whatever you want and most of the fields will be empty. As you can see in ours we’ve got some fields populated, and that’s because we already have a developer account. Fortunately in order to use Xcode, you don’t need a developer account. I’m gonna name my project IoT LEDs and I’m gonna also make sure that the language is set to Swift. These options here you can leave as is. Chose a folder where you wanna save your project and click Create. Xcode generates files whenever you start a new project. The two that we will be working with are Storyboard and View Controller. Storyboard is where you layout the UI elements, and View Controller is where you put in the code that dictates the behavior of your UI elements. Once in Storyboard go to the Objects Library which is where you can choose the different things that are gonna be your UI elements. In the Objects Library, we are going to search for Button. And I’m gonna use the first option and we gonna place the Button. Then we’re gonna search for Web View, which is another UI element that we are gonna need. Take that and place it in your Storyboard. When you highlight your UI elements, you are gonna be presented with different settings that you can change and customize, such as the name. Our Button we’re gonna change to LED 1 because that’s what it controls. The Web View we’re just gonna leave as is. Now that we have our UI elements laid out, we’re gonna go into a split screen so that we can see the View Controller as well as the Storyboard. As you can see, I’m using a Mac Book Air and I don’t really have a lot of screen real estate so I’m gonna get rid of some of these side panels to give me more room. Now I can map the different UI elements to the different sections that correspond on the View Controller. Our LED Button is an Action, and our Web View is an Outlet. So control click the Button and line it up between these two brackets. And a pop-up screen comes up. Make sure that you change the connection to action because that’s what our Button is. Now control click the Web View. And point it upwards. Map it to there. Here we don’t have to change the connection because it is an outlet but we will put in a name. Our two UI elements are now mapped and so now we’re gonna populate the View Controller code with some code of our own. I’ve got my Terminal here Just kind of holding up this code. Just remember that all the code that you see here is available in the description section of this video. Now that code is in there, we’re ready to simulate. Click the play button to simulate your app. And a window will pop-up that mimics your iPhone. Click LED 1. You’ll see an error pop up and we’re gonna go ahead and show you how to take care of that. In the list of files generated by Xcode go to info.plist and click in that open space. Right click and select Add Row. And enter App Transport Security Settings. Expand. Right click over that selection and hit Add Raw And what you want is Allow Arbitrary Loads. Hit Enter. Make sure that this says “Yes”. And that should take care of that error. Hit play to simulate again. And now when you hit LED 1 your LED will come on. If you try and hit LED 1 again nothing’s gonna happen, and thats because the action of that button executes is simply to turn the LED on. It’s already on so, it’s not really gonna turn it on again. If I wanted to turn it off I have to go to my code, and where it says turn LED on, I can change the ON to OFF And then that changes the action. So when I hit LED 1 again LED goes off. So now I extend the challenge to all of you, to expand on the code, maybe add some new UI elements to really enhance you iOS app. Thanks for watching. I hope you had fun, I did. Like, subscribe comment bellow. Let us know what else you guys would like to see Sends some questions. We love to hear your feedback. Catch you in the next video.

23 thoughts on “ESP8266 Control NeoPixels From iOS Using Arduino and XCode | iPhone IoT Mac OSX

  1. Hi! Whit this code xcode8 return many error! Please you can fix it!

  2. Any Windows version of this tutorial?
    Nice tutorial, Clear and plain explanation but Im not on Apple Platform. So sad.

  3. Can you change this app to work with a slider so we can see the value of brightness change?

  4. So, I assume your iPhone has to 1) Select your WiFi SSID, pw entry before clicking on the iPhone App?
    2) Why not just open a browser in the iPhone, type in the IP address, program the webserver to serve up a page with a button on it, read your button input?
    That way, you can control the LED via anything with a browser? Why involve iPhone coding?

  5. You are a very good teacher.

  6. You are a very good teacher.
    Thank you.

  7. Thanks I agree with the posts below your Tony The Tiger Grate

  8. Hi, I have xCode 8 – is there a difference vs. 7 – I have some issues when I "run" with the NSURL. App cannot be build 🙁
    See here:

  9. I am just trying to simply turn on and off leds at pin D1 and D2, but it doesnt seem to work. When i load my program to turn on board led at pin 16, I could see onboard led blinking. This is my code –
    void setup() {
    pinMode(D1, OUTPUT);
    pinMode(D2, OUTPUT);


    // the loop function runs over and over again forever
    void loop() {
    digitalWrite(D1, HIGH); // turn the LED on (HIGH is the voltage level)
    delay(1000); // wait for a second
    digitalWrite(D1, LOW); // turn the LED off by making the voltage LOW
    delay(1000); // wait for a second

    digitalWrite(D2, HIGH); // turn the LED on (HIGH is the voltage level)
    delay(1000); // wait for a second
    digitalWrite(D2, LOW); // turn the LED off by making the voltage LOW
    delay(1000); // wait for a second

    leds are not damaged since i verified with arduino board. Please tell me if I am doing anything wrong here?

  10. Any way you can make a homekit app integration video? Would like to make certain things in my house automated using wifi micro-controller boards and the home app

  11. Impressive tutorial. Just one question. How can we send information from a sensor connected to the esp8266 to the iPhone?. Thanks in advance

  12. Beautifully explained thank you so much, you made this so simple and easy to follow, love it!!

  13. how to recive data sent from the wifi module in the ios code

  14. I am a beginner of these field I had practiced your video I got a perfect output of two led control with ios app but now I will try in 5 led pins control with ios app so i want a code for hardware part(esp8266) i will make it ios code please guide me

  15. that's so cool, thx

  16. Can you do a tutorial on how to make a Bluetooth app for arduino uno?

  17. Thank you. You are the best teacher. Can you help me. I want using Swift to read the text "XXX" from command send.server(200, "text/plain"," XXX") of ardurino. So please show me How can read this text.

  18. Good video Sonia, can you please explaine this video on Xcode 9 swift 4.


  19. Can you do this with Uno start and stop Multiple pins

  20. I love how you explain things 🙂

  21. Love this video. Thanks for sharing!

  22. life saving video

  23. Hello… im working in iOS app for can control a ESP8266 and I would like to ask you …How can I do that communication with Sockets? ESP8266 (Arduino IDE) and iOS app with swift

Leave a Reply

Your email address will not be published. Required fields are marked *