Uibuilder include component

General
10

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:
image
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