Visible water level

Questions about Thunkable
1

Hi!
I want to display a water level like 75%.
for example:
grafic
The level and the % value should change dynamic.
It will be great when it is possible that the surface will be animated.
Hope someone can help me and can give me an idea how I can solve it.
kindly regards.

2

Hi @haiflosse, I like your icon design - is it something you created yourself?

You can adapt the logic from this tutorial, but use height rather than width:

1 Like
3

This could be done with a bar chart. Have you ever seen another chart like this before?

[edit-]

This code plus the webviewer should make what you want, right?

And here

1 Like
4

Thanks for the answer.
The http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6 works fine.
Can anybody help me how I can add under the liquid an further text for example date.
kindly regards again

5

Can you show an image of what that would look like?

6

Thanks for the answer.
Here an example:
liquid
Kindly regards

7

Wouldn’t you just put the water level graphic inside a column and then put a label under it also inside the column? And then use the date blocks (e.g. click on “hour” in the “current hour” block and select “day of the week” etc.) in the Device drawer to populate the label?

1 Like
8

Have you looked at the documentation. There is probably a data label option or property to be set.

9

Thanks for the answers.
I couldn’t find anything in the documentation.
I try now a table:

<table width="20%"><tr>
<td><svg id="fillgauge1" height="250" onload="gauge1.update(<?php echo $p; ?>);"></svg></td></tr>
<tr><td style="text-align: center;" ><?php echo $row['datum']; ?></td></tr>
</table>

This works…
kindly regards

1 Like
10

Wish I understood php!

Sorry. I can help you with this in JS.

I’ve used jQuery to append (overlay) a div with text elements on top of a chart. I think C3JS allows for a radial/gauge chart with a title property

What charting library are you using?

11

Thanks for your answer.
But I don’t understand what you mean.

Can anybody help me how I can zoom the website automatic to the maximum width and hight in the webviewer object.
kindly regards