Are there any really simple widget examples?

Setup, Configuration and Use Widgets
1

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.

2

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.

3

Any widget published by me to the marketplace is going to be about as simple as it gets.

4

You could just use oh-label-cards?

Screenshot from 2023-10-13 08-54-32
Screenshot from 2023-10-13 08-54-321061×256 32.7 KB

And when you click on the cell you can get a graph.

5

Thank you.

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?

6

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:

component: oh-label-card
config:
  action: analyzer
  actionAnalyzerCoordSystem: time
  actionAnalyzerItems:
    - Rawmqttdata_Outsidetemperature
  icon: oh:heat
  iconUseState: true
  item: Rawmqttdata_Outsidetemperature
  title: Outside Temperature
  trendItem: Rawmqttdata_Outsidetemperature

Just change the items to your items (obviously) :grinning:
It’s nothing fancy but does the job.

7

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.

Screenshot from 2023-10-13 11-15-05

the code for that:

component: oh-label-cell
config:
  action: popup
  actionModal: page:page_5c4c82cd19
  actionModalConfig:
    prop1: temperature
  actionPage: page:page_5c4c82cd19
  expandable: false
  footer: "=\"Sunrise: \" +dayjs(items.LocalSun_Rise_Start.state).format('H:mm') + \" Sunset: \" +dayjs(items.LocalSun_Set_Start.state).format('HH:mm')"
  icon: >-
    =(!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"
  item: Rawmqttdata_Outsidetemperature
  stateStyle:
    color: "=Number.parseFloat(items.Rawmqttdata_Outsidetemperature.state) >= 20 ? 'red' : 'blue'"
  subtitle: =items.LocalSun_SunPhaseName.state
  title: "Outside temperature now:"
  trendItem: Rawmqttdata_Outsidetemperature

``
8

Thank you - that is an interesting example.

9

I am sure you can modify it to suit your needs.
Post your results as I would be interested to see what you did.