Electricity Visualisation

This Topic is intended as a contribution and discussion for electricity visualization.

Basically it is to share what I’ have done so fare. I’m appreciate any feedback and / or contribution.

The first post is to present some basic widgets as the building blocks to start with.

A Circuit breaker cell widget
circuit_breaker
The Circuit Breaker needs the following icons to be place in …/icons/clasic

cb_state.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="40" rx="5" ry="5" width="80" height="20" style="fill:rgb(200,200,200);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>

cb_state-on.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="0" rx="5" ry="5" width="80" height="20" style="fill:rgb(200,200,200);stroke-width:2;stroke:rgb(0,0,0)" />
  <rect x="15" y="20" width="70" height="30" style="fill:rgb(200,200,200);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>

cb_state-off.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="15" y="50" width="70" height="30" style="fill:rgb(200,200,200);stroke-width:2;stroke:rgb(0,0,0)" />
  <rect x="10" y="80" rx="5" ry="5" width="80" height="20" style="fill:rgb(200,200,200);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>
uid: circuit_breaker
tags:
  - Electricity
  - Fuse
props:
  parameters:
    - default: --
      description: Circuit breaker id
      label: Circuit breaker id
      name: cbId
      required: false
      type: TEXT
    - default: ?A
      description: nominal current rating
      label: Current Rating
      name: cbCurrent
      required: false
      type: TEXT
    - default: CB Info
      description: Circuit breaker information
      label: CB Info
      name: cbInfo
      required: false
      type: TEXT
    - default: "100"
      description: circuit braker width in px (example 100)
      label: CB Width (px)
      name: cbWidth
      required: false
    - context: item
      description: the circuit breaker item
      label: Circuit Breaker Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 23, 2022, 6:44:36 PM
component: f7-block
config:
  class:
    - electric
    - circuitBreaker
  style:
    --f7-chip-font-size: =Math.round(props.cbWidth / 5 - 2) + "px"
    --f7-chip-height: =Math.round(props.cbWidth / 5) + "px"
    --f7-chip-media-font-size: 16px
    background: url(/static/circuitBreaker.svg)
    background-repeat: no-repeat
    background-size: contain
    height: =Math.round(props.cbWidth * 3) + "px"
    margin: 0px
    padding: 0px
    width: =props.cbWidth + "px"
slots:
  default:
    - component: f7-chip
      config:
        style:
          left: 3%
          position: absolute
          top: 3%
        text: =props.cbId
        tooltip: =props.cbInfo
    - component: f7-chip
      config:
        style:
          position: absolute
          right: 2%
          top: 3%
        text: =props.cbCurrent
    - component: oh-icon
      config:
        action: toggle
        actionCommand: '=(items[props.item].state == "ON") ? "OFF" : "ON"'
        actionItem: =props.item
        icon: cb_state
        iconUseState: true
        state: =items[props.item].state
        style:
          left: 0px
          position: absolute
          top: =props.cbWidth + "px"
        width: =props.cbWidth + "px"
    - component: f7-chip
      config:
        bgColor: '=(props.item) ? (items[props.item].state == "ON") ? "green" : "red" : "gray"'
        id: cbStateLabel
        style:
          bottom: 5%
          left: 10%
          position: absolute
        text: =items[props.item].state

A Wall Switch
wall_switch

uid: wall_switch_single
tags:
  - fragment
  - mosaic
  - switch_single
  - tile
props:
  parameters:
    - default: "200"
      description: the size of the tile
      label: Tile Size
      name: tileSize
      required: false
      type: TEXT
    - context: item
      description: The switch item
      label: Wall Switch
      name: wallSwitch
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 23, 2022, 7:03:11 PM
component: f7-block
config:
  class: tile
  style:
    background: rgb(180,180,180)
    font-family: Ariala
    height: =props.tileSize + "px"
    margin: 0px
    padding: 0px
    width: =props.tileSize + "px"
