hi @TotallyInformation ,
Thx for the tip on the vgauge, got it working but not entirely as you posted (no offence intended)
in HTML at the location where you like the gauge:
<v-gauge
:options="barometerOptions"
width="350"
:min-value="minValue"
:max-value="maxValue"
unit= "hPa"
:value="gValue"
>
</v-gauge>
mind the min-value and max-value. This was a tip I saw in the console when copy/pasting your snippet:
[Vue tip]: Prop "minvalue" is passed to component <Anonymous>, but the declared prop name is "minValue". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "min-value" instead of "minValue".
changing your snippet to min-value gave me this in console:
[Vue warn]: Invalid prop: type check failed for prop "minValue". Expected Number with value 800, got String with value "800".
So I put a : in front an referenced it in my index.js:
var vueTST = new Vue({
el: '#vueTST',
data: {
batStatus: 0,
version: '1.0',
gValue: 0,
minValue: 800,
maxValue: 1100,
barometerOptions: barometerOpts,
},
As I have no other clue on how I could pass an 'integer' in HTML.
What I also added in HTML is this:
<script src="../uibuilder/vendor/vgauge/dist/VGauge.min.js"></script>
<!-- local JS -->
<script src="./barometer.js"></script>
<script type="module" src="./index.js"></script> <!-- Was already there just for reference where I added it -->
And in barometer.js I have:
var barometerOpts = {
angle: 0, // The span of the gauge arc
lineWidth: 0.2, // The line thickness
radiusScale: 1, // Relative radius
pointer: {
length: 0.6, // // Relative to gauge radius
strokeWidth: 0.035, // The thickness
color: '#000000' // Fill color
},
limitMax: true, // If false, max value increases automatically if value > maxValue
limitMin: true, // If true, the min value of the gauge will be fixed
colorStart: '#6F6EA0', // Colors
colorStop: '#C0C0DB', // just experiment with them
strokeColor: '#EEEEEE', // to see which ones work best for you
generateGradient: true,
highDpiSupport: true, // High resolution support
// renderTicks is Optional
renderTicks: {
divisions: 5,
divWidth: 1,
divLength: 0.7,
divColor: '#333333',
subDivisions: 10,
subLength: 0.5,
subWidth: 0.6,
subColor: '#666666'
},
staticLabels: {
font: "10px sans-serif", // Specifies font
labels: [800, 850, 900, 950, 1000, 1100], // Print labels at these values
color: "#000000", // Optional: Label text color
fractionDigits: 0 // Optional: Numerical precision. 0=round off.
},
staticZones: [
{strokeStyle: "#F03E3E", min: 800, max: 900}, // Red
{strokeStyle: "#30B32D", min: 900, max: 1000}, // Green
{strokeStyle: "#FFDD00", min: 1000, max: 1100}, // Yellow
],
};
And further in the index.js the classic way to go to act upon msg changes:
uibuilder.onChange('msg', function(msg){
console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
switch(msg.topic){
*snip* // I have more topics I subscribed to so I have cut them out for readability
case "weerstations/home/sensors/pressure" :
console.info('[indexjs:uibuilder.onChange] pressure received from Node-RED server:', msg)
vueTST.gValue = Number(msg.payload) // set gauge value (change payload to number)
break;
In the end this renders to this:
Which is already pretty close to what I'm seeking to get as a result (I guess i just need to tweak a bit with the values left and right)
Many thx again for your patience and time!
regards,
Pom
