Seneye Widget

seneye

My first widget, based on the MiFlora widget. I’m not a programmer, so bear with me.
I’ve added most things linked with the seneye sensor. I hope they’ll all work. To be tested?

Some features:

  • Data is gather from the GUI Model page. So if you’re using the naming convention of the binding, you should be good. Just enter the name you used for you sensor, and it should work.

  • Values will show up if data is available
    You can notice fe the missing LUX, Kelvin… in my example, I don’t have this enabled. But I’ve put it in, so try it out.

  • All values are clickable, and will open the historical graphs.

  • Last reading will go red if data is older then 1 day.
    Gives you an idea that you should check your sensor.

  • Slide icon will change color/icon when replacement time is nearby. First orange, then red. You can also click the icon to see the more details about the date/serial.
    Can help you remember to replace/buy the slide.

  • The picture is transparant, and will go red if the sensor is out of the water.
    Cool feature on your dashboard? Of course, let’s hope you won’t need it!

  • An item can be selected to have fe the aquarium light ON/OFF.

You should copy the background image seneyeWidget.png to the html folder (/etc/openhab/html/). I’m thinking about to have it public somewhere in the future, so people don’t have to do this manually. Would be nice to have a global place for these kind of images.

Let me know what fails to work, or suggestions, improvements…

Screenshots

seneye04

seneye02

seneye03

seneye05

Changelog

Version 0.1

  • initial release

Resources

uid: seneye
tags: []
props:
  parameters:
    - description: Name for your fishtank, pond...
      label: Title
      name: title
      required: false
      type: TEXT
    - description: The item prefix (fe seneye001), fe everything before the _ from the model page
      label: Item
      name: item
      required: true
      type: TEXT
    - context: item
      description: An item (fe fishtank light) to be switched ON or OFF
      label: Light
      name: switchItem
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 27, 2021, 5:33:15 PM
component: f7-card
config: {}
slots:
  default:
    - component: f7-block
      config:
        style:
          align-items: start
          background: url(/static/seneyeWidget.png)
          background-repeat: no-repeat
          background-size: 100% 100%
          background-color: '=(items[props.item + "_OutofWater"].state === "ON") ? "red" : ""'
          display: flex
          flex-direction: column
      slots:
        default:
          - component: Label
            config:
              iconF7: sun_min
              style:
                color: black
                font-weight: bold
                margin: 5px
                text-shadow: 0px 0px 3px white
              text: =props.title
          - component: oh-link
            config:
              visible: =items[props.item + '_Temperature'].state !== "-"
              action: analyzer
              actionAnalyzerItems: =[props.item + '_Temperature']
              color: black
              iconF7: thermometer
              iconSize: 24
              style:
                text-shadow: 0px 0px 3px white
              text: =items[props.item + '_Temperature'].state + " °C"
          - component: f7-row
            config:
              class:
                - padding-top
                - justify-content-center
              style:
                border-top: 1px solid lightgray
          - component: oh-link
            config:
              visible: =items[props.item + '_PH'].state !== "0.0"
              action: analyzer
              actionAnalyzerItems: =[props.item + '_PH']
              color: black
              style:
                margin-left: 2px
                text-shadow: 0px 0px 3px white
              text: = "PH:" + " " + (items[props.item + '_PH'].state)
          - component: oh-link
            config:
              visible: =items[props.item + '_NH3'].state !== "0.0"
              action: analyzer
              actionAnalyzerItems: =[props.item + '_NH3']
              color: black
              style:
                margin-left: 2px
                text-shadow: 0px 0px 3px white
              text: = "NH3:" + " " + (items[props.item + '_NH3'].state)
          - component: oh-link
            config:
              visible: =items[props.item + '_NH4'].state !== "0.0"
              action: analyzer
              actionAnalyzerItems: =[props.item + '_NH4']
              color: black
              style:
                margin-left: 2px
                text-shadow: 0px 0px 3px white
              text: = "NH4:" + " " + (items[props.item + '_NH4'].state)
          - component: oh-link
            config:
              visible: =items[props.item + '_O2'].state !== "0.0"
              action: analyzer
              actionAnalyzerItems: =[props.item + '_O2']
              color: black
              style:
                margin-left: 2px
                text-shadow: 0px 0px 3px white
              text: = "O2:" + " " + (items[props.item + '_O2'].state)
          - component: oh-link
            config:
              visible: =items[props.item + '_LUX'].state !== "0.0"
              action: analyzer
              actionAnalyzerItems: =[props.item + '_LUX']
              color: black
              style:
                margin-left: 2px
                text-shadow: 0px 0px 3px white
              text: = "Lux:" + " " + (items[props.item + '_LUX'].state)
          - component: oh-link
            config:
              visible: =items[props.item + '_PAR'].state !== "0.0"
              action: analyzer
              actionAnalyzerItems: =[props.item + '_PAR']
              color: black
              style:
                margin-left: 2px
                text-shadow: 0px 0px 3px white
              text: = "PAR:" + " " + (items[props.item + '_PAR'].state)
          - component: oh-link
            config:
              visible: =items[props.item + '_Kelvin'].state !== "0.0"
              action: analyzer
              actionAnalyzerItems: =[props.item + '_Kelvin']
              color: black
              style:
                margin-left: 2px
                text-shadow: 0px 0px 3px white
              text: = "Kelvin:" + " " + (items[props.item + '_Kelvin'].state)
          - component: oh-button
            config:
              visible: =items[props.switchItem].state != "-"
              actionItem: =props.switchItem
              action: toggle
              actionCommand: toggle
              icon-f7: '=items[props.switchItem].state != "ON" ? "lightbulb" : "lightbulb_fill"'
              iconColor: yellow
              style:
                width: 100%
                height: 100%
          - component: f7-row
            config:
              class:
                - padding-top
                - justify-content-center
              style:
                border-top: 1px solid lightgray
    - component: f7-card-footer
      config:
        visible: =[props.footer]
        style:
          background-color: '=(items[props.item + "_OutofWater"].state === "ON") ? "red" : ""'
      slots:
        default:
          - component: Label
            config:
              size: 40
              text: = "Last input:" + " " + (dayjs(items[props.item + '_LastReading'].state).format("DD/MM/YY HH:mm"))
              visible: =[props.footer]
              style:
                color: grey
                background-color: '=((dayjs(items[props.item + "_LastReading"].state).diff(dayjs().startOf("day"), "days")) > 1 ? "red" : "")'
          - component: f7-link
            config:
              iconF7: '=(dayjs(items[props.item + "_SlideExpiration"].state).diff(dayjs().startOf("day"), "days")) < 5 ? "creditcard_fill" : "creditcard"'
              tooltip: = (dayjs(items[props.item + '_SlideExpiration'].state).format("DD/MM/YY HH:mm"))
              style:
                color: '=((dayjs(items[props.item + "_SlideExpiration"].state).diff(dayjs().startOf("day"), "days")) < 1 ? "red" : (dayjs(items[props.item + "_SlideExpiration"].state).diff(dayjs().startOf("day"), "days")) < 5 ? "orange" : "gray")'
              action: popover
              popoverOpen: .slidepopover
            slots:
              default:
                - component: f7-popover
                  config:
                    class:
                      - slidepopover
                  slots:
                    default:
                      - component: oh-label-card
                        config:
                          title: ="Slide Expiration"
                          label: = (dayjs(items[props.item + '_SlideExpiration'].state).format("DD/MM/YY HH:mm"))
                          footer: ="Serial:" + " " + ((items[props.item + '_SlideSerialNumber'].state))

2 Likes

Looks great - add the published tag!