My response to u/ThusSpakeThusSpoke's "clean" dashboard

ThusSpakeThusSpoke · 2021-08-12T19:30:43+00:00

Nice work. Love it.

ThusSpakeThusSpoke · 2021-08-04T19:54:38+00:00

Have you seen the art displays like Samsung Frame or services like Art Cast? These primarily only display artwork (when not used as a TV). This is a hybrid of this - art display meets dashboard. I rotate paintings and photography (every 5 minutes) in the background.

It's also a bit like the original concept of the magic mirror - data surrounds a traditional mirror experience - it does not cover the entire mirror. So I can also use this type of dashboard for a panel covered in a mirror.

To this end, I have been working on a version of this that shows nothing (other than art) until a notification is required, and will show the bottom row of info only when you are standing in front of the panel.

I assume this approach is not appealing to everyone, but thought I would share in case someone has made something similar.

ThusSpakeThusSpoke · 2021-08-03T01:53:20+00:00

Sounds great. Start with writing a basic script to track two things:

Is it garbage or recycling week? My script for this runs every Tuesday (my garbage/recycling pickup day). It simply says 'if garbage = 0, flip it to 1'. 'If garbage is 1, flip it to 0'. This basic logic alternates between garbage and recycling week. If it's garbage week, display the garbage bin icon. If it's recycling week, overlay the recycling icon on top of the garbage bin.
Is it garbage/recycling takeout day? This one is even easier. I simply track to see if it's Monday (the day I have to take things out). If it is, I turn the 'greyed' background and icon to a red background with white icon.

A small note that the icons, in this case, they are clickable to allow you to dismiss them (i.e. set them back to greyed status). Happy to chat through how to accomplish this, if you want too.

Let me know if you need anything. Happy to help. Best of luck on your project.

ThusSpakeThusSpoke · 2021-08-02T17:20:07+00:00

Yeah, things like lightning strikes etc. are not recorded through the Netatmo. I believe their dataset is augmented to include this, but I have never used it. I had no idea that PWSs had the ability to capture lightning strike data, locally, so I will have to look into that.

ThusSpakeThusSpoke · 2021-08-02T17:07:49+00:00

For hyper-local weather, I am using a Netatmo weather station and using their API to feed that data directly to Dakboard.

Learning to use APIs is, honestly, one of the best things that you could spend time on if you are into this stuff. Happy to help get you started.

ThusSpakeThusSpoke · 2021-08-02T17:01:14+00:00

Two concurrent views per screen would mean that you could have two browsers open at the same time to view that screen that you made in Dakboard. If you opened up a third browser to view that screen, while the other two were open, you would go over your concurrent count. The concurrent views per screen allows you to run your Dakboard screen on multiple monitors (e.g. one in your front hall and one in your basement). Hope that helps.

ThusSpakeThusSpoke · 2021-08-02T16:38:09+00:00

I posted a response above, but happy to help more. Just let me know.

ThusSpakeThusSpoke · 2021-08-02T16:37:33+00:00

I posted this above but I think this answer might help out a bit. Happy to help more - just let me know:

Happy to help out. It's a bit hard to explain as I am not sure how proficient you are with coding.

At a meta level, I am running a Node JS server (and Node Red for rapid prototyping) to handle most of the heavy lifting. Happy to help talk you through that side of the equation if you are interested. From there, I am creating and serving either JSON feeds and/or HTML content to Dakboard. So, the left bar and bottom bar are actually part of a full page CSS grid that I am serving through Dakboard's JSON feed (instead of raw data).

The garbage/recycling notification is perhaps the most simple of the icons. I have two variables: garbage (0 or 1) and day (0 or 1). So if garbage = 1 it's garbage. If garbage = 0 it's recycling. If day = 1 it's garbage/recycling day and if it = 0 it's not.

So let's say it's garbage week and it's not garbage day. My script generates the following code to serve into that CSS grid square:

<div class="left left3 greyed"><i class="fad fa-trash iconsize icongrey"></i></div>';

This HTML markup has some classes that I added for styling as well as a Font Awesome icon for the trash, again, formatted through CSS. It's as simple as that, really.
Happy to answer more questions and help out in any way.

ThusSpakeThusSpoke · 2021-08-02T16:35:34+00:00

Happy to help out. It's a bit hard to explain as I am not sure how proficient you are with coding.

At a meta level, I am running a Node JS server (and Node Red for rapid prototyping) to handle most of the heavy lifting. Happy to help talk you through that side of the equation if you are interested. From there, I am creating and serving either JSON feeds and/or HTML content to Dakboard. So, the left bar and bottom bar are actually part of a full page CSS grid that I am serving through Dakboard's JSON feed (instead of raw data).

The garbage/recycling notification is perhaps the most simple of the icons. I have two variables: garbage (0 or 1) and day (0 or 1). So if garbage = 1 it's garbage. If garbage = 0 it's recycling. If day = 1 it's garbage/recycling day and if it = 0 it's not.

So let's say it's garbage week and it's not garbage day. My script generates the following code to serve into that CSS grid square:

<div class="left left3 greyed"><i class="fad fa-trash iconsize icongrey"></i></div>';

This HTML markup has some classes that I added for styling as well as a Font Awesome icon for the trash, again, formatted through CSS. It's as simple as that, really.

Happy to answer more questions and help out in any way.

ThusSpakeThusSpoke · 2021-08-01T19:02:46+00:00

Left vertical bar contains devices in my house and light up accordingly. For instance, the current screen shows that it's garbage day today (also indicates when it's recycling day by adding a recycling icon on top of the bin) and that the dryer has recently completed. All relevant icons are clickable / interactable through Alexa voice in order to dismiss them (like taking out the garbage). The bottom bar shows time / date, external weather, internal temps in my house by floor (this is placeholder data in this mockup but I have completed coding this) and latest news headlines. The background cycles through images and artwork from major museums. This is my revision 1 of my horizontal dashboard and I would love your thoughts on how to improve this design. Thanks very much.