Change font-size of unit value in artless gauges

General
1

Hey everyone,

I'm a node-red beginner who wants to change the font-size of the "unit" which is displayed under the value in a gauge, because for my taste the size is too small. (See pictures)
I didn't find a post the could solve my problem. I exported my Node-Red Data and tried to change this JSON file. What am I doing wrong?

JSON File: I edited the "unit" part. by default it was: "unit": "°C",
JSON4|690x418

hm, I'm not allowed to post more than 2 pictures in one post. so here is the necessary part:

        "id": "8cd146bd.21bf28",
        "type": "ui_artlessgauge",
        "z": "ccd89f38.3c44d",
        "group": "70fb931.dfc146c",
        "order": 12,
        "width": 5,
        "height": 5,
        "name": "",
        "icon": "fa-thermometer-empty",
        "label": "Temperature",
	"fontSize": 100,
        "unit": [
			{"unit": "°C"},
			{"fontSize": 200}

		],
        "layout": "radial",
        "decimals": "2",
        "differential": false,
        "minmax": true,
        "colorTrack": "#000000",
        "style": "",
        "colorFromTheme": true,
        "property": "payload",
        "sectors": [

How it looks in the dashboard:

Niklas2
Niklas21920×1164 129 KB

Gauge Node Settings:

JSON2
JSON21920×1164 277 KB

I look forward to your help :slight_smile:

best regards
Niklas!

2

Update to version 0.3.0. The unit field is made bigger by default.

If still not enough, if your dashboard version is 2.24.2 or higher, you can override the CSS of gauge texts.
There is 3 font sizes used in gauge, you can change them individually. But be aware, if you use different layout sizes for the artless-gauges you are using, you'll need to target them individually because of the artless-gauge tries to figure out best font sizes for different size of layout. (2x2 font sizes are smaller than 4x4)

image
image882×622 23.6 KB

3

Continuing the discussion from Change font-size of unit value in gauges:

Thanks a lot for the fast answer! :slight_smile:

I changed all you said and it works fine for me, but is there a way to move the text? In the following picture I exaggerated a bit to show you what I mean :smiley:
I already tried to change the box model (padding, margin, etc.). (I also changed colors btw)

...and how can I target the gauges individually? I put the template node just in front of one artlessgauge node.

Nodered
Nodered1920×1164 158 KB

best regards
Niklas

4

As you want to override something which is not meant to be changed I see you'll need to have some knowledge in prior to be able to do it.

First of all, I'm not going to add any easy to use configuration options for artless-gauge to change layout that much.
But there is of course way to achieve what you are after. And again it takes to manipulate the CSS.

The ui_template where you change the CSS can stand alone and does not need to be connected to any node. The styles you are overriding will be added to site head.

Or how to target specific element in gauge?

Here's the tools and how to use. Chrome DevTools  |  Chrome for Developers

And the CSS selectors How and Why https://www.w3schools.com/cssref/css_selectors.asp

That is quite of stuff to be learned and for sure it takes a time. But practice and ask dedicated questions if things don't move in direction you want.

5

yeah, I literally just started with node-red/html/css.
thanks for your help so far, you really helped me out though :slight_smile:

6

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