tnemrap
January 20, 2021, 6:07pm
1
Here is my first try for a widget.
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
tnemrap
January 26, 2021, 11:59am
2
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.
Oliver2
January 26, 2021, 12:26pm
3
I am not a CSS expert, but maybe replace fixed font size unit “px” by “em”?20px use e.g. 1.2em
DrRSatzteil
January 26, 2021, 1:16pm
4
Have a look at the framework7 documentation:
You could try to assign:
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
5
Hello, where did you get the moon phase pictures?
tnemrap
January 26, 2021, 5:14pm
7
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
8
Unfortunately, I can’t get the pictures
Malti1812
January 28, 2021, 8:04am
10
Google Drive doesn’t share it,
tnemrap
January 28, 2021, 9:18am
11
DeeZett
July 21, 2022, 1:22pm
13
Hello @tnemrap
Could you please provide your config text from file astro.items ?
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
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
DeeZett
December 9, 2022, 10:14pm
15
Hello @tnemrap
Regards,
