HOW TO - Flash Sonoff NSPanel with ESPHome

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

Channel: Mark Watt Tech

Views: 79,570

Keywords: MarkWattTech, HomeAssistant, Hassio, Home Assistant, Smart Tech, Smart Home, Mark Watt, Automations, Home Asistant

Id: p-AK4o5jOSI

Length: 18min 56sec (1136 seconds)

Published: Sat Mar 26 2022

Reddit Comments

[u/xX500_IQXx]

Very nice job with all your videos Mark. I do have a recommendation. I was hoping someday you could do a video on the HASwitch plate from here. I made one (but you can buy them) and they are amazing

https://github.com/HASwitchPlate/HASPone

[u/agulesin]

Bookmarked, will watch later. Also subscribed as I suspect there may be very useful videos on your channel!

[u/biglib]

Nice! Thanks for sharing.

[u/mxxlxg]

Side question: does it have temperature sensors?

[u/clin248]

Thanks Mark. The video was very helpful. I am trying to modify off your Nextion design. I notice there are pages lights2 and 3 but what do I need to do to get to those pages? Thank you.

[u/umad_cause_ibad]

I just got my new NSPanel today and while I'm not in a hurry to set it up I can't help but play with it.

I have lots of tasmota devices but I haven't been using ESPhome. I have nothing against ESP but I'm having trouble being a first time user. Using the new HA integration for ESP home and not the Deprecated add-on I get a prompt asking for a host and not accepting the HA ip.

I've googled but I'm not sure can anyone help with this?

https://i.imgur.com/XoMVmvs.jpg

and no my yaml file does not contain my api. Would that be my configuration.yaml? Do I need to setup a separate ESPhome server outside of home assistant and get an API for that?

EDIT: so I added esphome docker to my unraid server and now I’m able to continue following the video. I haven’t flashed it yet but I just wanted to post quickly to keep anyone from wasting time posting / helping.

[u/Merlins_Hat]

Can anyone help me out with this process if running Home Assistant in docker?
I have managed to flash, but I can't get the screen to change to the new tft file. I suspect my upload URL is incorrect but no idea how to tie this all together.

Why oh why is docker based HA so tricky!?

I have a home server that runs multiple process (HA, CCTV, bluestacks, plex etc) so running HA as the operating system isn't an option

[u/_ben_reilly]

Anyone got a sample of their nspanel.yaml file please?