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
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
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)
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
