List Item Widget for Sun information

AstroSunListItemScreenShot

This is an UI List Item Widget to view the Sun 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
  • All icons - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
  • Visibility of Label item (Sunset, sunrise, radiation, total eclipse, partial eclipse)

items

  • Sun Day/night item switch (Sun icon state)
  • Sun Phase name item
  • Sunrise Start time item
  • Sunrise End time item
  • Sunrise Duration item
  • Sunset Start time item
  • Sunset End time item
  • Sunset Duration item
  • Sun Total Radiation item
  • Sun Direct Radiation item
  • Sun Diffuse Radiation item
  • Sun Total Eclipse date item
  • Sun Partial Eclipse date item

Screenshots

Screen4

Standard Library List Card

Screen2

Configure List

Screen3

Changelog

Version 0.1

  • initial release

Resources

uid: frs_Astro_Sun_list_item
tags: []
props:
  parameters:
    - description: Sun Title
      defaultValue: Sun
      label: title
      name: SunTitle
      required: false
      type: TEXT
      groupName: SunSettings
    - description: Sun Day Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      defaultValue: f7:sun_max_fill
      label: Icon
      name: SunDayIcon
      required: false
      type: TEXT
      groupName: SunSettings
    - description: Sun Night Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      defaultValue: f7:sun_min
      label: Icon
      name: SunNightIcon
      required: false
      type: TEXT
      groupName: SunSettings
    - context: item
      description: Sun Day/night item switch
      label: item
      name: SunDayNightItem
      required: false
      type: TEXT
      groupName: SunSettings
    - context: item
      description: Sun Phase name item
      label: item
      name: SunPhaseNameItem
      required: false
      type: TEXT
      groupName: SunSettings
    - description: Hide Sunrise label-item
      label: hide
      name: HideSunrise
      required: false
      type: BOOLEAN
      groupName: SunriseSettings
    - description: Sunrise Title
      defaultValue: Sunrise
      label: title
      name: SunriseTitle
      required: false
      type: TEXT
      groupName: SunriseSettings
    - description: Sunrise Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      defaultValue: f7:sunrise_fill
      label: Icon
      name: SunriseIcon
      required: false
      type: TEXT
      groupName: SunriseSettings
    - context: item
      description: Sunrise Start time item
      label: item
      name: StartTimeSunriseItem
      required: false
      type: TEXT
      groupName: SunriseSettings
    - context: item
      description: Sunrise End time item
      label: item
      name: EndTimeSunriseItem
      required: false
      type: TEXT
      groupName: SunriseSettings
    - context: item
      description: Sunrise Duration item
      label: item
      name: DurationSunriseItem
      required: false
      type: TEXT
      groupName: SunriseSettings
    - description: Hide Sunset label-item
      label: hide
      name: HideSunset
      required: false
      type: BOOLEAN
      groupName: SunsetSettings
    - description: Sunset Title
      defaultValue: Sunset
      label: title
      name: SunsetTitle
      required: false
      type: TEXT
      groupName: SunsetSettings
    - description: Sunset Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      defaultValue: f7:sunset_fill
      label: Icon
      name: SunsetIcon
      required: false
      type: TEXT
      groupName: SunsetSettings
    - context: item
      description: Sunset Start time item
      label: item
      name: StartTimeSunsetItem
      required: false
      type: TEXT
      groupName: SunsetSettings
    - context: item
      description: Sunset End time item
      label: item
      name: EndTimeSunsetItem
      required: false
      type: TEXT
      groupName: SunsetSettings
    - context: item
      description: Sunset Duration item
      label: item
      name: DurationSunsetItem
      required: false
      type: TEXT
      groupName: SunsetSettings
    - description: Hide Radiation label-item
      label: hide
      name: HideRadiation
      required: false
      type: BOOLEAN
      groupName: RadiationSettings
    - description: Radiation Title
      defaultValue: Total Radiation
      label: title
      name: RadiationTitle
      required: false
      type: TEXT
      groupName: RadiationSettings
    - description: Radiation Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      defaultValue: iconify:mdi:sun-wireless
      label: Icon
      name: RadiationIcon
      required: false
      type: TEXT
      groupName: RadiationSettings
    - context: item
      description: Total Radiation item
      label: item
      name: TotalRadiationItem
      required: false
      type: TEXT
      groupName: RadiationSettings
    - context: item
      description: Direct Radiation item
      label: item
      name: DirectRadiationItem
      required: false
      type: TEXT
      groupName: RadiationSettings
    - context: item
      description: Diffuse Radiation item
      label: item
      name: DiffuseRadiationItem
      required: false
      type: TEXT
      groupName: RadiationSettings
    - 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
    - description: Total Eclipse Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      defaultValue: f7:calendar_today
      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
    - description: Partial Eclipse Icon - Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon), material:iconName (Material icon) or iconify:iconSet:iconName
      defaultValue: f7:calendar_today
      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: SunSettings
      label: Sun settings
    - name: SunriseSettings
      label: Sunrise settings
    - name: SunsetSettings
      label: Sunset settings
    - name: RadiationSettings
      label: Radiation settings
    - name: TotalEclipseSettings
      label: Total Eclipse settings
    - name: PartialEclipseSettings
      label: Partial Eclipse settings
