Are there any really simple widget examples?

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.

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?

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
  action: analyzer
  actionAnalyzerCoordSystem: time
    - 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.

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
  action: popup
  actionModal: page:page_5c4c82cd19
    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
    color: "=Number.parseFloat(items.Rawmqttdata_Outsidetemperature.state) >= 20 ? 'red' : 'blue'"
  subtitle: =items.LocalSun_SunPhaseName.state
  title: "Outside temperature now:"
  trendItem: Rawmqttdata_Outsidetemperature


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.