List Item Widget for Moon information

AstroMoonListItemScreenShot

This is an UI List Item Widget to view the Moon information with the Astro Binding.

Only use with List Card with accordion and rich list items option set to true.

Support to use a light and a dark background.

Configuration parameters:

  • All title string

  • Icons - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName

  • Visibility of Label item (Full Moon, New Moon, total eclipse, partial eclipse)

items

  • Moon illumination item

  • Moon phase name item

  • Full Moon Date item

  • New Moon Date item

  • Moon Total Eclipse date item

  • Moon Partial Eclipse date item

Screenshots

Screen4

Standard Library List Card

Screen2

Configure List

Screen3

Changelog

Version 0.1

  • initial release

Resources

uid: frs_Astro_Moon_list_item
tags:
  - astro
  - list
  - moon
props:
  parameters:
    - defaultValue: Moon
      description: Moon Title
      label: title
      name: MoonTitle
      required: false
      type: TEXT
      groupName: MoonSettings
    - context: item
      description: Moon illumination item
      label: item
      name: MoonIlluminationItem
      required: false
      type: TEXT
      groupName: MoonSettings
    - context: item
      description: Moon phase name item
      label: item
      name: MoonPhaseNameItem
      required: false
      type: TEXT
      groupName: MoonSettings
    - description: Hide Full Moon label-item
      label: hide
      name: HideFullMoon
      required: false
      type: BOOLEAN
      groupName: FullMoonSettings
    - description: Full Moon Title
      defaultValue: Full Moon
      label: title
      name: FullMoonTitle
      required: false
      type: TEXT
      groupName: FullMoonSettings
    - defaultValue: iconify:mdi:moon-full
      description: Full Moon Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: FullMoonIcon
      required: false
      type: TEXT
      groupName: FullMoonSettings
    - context: item
      description: Full Moon Date item
      label: item
      name: FullMoonDateItem
      required: false
      type: TEXT
      groupName: FullMoonSettings
    - description: Hide New Moon label-item
      label: hide
      name: HideNewMoon
      required: false
      type: BOOLEAN
      groupName: NewMoonSettings
    - description: New Moon Title
      defaultValue: New Moon
      label: title
      name: NewMoonTitle
      required: false
      type: TEXT
      groupName: NewMoonSettings
    - defaultValue: iconify:mdi:moon-new
      description: New Moon Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: NewMoonIcon
      required: false
      type: TEXT
      groupName: NewMoonSettings
    - context: item
      description: New Moon Date item
      label: item
      name: NewMoonDateItem
      required: false
      type: TEXT
      groupName: NewMoonSettings
    - description: Hide Total Eclipse label-item
      label: hide
      name: HideTotalEclipse
      required: false
      type: BOOLEAN
      groupName: TotalEclipseSettings
    - description: Total Eclipse Title
      defaultValue: Total Eclipse
      label: title
      name: TotalEclipseTitle
      required: false
      type: TEXT
      groupName: TotalEclipseSettings
    - defaultValue: f7:calendar_today
      description: Total Eclipse Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: TotalEclipseIcon
      required: false
      type: TEXT
      groupName: TotalEclipseSettings
    - context: item
      description: Total Eclipse date item
      label: item
      name: TotalEclipseDateItem
      required: false
      type: TEXT
      groupName: TotalEclipseSettings
    - description: Hide Partial Eclipse label-item
      label: hide
      name: HidePartialEclipse
      required: false
      type: BOOLEAN
      groupName: PartialEclipseSettings
    - description: Partial Eclipse Title
      defaultValue: Partial Eclipse
      label: title
      name: PartialEclipseTitle
      required: false
      type: TEXT
      groupName: PartialEclipseSettings
    - defaultValue: f7:calendar_today
      description: Partial Eclipse Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      label: Icon
      name: PartialEclipseIcon
      required: false
      type: TEXT
      groupName: PartialEclipseSettings
    - context: item
      description: Partial Eclipse date item
      label: item
      name: PartialEclipseDateItem
      required: false
      type: TEXT
      groupName: PartialEclipseSettings
  parameterGroups:
    - name: MoonSettings
      label: Moon settings
    - name: FullMoonSettings
      label: Full Moon settings
    - name: NewMoonSettings
      label: New Moon settings
    - name: TotalEclipseSettings
      label: Total Eclipse settings
    - name: PartialEclipseSettings
      label: Partial Eclipse settings
timestamp: Jan 1, 2022, 8:00:54 AM
component: oh-list-item
config:
  accordionList: true
  after: =items[props.MoonIlluminationItem].displayState
  icon: '=(items[props.MoonPhaseNameItem].state == "FULL") ? "iconify:noto:full-moon" : (items[props.MoonPhaseNameItem].state == "NEW") ? "iconify:noto:new-moon" : (items[props.MoonPhaseNameItem].state == "WAXING_GIBBOUS") ? "iconify:noto:waxing-gibbous-moon" : (items[props.MoonPhaseNameItem].state == "FIRST_QUARTER") ? "iconify:noto:first-quarter-moon" : (items[props.MoonPhaseNameItem].state == "THIRD_QUARTER") ? "iconify:noto:last-quarter-moon" : (items[props.MoonPhaseNameItem].state == "WANING_GIBBOUS") ? "iconify:noto:waning-gibbous-moon" : (items[props.MoonPhaseNameItem].state == "WANING_CRESCENT") ? "iconify:noto:waning-crescent-moon" : (items[props.MoonPhaseNameItem].state == "WAXING_GIBBOUS") ? "iconify:noto:waxing-gibbous-moon" : (items[props.MoonPhaseNameItem].state == "FIRST_QUARTER") ? "iconify:noto:first-quarter-moon" : (items[props.MoonPhaseNameItem].state == "THIRD_QUARTER") ? "iconify:noto:last-quarter-moon" : (items[props.MoonPhaseNameItem].state == "WANING_GIBBOUS") ? "iconify:noto:waning-gibbous-moon" : (items[props.MoonPhaseNameItem].state == "WAXING_CRESCENT") ? "iconify:noto:waxing-crescent-moon" : "iconify:noto:new-moon"'
  mediaList: true
  style:
    --f7-list-item-after-font-size: 16px
    --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(80,80,80)'"
  subtitle: =items[props.MoonPhaseNameItem].displayState
  title: =props.MoonTitle
slots:
  accordion:
    - component: f7-list
      config:
        mediaList: true
        style:
          background-color: "=themeOptions.dark === 'dark' ? 'rgb(35, 35, 35)' : 'rgb(247, 247, 247)'"
      slots:
        default:
          - component: oh-label-item
            config:
              icon: =props.FullMoonIcon
              iconColor: gray
              item: =props.FullMoonDateItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-line-height: 32px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: =props.FullMoonTitle
              visible: =!props.HideFullMoon
          - component: oh-label-item
            config:
              icon: =props.NewMoonIcon
              iconColor: gray
              item: =props.NewMoonDateItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-line-height: 32px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: =props.NewMoonTitle
              visible: =!props.HideNewMoon
          - component: oh-label-item
            config:
              icon: =props.TotalEclipseIcon
              iconColor: gray
              item: =props.TotalEclipseDateItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-line-height: 32px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: =props.TotalEclipseTitle
              visible: =!props.HideTotalEclipse
          - component: oh-label-item
            config:
              icon: =props.PartialEclipseIcon
              iconColor: gray
              item: =props.PartialEclipseDateItem
              style:
                --f7-list-item-after-font-size: 15px
                --f7-list-item-after-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-line-height: 32px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              title: =props.PartialEclipseTitle
              visible: =!props.HidePartialEclipse
2 Likes