timestamp: Apr 10, 2022, 8:45:12 AM
component: oh-list-item
config:
  accordionList: true
  after: '=props.SunPhaseNameItem ? items[props.SunPhaseNameItem].displayState : ""'
  icon: '=(items[props.SunDayNightItem].state == "ON") ? props.SunDayIcon : props.SunNightIcon'
  iconColor: '=(items[props.SunDayNightItem].state == "ON") ? "yellow" : "gray"'
  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: '=(props.StartTimeSunriseItem ? "↑ " + items[props.StartTimeSunriseItem].displayState : "") + " ↓ " + (props.StartTimeSunsetItem ? items[props.StartTimeSunsetItem].displayState : "")'
  title: =props.SunTitle
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.SunriseIcon
              iconColor: gray
              item: =props.DurationSunriseItem
              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-subtitle-font-size: 14px
                --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              subtitle: '=(props.StartTimeSunriseItem ? items[props.StartTimeSunriseItem].displayState + " - " : "") + (props.EndTimeSunriseItem ? items[props.EndTimeSunriseItem].displayState : "")'
              title: =props.SunriseTitle
              visible: =!props.HideSunrise
          - component: oh-label-item
            config:
              icon: =props.SunsetIcon
              iconColor: gray
              item: =props.DurationSunsetItem
              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-subtitle-font-size: 14px
                --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              subtitle: '=(props.StartTimeSunsetItem ? items[props.StartTimeSunsetItem].displayState + " - " : "") + (props.EndTimeSunsetItem ? items[props.EndTimeSunsetItem].displayState : "")'
              title: =props.SunsetTitle
              visible: =!props.HideSunset
          - component: oh-label-item
            config:
              action: analyzer
              actionAnalyzerChartType: day
              actionAnalyzerCoordSystem: aggregate
              actionAnalyzerItems: =[props.TotalRadiationItem, props.DirectRadiationItem, props.DiffuseRadiationItem]
              icon: =props.RadiationIcon
              iconColor: gray
              item: =props.TotalRadiationItem
              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-subtitle-font-size: 14px
                --f7-list-item-subtitle-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
                --f7-list-item-title-font-size: 15px
                --f7-list-item-title-text-color: "=themeOptions.dark === 'dark' ? 'rgb(180,180,180)' : 'rgb(100,100,100)'"
              subtitle: '=(props.DirectRadiationItem ? "Directe " + items[props.DirectRadiationItem].displayState + " - " : "") + (props.DiffuseRadiationItem ? "Diffuse " + items[props.DiffuseRadiationItem].displayState : "")'
              title: =props.RadiationTitle
              visible: =!props.HideRadiation
          - 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
3 Likes