slots:
  default:
    - component: svg
      config:
        viewBox: 0 0 100 100
      slots:
        default:
          - component: defs
            slots:
              default:
                - component: linearGradient
                  config:
                    id: grad_on
                    x1: 15%
                    x2: 15%
                    y1: 15%
                    y2: 70%
                  slots:
                    default:
                      - component: stop
                        config:
                          offset: 0%
                          style: stop-color:rgb(180,180,180);stop-opacity:1
                      - component: stop
                        config:
                          offset: 100%
                          style: stop-color:rgb(70,70,70);stop-opacity:1
                - component: linearGradient
                  config:
                    id: grad_off
                    x1: 15%
                    x2: 15%
                    y1: 15%
                    y2: 70%
                  slots:
                    default:
                      - component: stop
                        config:
                          offset: 0%
                          style: stop-color:rgb(70,70,70);stop-opacity:1
                      - component: stop
                        config:
                          offset: 100%
                          style: stop-color:rgb(180,180,180);stop-opacity:1
          - component: rect
            config:
              height: 90%
              rx: 10
              ry: 10
              style: fill:transparent;stroke:black;stroke-width:4;opacity:0.6
              width: 90%
              x: 5
              y: 5
          - component: rect
            config:
              height: 70%
              rx: 10
              ry: 10
              style:
                fill: '=(items[props.wallSwitch].state == "ON") ? "url(#grad_on)" : "url(#grad_off)"'
                stroke: black
                stroke-width: 1
              width: 70%
              x: 15
              y: 15
    - component: oh-button
      config:
        action: toggle
        actionCommand: ON
        actionCommandAlt: OFF
        actionItem: =props.wallSwitch
        fill: false
        outline: false
        style:
          height: 70%
          left: 15%
          position: absolute
          top: 15%
          width: 70%
        text: =items[props.wallSwitch].state

An power plug (German style)
socket_de

uid: mosaic_tile_socket_de
tags:
  - fragment
  - mosaic
  - socket_de
  - tile
props:
  parameters:
    - default: "200"
      description: the size of the tile
      label: Tile Size
      name: tileSize
      required: false
      type: TEXT
    - default: Socket Label
      description: the id or name od the socket
      label: Label Text
      name: labelText
      required: false
      type: TEXT
    - default: socket information
      description: the information when the mouse is over the label
      label: Information Text
      name: infoText
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 23, 2022, 5:19:08 PM
component: f7-block
config:
  class: tile
  style:
    background: rgb(180,180,180)
    font-family: Arial
    height: =props.tileSize + "px"
    margin: 0px
    padding: 0px
    width: =props.tileSize + "px"
