CSS Challenge: Water Tank SVG Mask

Dashboard
1

Hey All, had a play this morning in adding a "Water Tank" to the ui-gauge in Dashboard 2.0 (having also recently added a Battery Gauge) - you can see the PR (and a little video demo) here

Screenshot 2024-08-10 at 11.24.35
Screenshot 2024-08-10 at 11.24.35976Ă—434 9.44 KB

The challenge I've got is applying an SVG clip-path to the text that considers both the waves and the general fill. I've currently got them as two entities, thinking I may need to modify the SVG wave to animate in height as a single entity, rather than having the <rect> and the <path>

Screenshot 2024-08-10 at 11.26.16
Screenshot 2024-08-10 at 11.26.161002Ă—462 10.4 KB

If anyone fancies a play before I come back to this on Tuesday, please feel free to fork/PR! All help is very much appreciated.

2 Likes
2

How do we install these [future] gauge types?

npm install @flowfuse/node-red-dashboard@next
npm error code ETARGET
npm error notarget No matching version found for @flowfuse/node-red-dashboard@next.
3

You need to clone/install the source from GitHub, as its not published to npm anywhere at the moment

4

Thanks for the link.

It looked complicated but I tried.
Unfortunately npm run build died out of memory (a Pi 4 with 2GB).

5

I'd expect to not need that much, but the development version is certainly more computationally expensive than our released builds

6

I uninstalled zram (which uses some memory as RAM based swap space), then it compiled.

7

To get the water tank you'll need to switch to the 1192-gauge-water-tank branch linked to the PR, then npm run build and it'll be in there.

Anytime you're changing the source CSS/Vue, just need to re-build, and itll update on your Dashboard.

8

:+1:t4:

I am initially looking at the battery gauge with the aim of making the colour continuously variable

9

It might be useful to mention @hotNipi, unless he is currently buried somewhere partially intoxicated with alcohol on a beach of some tropical island :palm_tree: :parasol_on_ground: :clinking_glasses:

1 Like
10

I'm nearby. Vacation just started. This means grandchildren and that long list of activities which I refused to read to the end. So the CSS has currently priority order Number.MIN_SAFE_INTEGER

4 Likes
11

Spent another 6-7 hours on this, finally got it working, and the wave mask then makes the number very difficult to read - abandoning and just rendering in black :smiley:

2 Likes
12

the wave mask was cool looking..... but visibility trumps cool

1 Like
13

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