(EN) First Steps Installation and Setup
This section covers the initial configuration. All important steps for installation and setup of ESPHome and the Blueprint are described here.
⭐ Step by Step Setup Video
NOTE! All documentation are written in DE and then translated into EN. Since we are not EN native speakers, there may well be errors in translation or sentence structure. If something is wrong or unclear an "Issues" can be opened. If you want to help us, we are also looking for someone who would like to do the translation from DE to EN.
- Short version of the setup of Esphome and Blueprint
- Version "nspanel-lovelace-ui" by joBr99 was previously installed
- Advanced configuration for all ESPHome and Home Assistant professionals
- Step by Step Configuration and setup of ESPHome and Blueprint
(for those who already have experience with ESPhome and Home Assistant)
It is also possible to copy the code from the file "nspnael_blueprint.yaml " and paste it into HA. You can find instructions for this under Using Automation Blueprints und Automation blueprint tutorial
3. Upload the nspnael.tft file to your Home Assistant Server in the www folder, see Home Assistant HTTP 'Hosting Files section for details.
5. When the new ESP32 device has been created, next click "Edit " on the device you have just created to open the web editor. Now the following code must be copied and pasted.
IMPORTANT! The already existing code in the ESPHome file must be "COMPLETELY " deleted and "REPLACED " by the code below.
IMPORTANT! in the block "CHANGE ME " all values (device_name, wifi_ssid, wifi_password, nextion_update_url ) in the " " must be replaced by your own values. It is also possible to work here with "!secret ".
ATTENTION! for "device_name" max. 15 characters [a-z], [0-9] and [_] may be used and all must be "lowercase". Furthermore, characters like [-], [SPECIAL CHARACTARS] and [SPACES] are forbidden and will cause problems with the blueprint.
Example: nspanel_kitchen
substitutions:
###### CHANGE ME START ######
device_name: "nspanel_buero" # ändere Name zum Beispiel in den Raum wo das NSPanel verbaut wird. Wird im Blueprint benötigt
wifi_ssid: !secret wifi_ssid # Gib dein WLAN Name ein
wifi_password: !secret wifi_password # Gib dein Passwort fürs WLAN ein
nextion_update_url: "http://HOME-ASSISTANT-IP:8123/local/nspanel.tft" # URL to local tft File
# nextion_update_url: "https://raw.githubusercontent.com/Blackymas/NSPanel_HA_Blueprint/main/nspanel.tft"
##### CHANGE ME END #####
##### DO NOT CHANGE ANYTHING! #####
packages:
##### download esphome code from Github
remote_package:
url: https://github.com/Blackymas/NSPanel_HA_Blueprint
ref: main
files: [nspanel_esphome.yaml]
refresh: 300s
##### DO NOT CHANGE ANYTHING! #####
At http://HOME-ASSISTANT-IP:8123/local/nspanel.tft you have to enter your IP from Home Assistant.
This could look like this http://192.168.1.1:8123/local/nspanel.tft
ATTENTION! You can also comment out the path nextion_update_url: "https://raw.githubusercontent.com/Blackymas/NSPanel_HA_Blueprint/main/nspanel.tft" and load the TFT directly from Github. But it can happen that there are problems with the upload to the NSPanel. It should then look like this
# nextion_update_url: "http://HOME-ASSISTANT-IP:8123/local/nspanel.tft" # URL to local tft File
nextion_update_url: "https://raw.githubusercontent.com/Blackymas/NSPanel_HA_Blueprint/main/nspanel.tft"
how to flash the NSPanel you can see here HOW TO - Flash Sonoff NSPanel with ESPHome
7. After the NSPanel is flashed, you can go to "Settings --> Devices & Services --> Add Integration" to add your new device and finish setting it up.
8. In the last step, only the TFT must be uploaded. To do this, open your new device in the ESPHome integration and activate the item "Update TFT display " under "Configuration". Now the current TFT file is loaded from local Home Assistant Server or Github and uploaded to your NSPanel. ATTENTION! this process may take a moment.
10. Now you can configure your NSPanel via the Blueprint. To do this, go to "Settings --> Automations & Scenes --> Templates --> NSPanel Configuration --> CREATE AUTOMATION" and start with the setup of the NSPanel.
NOTE! In the blueprint, in the "ESPHOME Node Name" field, enter exactly the same name that you assigned in the "ESPHome File".
Beispiel: nspanel_kitchen
in the version "nspanel-lovelace-ui" from joBr99 are a few special features built in, which make it not so easy to flash a new version and TFT on the NSPanel. But since we already had this problem, we have of course already a solution for you ;)
IMPORTANT! If you have already installed the NSPanel with my version, you must first fully install "Lovelace ui" again.
- download the file "nspanel_blank.tft" from the folder custom_configuration.
- now upload the TFT file "nspanel_blank.tft" to the folder "www" in Home Assistant
- now go to the item "Developer tools --> Services" and search there for the services
"ESPHome: DEVICE_NAME_upload_tft" --> (esphome.device_name_upload_tft) - under URL you have to enter the path to your file nspanel_blank.tft. This could look like this "http://IP_HOME_ASSISTANT:8123/local/nspanel_blank.tft"
- now the TFT file should be played on the NSPanel. It may take a moment until it is ready
- If everything worked, you should see only a white page on the NSPanel.
- now you can continue with the setup and configuration of my version. For this see Short version of the setup of Esphome and Blueprint
- Blueprint file "nspnael_blueprint.yaml " can also be installed manually.
- ESPHome file_"nspanel_esphome.yaml "_ can also be installed manually. This allows to activate or add more "Advanced " configurations.
- There is also the possibility to upload the TFT file "nspanel.tft " manually. The whole thing can also be combined with a "Folder Watcher ".
- additionally we provide the HMI file "nspanel.HMI " for the Nextion Editor to customize graphics and programming if needed
ATTENTION! If you use this mode, you should know what you are doing. We do not give support here!
(for all those who are new to ESPhome or have no experience yet)