Reduced Line Spacing

[Manfred53]

Hello,
I tried to reduce the line spacing in Text node to write date and time below a value and tried this:

<p style=“line-height: 50%“> <font size = 3> {{msg.payload}} <br> <font size = 1>{{msg.date}} {{msg.time}} </p>"

But it doesn't work. The line with date and time has always the same gap to the value. Has anybody an idea?

[Ranki]

Hello @Manfred53 ,

can you explain it a little bit more in detail? I assume you are using the template and not the text node, correct? Does your flow look like this?

[
    {
        "id": "88c41f99.8f601",
        "type": "inject",
        "z": "b4fa726a.49a62",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            },
            {
                "p": "date",
                "v": "msg.date",
                "vt": "str"
            },
            {
                "p": "time",
                "v": "msg.time",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "Test",
        "payload": "msg.payload",
        "payloadType": "str",
        "x": 200,
        "y": 2460,
        "wires": [
            [
                "c74e7f46.ef4b4"
            ]
        ]
    },
    {
        "id": "c74e7f46.ef4b4",
        "type": "ui_template",
        "z": "b4fa726a.49a62",
        "group": "680bc7a0.869958",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<p style=“line-height: 50%“> <font size = 3> {{msg.payload}} <br> <font size = 1>{{msg.date}} {{msg.time}} </p>\"",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 440,
        "y": 2460,
        "wires": [
            []
        ]
    },
    {
        "id": "680bc7a0.869958",
        "type": "ui_group",
        "name": "Test",
        "tab": "19c49f89.3bc7f",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "19c49f89.3bc7f",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "order": 12
    }
]

For me the spaces looks nice, but I did not really get, what your problem is; maybe a screenshot may help.

Cheers
Ranki

[Manfred53]

Hello Ranki,

At present I use the text mode and not a template. Let me explain the background: I have several battery powered analog and digital sensors on my boat to monitor the condition of several things on the boat. I developed the sensors myself and they transmit the data by LoRa protocol via a gateway to a mqtt broker on a Raspberri pi. To monitor the lithium batteries of the sensors, the sensors send the battery voltage at longer intervals. I would like to display the time of the last transmission together with the battery voltage. But I would like the lines to be closer together. Attached you find a screenshot with a "Test" widget.
Best Regards
Manfred

[hotNipi]

I think you'll need to manipulate a bit of dashboard CSS.

Overall it goes like this.

[{"id":"510773b5.7aed1c","type":"ui_text","z":"c0ddb509.b04f48","group":"93fae10c.09faa","order":6,"width":0,"height":0,"name":"","label":"Label is here","format":"<span>text first line</span><br><span>text second line</span>","layout":"row-spread","x":480,"y":1540,"wires":[]},{"id":"4dd32966.9d2668","type":"ui_template","z":"c0ddb509.b04f48","group":"93fae10c.09faa","name":"CSS","order":7,"width":0,"height":0,"format":"<style id=\"dashboard-custom-styles\">\n    .nr-dashboard-text .value {\n    font-weight: normal; \n    line-height: 14px;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":460,"y":1500,"wires":[[]]},{"id":"93fae10c.09faa","type":"ui_group","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

But you may need to do it for some widgets only...
Then you can select one by it's label value cos there is such class created

[{"id":"510773b5.7aed1c","type":"ui_text","z":"c0ddb509.b04f48","group":"93fae10c.09faa","order":6,"width":0,"height":0,"name":"","label":"Label is here","format":"<span>text first line</span><br><span>text second line</span>","layout":"row-spread","x":480,"y":1540,"wires":[]},{"id":"4dd32966.9d2668","type":"ui_template","z":"c0ddb509.b04f48","group":"93fae10c.09faa","name":"CSS","order":7,"width":0,"height":0,"format":"<style id=\"dashboard-custom-styles\">\n    .nr-dashboard-widget-Label_is_here .value {\n    font-weight: normal; \n    line-height: 14px;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":460,"y":1500,"wires":[[]]},{"id":"2dcd586e.58f578","type":"ui_text","z":"c0ddb509.b04f48","group":"93fae10c.09faa","order":6,"width":0,"height":0,"name":"","label":"Another text widget","format":"<span>text first line</span><br><span>text second line</span>","layout":"row-spread","x":490,"y":1580,"wires":[]},{"id":"93fae10c.09faa","type":"ui_group","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

[hotNipi]

But best would be to have full control over those lines so create text lines with spans and give them classes so you can style them with CSS in one place. Makes life way easier.

[{"id":"510773b5.7aed1c","type":"ui_text","z":"c0ddb509.b04f48","group":"93fae10c.09faa","order":6,"width":0,"height":0,"name":"","label":"Label is here","format":"<span class=\"firstline\">text first line</span><br><span class=\"secondline\">text second line</span>","layout":"row-spread","x":480,"y":1540,"wires":[]},{"id":"4dd32966.9d2668","type":"ui_template","z":"c0ddb509.b04f48","group":"93fae10c.09faa","name":"CSS","order":7,"width":0,"height":0,"format":"<style id=\"dashboard-custom-styles\">\n    .nr-dashboard-widget-Label_is_here .value {\n        font-weight: normal; \n        line-height: 12px;\n        text-align: right;\n    }\n    .nr-dashboard-widget-Label_is_here .value .firstline{\n        font-size:18px;\n        font-weight:bold;\n    }\n    .nr-dashboard-widget-Label_is_here .value .secondline{\n        font-size:10px;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":460,"y":1500,"wires":[[]]},{"id":"2dcd586e.58f578","type":"ui_text","z":"c0ddb509.b04f48","group":"93fae10c.09faa","order":6,"width":0,"height":0,"name":"","label":"Another text widget","format":"<span>text first line</span><br><span>text second line</span>","layout":"row-spread","x":490,"y":1580,"wires":[]},{"id":"93fae10c.09faa","type":"ui_group","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

[Ranki]

Hello @Manfred53 ,

offtopic - Funny fact: I am also using node-red on my boat as I am living on it and might have a similar setting - Maybe my node-red/ scriptable contribution might be interesiting for you, if you are using iPhone.

Back to your topic:
What does prevent you from using the template instead of textboxes and working with CSS?

Cheers
Ranki

[Manfred53]

@hotNipi
Thank you hotNipi this works perfect now.

@Ranki
Thank you for information. Which type of sensors do you use?

[Ranki]

Hello @Manfred53,

good to hear, that it is working now

I prefer sonoff devices for temperature/ humidity and power consumption. For battery information I use a victron inverter (serial/ USB) and a Toyo Solarcharger via Modbus.

Cheers
Ranki

[Manfred53]

Hallo Ranki,

Sensors with cable connection are not useful for me. I have a bigger boat, a Dominator 68S (68feet) and it is nearly impossible to find a way for the necessary cables. Most shipyards save themself empty tubes for subsequent installations. So I needed a wireless solution. First I thougt about Zigbee or Z-Wave, but then I decided for LoRa. There are cheap Lora Tx/Rx modules in China available. The rest is done with an ATMEGA328p processor. The whole thing is designed to be very energy-saving. The sensors only report when something changes. Calculated will the used Energizer lithium batteries last 12 ... 15 years.
I have it developed together with a friend, he is also boat owner. We currently have analog, digital and water sensors. Motion sensors and infrared door sensors are under development.

The sensor data are sent to an Gateway which is connected to an Raspberry pi. There run an mqtt broker, Node-Red and a VPN server for external remote access. The IP address of the used LTE router is identified by DynDNS.