I would like to make a temperature widget that:
- Has a large font for the temperature
- Has a text color for the temperature
- Has a background color
For now sizes and colors are fixed.
It is challenging understanding some of the complex (for me) widget examples I’ve come across despite having read numerous tutorials.
I recommend that you look at the widget marketplace category. There are some very complex, involved widgets there sure, but there are also some very simple ones with just two or three components and some basic styling and it’s usually fairly easy to tell them apart from the description or even the just the preview image.
Any widget published by me to the marketplace is going to be about as simple as it gets.
You could just use oh-label-cards?
And when you click on the cell you can get a graph.
Are you referring to the Label Card that is selectable from the standard widget list or using an oh-label-card in a custom widget.
How is the icon in the lower-left enabled? Is this a setting?
It is just standard widget cell that I put on a page.
The icon is standard oh-icon.
Here is the code you can paste into a label card so you can see how it works:
title: Outside Temperature
Just change the items to your items (obviously)
It’s nothing fancy but does the job.
I have this on my overview and when I click on it then it opens that full temperature page.
It also has a windrose on it but you can skip that bit as they are not standard icons, but you will see how it works.
the code for that:
footer: "=\"Sunrise: \" +dayjs(items.LocalSun_Rise_Start.state).format('H:mm') + \" Sunset: \" +dayjs(items.LocalSun_Set_Start.state).format('HH:mm')"
=(!Number.isFinite(Number.parseFloat(items.Raw_mqtt_data_Wind_direction.state))) ? "f7:question_circle" : "oh:windrose-" +
"N", "NNE", "NE", "ENE",
"E", "ESE", "SE", "SSE",
"S", "SSW", "SW", "WSW",
"W", "WNW", "NW", "NNW",
])[ Math.floor( (1 + Number.parseFloat(items.Raw_mqtt_data_Wind_direction.state) / 360.0 * 2 * 16) / 2) % 16 ].toLowerCase() + ".svg"
color: "=Number.parseFloat(items.Rawmqttdata_Outsidetemperature.state) >= 20 ? 'red' : 'blue'"
title: "Outside temperature now:"
Thank you - that is an interesting example.
I am sure you can modify it to suit your needs.
Post your results as I would be interested to see what you did.