Simple Weather Clock

pkscout · July 30, 2022, 7:29pm

I looked for years for a weather station that would give me a big clock and a little bit of weather information. I never could find one I liked, so of course that means building one. '-)

I’ve been puttering with this thing for a couple of years and finally have something that feels like it’s worth sharing. It uses HA for both the backend data and the actual display. All the details are at:

gist.github.com

https://gist.github.com/pkscout/d35adeb3effdee6647fd4c5d3d422f94

rpi-weather-clock.md

# Simple Weather Clock
## Introduction
I have always wanted a clock that gives me a little weather info.  The problem is that most weather stations want to give you 40 different pieces of information in little text that you have to be standing right next to read, and I wanted to be able to see this sitting on my couch.  Thus was born the Simple Weather Clock. This gist documents the various pieces of hardware and software needed to construct it.

![simple-weather-clock](https://user-images.githubusercontent.com/1402018/181948669-6b67fb74-e21d-4d7e-a1c9-c8fd11747b7c.png)


## Hardware
The core of the weather clock is a Raspberry Pi.  All this should work with any Raspberry Pi model as long as it has network connectivity of some sort.  If you want to do auto dimming of the display, you need the official Raspberry Pi 7" touchscreen and a Pi Camera (or I2C light sensor).  Here's the full list of hardware I use:

This file has been truncated. show original

homeassken · June 2, 2023, 5:41pm

Very cool. When I add a card it creates a ton of blank space below. Any ideas?

type: custom:simple-weather-clock
clock: sensor.time
font: calibri
fontweight: 500
clockfontsize: 180
background: transparen

pkscout · June 2, 2023, 9:31pm

That’s on purpose. The card is designed to try and fill the whole screen and then some (it really should be the only card on a dashboard). That with a combination of disabling the scrollbars on the browser give you that “appliance” look you see in the picture.

I guess I could add that extra space as an option you can configure. I’ll try and take a look at it this weekend.

homeassken · June 3, 2023, 4:48pm

That would be awesome. Thanks

pkscout · June 3, 2023, 7:29pm

OK, I have something that changes the extra space, but because the way the CSS is setup, it’s a percentage of the total screen height and not an absolute height. If I publish this, you’ll have to mess around with the height on every different screen, and if you’re using this as a card on a page with other cards with different screens, it’s not really going to help you.

In your screenshot you just have the clock setup, and it looks like you’re using this on a dashboard that has some other stuff. This card really isn’t designed for that.

If you really just want a big clock, you could use something like Big Number Card with that time entity.

My first build of this clock, I used a bunch of Big Number Card cards in vertical and horizontal stacks to get the look I was going for.

homeassken · June 3, 2023, 8:29pm

Thanks! And for the advice!

pkscout · June 3, 2023, 9:47pm

I found a different way to do the background so that you can specify the black background as either a percentage (i.e. 70vh) or an absolute (i.e. 516px). I pushed the change to my repo, so HACS should pick it up at some point. Big Number Card might still be a better choice for what you’re trying to do, but since I was 80% done with the change, I went ahead and finished it.

politas · August 23, 2023, 11:22pm

This clock looks great, but I want to be able to switch to alternative pages to have some controls available.

I’ve worked out how to include a couple of buttons on the page, and changing the viewport height adjusts the black background image, but the clock display still extends past the viewport, and below the other elements:

type: custom:simple-weather-clock
clock: sensor.time
topleft: sensor.tuggeranong_temp_feels_like
bottomleft: sensor.tuggeranong_humidity
topcenter: sensor.bom_forecast_temp_max_0
bottomcenter: sensor.bom_forecast_temp_min_0
topright: sensor.temperature_house_mean
bottomright: sensor.temperature_office_mean
viewportheight: 380px
clockfontsize: 230
clockspacing: -45

pkscout · August 24, 2023, 10:59am

I’m not sure there’s a fix for that. This was really designed to be the only thing on the page, and some of that extended viewport is to make sure it takes the entire screen up. You might have to keep playing with the viewport height, but that was kind of a hack setting anyway.

politas · August 24, 2023, 8:16pm

Thanks, I might try your suggestion above to use bignumber-card, and see what I can get with that.

Peter_G · January 25, 2024, 1:03pm

Working with your “Simple weather card” I am trying to create a lovelace view to display just this information as a static display on a wall-mounted android tablet. I get all the settings you have described on your GitHub page the only thing I have not been able to adjust is the width of the card. Viewpointheight adjusts the height of the background area, is there any way to adjust the background width? My ambition is to fit the screen of the android tablet so that only the card is showing.

pkscout · January 25, 2024, 9:09pm

If you put the card on a Dashboard that is defined as a panel and then make sure that has a black background, that will fill the horizontal space with black. If you want to actually change the horizontal size of the card, you can use the displaywidth option. The card is designed for an 800x480 display, so if you change the horizontal size, you should probably change the vertical too (using displayheight). I have no idea what will happen if you try and do something like 1080x300.

Please see the GitHub readme for all the setting details.

Peter_G · January 26, 2024, 7:29am

Now I get it! Thanks for your assistance.