[0:00] hi everyone I wanted to do a quick video
[0:04] to show how easy it is because their
[0:07] HTML files from the ESB 32 from spliffs
[0:12] so in this video we’re going to show how
[0:16] to control an LED using an HTTP endpoint
[0:21] we’ll build a very simple user interface
[0:25] using some basic HTML and JavaScript and
[0:30] then I’ll show you how to serve that and
[0:33] why directly from the ESB 32 using space
[0:38] so I’m going to be using platform
[0:41] Ione for this project because it makes
[0:44] uploading space very simple so let’s
[0:47] jump into platform IO
[0:49] and create a new project
[0:53] so I’ve started platform by oh let’s
[0:57] create a new project so we’ll just call
[1:02] this web demo go to the board
[1:06] we’ll use them in SP 32
[1:13] which is a better module that were using
[1:17] Audrina framework
[1:23] you
[1:25] so in platform io your source files a
[1:29] lender source so it’s given us a default
[1:33] main file now we’re going to be using
[1:37] the basic web server so if we click on
[1:41] the platform i/o logo can then go to
[1:45] libraries then we can search for
[1:52] anything and here we have the ESB
[2:00] basic web server so I have this
[2:03] installed already so let’s go to our
[2:07] code and actually create a web server so
[2:12] first thing we do is include the header
[2:16] file and we’ll also use mdns so that our
[2:28] device is easy to find and we’ll use
[2:37] Jason for sending messages to our device
[2:49] I’ll create a Wi-Fi credentials file for
[2:55] my Wi-Fi settings so I’ll do that file
[3:02] now so let’s go to file new file and
[3:14] I’ll do some hefty fines okay my society
[3:41] so now we can now create our web server
[3:45] so we just do basic web server and you
[3:53] specify the port that you want to use so
[3:56] portability is the default port for HTTP
[4:01] so now we can begin our setup code so I
[4:05] will set up the serial port first just
[4:09] so we can show you by the information
[4:20] and then we’ll start up Wi-Fi so now
[4:43] we’re connected to Wi-Fi we can set up
[4:46] the DNS so this will give our device the
[4:57] name demo server dot local
[5:04] now we want to control the LED so on an
[5:09] ESP dev board that’s 32 so pen - so just
[5:18] do a quick cash define for that and
[5:21] we’ll set up in fired
[5:34] now while we’re developing our user
[5:36] interface we want to run the UI locally
[5:40] in Chrome and talk to our device
[5:44] remotely so what you’ll find when you
[5:48] try and do that is you hit problems with
[5:50] something called cause so what we need
[5:54] to do is add some headers to our server
[5:56] back so that Chrome allows our local UI
[6:00] to talk to my remote Eli so these is
[6:04] waiting to do that is to add some
[6:06] default headers to our server so these
[6:10] headers basically allow access to our
[6:12] device forever
[6:13] any website using these methods and with
[6:17] any headers so now we’ve done that we
[6:21] can actually build the endpoint to
[6:23] control a lot a TD so we’ll use server
[6:28] at handler we’ll have a baby sync
[6:33] callback Jason web handler so this will
[6:37] allow us to send Jason to this endpoint
[6:41] now we’ll create an endpoint called PD
[7:03] so at this endpoint or take a dose of
[7:07] payload and we’ll pull out data from
[7:11] that and what I will do is I’ll just
[7:26] pass a simple JSON object with a
[7:30] parameter
[7:47] so that’s our handler down for turning
[7:50] an LED on and off so now we just need to
[7:56] add a handler for the not found any
[8:00] point and for the options endpoint now
[8:03] the options endpoint is very important
[8:06] because when the web browser tries to
[8:11] see if it can access this endpoint it
[8:13] will first do an options request to
[8:16] check the access control house so let’s
[8:19] have a server found if exempt options
[8:44] request will just send okay this one’s
[8:55] so 200 is HTTP okay otherwise we’ll
[9:02] actually send out before or four so 404
[9:21] responds there’s not found so that’s our
[9:31] basic sketch that’s actually all you
[9:35] need to do to have a running web server
[9:38] so they don’t for anything in the loop
[9:41] that’s all handled by the async Webster
[9:44] so what should happen is we’re and the
[9:48] quest comes on the led a point or passed
[9:52] in Jason
[9:52] body if it contains an America return
[9:56] the LED on if it contains an off palette
[9:58] a return LED above the last part we need
[10:03] to do is to actually start the server so
[10:07] we do server begin so let’s download
[10:15] this to our ESP 32 and see if it works
[10:19] so well
[10:20] upload to our board
[10:28] so that’s our sketch uploaded let’s
[10:32] switch into an HTTP client now see if we
[10:37] can control the led so I’ve got an
[10:42] application called for running here so I
[10:46] created a put and we’ll go to demo
[10:50] server local LED I’m going to send Jason
[10:55] payload containing on equals true so
[11:00] let’s send that request
[11:02] DeMarre ESB 32 and see if the LED lights
[11:07] up
[11:09] you
[11:16] so when a 404 error so it’s not quite
[11:21] worked and normally this is because we
[11:26] need to set the content type to
[11:32] application Jason so let’s try that
[11:36] again
[11:36] and see if it works
[11:39] and our LED is on but you can see this
[11:43] socket placed by remote peer so when I
[11:49] forgotten today is actually sent a
[11:51] response back to the client so let’s do
[11:55] that now so we’ll just send a to 200 and
[12:01] we’ll just say ok so let’s push that up
[12:06] but you can see the LED turned off so we
[12:10] are successful
[12:20] so our sketches downloaded we’ll go back
[12:23] to Paul
[12:25] let’s try turn maybe any D on again
[12:36] so that now works we have a two hundred
[12:38] and our content pythons okay you get the
[12:42] message we’ve got back looks fine so I
[12:47] think that successful so let’s try to
[12:49] aim the LED off so if I need two years
[12:56] off and let’s 29 led on again
[13:01] and our LED is on so that’s working
[13:04] quite nicely but obviously using this as
[13:08] our UI is not quite where we want to be
[13:11] so let’s create a nice simple HTML UI so
[13:17] we’ve spiffs the way M platform IO works
[13:22] is you have a beta folder and any files
[13:27] in this data folder can be packaged up
[13:30] and pushed onto the spiff storage on the
[13:33] device so let’s create a basic HTML file
[13:45] to control our LED so we’ll just have a
[13:52] button on good candidate we need some
[14:04] JavaScript and then we’ll just send a
[14:22] request
[14:32] to the endpoint and our method will be a
[14:38] good method our body obeys Jason and
[14:49] that will take on parameter with the
[14:53] value of our net variable so that should
[15:13] do for a very simple user interface
[15:17] we’ll make this an async function in
[15:20] JavaScript so we await on the fetch and
[15:30] that’s it dude
[15:31] so let’s run this up locally and see if
[15:36] it actually works so I have a plugin for
[15:39] the u.s. code controller life which will
[15:43] launch Chrome with my own application
[15:48] here so let’s see if this works
[15:55] so no obvious signs with the LED turning
[16:00] off and on so if we don’t you know
[16:04] Croton console see it’s struggling to
[16:09] find our name so let’s try try that
[16:15] again looking at this I can see I missed
[16:23] off the top local on my demo server so
[16:29] let’s fix that so let’s try them
[16:36] we’ll look this in the actual land home
[16:41] displayed so led off led on so that’s
[16:56] our nice basic UI working but obviously
[17:00] this is being served from my local
[17:02] machine
[17:03] not from our demo server say back in
[17:08] platform IO we now want to upload the
[17:12] contents of this data folder to spiffs
[17:16] and we want to set up our server to
[17:18] serve files from these bits so this is
[17:24] pretty easy to set up so we need to
[17:28] include space then we need to actually
[17:38] initialize this so now to actually serve
[17:49] content from this it’s a simple pass
[17:52] server so ecstatic this and I’ll set or
[18:10] set up default file
[18:16] HTML so let’s upload that sketch okay
[18:30] so that’s now done if you switch back
[18:33] into Chrome you can now go to our demo
[18:40] server dot local will see my UI is now
[18:47] being served from demo server so now we
[18:50] can switch on/off the LED so what’s
[18:54] really nice about this our device is now
[18:56] completely self-contained you can
[18:59] download its UI directly from it and
[19:02] control it from that UI
[19:07] the last thing I want to demonstrate is
[19:10] serving compressed content directly from
[19:15] our sniffs so one of the things that you
[19:19] might be thinking is how much space is
[19:22] this user interface going to take up so
[19:25] at the moment we have a very simple HTML
[19:28] file but if you start building more
[19:31] complex user interfaces these files can
[19:33] easily start to get quite large so let’s
[19:37] do a large file just by putting in some
[19:39] dummy content so we’ll put in the
[19:44] classic lorem ipsum and we’ll just get a
[19:52] lot of text so let’s just copy and paste
[19:56] this and put that into our HTML file so
[20:14] if we now look in terminal
[20:29] you can see our index.html is now around
[20:34] 79 K so you will easily start to get
[20:38] quite large amounts of data if you’re
[20:41] not careful but what we can do is we can
[20:44] compress our files so we can use gzip
[20:50] and now you’ll see our files shrunk down
[20:52] to just 21 K so I can upload this
[20:57] straight to Smith’s again so we go to
[21:02] tasks platform IO upload file system
[21:06] image so
[21:16] style file up again if we go back into
[21:19] Chrome and we reload can now see we have
[21:24] all of our W text but if you look at
[21:29] what actually came down by over the wire
[21:32] then you can see that we actually
[21:39] received some gzipped content and it was
[21:42] only 21k
[21:43] so it handles the compression completely
[21:47] synchronously so that’s it for this
[21:52] video the only downside of compressing
[21:55] the content is that you now can’t edit
[21:58] it so you need to go back into your
[22:01] terminal and do a gr zip and now we can
[22:05] edit the file and then we can reuse of
[22:08] it once we’re finished editing but
[22:12] that’s it so you can see how easy it is
[22:15] to actually set up a web server on your
[22:19] ESP 32 device and how easy it is to
[22:24] build a nice simple UI and upload it to
[22:27] your device and serve it from spiffs so
[22:30] I hope you found this video useful
[22:33] interesting or the source code is on
[22:37] github the link for that in the
[22:40] description please hit subscribe that we
[22:44] more videos coming it’s the best way to
[22:46] get notified when they become available
[22:49] thanks for watching