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