Moonphase widget

Here is my first try for a widget.
You must excuse my mix of English and Swedish in the widget.
I have a problem to center the content in f7-col element.

uid: moonphase
tags: []
props:
  parameters:
  parameterGroups: []
timestamp: Jan 20, 2021, 6:38:58 PM
component: f7-card
config:
  title: Moonphase
slots:
  default:
    - component: f7-block
      config:
        class:
          - padding
      slots:
        default:
          - component: f7-row
            config:
              class:
                - padding-top
                - padding-bottom
                - justify-content-center
            slots:
              default:
                - component: Label
                  config:
                    text: =items.LocalTime_Date.displayState
                    style:
                      font-size: 24px
          - component: f7-row
            slots:
              default:
                - component: oh-image
                  config:
                    url: ="http://openhab:8080/static/moon/moon-" + items.AstroMoonLokal_MoonPhaseId.state + ".png"
                    style:
                      width: 50%
                      height: auto
                      display: block
                      margin-left: auto
                      margin-right: auto
          - component: f7-row
            config:
              class:
                - padding-bottom
                - justify-content-center
            slots:
              default:
                - component: Label
                  config:
                    text: =items.AstroMoonLokal_MoonPhaseName.state
                    style:
                      font-size: 18px
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                  class:
                    - display-flex
                    - align-items-center
                    - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: sunrise
                          size: 30
                      - component: Label
                        config:
                          text: =items.AstroSunDataLokal_Rise_StartTime.displayState
                          style:
                            font-size: 24px
                - component: f7-col
                  config:
                  class:
                    - display-flex
                    - align-items-center
                    - flex-direction-column
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: sunset
                          size: 30
                      - component: Label
                        config:
                          text: =items.AstroSunDataLokal_Set_StartTime.displayState
                          style:
                            font-size: 24px

5 Likes

Version 2 of moonphase widget

image

uid: moonPhase_v2
tags: []
props:
  parameterGroups: []
timestamp: Jan 25, 2021, 10:23:08 PM
component: f7-card
config:
  style:
    border-radius: 20px
    overflow: hidden
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - justify-content-center
                      - align-items-center
                      - text-align-center
                  slots:
                    default:
                      - component: oh-image
                        config:
                          url: ="http://openhab:8080/static/moon/moon-" + items.AstroMoonLokal_MoonPhaseId.state + ".png"
                          style:
                            width: 90%
                            height: auto
                            display: block
                            margin-left: auto
                            margin-right: auto
                      - component: Label
                        config:
                          text: =items.AstroMoonLokal_MoonPhaseName.state
                          style:
                            font-size: 16px
                - component: f7-col
                  config:
                    class:
                      - justify-content-center
                      - align-items-center
                      - text-align-center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: sunrise
                          size: 30
                          style:
                            position: relative
                      - component: Label
                        config:
                          text: =items.AstroSunDataLokal_Rise_StartTime.displayState
                          style:
                            font-size: 20px
                - component: f7-col
                  config:
                    class:
                      - justify-content-center
                      - align-items-center
                      - text-align-center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: sunset
                          size: 30
                      - component: Label
                        config:
                          text: =items.AstroSunDataLokal_Set_StartTime.displayState
                          style:
                            font-size: 20px

How can i get this responsive on my phone, this is how it looks now.

20210126_121825

I am not a CSS expert, but maybe replace fixed font size unit “px” by “em”?
Instead of 20px use e.g. 1.2em

Have a look at the framework7 documentation:

You could try to assign:
classes: col-33 medium-100

Meaning: Set default column width to 33%, if screen is smaller (medium and below) then adjust to 100%. This should result in displaying the columns below each other on a small screen. I haven’t tested this with your example so you might need to experiment with the classes a bit.

Hello, where did you get the moon phase pictures?

Here is the images
moon

This is my mapping to get image number

NEW=1
WAXING_CRESCENT=2
FIRST_QUARTER=3
WAXING_GIBBOUS=4
FULL=5
WANING_GIBBOUS=6
THIRD_QUARTER=7
WANING_CRESCENT=8

Unfortunately, I can’t get the pictures

What is the problem?

