{"id":1530,"date":"2024-08-25T18:14:23","date_gmt":"2024-08-25T16:14:23","guid":{"rendered":"https:\/\/cln.io\/blog\/?p=1530"},"modified":"2024-09-21T17:47:56","modified_gmt":"2024-09-21T15:47:56","slug":"making-an-inkplate-dashboard-with-home-assistant","status":"publish","type":"post","link":"https:\/\/cln.io\/blog\/making-an-inkplate-dashboard-with-home-assistant\/","title":{"rendered":"Making an inkplate dashboard with home assistant"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Compiling the software for the inkplate<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Clone \/ Download <a href=\"https:\/\/github.com\/lanrat\/homeplate\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/lanrat\/homeplate<\/a><\/li>\n\n\n\n<li>Open it with Visual Studio<\/li>\n\n\n\n<li>Install PlatformIO IDE<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"794\" height=\"580\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-10.png\" alt=\"\" class=\"wp-image-1532\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-10.png 794w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-10-300x219.png 300w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-10-768x561.png 768w\" sizes=\"auto, (max-width: 794px) 100vw, 794px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open the cloned\/downloaded project and click the PlatFormIO button<br>it will download and set up<\/li>\n\n\n\n<li>Go over to inkplate10v2 and hit upload after adapting the config.h<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">My config.h (as a quick test)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#pragma once\n\n\/\/ WiFi SSID\n#define WIFI_SSID \"IOT\" \n\/\/ WiFi password\n#define WIFI_PASSWORD \"\"\n\n\/\/ hostname\n\/\/ NOTE: if using multiple homeplate devices, you MUST make the hostname unique\n#define HOSTNAME \"homeplate\"\n\n\/\/ How long to sleep between image refreshes\n#define TIME_TO_SLEEP_MIN 20\n\n\/\/ How long to sleep for quick activities like e.g. showing info and qr code (default 300 \/ 5 min)\n\/\/#define TIME_TO_QUICK_SLEEP_SEC 30\n\n\/\/ Static IP information\n\/\/ If unset uses DHCP, but updates may be slower, set to use a Static IP\n\/\/ #define STATIC_IP \"192.168.1.10\"\n\/\/ #define STATIC_SUBNET \"255.255.255.0\"\n\/\/ #define STATIC_GATEWAY \"192.168.1.1\"\n\/\/ #define STATIC_DNS \"192.168.1.1\"\n\n\/\/ NTP Time server to set RTC\n#define NTP_SERVER \"pool.ntp.org\"\n\n\/\/ How often to re-sync the clock to NTP\n#define NTP_SYNC_INTERVAL (24*60)\/TIME_TO_SLEEP_MIN \/\/ ~ once a day when updating every TIME_TO_SLEEP_MIN minutes\n\n\/\/ URL of PNG image to display\n#define IMAGE_URL \"https:\/\/placehold.co\/600x400\/EEE\/31343C.png\"\n\n\/\/ WiFi QR Code\n\/\/#define QR_WIFI_NAME \"Guest WiFi Network Name\"\n\/\/#define QR_WIFI_PASSWORD \"Guest WiFi Password\"\n\n\/\/ MQTT Broker\n\/\/#define MQTT_HOST \"MQTT Broker IP\"\n\/\/#define MQTT_PORT 1883\n\/\/ Set MQTT_USER &amp; MQTT_PASSWORD if needed\n\/\/#define MQTT_USER \"mqtt username\"\n\/\/#define MQTT_PASSWORD \"mqtt password\"\n\/\/ Customize node id and device name if needed\n\/\/#define MQTT_NODE_ID \"homeplate\"\t\/\/ defaults to HOSTNAME\n\/\/#define MQTT_DEVICE_NAME \"HomePlate\"\t\/\/ defaults to \"HomePlate\"\n\n\/\/ Disables touchpads if they are overly sensitive and result in phantom touch events\n\/\/ Touchpads are not supported on the Inkplate10v2. This must be false if ARDUINO_INKPLATE10V2 is set\n#define TOUCHPAD_ENABLE false\n\n\/\/ Timezone\n\/\/ see timezone_config.h for options\n#define TIMEZONE_CE\n\n\/\/ If your Inkplate doesn't have external (or second) MCP I\/O expander, you should uncomment next line,\n\/\/ otherwise your code could hang out when you send code to your Inkplate.\n\/\/ You can easily check if your Inkplate has second MCP by turning it over and \n\/\/ if there is missing chip near place where \"MCP23017-2\" is written, but if there is\n\/\/ chip soldered, you don't have to uncomment line and use external MCP I\/O expander\n\/\/#define ONE_MCP_MODE\n\n\/\/ Displays the time from the RTC whenever a new image is loaded\n#define DISPLAY_LAST_UPDATE_TIME true\n\n\/\/ keep this to signal the program has a valid config file\n#define CONFIG_H\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"746\" height=\"1024\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-9-746x1024.png\" alt=\"\" class=\"wp-image-1531\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-9-746x1024.png 746w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-9-219x300.png 219w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-9-768x1054.png 768w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-9.png 982w\" sizes=\"auto, (max-width: 746px) 100vw, 746px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"663\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/55062-1024x663.png\" alt=\"\" class=\"wp-image-1536\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/55062-1024x663.png 1024w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/55062-300x194.png 300w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/55062-768x497.png 768w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/55062-1536x995.png 1536w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/55062-2048x1326.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"645\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/80870-1024x645.png\" alt=\"\" class=\"wp-image-1537\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/80870-1024x645.png 1024w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/80870-300x189.png 300w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/80870-768x484.png 768w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/80870-1536x967.png 1536w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/80870.png 1588w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">the result (as a quick test)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/65467-1024x768.png\" alt=\"\" class=\"wp-image-1538\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/65467-1024x768.png 1024w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/65467-300x225.png 300w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/65467-768x576.png 768w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/65467-1536x1152.png 1536w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/65467.png 1784w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Setting up home assistant<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add <a href=\"https:\/\/github.com\/sibbl\/hass-lovelace-kindle-screensaver\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/sibbl\/hass-lovelace-kindle-screensaver<\/a> to your home assistant addons, I have no interest in running this on a dedicated docker, I want to run this as a home assistant addon directly<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"206\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/76210.png\" alt=\"\" class=\"wp-image-1540\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/76210.png 768w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/76210-300x80.png 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">My addon config<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">HA_BASE_URL: http:\/\/192.168.1.2:8123\nHA_SCREENSHOT_URL: \/lovelace\/0\nHA_ACCESS_TOKEN: >-\n  xxx\nLANGUAGE: en\nCRON_JOB: \"* * * * *\"\nRENDERING_TIMEOUT: 59999\nRENDERING_DELAY: \"0\"\nRENDERING_SCREEN_HEIGHT: \"825\"\nRENDERING_SCREEN_WIDTH: \"1200\"\nBROWSER_LAUNCH_TIMEOUT: \"30000\"\nROTATION: \"0\"\nSCALING: \"1\"\nGRAYSCALE_DEPTH: \"8\"\nIMAGE_FORMAT: png\nCOLOR_MODE: GrayScale\nREMOVE_GAMMA: true\nPREFERS_COLOR_SCHEME: light\nHA_BATTERY_WEBHOOK: \"\"\nADDITIONAL_ENV_VARS: []\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I wanted to get the http:\/\/supervisor url going, but failed after some quick tries, so sticking to a hardcoded IP &#8230; sigh <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start the addon, check if its working<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"407\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/2955-1024x407.png\" alt=\"\" class=\"wp-image-1541\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/2955-1024x407.png 1024w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/2955-300x119.png 300w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/2955-768x305.png 768w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/2955.png 1504w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">check if the screenshot works<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"945\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/24486-1024x945.png\" alt=\"\" class=\"wp-image-1542\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/24486-1024x945.png 1024w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/24486-300x277.png 300w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/24486-768x708.png 768w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/24486-1536x1417.png 1536w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/24486.png 1780w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">so you can put the URL into the inkplates config<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HACS &#8211; Kiosk mode<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We will need this addon via HACS <a href=\"https:\/\/github.com\/NemesisRE\/kiosk-mode\">https:\/\/github.com\/NemesisRE\/kiosk-mode<\/a><br>so we can run the dashboard without menu<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Card mod<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;ve added card mod with HACS too so I can get rid of the boxes on the dashboard, so it looks cleaner on e-ink<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"552\" height=\"311\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/08\/image-15.png\" alt=\"\" class=\"wp-image-1583\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/08\/image-15.png 552w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/08\/image-15-300x169.png 300w\" sizes=\"auto, (max-width: 552px) 100vw, 552px\" \/><\/figure>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"yaml\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">card_mod:\n  style: |\n    ha-card {\n           border-width: 0;\n          --ha-card-background: transparent;\n          color: var(--primary-color);\n        }\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;ve had issues with the card mod not rendering consistently:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">card_mod CSS values not consistently rendering see:\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> <a href=\"https:\/\/github.com\/sibbl\/hass-lovelace-kindle-screensaver\/issues\/85#issuecomment-2271603343\">https:\/\/github.com\/sibbl\/hass-lovelace-kindle-screensaver\/issues\/85#issuecomment-2271603343<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1005\" height=\"304\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-11.png\" alt=\"\" class=\"wp-image-1577\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-11.png 1005w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-11-300x91.png 300w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/image-11-768x232.png 768w\" sizes=\"auto, (max-width: 1005px) 100vw, 1005px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Creating the dashboard<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Add a dashboard to home assistant and set up the URL <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"1024\" src=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/21064-833x1024.png\" alt=\"\" class=\"wp-image-1546\" srcset=\"https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/21064-833x1024.png 833w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/21064-244x300.png 244w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/21064-768x944.png 768w, https:\/\/cln.io\/blog\/wp-content\/uploads\/2024\/07\/21064.png 960w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">tweak the dashboard as you want, and update the config on kindle  screensaver.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">update the URL of your inkplate compile to the kindle screensaver URL <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Compiling the software for the inkplate My config.h (as a quick test) the result (as a quick test) Setting up home assistant Add https:\/\/github.com\/sibbl\/hass-lovelace-kindle-screensaver to your home assistant addons, I have no interest in running [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1538,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-1530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-automation","category-homeassistant"],"_links":{"self":[{"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/posts\/1530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/comments?post=1530"}],"version-history":[{"count":9,"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/posts\/1530\/revisions"}],"predecessor-version":[{"id":1584,"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/posts\/1530\/revisions\/1584"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/media\/1538"}],"wp:attachment":[{"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/media?parent=1530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/categories?post=1530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cln.io\/blog\/wp-json\/wp\/v2\/tags?post=1530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}