in today's video i'm going to be showing you how to flash the ns panel with esp home check it out
if you're not familiar with it the ns panel is a smart screen wall switch created by sonoff
and it features a touchscreen as well as two relays which are connected to two physical buttons
there's two different variations of the ns panel there's the eu version which is the one that we're
looking at today and this one's got the square shape design and there's also the us version which
features the longest rectangular shape although the shapes have got different form factors the
internals and the specifications for both of them are the exact same so whether you're making use of
the eu version or the us version this method for flashing will work with both i'm not really going
to be running through the technical specifications and the hardware for the ns panel as i have
already created this in a separate video and if you are interested in that you'll find a link
to that video in the description below and if you are watching this i'm going to be assuming you've
already got one of these panels or maybe you just want to know a bit of information on how easy the
process is just in case you are considering buying one currently the cost for one singular panel
is about 80 pounds here in the uk if you're buying it through sonoff it'll go through their parent
company which is itad and through the itd store it will cost you about 67 we're going to be flashing
our panel with esp home but if you're a taz motor user then you'll be happy to know that the panels
can also be flashed with tasmota currently i think within the community there is more headway being
made with the esp home version especially in the forms of configurating and changing the ui
but you choose whichever one works for you the main reason we're going to be flashing the device
is to open it up and to get more access to it we'll be able to configure and create our own
user interfaces and we'll also be able to control various different scenes scripts and automations
all using home assistant so there are a few different methods for actually performing the
flashing procedure the method that we're going to be using today doesn't require any soldering
and it also requires very minimal components all you're going to need for this procedure
are the ns panel some dupont wires a usb to serial adapter and if you want to make your
life a little bit easier then also a usb extension cable and that's everything you'll need and if you
wanted to check out any of those things you'll find links to them in the description below
let's get straight into it then to get started we're going to need to disassemble the panel in
order to access the pins internally now this process is very simple and it's just a couple
of screws so if you flip the panel over at the bottom of it you'll find a little tab cut out
and if you just pop a screwdriver in there and pry it open the back panel will just pop off
doing this is going to detach the relays from the main body which houses the pcb and also the screen
if you flip this over you'll find a black piece of plastic on the back and we'll need to remove that
in order to access the pcb so in the bottom left and bottom right corners you'll find two screws
just simply remove those and that black piece of plastic will just pull straight off revealing
the pcb on the pcb you'll find five exposed input pins these are pin inputs for three volts esp tx
esp rx a ground pin and an i o zero pin you'll also find some exposed header pins and on these
pins you'll be able to access five volts as well as ground to help with knowing what the
pin ins and outs are i'll leave a link to black adder's page in the description below
and on there he's got a diagram for the board that shows you exactly what all the pins do
now that we've got our pcb exposed we can start adding some wires to our usb to serial adapter
here i'm making use of an ft-232 by a dsd tech and again that's linked in the description below
if you wanted to copy along with this we're going to add some female-to-male dupont wires and we're
going to connect the wires to ground tx rx and 3 volts you'll notice i'm not making use of the
vcc connection on the ft-232 but i'll come back to the reason for this in a little while as we're not
going to be soldering any of the connections the wires are just going to be touching the contacts
of the pcb so it's important that it's in a secure place so it doesn't get knocked about as knocking
it out of place could actually damage the board during the flashing process to help with this
i'm making use of an old bit of plastic which is just off of a raspberry pi header pin and
i've just pulled those pins out and i've slotted the male connections from the dupont wires into
them this helps keep the cables in place but it also keeps them in the same order so if you have
to reflash the device or you flash in multiple ns panels then it's really easy to do as you can just
pull them out the pins and plug them straight back in and this is by no means the best way of doing
that but it's the way that i've done it and it's worked really well in order to flash the panel we
need to first put it into boot mode now there's no handy button or anything on the panel in order
to do this so we have to manually do this and to do this all we need to do is connect the i o zero
pin to a ground pin thanks to the help of black adders diagram we can see that there's a ground
pin on those exposed header pins so in our little pie jig here we can just add another wire which
is going to connect the i o zero to that ground pin and this works really well with my little jig
as i can have all five pins connect into that one slot and then i can just attach that pin over the
top and just so you know what goes where from the adapter you should be putting three volts to the
three volts pin on the board and make sure this is three volts and not five then from the adapter you
wanna go rx to the tx on the board you want the tx on your adapter to go to the rx on the board
and then you also want the ground from the adapter to go to the ground on the board in this little
jig i've also got an additional wire which is the black wire and this black wire is going to connect
the i o zero pin to the ground pin located on the exposed header pins so that's how we wire it up
and again using that little bit of plastic to hold them all in line i haven't got to worry about the
cables moving about and they always go in the set way so i know that the red cable is my three volts
and that goes into the three volts pin and then everything else is all going to be correct
and just to make it a bit clearer i'm just going to show you again quickly
that this is what the pins look like and this is what my cable connections look like
just in case you're not sure and you wanted to copy along onto the software then so i'm going to
be sharing with you my esp sketch which in itself is just a modified version of the original work
by mark vega and i'll leave a link to mark vega's github repo in the description below
over at his repo he's got all of the original work as well as the original trt file and also the hmi
file so if you wanted to download and modify these then again you can also do that the reason we're
making use of mark's work is because there's a lot of niceties within his code already and it's also
easier to start with the template just so you can get an idea of some of the things that you can do
some of the great features in mark's work allow you to do things like send notifications to the
display play rttl sounds and also update and customize the original startup screen
so full credits to mark as well as any of the other community members that have helped to create
this repo to get started we're going to open up esp home and we're going to choose to create a new
device in the new device you're going to need to give it a name and if it's the first time you're
using esp home you'll need to also provide some network credentials this will just be the network
name and password that your esp devices will use to connect to your wi-fi next we're going to need
to choose our device type and we're going to be using the esp32 as that's what's in the panel
so we're going to select that and press next it will then ask us if we wanted to do the
installation but we're just going to press skip at this point now you should have a new device
created and that device is just going to contain the default esp home code so what we're now going
to do is to just update this yaml code with the yaml from my github repo so head on over to my
github repo and just copy that code and with that copied to your clipboard you're gonna head back
to esp home and you're gonna select everything in this file and then just paste over the top of it
to get this to work for you there's gonna be three secrets that you need to have created and also set
those secrets are gonna be the wi-fi url and the wi-fi password these should automatically be
created by defaults when you set up esp home but if you've named them something differently to what
they are by default you'll need to change them and the third one is going to be the tft upload
url path and this is just going to be a path for where your tft file is located and we'll come back
to that in just a second the next step is going to be to download the tft file from my github repo
we're then going to need to place it somewhere that's accessible by the ns panel
just as a simple example i'm going to make use of the file editor add-on for home assistant but you
can upload the file with any means you want so from here i'm going to open up the file editor
then at the top i'm going to choose the little folder icon and from here i'm just going to scroll
down until i find the www folder if you don't see the www folder up at the top you'll see an
option to create a new folder and just create that there inside the www folder we're going to
upload the hmi.tft file and this is the file that contains all the information for the display and
how the screen should look i've already got that here but if you didn't have it already you could
press this upload button at the top and you can just manually upload that file to this location
where you upload that tft file needs to match the upload url in your secrets file
so in my example there i'd uploaded it to www so in this case here i can see the home assistant
port the local here is what points at www and then underneath that i've got that hmi file
if you don't put the tft file in a location that's accessible by the ns panel when you go to upload
that file the ns panel won't be able to see it and the display won't change so at this point
we should have that code loaded into our new device we should also have the tft file stored
underneath the www directory before you flash this demo onto your device there are a couple of other
little changes that you might want to make just to make it work better for you so you get the full
experience of this demo so if you press the edit button it will take you into the config and with
this open if you press control on f that will open up the search menu and if you start typing change
me you'll see when you start typing that it starts highlighting various different comments and these
are just little comments that i've put in just so you can customize this demo a little bit for you
so if you go through the code and just modify these change me sections you can just update the
entity ids to relevant ids for you that way when you load the demo onto your panel you'll at least
have some entities that you can interact with and get information from your home assistant once
you're done with your edit go ahead and press save and the next thing we want to do is to just make
sure that the config is valid so on the bottom right corner there if you press the three dots
and then choose validate that will then just run through the esp config and check that it's
valid and if you scroll up to the top you should hopefully see that the configuration is valid and
with that all valid and working we can now move on to the flashing so in the bottom right there
we're going to go ahead and press install you'll then be presented with a few different options
but the option i'm going to be making use of in this video is to plug into this computer option
so go ahead and select that one what this will then start doing is it will start building that
config file so just give that a second to do its thing and once it is done you'll see that the
download project option turns blue you can then select the download project option and download
the file and store it somewhere that's easy to access once you've got it downloaded you're going
to press open esp home web with using some of the other flashing options you don't need to download
the file and you can just put it straight onto the device but i've run into a few issues while
playing around with this and this for me worked the best so this is the way that i'm doing it
but if those options do work for you then some of the other options might be a bit quicker
we can now wire our usb adapter to our pcb and we're going to plug it into our computer to make
it simpler i'm making use of a usb extension cable so i don't have to lean under the desk
but go ahead and plug that in remember that all of the contacts are going to need to be touching
and you need to ensure that it doesn't get knocked or moved out of place whilst the flashing process
is happening if the header pins on your jumper wires are a little bit long it might be worth
just nudging something underneath the pcb just to lift it up the plate underneath it is made out of
metal so if they all touch they'll short each other out with that now connected up you can
go ahead and press connect you'll then just need to select the usb serial port that your device is
in in my case here mine's on port 7 so i'm going to select that we're then going to press install
and we're going to need to select the file that we just downloaded a second ago
so go ahead and select choose file and choose the bin file that you just downloaded a second ago
with that now set you can press install the installation process should just take a couple
of minutes to do its thing and if you keep this page open while it's doing it it should go a
bit quicker again make sure nothing gets knocked as nothing's held in place if you see a message
telling you it failed to initialize then more than likely the device wasn't in its boot mode so if
you just disconnect the wires and plug it back in you'll hopefully get it into boot mode again and
it will go through once that's installed you'll hopefully see this configuration installed message
and that'll let you know that it's done and you can safely unplug the device so go ahead and click
close and unhook everything from your ns panel you might remember at the beginning of the video i
said i wasn't using the vcc pin and that's because on this adapter i've got it connected to 5 volts
and the reason i have it connected to 5 volts is because by making use of this adapter i can
quickly flash the device and also test it and again if you remember i showed you black adders
diagram it showed us that some of the headers that are exposed have access to ground and five volts
so by making use of those five volts and ground pins we can actually power up the display
so on my adapter here i'm going to add some jumper wires to the vcc pin and i'm going to unplug what
i've currently got plugged into ground and add a new jumper wire to that we can then
attach those wires to rns panel and plug it back into our usb extension and it will power up the
screen so we can test it out again you may have a better way or a preferred method that you have
but for me this has worked really well and it's been really fast for flashing the device
and testing it out especially if the device fails or there's something wrong with the config and i
can't use the over-the-air flash once you power the device on you'll hopefully see the device
comes online in esp home that device should also automatically be discovered and add as a device in
your integrations if it doesn't you can go ahead and press the add integrations button and manually
add the device using the ip address but if it does appear here you should be able to select it and at
this point you can hopefully see the device online in esp home as well as see all of the different
controls and sensors in the device integration and if you can you're probably thinking why does
my ns panel still look the exact same as it did before so the reason the panel looks the same
is because we've updated the config and we've told the panel it now has these different sensors and
different actions and controls available to it but we haven't told the screen that it needs to update
so let's go ahead and do that now back in home assistant then we're going to need to open up the
developer tools so in the left hand menu you're going to choose developer tools we then need to
run a service call in order to get the screen to update so up at the top we're going to press
services and in here we're going to need to enter the name of the service that we're going to call
so if you start typing esp home you should start to see a bunch of different options appearing
and the one that we're interested in is this ns panel underscore upload underscore tft so go ahead
and select that before you select the cool service option you do need to ensure that the device is
connected to your wifi and also powered on and if it is go ahead and just press cool service
on the ns panel screen you should see that it changes to a loading bar and it will start loading
once that's finished you'll hopefully see the brand new ui providing everything worked you
should now be able to see the new ui and you should be able to control the devices that you
set following those change me options on the front screen you'll be able to see the temperature which
is inside and also out and you'll also see a little icon of the current weather state in
the top right corner you'll see the time and date and in the bottom right if you chose to set them
you'll see a couple of bits of information that you chose to set swiping left on the screen will
take you to the button screen and this will present you with eight different buttons in
the demo i only set two of them and if you updated the config for them you should be able to see two
different options here and selecting those options should toggle on and off lights that you set
if you wanted to add the other six you could just go into the config and easily modify and update
those yourself one nice feature about mark's config is whenever you change screen if it's not
used for a while it will just automatically return to the home screen and if the home screen is not
interacted with for a little while the screen will just slowly dim and then turn off tapping on the
screen will wake the screen back up and again this is all configurable so if you don't want
these actions or the screen to dim and turn off you can also disable this or configure it yourself
swiping right on the screen is going to take you to what i'm calling the media page and
on this page if you configured the entities you should be able to play and pause a media device
as well as see the information about a current playing track on a set media device in this demo
i haven't added any of the other controls to the other media buttons but again if you wanted to
play around with this it wouldn't be too hard for you to do yourself and there we go guys that's the
ns panel flashed with esp home and if you did manage to get this far and got it all working
then it isn't too tricky to actually add the other bits that are missing or to add functionality to
the missing buttons it's also a great template to start with so if you are looking into getting into
this or just having to play around designing your own screens then this is a great place to start
in a future video i will be going through this config in a bit more detail to tell you what some
of the actual bits of config actually mean and what they do as well as showing you how to create
your own screens and setting things up using the nextion editor if that sounds like something you'd
be interested in seeing in a follow-up video then do let me know in the comments below before we
wrap this up then i want to just quickly show you a couple of extra things you can do with
some service calls using the ns panel first one that i want to show you is the ability to display
a notification on the ns panel so back in the developer tool under services if you start typing
esp home again you'll see this option for ns panel notification and if you select that you'll then
be asked for two different parameters a header and a message the header is going to be kind of
the top title of the message and then the message will just be the body of the message so go ahead
and type something in there and once you've typed your message if you press that call service button
you'll hear a little notification sound and then you'll see the message appear on your ns panel
this one might be really handy for small alerts or things like letting you know that somebody's home
as you get that little tone and also the display and the final service i want to show you is the
ns panel underscore play underscore rttl and what this one's going to do is it will play
an rttl song so if you just do a google search for them you should find a list of all the different
ones that you can use so just choose one that you like the sound of and then if you just copy that
and then just paste that in as your parameter then when you hit
call service you'll hopefully hear that tone play
if you have enjoyed this video and found it useful then don't forget to drop me a like and
if you're not already hit that subscribe button and ding dong the notification bell you'll then
be alerted to any future video that i do and as always a massive thank you to these awesome
dudes these awesome dudes my patreons if you're interested in helping support my channel which
in turn allows me to create content like this then you'll find a link to my patreon in the
description below thank you for watching and i'll catch you in the next one cheers