Google Drive doesn’t share it,
But I’m registered there

Trying Dropbox
https://www.dropbox.com/s/301evvfa0z0h9gi/moon.7z?dl=0

Ok :point_up:

Hello @tnemrap
thank you for that widget, but I dont get the moon phases with pictures to run.
Sun rise and set are working.

Could you please provide your config text from file astro.items ?
Thank you in advance.

Regards.

Hello @tnemrap ,

thanks for this great widget.

I made some adaptions to

  • use parameters for the item names
  • change the png-images to available icons (e.g. iconify:noto:full-moon)

This way there is no need to comply to your item naming scheme - and still make it work :slight_smile:

uid: moonPhase_v2
tags: []
props:
  parameters:
    - default: Moon
      description: Title to display in lower left corner
      label: Header
      name: text_header
      required: false
      type: TEXT
    - context: item
      description: item for moon phase
      label: moon phase item [String]
      name: item_phase
      required: true
      type: TEXT
    - context: item
      description: item for moon rise
      label: moon rise item [DateTime]
      name: item_rise
      required: true
      type: TEXT
    - context: item
      description: item for moon set
      label: moon set item [DateTime]
      name: item_set
      required: true
      type: TEXT
timestamp: Nov 12, 2022, 9:22:50 AM
component: f7-card
config:
  style:
    border-radius: 20px
    overflow: hidden
slots:
  default:
    - component: f7-card-content
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  config:
                    class:
                      - justify-content-center
                      - align-items-center
                      - text-align-center
                  slots:
                    default:
                      - component: oh-label-item
                        config:
                          icon: '=(items[props.item_phase].state == "FULL") ? "iconify:noto:full-moon" : (items[props.item_phase].state == "NEW") ? "iconify:noto:new-moon" : (items[props.item_phase].state == "WAXING_GIBBOUS") ? "iconify:noto:waxing-gibbous-moon" : (items[props.item_phase].state == "FIRST_QUARTER") ? "iconify:noto:first-quarter-moon" : (items[props.item_phase].state == "THIRD_QUARTER") ? "iconify:noto:last-quarter-moon" : (items[props.item_phase].state == "WANING_GIBBOUS") ? "iconify:noto:waning-gibbous-moon" : (items[props.item_phase].state == "WANING_CRESCENT") ? "iconify:noto:waning-crescent-moon" : (items[props.item_phase].state == "WAXING_GIBBOUS") ? "iconify:noto:waxing-gibbous-moon" : (items[props.item_phase].state == "FIRST_QUARTER") ? "iconify:noto:first-quarter-moon" : (items[props.item_phase].state == "THIRD_QUARTER") ? "iconify:noto:last-quarter-moon" : (items[props.item_phase].state == "WANING_GIBBOUS") ? "iconify:noto:waning-gibbous-moon" : (items[props.item_phase].state == "WAXING_CRESCENT") ? "iconify:noto:waxing-crescent-moon" : "iconify:noto:new-moon"'
                          iconColor: gray
                          item: =props.item_phase
                          style:
                            width: 90%
                            height: auto
                            display: block
                            margin-left: auto
                            margin-right: auto
                      - component: Label
                        config:
                          text: =props.text_header
                          style:
                            font-size: 16px
                - component: f7-col
                  config:
                    class:
                      - justify-content-center
                      - align-items-center
                      - text-align-center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: sunrise
                          size: 30
                          style:
                            position: relative
                      - component: oh-label-item
                        config:
                          item: =props.item_rise
                          style:
                            font-size: 20px
                - component: f7-col
                  config:
                    class:
                      - justify-content-center
                      - align-items-center
                      - text-align-center
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          f7: sunset
                          size: 30
                      - component: oh-label-item
                        config:
                          item: =props.item_set
                          style:
                            font-size: 20px

Make sure to format the DateTime-items for set and rise as described here: Formatting date/time of a label-item (within a list-card-widget in a page) with YAML - #9 by rlkoshak

1 Like

Hello @tnemrap
Great widget. May it be possible to re-upload the pictures moon-1 and moon-2 in good quality? Unfortunately those two pictures of states are in very low resolution.

Regards,
Daniel.