MainUI - simple compass card

[crnjan]

Wanted to display wind direction and speed and came across how our HA friends do it so created a simple widget:

uid: compass_card
tags: []
props:
  parameters:
    - description: Title
      label: title
      name: title
      required: false
      type: TEXT
    - context: item
      description: Wind direction in deg
      label: Wind Direction
      name: direction
      required: true
      type: TEXT
    - context: item
      description: Wind speed
      label: Wind Speed
      name: speed
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jan 17, 2023, 11:10:55 PM
component: f7-card
config:
  title: =props.title
  stylesheet: >
    .circle{
      margin: 14px auto;
      border-radius: 50%;
      border: 4px solid blue;
      aspect-ratio: 1/1;
      width: 60%;
    }
slots:
  default:
    - component: f7-card-content
      config: {}
      slots:
        default:
          - component: div
            config:
              class: circle
            slots:
              default:
                - component: Label
                  config:
                    style:
                      top: 36%
                      left: 50%
                      transform: translate(-50%, -50%)
                      position: absolute
                      font-size: 28px
                    text: =["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW", "N"][Math.round((Number.parseFloat(@props.direction) % 360) / 22.5)]
                - component: Label
                  config:
                    style:
                      top: 55%
                      left: 50%
                      transform: translate(-50%, -50%)
                      position: absolute
                      font-weight: var(--f7-list-item-after-font-weight)
                      color: var(--f7-list-item-after-text-color)
                      line-height: var(--f7-list-item-after-line-height)
                      font-size: 18px
                    text: =@props.speed
                - component: Label
                  config:
                    style:
                      top: 64%
                      left: 50%
                      transform: translate(-50%, 50%)
                      position: absolute
                      font-size: 16px
                      font-weight: var(--f7-list-item-after-font-weight)
                      color: var(--f7-list-item-after-text-color)
                      line-height: var(--f7-list-item-after-line-height)
                    text: =@props.direction
                - component: div
                  config:
                    style:
                      height: 100%
                      transform: ="rotate(" + Number.parseFloat(@props.direction) + "deg)"
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          style:
                            width: 100%
                            transform: translate(0, -50%) rotate(180deg)
                          height: 44px
                          icon: if:mdi:arrow-compass
                          color: red

usage

  - component: widget:compass_card
    config:
      title: Wind
      direction: gOutdoor_WeatherStation_WindDirection
      speed: gOutdoor_WeatherStation_WindSpeed

renders

Still room for improvement, but wanted to share if somebody else finds it useful. Enjoy.

[rlkoshak (Rich Koshak)]

This is worth posting to the Marketplace so others can just install it instead of copy and paste.

[crnjan]

To be honest I’m a bit shy since people with design skills would easily make it visually much more appealing … I will try to add some more options and promote it to Marketplace, feel free to provide any feedback, specially design wise …

[rlkoshak (Rich Koshak)]

I’m not designer and I’m particularly not good at creating complicated widgets. I’ve yet to create one that really works and looks how I want. But as soon as you post it to the Marketplace, others will come along and ask for new features or design changes. So don’t worry too much if you don’t get feedback here. You’ll definitely get some on the Marketplace itself.