I have just done this:
It works well.
I did a JavaScript transform to get the percentage of gas left. I did hard code the full weight and the empty weight but that could be done via an item I suppose.
Here is the transform:
(function(data) {
//Example: if the weight is 40kg which is input weight of the tank and gas (not a full tank)
//Full tank is 78kg empty is 33kg
var percent100=78
var percent0=33
//if the input is less than 33 then default it to 33 to make the reading work
if (input < percent0){
percent0=0
}
//First, find the difference between 100% and 0%: 78kg - 33kg = 45kg
var difference=(percent100 - percent0) //45kg
//Then, find the difference between 40kg and 33kg (0%): 40kg - 33kg = 7kg
var difffrom0=(input - percent0) //7kg
//Now, divide the difference by the total range and multiply by 100:
//(7kg / 45kg) x 100 = 15.56%
var returnValue=parseFloat((difffrom0/difference)*100).toFixed(1)
// var returnValue = "String has " + data.length + " characters"
return returnValue
})(input)
I 3d printed the housing for the weight sensors HX711 and 3d printed the wifi enclosure.
Here is the screenshot on the phone:
Here is the set up:
Here is the gas bottle widget. The gas level changes to red when below 10%
uid: gasbottleWidget
tags: []
props:
parameters:
- description: Title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Item that contains the level in %
label: Level Item
name: levelItem
required: true
type: TEXT
- default: red
description: "Empty colour: red, blue,... or rgb(200,10,65) or '#ff0066'"
label: Low colour
name: lowColour
required: false
type: TEXT
- default: blue
description: "Full colour: red, blue,... or rgb(200,10,65) or '#ff0066'"
label: Full colour
name: fullColour
required: false
type: TEXT
- default: "10"
description: "Full colour: red, blue,... or rgb(200,10,65) or '#ff0066'"
label: Low level percent where colour changes
name: lowLevel
required: false
type: DECIMAL
- description: Text label under the tank
label: tankLabel
name: tankLabel
required: false
type: TEXT
- default: 200px
description: Height in px (needed for responsive layout)
label: Height
name: height
required: false
type: INTEGER
parameterGroups: []
timestamp: Aug 10, 2024, 9:31:49 PM
component: f7-card
config:
outline: true
title: =props.title
slots:
default:
- component: f7-block
config:
style:
display: flex
height: =props.height
justify-content: center
slots:
default:
- component: svg
config:
viewBox: 0 0 80 230
xlmns: http://www.w3.org/2000/svg
slots:
default:
- component: text
config:
content: =items[props.levelItem].state+'%'
fill: =themeOptions.dark=='dark'?'white':'black'
text-anchor: middle
x: 40
y: 15
- component: defs
slots:
default:
- component: linearGradient
config:
comment: the id can only be used once in a page; so we have to make it unique if
we want to use the widget more than once
id: ='Grad'+props.levelItem
x1: 0%
x2: 0%
y1: 100%
y2: 0%
slots:
default:
- component: stop
config:
comment: in order to have a hard line, both stops must use the same offset
offset: =items[props.levelItem].state+'%'
stop-color: =((Number.parseFloat(items[props.levelItem].state))<=props.lowLevel)?(props.lowColour||'red'):(props.fullColour||'blue')
- component: stop
config:
comment: the upper part is transparent stop-color rgba(0,0,0,0)
offset: =items[props.levelItem].state+'%'
stop-color: rgba(0,0,0,0)
- component: animate
config:
attributeName: y2
dur: 1s
from: 100%
repeatCount: 1
to: 0%
- component: path
config:
d: M 0,20 q 10,0 10,10 l 0 160 q 0,10 10,10 l 40,0 q 10,0 10,-10 l 0,-160 q
0,-10 10,-10 M 10,110 l 20,0 M 10,65 l 10,0 M 10,155 l
10,0
fill: ='url(#Grad'+props.levelItem+')'
stroke: =themeOptions.dark=='dark'?'white':'black'
stroke-width: 2
- component: text
config:
content: =props.tankLabel
fill: =themeOptions.dark=='dark'?'white':'black'
text-anchor: middle
x: 40
y: 220
I was going to do both gas bottles but I may just use the single set up and move the bottles myself rather than the gas people coming and dropping the bottles hard onto the scales. I have put lifting bolts on the scale frame so it lifts the sensors up off the ground when I replace the bottles.
Hope some one finds this useful.
