Progress bars using realtime data

need to represent these values as progress bars on my app 39 is 39 %.92 is 92% these values change in Realtime obviously I'm looking to create a progress bar for each to display the percentage of the bin level and weight i had the level percentage working a while ago but have changed the firebase data path and now cant get working any help welcome thank you

Please show your relevant blocks

i cant show every block in that as there's over 1000 but il show beginning and end I'm reading from ultrasonic database path and it constantly says full instead of going up and down the percentages it should only say full if over 95%

Looks like you are doing it the (very) hard way !

How many different values are you testing for for each sensor with a blockset to go with it ?

Are you getting values back for weight and percentage when the data changes ? Just show these in a label without trying to do anything else

What's in your Bucket?

The value you want is two levels deep, and you are testing for a tag a level above the tag you want.

Assuming you just put numbers in the Firebase values, you can just do some division and multiplication on the value (if it is a number) to map it into Canvas1.Width for your progress bar.

bar width in px = Canvas1.Width * value / 100

i have nothing in project bucket should i?

i know there must be an easier way ive 4 or 5 blocks for every percent it goes up

What is in the tag and what is in the value?

We can't work blind.

Use maths to calculate the progress width from the returned value

Use a "listener" procedure to set the Full - Half-Full - Empty label

Screenshot 2024-01-18 182258

this seems to have fixed the issue i had initially....if any of you could supply a few blocks showing a way of how to reduce the number of blocks i need to get this working i would be extremely grateful I'm very knew to this as you can probably tell

currently im useing over 100 if else statements which is not ideal

Are the two values related, or need to interact with each other, that is, if a heavy item, but small in size, and if so does one win over the other e.g. is there a max weight ?

ive the max weight in my esp32 code set to 1kg for testing so for this progress bar it would need to go up 1% every 10 grams..the 2 values are not related they are both measured and read independent of each other just using same microcontroller. i literally just want to display the percentage they are to being full or too heavy

the weight progress bar in that picture is merely place holder ive put in myself its not reading anything the level progress bar is being read from firebase now

Here is something you can play around with. It is not cumulative, but you should get the idea.

fullEmpty.aia (4.1 KB)


Your formula for width is 4 * value, juding from your examples.

To reduce block count, you can use a descending if/then/elseif ladder for the colors and text, based on comparison of value against the step boundaries ...

If value >= 90 then
else if value >= 50 then
  half full
else if value >= 25 then
  quarter full

(use your own boundary values)