I am unable to make responsive gauge or ui_template

General
,
22

Not really a problem, it is just that the code you shared is irrelevant as far as I can tell?

This is all HTML and CSS stuff rather than uibuilder. And much depends on how responsive the gauge library is.

The examples shared earlier create the gauge but assume a given size. That's because the gauge library seems to want a set size. But I've not played with it to see if it can be more flexible in sizing, you should read through their docs to find out and have a play yourself.

Nesting divs inside each other is standard HTML so not a problem. Sizing of HTML elements is mostly down to CSS so you might want to do some reading up of that. uibuilder can help with all of that but with the current version, you mostly still need to know a bit of HTML and CSS to get by.

23 
// @ts-nocheck

'use strict'

// https://github.com/Mikhus/canvas-gauges
var gauge = new RadialGauge({
    renderTo: 'gauge-radial-1',
    highlights: [
        { "from": 0, "to": 60, "color": "rgba(0,255,0)" },
        { "from": 60, "to": 80, "color": "rgba(255,255,0)" },
        { "from": 80, "to": 100, "color": "rgba(255,0,0)" }
    ],
    width: 300,
    height: 300,
    units: "Ā°C",
    minValue: 0,
    maxValue: 100,
    majorTicks: [0,10,20,30,40,50,60,70,80,90,100],
    minorTicks: 10,
    strokeTicks: true,
    colorPlate: "#fff",
    borderShadowWidth: 0,
    borders: false,
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needlCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 1500,
    animationRule: "linear",
    valueBox: true,
    valueInt: 2,
    valueDec: 2,
}).draw()
// var gauge = new LinearGauge({
//     renderTo: 'gauge-radial-1'
// }).draw()

// Listen for incoming messages from Node-RED
uibuilder.onChange('msg', function(msg) {
    // Dump the msg as text to the "msg" html element
    const eMsg = $('#msg')
    if (eMsg) eMsg.innerHTML = uibuilder.syntaxHighlight(msg)

    gauge.value = msg.payload
    gauge.update({
        title: msg.topic
    })
})

here width and height is not getting responsive as per device i am using could you suggest how to make it responsive width and height

24

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