Moonphase widget

tnemrap · January 20, 2021, 6:07pm

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

tnemrap · January 26, 2021, 11:59am

Version 2 of moonphase widget

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

Oliver2 · January 26, 2021, 12:26pm

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

DrRSatzteil · January 26, 2021, 1:16pm

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.

Malti1812 · January 26, 2021, 2:43pm

Hello, where did you get the moon phase pictures?

tnemrap · January 26, 2021, 3:18pm

Here is the images
moon

tnemrap · January 26, 2021, 5:14pm

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

Malti1812 · January 28, 2021, 7:13am

Unfortunately, I can’t get the pictures

tnemrap · January 28, 2021, 7:40am

What is the problem?

Malti1812 · January 28, 2021, 8:04am

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

tnemrap · January 28, 2021, 9:18am

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

Malti1812 · January 28, 2021, 9:31am

Ok