(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 and 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: "YOUR NSPANEL_NAME"
wifi_ssid: "YOUR WIFI SSID"
wifi_password: "YOUR WIFI PASSWORD"
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" # URL to Github
##### 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. This depends on your internet and wifi. For more information on this issue, see the issue page on Github. 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 HowTo - Flash 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".
Example: nspanel_kitchen
See (EN) Common Issues | TFT Upload When nspanel lovelace ui has been installed
- 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)