slots:
  default:
    - component: svg
      config:
        viewBox: 0 0 100 100
      slots:
        default:
          - component: defs
            slots:
              default:
                - component: linearGradient
                  config:
                    id: grad1
                    x1: 15%
                    x2: 15%
                    y1: 15%
                    y2: 70%
                  slots:
                    default:
                      - component: stop
                        config:
                          offset: 0%
                          style: stop-color:rgb(70,70,70);stop-opacity:1
                      - component: stop
                        config:
                          offset: 100%
                          style: stop-color:rgb(200,200,200);stop-opacity:1
          - component: rect
            config:
              height: 90%
              rx: 10
              ry: 10
              style: fill:transparent;stroke:black;stroke-width:4;opacity:0.6
              width: 90%
              x: 5
              y: 5
          - component: circle
            config:
              cx: 50%
              cy: 50%
              fill: url(#grad1)
              opacity: 0.4
              r: 35%
              stroke: black
              stroke-width: "2"
          - component: line
            config:
              style: stroke:black;stroke-width:6
              x1: 50%
              x2: 50%
              y1: 15%
              y2: 25%
          - component: line
            config:
              style: stroke:black;stroke-width:6
              x1: 50%
              x2: 50%
              y1: 75%
              y2: 85%
          - component: circle
            config:
              cx: 30%
              cy: 50%
              fill: black
              r: 5%
              stroke: black
          - component: circle
            config:
              cx: 70%
              cy: 50%
              r: 5%
              stroke: black
    - component: f7-chip
      config:
        style:
          background: lime
          left: 16%
          position: absolute
          top: 2%
        text: =props.labelText
        tooltip: =props.infoText
2 Likes

I’d love to see some screenshots

Thanks, I’ added them. May be I’ should mention that this is currently work in progres.
:+1:

Looks very promising!

Electric Wiring
Electric wiring is done depending on the consumer and needs to control them.

  • the electric consumer is connected to a wiring circuit like lights, heaters, or else.
  • the wiring circuit is controlled by one or more actuators like switch, relays or else.

From the OpenHAB perspective this can be simplified without using real world lock and feel. There are two scenarios I’m currently focusing on.

  • Human control like switching on / off lights
  • Automation control like hot water boilers or heating

Human control like switching on / off lights
This task can be simplified to one item. The item is either a switch or a control depending the real word installation and whether or not the light is controllable trough OpenHAB or just monitored.
Wiring_ui
in the example above I’ created one switch item and placed the same item 4 times on the UI.

Switch switch_kitchenLigth "Schalter Licht Küche" <electric_switch>  ["Switch", "Power"]

then I’ placed the same item several times on the UI using different icons.

config:
  imageHeight: 500
  imageWidth: 1000
  label: Groundfloor
  sidebar: true
  imageUrl: /static/groundfloor.png
markers:
  - component: oh-plan-marker
    config:
      coords: 273.7259393303759,589.695239754627
      icon: power_socket_de
      iconSize: 20
      item: wiring_test_socket1
      name: Power TV
      tooltip: Stecktose Frühstück
  - component: oh-plan-marker
    config:
      coords: 112.91867430189384,541.7723483696091
      icon: light_switch
      iconSize: 20
      item: wiring_test_switch1
      name: Kitchen Light Switch 1
      tooltip: =items.wiring_test_switch1.state
      iconUseState: false
      action: toggle
      actionItem: wiring_test_switch1
      tooltipOffsetY: -10
      actionCommand: ON
      actionCommandAlt: OFF
  - component: oh-plan-marker
    config:
      coords: 276.1224192311371,571.0134346384335
      icon: light_switch
      iconSize: 20
      item: wiring_test_switch1
      name: Kitchen Light Switch 2
      tooltip: =items.wiring_test_switch1.state
      iconUseState: false
      action: toggle
      actionItem: wiring_test_switch1
      tooltipOffsetY: -10
      actionCommand: ON
      actionCommandAlt: OFF
  - component: oh-plan-marker
    config:
      name: kitchen_light1
      icon: f7:lightbulb
      iconSize: 20
      coords: 190.08628990435759,508.47000011900343
      iconColor: '=(items.wiring_test_switch1.state=="ON") ? "lime" : "black"'
      tooltipOffsetX: 10
      item: wiring_test_switch1
    slots:
      default: []

As for the socket, it is basically the same concept except the item is a circuit breaker Contact item.

Optionally the same concept works using a layout page.

with the page code …

config:
  label: Kitchen
  sidebar: true
  layoutType: fixed
  fixedType: canvas
  imageUrl: /static/kitchen.jpg
  screenWidth: 850
  screenHeight: 567
  gridEnable: false
blocks: []
masonry: null
grid: []
canvas:
  - component: oh-canvas-layer
    config: {}
    slots:
      default:
        - component: oh-canvas-item
          config:
            x: 4
            y: 254
            h: 40
            w: 40
          slots:
            default:
              - component: widget:wall_switch_single
                config:
                  wallSwitch: wiring_test_switch1
                  tileSize: 40
        - component: oh-canvas-item
          config:
            x: 717
            y: 268
            h: 40
            w: 40
          slots:
            default:
              - component: widget:wall_switch_single
                config:
                  wallSwitch: wiring_test_switch1
                  tileSize: 40
        - component: oh-canvas-item
          config:
            x: 289
            y: 135
            h: 40
            w: 40
          slots:
            default:
              - component: f7-icon
                config:
                  f7: lightbulb
                  size: 40
                  tileSize: 40
                  color: '=items.wiring_test_switch1.state=="ON" ? "lime" : "gray"'
        - component: oh-canvas-item
          config:
            x: 320
            y: 71
            h: 40
            w: 40
          slots:
            default:
              - component: f7-icon
                config:
                  f7: lightbulb
                  size: 40
                  color: '=items.wiring_test_switch1.state=="ON" ? "lime" : "gray"'
                  tileSize: 40

Automation control like hot water boilers or heating

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.