{"id":4801,"date":"2022-01-29T15:35:30","date_gmt":"2022-01-29T21:35:30","guid":{"rendered":"https:\/\/areciv.com\/blog\/?p=4801"},"modified":"2022-01-29T15:35:33","modified_gmt":"2022-01-29T21:35:33","slug":"grafana-dashboards-on-roku-screensaver","status":"publish","type":"post","link":"https:\/\/areciv.com\/blog\/2022\/01\/grafana-dashboards-on-roku-screensaver\/","title":{"rendered":"Grafana Dashboards on Roku Screensaver"},"content":{"rendered":"\n

Over the past couple years I've set up a bunch of Grafana <\/a>dashboards to help me keep an eye on everything from weather to server stats to how much mail is waiting for me at the post office.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Of course if I'm sitting near a computer, it's easy to log in and click through a few of them, but I wanted to keep an eye on things while I was working around the house.<\/p>\n\n\n\n

My TVs have long had some flavor of Roku streaming device<\/a> attached. I looked into the capabilities of custom channels and they aren't really set up to display a webpage. However, images and videos are fair game of course. Turns out there's a plugin for Grafana called Grafana Image Renderer<\/a> that runs on the server and can produce an image of a dashboard. Perfect!<\/p>\n\n\n\n

So to make this all work, I wrote two small programs:<\/p>\n\n\n\n

The first is a very simple server component<\/a>. The server part provides a couple of pieces of information when the channel loads so I don't have to try to do configuration of the list of images on the Roku and allows me to update the image list without touching the channel. It also can pull other images from general webservers, like public price graphs, sky charts, and webcams. This part also uses ImageMagick<\/a> to scale the image from an arbitrary size for correct display. Yeah, this whole component is probably overkill and could definitely be done many different ways. This whole thing has evolved quite a bit from how I originally did it, so it's just what's working at the moment for me.<\/p>\n\n\n\n

The screensaver<\/a> is also fairly basic but has a little bit more to it — it gets the number of images and their descriptions from the server, then requests them as a result of navigation. There are also a few nice UI features: by default, it auto-advances every 5 seconds, so as a screensaver it'll loop through the various images. If you run it as a channel directly you can interact with it, scrolling to a specific image, seeing a list of the image titles, and auto-refreshing a specific image every 30 seconds.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

If you want to try it out, you can grab both pieces from GitHub. Instructions for each part are over there as well!<\/p>\n\n\n

\n\t
\n\t\t
\n\t\t\t<\/i>\n\t\t\t <\/i>\n\t\t\t
\n\t\t\t\t\"Avatar\"\n\t\t\t<\/div>\n\t\t\t
\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\troku-imgserver-screensaver <\/i>\"\"\n\t\t\t\t\t\t\t(this link opens in a new window)<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/strong>\n\t\t\t\t\t\n\t\t\t\t\t\tby\n\t\t\t\t\t\t\tmmdoogie <\/i>\"\"\n\t\t\t\t\t\t\t(this link opens in a new window)<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/em>\n\t\t\t\t<\/p>\n\t\t\t\t

\n\t\t\t\t\tRoku screensaver that grabs a list of image descriptions from a server, then requests and displays them. Has auto-advanced, auto-refresh, list of images, etc.\n\t\t\t\t<\/p>\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t2 Subscribers\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t4 Watchers\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t0 Forks\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t\t\tCheck out this repository on GitHub.com <\/i>\"\"\n\t\t\t\t\t\t(this link opens in a new window)<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t

\n\t\t
\n\t\t\t
\n\t\t\t\tCache<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t
\n\t\t\t
\n\t\t\t\tDark Theme<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n
\n\t
\n\t\t
\n\t\t\t<\/i>\n\t\t\t <\/i>\n\t\t\t
\n\t\t\t\t\"Avatar\"\n\t\t\t<\/div>\n\t\t\t
\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\troku-imgserver-screensaver-server <\/i>\"\"\n\t\t\t\t\t\t\t(this link opens in a new window)<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/strong>\n\t\t\t\t\t\n\t\t\t\t\t\tby\n\t\t\t\t\t\t\tmmdoogie <\/i>\"\"\n\t\t\t\t\t\t\t(this link opens in a new window)<\/span>\n\t\t\t\t\t\t<\/a>\n\t\t\t\t\t<\/em>\n\t\t\t\t<\/p>\n\t\t\t\t

\n\t\t\t\t\tServer component to pair with roku-imgserver-screensaver.\n\t\t\t\t<\/p>\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t1 Subscriber\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t1 Watcher\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t <\/i>\n\t\t\t\t\t\t0 Forks\t\t\t\t\t<\/span>\n\t\t\t\t\t\n\t\t\t\t\t\tCheck out this repository on GitHub.com <\/i>\"\"\n\t\t\t\t\t\t(this link opens in a new window)<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\t

\n\t\t
\n\t\t\t
\n\t\t\t\tCache<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t
\n\t\t\t
\n\t\t\t\tDark Theme<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Over the past couple years I've set up a bunch of Grafana dashboards to help me keep an eye on everything from weather to server stats...<\/p>\n","protected":false},"author":1,"featured_media":4822,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"New blog post - Displaying my @Grafana dashboards (and other live images) as a @Roku screensaver!","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[88],"tags":[102,103],"class_list":["post-4801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software","tag-grafana","tag-roku"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/areciv.com\/blog\/wp-content\/uploads\/2022\/01\/roku-ss-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/posts\/4801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/comments?post=4801"}],"version-history":[{"count":7,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/posts\/4801\/revisions"}],"predecessor-version":[{"id":4872,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/posts\/4801\/revisions\/4872"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/media\/4822"}],"wp:attachment":[{"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/media?parent=4801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/categories?post=4801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/areciv.com\/blog\/wp-json\/wp\/v2\/tags?post=4801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}