{"id":2141,"date":"2022-08-07T14:50:51","date_gmt":"2022-08-07T12:50:51","guid":{"rendered":"https:\/\/www.espthings.io\/?p=2141"},"modified":"2023-12-31T12:47:38","modified_gmt":"2023-12-31T11:47:38","slug":"nspanel-lovelace-ui-a-great-add-on-for-home-assistant","status":"publish","type":"post","link":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/","title":{"rendered":"NSpanel Lovelace UI for Home Assistant"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f2f8411bd8f\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f2f8411bd8f\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#Preface\" >Preface<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#Installation\" >Installation<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#Installing_ESPHome\" >Installing ESPHome<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#Install_NSpanel_Lovelace_UI\" >Install NSpanel Lovelace UI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#Configure_MQTT\" >Configure MQTT<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#Configure_the_app\" >Configure the app<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#Configuration_examples\" >Configuration examples<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 id=\"tw-target-text\" class=\"tw-data-text tw-text-large tw-ta\" data-placeholder=\"Vertaling\"><span class=\"ez-toc-section\" id=\"Preface\"><\/span><span class=\"Y2IQFc\" lang=\"en\">Preface<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>About 10 months ago Sonoff send us the <a class=\"thirstylink\" target=\"_blank\" title=\"ITEAD - Sonoff NSpanel\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/recommends\/sonoff-nspanel\/\" data-shortcode=\"true\">NSpanel<\/a> and thereafter we published our <a href=\"https:\/\/www.espthings.io\/index.php\/2021\/10\/10\/sonoff-nspanel-first-impressions\/\" target=\"_blank\" rel=\"noopener\">first impressions<\/a>. The product was not entirely new and innovative, as there where Nextion Touch displays and 2-gang wall switches readily available, but the NSpanel combines both in a nice package thus creating a new and promising product.<\/p>\n<p>As with all more complex display solutions, the succes of the product mostly depends on the available software or (open-source) community adoption. A Nextion display is not the most user-friendly display for use in a Home Automation environment. We have been closely watching the evolution of the original software and the emerging open-source community software.<\/p>\n<p>We have been trying tasmota and esphome implementations, we did try the original software as well, but none of those solutions where particularly user-friendly or versatile. But then about 4 months ago, we stumbled upon the &#8220;<a href=\"https:\/\/github.com\/jobr99\/nspanel-lovelace-ui\" target=\"_blank\" rel=\"noopener\">NsPanel Lovelace UI<\/a>&#8221; project by joBr99 (Johannes) which combines Tasmota or ESPHome with a Home Assistant appdeamon add-on. It allows for easy configuration in yaml, from within Home Assistant.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-2146\" src=\"https:\/\/www.espthings.io\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-1024x742.png\" alt=\"NSPanel Lovelace UI\" width=\"1024\" height=\"742\" srcset=\"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-1024x742.png?v=1659873328 1024w, https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-300x217.png?v=1659873328 300w, https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-768x556.png?v=1659873328 768w, https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-1536x1113.png?v=1659873328 1536w, https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-2048x1484.png?v=1659873328 2048w, https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-720x522.png?v=1659873328 720w, https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-520x377.png?v=1659873328 520w, https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-320x232.png?v=1659873328 320w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/>We haven been experimenting with this add-on for a while now and we love it! It works quit fast, reliable and it&#8217;s easy to maintain. Below you&#8217;ll find some instructions to get you going with this addon.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Installation\"><\/span>Installation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span>Prerequisites<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In order to install the NSpanel Lovelace UI &#8220;app&#8221;, you need the following installed and ready:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.home-assistant.io\/installation\/\" target=\"_blank\" rel=\"noopener\">Home Assistant<\/a><\/li>\n<li><a href=\"https:\/\/hacs.xyz\/docs\/setup\/download\" target=\"_blank\" rel=\"noopener\">HACS<\/a> (Home Assistant Community Store)<\/li>\n<li><a href=\"https:\/\/community.home-assistant.io\/t\/home-assistant-community-add-on-appdaemon-4\/163259\" target=\"_blank\" rel=\"noopener\">appdeamon (available in the add-on store)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/hassio-addons\/addon-vscode\" target=\"_blank\" rel=\"noopener\">Studio Code Server (available in the add-on store)<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/home-assistant\/addons\/tree\/master\/mosquitto\" target=\"_blank\" rel=\"noopener\">MQTT addon (available in the add-on store)<\/a><\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Installing_ESPHome\"><\/span>Installing ESPHome<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>After you have installed all of the above, it&#8217;s time to install ESPHome on the NSpanel. If you prefer Tasmota, instructions can be found <a href=\"https:\/\/docs.nspanel.pky.eu\/prepare_nspanel\/\">here<\/a>.<br \/>\nTo install any kind of third party firmware on the NSpanel, you may follow instructions from our <a href=\"https:\/\/www.espthings.io\/index.php\/2021\/10\/10\/sonoff-nspanel-first-impressions\/\" target=\"_blank\" rel=\"noopener\">NSpanel First Impressions<\/a> article.<br \/>\nInstructions for esphome:\u00a0<a href=\"https:\/\/github.com\/sairon\/esphome-nspanel-lovelace-ui\">sairon\/esphome-nspanel-lovelace-ui: ESPHome component for NSPanel Lovelace UI (github.com)<\/a><br \/>\nUse the <a href=\"https:\/\/github.com\/sairon\/esphome-nspanel-lovelace-ui\/blob\/dev\/example-nspanel-config.yml\" target=\"_blank\" rel=\"noopener\">example .yaml config<\/a> to get you going.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Install_NSpanel_Lovelace_UI\"><\/span>Install NSpanel Lovelace UI<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Installing the NSpanel Lovelace UI\u00a0AppDaemon Backend Application\u00a0is reasonably straight forward.\u00a0 The instructions can be found <a href=\"https:\/\/docs.nspanel.pky.eu\/prepare_ha\/#installing-lovelace-appdaemon-backend-application\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Configure_MQTT\"><\/span>Configure MQTT<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Follow <a href=\"https:\/\/github.com\/sairon\/esphome-nspanel-lovelace-ui\/blob\/dev\/example-nspanel-config.yml\" target=\"_blank\" rel=\"noopener\">these<\/a> instructions to configure MQTT. Please mind that if you are using ESPHome, you need to configure the MQTT settings in your <a href=\"https:\/\/github.com\/sairon\/esphome-nspanel-lovelace-ui\/blob\/dev\/example-nspanel-config.yml\" target=\"_blank\" rel=\"noopener\">yaml<\/a> as well!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Configure_the_app\"><\/span>Configure the app<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Configuration for the app is done via 2 files. Use Studio Code Server to edit these files.<\/p>\n<p>config\/appdaemon\/appdeamon.yaml<br \/>\nHere is my config to get you going:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">---\r\nsecrets: \/config\/secrets.yaml\r\nappdaemon:\r\n  latitude: 51.2\r\n  longitude: 5.5\r\n  elevation: 2\r\n  time_zone: Europe\/Amsterdam\r\n  plugins:\r\n    HASS:\r\n      type: hass\r\n    MQTT:\r\n      type: mqtt\r\n      namespace: mqtt\r\n      client_id: \"appdaemon\"\r\n      client_host: 192.168.100.101\r\n      client_port: 1883\r\n      client_user: \"appdaemon\"\r\n      client_password: \"password\"\r\n      client_topics: NONE\r\nhttp:\r\n  url: http:\/\/127.0.0.1:5050\r\nadmin:\r\napi:\r\nhadashboard:<\/pre>\n<p>and<\/p>\n<p>config\/appdaemon\/apps\/apps.yaml<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\">nspanel_1:\r\n  module: nspanel-lovelace-ui\r\n  class: NsPanelLovelaceUIManager\r\n  config:\r\n    panelRecvTopic: \"tele\/nspanel_1\/RESULT\"\r\n    panelSendTopic: \"cmnd\/nspanel_1\/CustomSend\"\r\n    locale: \"en_EN\"\r\n    model: \"eu\"\r\n    sleepTimeout: 40\r\n    sleepBrightness:\r\n      - time: \"6:00:00\"\r\n        value: 8\r\n      - time: \"23:00:00\"\r\n        value: 2\r\n    screensaver:\r\n      entity: weather.dark_sky\r\n    cards:\r\n      - type: cardGrid\r\n        title: Bathroom\r\n        key: cardgrid1\r\n        entities:\r\n          - entity: light.shower_led\r\n            name: Shower light\r\n          - entity: light.bath_led\r\n            name: Bath light\r\n          - entity: light.vanity_led\r\n            name: Vanity light\r\n          - entity: switch.floor_heating\r\n            name: Floor heating\r\n          - entity: sensor.temperature_sensor_bathroom\r\n            name: Temperature\r\n          - entity: sensor.humidity_sensor_bathroom\r\n            name: Humidity\r\n      - type: cardMedia\r\n        title: Bathroom\r\n        entity: media_player.bathroom\r\n      - type: cardThermo\r\n        title: Bathroom\r\n        entity: climate.bathroom\r\n      - type: cardEntities\r\n        title: Test Entities Card\r\n        entities:\r\n          - entity: light.bath_test<\/pre>\n<p>As soon as you have configured both, restart the NSpanel and your display should show:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"\" src=\"https:\/\/docs.nspanel.pky.eu\/img\/mqtt-config-sucess.png\" alt=\"hacs-main\" width=\"608\" height=\"212\" \/><\/p>\n<p>Any changes you make to the apps.yaml, will now be instant.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Configuration_examples\"><\/span>Configuration examples<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/docs.nspanel.pky.eu\/img\/screens.png\" alt=\"screens\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <a class=\"thirstylink\" target=\"_blank\" title=\"ITEAD - Sonoff NSpanel\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/recommends\/sonoff-nspanel\/\" data-shortcode=\"true\">NSpanel<\/a> is and remains a niche product. Using the factory firmware it&#8217;s not a very potent device, but using the NSpanel Lovelace UI app, makes it a very useful gadget for specific applications. Installing it all can be a bit challenging, but once installed it&#8217;s a breeze to configure, straight from the yaml in Home Assistant.<\/p>\n<p>Have fun!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Preface About 10 months ago Sonoff send us the and thereafter we published our first impressions. The product was not entirely new and innovative, as there where Nextion Touch displays and 2-gang wall switches readily available, but the NSpanel combines both in a nice package&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":2146,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[38],"tags":[42,49,56,94],"class_list":["post-2141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","tag-esphome","tag-home-assistant","tag-nspanel","tag-tasmota"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>NSpanel Lovelace UI for Home Assistant - ingeniousmakers.com<\/title>\n<meta name=\"description\" content=\"NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of HomeAssistant&#039;s Lovelace UI.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"NSpanel Lovelace UI for Home Assistant\" \/>\n<meta property=\"og:description\" content=\"NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of HomeAssistant&#039;s Lovelace UI.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/\" \/>\n<meta property=\"og:site_name\" content=\"ingeniousmakers.com\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-07T12:50:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-31T11:47:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-1024x742.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"742\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"michel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"NSpanel Lovelace UI for Home Assistant\" \/>\n<meta name=\"twitter:description\" content=\"NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of HomeAssistant&#039;s Lovelace UI.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo.png?v=1659873328\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"michel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/\"},\"author\":{\"name\":\"michel\",\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/#\\\/schema\\\/person\\\/f1d70771f1c76600487075757975bf43\"},\"headline\":\"NSpanel Lovelace UI for Home Assistant\",\"datePublished\":\"2022-08-07T12:50:51+00:00\",\"dateModified\":\"2023-12-31T11:47:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/\"},\"wordCount\":517,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/nspanel_lovelocae_demo.png?v=1659873328\",\"keywords\":[\"esphome\",\"home assistant\",\"Nspanel\",\"tasmota\"],\"articleSection\":[\"News\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/\",\"url\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/\",\"name\":\"NSpanel Lovelace UI for Home Assistant - ingeniousmakers.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/nspanel_lovelocae_demo.png?v=1659873328\",\"datePublished\":\"2022-08-07T12:50:51+00:00\",\"dateModified\":\"2023-12-31T11:47:38+00:00\",\"description\":\"NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of HomeAssistant's Lovelace UI.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/nspanel_lovelocae_demo.png?v=1659873328\",\"contentUrl\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/nspanel_lovelocae_demo.png?v=1659873328\",\"width\":2888,\"height\":2092,\"caption\":\"NSPanel Lovelace UI\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/2022\\\/08\\\/07\\\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"NSpanel Lovelace UI for Home Assistant\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/#website\",\"url\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/\",\"name\":\"Ingeniousmakers.com\",\"description\":\"Make it or break it!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/#organization\",\"name\":\"Ingeniousmakers.con\",\"url\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cropped-cropped-logo_landscape_no_payoff_transparent.png\",\"contentUrl\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/cropped-cropped-logo_landscape_no_payoff_transparent.png\",\"width\":1905,\"height\":671,\"caption\":\"Ingeniousmakers.con\"},\"image\":{\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCeMzk2C5tbMkpsByg7Nbgyw\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/#\\\/schema\\\/person\\\/f1d70771f1c76600487075757975bf43\",\"name\":\"michel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b08aad91cb210b8eeb8cccdd43555d1fa747a0c865eaab78016c4305357e29cc?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b08aad91cb210b8eeb8cccdd43555d1fa747a0c865eaab78016c4305357e29cc?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b08aad91cb210b8eeb8cccdd43555d1fa747a0c865eaab78016c4305357e29cc?s=96&r=g\",\"caption\":\"michel\"},\"sameAs\":[\"https:\\\/\\\/www.ingeniousmakers.com\"],\"url\":\"https:\\\/\\\/www.ingeniousmakers.com\\\/index.php\\\/author\\\/michel\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"NSpanel Lovelace UI for Home Assistant - ingeniousmakers.com","description":"NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of HomeAssistant's Lovelace UI.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/","og_locale":"en_US","og_type":"article","og_title":"NSpanel Lovelace UI for Home Assistant","og_description":"NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of HomeAssistant's Lovelace UI.","og_url":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/","og_site_name":"ingeniousmakers.com","article_published_time":"2022-08-07T12:50:51+00:00","article_modified_time":"2023-12-31T11:47:38+00:00","og_image":[{"width":1024,"height":742,"url":"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo-1024x742.png","type":"image\/png"}],"author":"michel","twitter_card":"summary_large_image","twitter_title":"NSpanel Lovelace UI for Home Assistant","twitter_description":"NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of HomeAssistant's Lovelace UI.","twitter_image":"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo.png?v=1659873328","twitter_misc":{"Written by":"michel","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#article","isPartOf":{"@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/"},"author":{"name":"michel","@id":"https:\/\/www.ingeniousmakers.com\/#\/schema\/person\/f1d70771f1c76600487075757975bf43"},"headline":"NSpanel Lovelace UI for Home Assistant","datePublished":"2022-08-07T12:50:51+00:00","dateModified":"2023-12-31T11:47:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/"},"wordCount":517,"commentCount":14,"publisher":{"@id":"https:\/\/www.ingeniousmakers.com\/#organization"},"image":{"@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo.png?v=1659873328","keywords":["esphome","home assistant","Nspanel","tasmota"],"articleSection":["News"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/","url":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/","name":"NSpanel Lovelace UI for Home Assistant - ingeniousmakers.com","isPartOf":{"@id":"https:\/\/www.ingeniousmakers.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#primaryimage"},"image":{"@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo.png?v=1659873328","datePublished":"2022-08-07T12:50:51+00:00","dateModified":"2023-12-31T11:47:38+00:00","description":"NsPanel Lovelace UI is a Firmware for the nextion screen inside of NSPanel in the Design of HomeAssistant's Lovelace UI.","breadcrumb":{"@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#primaryimage","url":"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo.png?v=1659873328","contentUrl":"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2022\/08\/nspanel_lovelocae_demo.png?v=1659873328","width":2888,"height":2092,"caption":"NSPanel Lovelace UI"},{"@type":"BreadcrumbList","@id":"https:\/\/www.ingeniousmakers.com\/index.php\/2022\/08\/07\/nspanel-lovelace-ui-a-great-add-on-for-home-assistant\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.ingeniousmakers.com\/"},{"@type":"ListItem","position":2,"name":"NSpanel Lovelace UI for Home Assistant"}]},{"@type":"WebSite","@id":"https:\/\/www.ingeniousmakers.com\/#website","url":"https:\/\/www.ingeniousmakers.com\/","name":"Ingeniousmakers.com","description":"Make it or break it!","publisher":{"@id":"https:\/\/www.ingeniousmakers.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ingeniousmakers.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.ingeniousmakers.com\/#organization","name":"Ingeniousmakers.con","url":"https:\/\/www.ingeniousmakers.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ingeniousmakers.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2025\/03\/cropped-cropped-logo_landscape_no_payoff_transparent.png","contentUrl":"https:\/\/www.ingeniousmakers.com\/wp-content\/uploads\/2025\/03\/cropped-cropped-logo_landscape_no_payoff_transparent.png","width":1905,"height":671,"caption":"Ingeniousmakers.con"},"image":{"@id":"https:\/\/www.ingeniousmakers.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.youtube.com\/channel\/UCeMzk2C5tbMkpsByg7Nbgyw"]},{"@type":"Person","@id":"https:\/\/www.ingeniousmakers.com\/#\/schema\/person\/f1d70771f1c76600487075757975bf43","name":"michel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b08aad91cb210b8eeb8cccdd43555d1fa747a0c865eaab78016c4305357e29cc?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b08aad91cb210b8eeb8cccdd43555d1fa747a0c865eaab78016c4305357e29cc?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b08aad91cb210b8eeb8cccdd43555d1fa747a0c865eaab78016c4305357e29cc?s=96&r=g","caption":"michel"},"sameAs":["https:\/\/www.ingeniousmakers.com"],"url":"https:\/\/www.ingeniousmakers.com\/index.php\/author\/michel\/"}]}},"_links":{"self":[{"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/posts\/2141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/comments?post=2141"}],"version-history":[{"count":22,"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/posts\/2141\/revisions"}],"predecessor-version":[{"id":2167,"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/posts\/2141\/revisions\/2167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/media\/2146"}],"wp:attachment":[{"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/media?parent=2141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/categories?post=2141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ingeniousmakers.com\/index.php\/wp-json\/wp\/v2\/tags?post=2141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}