Saline Bar Graph or Meter representation

[pranay reddy]

Hello any one please help me out
Can we put level representation in figure method
I have to indicate the saline solution level for the patients in the app
As the level reduces the indicator must be shown in the app
Please can any one tell me how to do that in the app
I have attached in the way I want.

[SteveJG]

You are attempting to build something like a progress bar or a single bar bar graph.  AI2 has no graphing tool (object) so developers have to be clever.

Here are several approaches you might use:

1)  Use the techniques used to develop a progress bar.  The progress bar shown in this example uses a label control (  https://groups.google.com/forum/#!searchin/mitappinventortest/progress$20bar/mitappinventortest/p4O0ibBNcdM/roQVN2ue6YUJ  ).  You would have to modify the code to work in your application of the saline level meter you are building.  Put it in a horizontal arrangement or vertical arrangement and put labels for fluid levels next to the arrangement perhaps.

2) Use a Canvas and   use the screen canvas coordinates to plot data.  Dr. Wolber's AI2 online book shows how the screen and Canvas works (  

• Chapter 17. Creating Animated Apps  )    The same techniques work to create a bar graph (a single bar in your case).   Using a Chart as a pallet, you can create the saline level fill levels using sprites of blocks (perhaps 10 of them, and place them (stack) them to show the levels or use a single rectangular sprite and vary its height..  There is a tool in the control to place text on the Chart object. 
• 3) It still might be possible to deprecated Google Chart API https://google-developers.appspot.com/chart/infographics/docs/overview  to create a simple bar graph.

Try some things.

Regards,

Steve

[pranay reddy]

can you please help me how to develop the progress bar? 

i will attach my aia file see the design process in that horizontal arrangement 2  i want 2 vertical bars for 2salines indication

and i will get the values to message twice (1) when the saline bottle is reduced to half the message will be half of the saline is completed , then in progress bar the mark should come to half

                                                             (2)then when the saline reduced to end of the bottle then the message wil be it it is about to complete and the progress bar indication should be in red color.

these are the 2 caeses. i wrote code in arduino and get the message through bluetooth. and the major concept is based on the weight of the saline bottles

i used to saline bottles 500ml and 100ml

please tell the way to proceed in progress bar 

[SteveJG]

Two possible ways to create a bar meter  or single bar histogram using existing AI2 tools:

1. Use a vertical arrangement and a label(a modified progress bar).

2. Use a Canvas and a colored sprite

Both methods work.  Here are the blocks and results for both methods demonstrated on a single Project.  I posted an aia since the chart method uses a sprite made using a drawing program (also shown as an image) and some screen settings for the example are set on the Designer.

The code looks strange?  Android and Canvas screens start at the top and are numbered downward.  Both techniques assume a bar meter with a height of 

200 pixels, so 0 - 100 %   is 0 to 200 pixels.  Scaling is manual; auto scaling could be achieved with a greater degree of complexity.  The example uses a Fixed Screen1. 

 If you use a Responsive screen, this exercise becomes more difficult.

For more info on Canvas try  http://ai2.appinventor.mit.edu/reference/components/animation.html#Canvas   and the 

diagram here in Dr. Wolber's book: http://www.appinventor.org/bookChapters/chapter17.pdf .

To finish your project, you might consult the following resources to help you learn to use the AI2 tools:  A very good way to learn App Inventor is to read the free Inventor's Manual in the AI2 free online eBook   http://www.appinventor.org/book2 ... the links are at the bottom of the Web page.  The book 'teaches' users how to program with AI2 blocks.  The book also gives you an idea of the capabilities of App Inventor 2 (AI2 cannot do everything the Java compilers like Eclipse and Android Studio can do).

There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro  and the aia files for the projects in the book are here:  http://www.appinventor.org/bookFiles  

How to do a lot of basic things with App Inventor are described here:  http://www.appinventor.org/content/howDoYou/eventHandling  .

The MIT tutorials are here:  http://appinventor.mit.edu/explore/ai2/tutorials.html

This is your project Pranay.  You have have to add the second bar meter, scale for 500 ml and 100 ml, make it look 'pretty' , make the graphing code compatible with your arduino code.  There may be better ways of doing your project.  These 'solutions' are not particularly elegant but they work.  Start trying coding things.  If you get stuck; ask again.

When you have a solution you are satisfied with, please consider posting the solution here or in a new thread so other may learn from your work.  Thanks.

Regards,

SteveJG

[pranay reddy]

sorry 

i did not understand in the aia.file 

and how does it work also, im not able to fig it out. Actually i dont know everything in mit as im new to this.help me in this project

can i explain my project once again in which way i need the saline meters please

[pranay reddy]

I attached my idea of the project in written format . I think this will be easily understood.
Can I make like that or suggest me in the new way
I will get only the message which should be read out . According to that the meter color should change . Help me out

[Italo]

Since I'm bored and I have nothing else to do on this long weekend, I took a look at your project and came up with this, which is what I understand what you are asking for. (I hope)

The sliders are only for testing purposes. When you adapt this to your system, instead of receiving the values from a slider, you will receive them from Bluetooth, I guess.

You can specify when the bars will change colors with the globals "Change_to_yellow_at" and "Change_to_red_at" in percentages. (50 = 50%, half of the saline solution container, 25 = 1/4 left in the container)

Check if it may be of any use for you. I for sure had some fun making it.

Be aware that this project is not intended to be a precise health instrument and is provided as a sample for you to modify and adapt to your needs. It's not a final solution. You WILL have to edit it and adapt it.

     

[pranay reddy]

Thanq very much :)
I will check and make changes as I want
And if I have any queries regarding this can I ask u ??
Will u please help me till I complete this project

[pranay reddy]

hi italo

i have few doubts regarding this, will you help me out please

actually what you did was a wonderful this solved my problem.

but i few which im able to get them .

1)you have put that slider right, does it automatically change according to the saline??

2) can i remove that 500ml and put a label so that i can get the message there?? and where will i get the values of bluetooth then?

3)you have put that read button and clear button ? what will they clear and read?? can i give text to speech so if click read button the message will read out

4)then, can i use that read and clear buttons for my message ? and i think u didnot put the blocks for those clear and read button am I correct . if no, can i put them

[Italo]

1) Like I said, the sliders are what I used to show you how the graphic bars receive information and shows it. You will receive that information from a different source.

2) Yes, you can remove that label. And put anything you need there. That's the purpose of my example.

3) I put those buttons there because you drew them in your hand drawing. Do with them as you please. You can even remove them, it will not affect the graphic bar.

4) Exactly. This was answered also in 3).

[pranay reddy]

Ok !!!
But how will the bars work.
What should I do them to work? :(
Sorry i may be irritating you. But Please help me till I get the required one :)

[Taifun]

probably it would be a good idea to go back one step and learn the basics first?

A very good way to learn App Inventor is to read the free Inventor's Manual here in the AI2 free online eBook   http://www.appinventor.org/book2 ... the links are at the bottom of the Web page.  The book 'teaches' users how to program with AI2 blocks.

There is a free programming course here http://www.appinventor.org/content/CourseInABox/Intro  and the aia files for the projects in the book are here:  http://www.appinventor.org/bookFiles  

How to do a lot of basic things with App Inventor are described here:  http://www.appinventor.org/content/howDoYou/eventHandling  .

Also do the tutorials http://appinventor.mit.edu/explore/ai2/tutorials.html to learn the basics of App Inventor, then try something and follow the

 Top 5 Tips: How to learn  App Inventor

You will not find a tutorial, which does exactly what you are looking for. But doing the tutorials (not only reading a little bit) help you to understand, how things are working. This is important and this is the first step to do.

Taifun

---

Trying to push the limits of App Inventor! Snippets and Tutorials from Pura Vida Apps by  Taifun.         

[Italo]

Yes, Taifun is right. May be I assumed you had a little more experince than you actually have.

The bars are updated using the procedure block I explained before. It's self explanatory if you have a basic understanding of App Inventor.
In your case, please follow the tutorials first and then you will be able to understand how to implement the example.

[pranay reddy]

hello 

i have gone through all of them learnt a lot!!

1) i am sending the values from (0 - 500 for 500ml bottle)and similarly for 100ml bottle ,for the saline level updating through my arduino code by bluetooth.

now please help me how can i use them and change or update  the level of saline 

and also im attaching my blocks once please check

MY CODE

//Saline Level Alert Program

// Hx711.DOUT - pin #A2

// Hx711.SCK - pin #A3

 

#include <Hx711.h>

#include "LedControl.h"

 

Hx711 scale(A2,A3);

int buzzer=9;

int selectPin = 8;    // select the input pin for the toggle switch

int ledPin500 =10;   // select the pin for the LED

int ledPin100 =11;

int val = 0;       // variable to store the value coming from the sensor

int volume=500;

 

LedControl lc=LedControl(5,7,6,0); // Pin 5 to Data In, 7 to Clk, 6 to LOAD(orCS)

 

void setup(){

  Serial.begin(9600);

  pinMode(buzzer,OUTPUT);

  pinMode(ledPin100, OUTPUT);  // declare the ledPin as an OUTPUT

  pinMode(ledPin500,OUTPUT);

  pinMode(selectPin,OUTPUT);

  digitalWrite(buzzer,0);

  lc.shutdown(0,false);// turn off power saving, enables display

  lc.setIntensity(0,0);// sets brightness (0~15 possible values)

  lc.clearDisplay(0);// clear screen

}

 

void loop() {

  val = digitalRead(selectPin);    // read the value from the select pin

//  Serial.println(val);

// int volume=0;

 float weight = scale.getGram();

 if(weight<0)

 {

  weight=0;

 }

  Serial.print(weight,1);

  delay(10000);

  Serial.println("");

  //Serial.print(scale.getGram(), 1);

 // Serial.println(" g");

 

if(val==0)                                                          //if((weight>=15)||val==0)

{ 

      volume=100;

      Disp_Data100();

      digitalWrite(ledPin100, HIGH);  // turn the ledPin on

      if ((weight<=160)&&(weight>=110))

       {

         // lc.setChar(0,4,'F',false);

          lc.setChar(0,3,'H',false);

          lc.setDigit(0,2,1,false);

          lc.setDigit(0,1,6,false);

          lc.setChar(0,0,'H',false);

       }

       else if ((weight<110)&&(weight>=80))

       {

         // lc.setChar(0,4,'H',false);

          lc.setChar(0,3,'H',false);

          lc.setChar(0,2,'A',false);

          lc.setChar(0,1,'L',false);

          lc.setChar(0,0,'F',false);

       }

       else if (weight<80)

       {

          lc.setChar(0,3,'L',false);

          lc.setChar(0,2,'E',false);

          lc.setDigit(0,1,5,false);

          lc.setDigit(0,0,5,false);

       }

      else if ((weight<80 && weight>77)||(weight<65 && weight>45))

        {

          digitalWrite(buzzer,HIGH);

         // lc.setChar(0,4,'L',false);

        

        

        }

     else

        {

         digitalWrite(buzzer,LOW);

        }

         

 }

else

{

    digitalWrite(ledPin100, LOW);

 }                                                            // stop the program for some time

 

if(val==1)       

 

{ 

        volume=500;

        digitalWrite(buzzer,0);

        Disp_Data500();

        digitalWrite(ledPin500, HIGH);   // turn the ledPin on

        digitalWrite(ledPin100,LOW);

        if ((weight<=555)&&(weight>=350))

       {

         // lc.setChar(0,4,'F',false);

          lc.setChar(0,3,'H',false);

          lc.setDigit(0,2,1,false);

          lc.setDigit(0,1,6,false);

          lc.setChar(0,0,'H',false);

       }

       else if ((weight<350)&&(weight>=110))

       {

        //  lc.setChar(0,4,'H',false);

          lc.setChar(0,3,'H',false);

          lc.setChar(0,2,'A',false);

          lc.setChar(0,1,'L',false);

          lc.setChar(0,0,'F',false);

       }

       else if((weight<110))

       {

         // lc.setChar(0,4,'L',false);

          lc.setChar(0,3,'L',false);

          lc.setChar(0,2,'E',false);

          lc.setDigit(0,1,5,false);

          lc.setDigit(0,0,5,false);

       }

       else if ((weight<110 && weight>105)||(weight<80 && weight>50))

          {

          digitalWrite(buzzer,HIGH);

         

            }

      else

            {

           digitalWrite(buzzer,0);

             }

 

}

else

  {

  digitalWrite(ledPin500, LOW);

  }

}

 

void Disp_Data100(){

  int ones, tens,huns;

    ones = 0;

    tens = 0;

    huns=1;

  lc.setDigit(0,7,(byte)huns,false);

  lc.setDigit(0,6,(byte)tens,false);

  lc.setDigit(0,5,(byte)ones,true);

 

lc.setChar(0,3,' ',false);

lc.setChar(0,2,' ',false);

lc.setChar(0,1,' ',false);  

lc.setChar(0,0,' ',false);

   }

 void Disp_Data500(){

  int ones,tens,huns;

    ones = 0;

    tens = 0;

    huns=5;

  lc.setDigit(0,7,(byte)huns,false);

  lc.setDigit(0,6,(byte)tens,false);

  lc.setDigit(0,5,(byte)ones,true);

 

lc.setChar(0,3,' ',false);

lc.setChar(0,2,' ',false);

lc.setChar(0,1,' ',false);  

lc.setChar(0,0,' ',false);

 }

/*net weight(full)

500ml= 555g,

100ml= 17g

 

net weight (half)

500ml= 350g

100ml= 11g

 

net weight (empty)

500ml= 10.5g to 10.2g(low buzzer) ,8g ,52g

100ml= 8g-7.7g ,6.5g ,42g

 

net weight (500ml) at threshold-1*/

 

 

 

[pranay reddy]

hello ghica 

please help me  in this app also

i wil be thanful 

[Italo]

Ghica can help you  if she wants, but maybe I can help you a little more, since I made the project for your meters screen? Is that OK?

Unfortunately, I'm not familiar with Bluetooth and how it works, so some things you will have to figure out by yourself. Other than that, I'm more than happy to help you.

As soon as you receive the value via Bluetooth, put that value in the procedure block I showed you. Maybe something like this:

Set the clock to 1000 ms (1 second) or whatever you need it to be. That means the meters will update every n milliseconds. I hope this is helpful for you to start.

Try things, find out how to test blocks yourself. That's the best and most rewarding way to learn. And show us what you come up with.

[pranay reddy]

Hello
I put the blocks in way i want for bluetooth values and the message for auto read.

The block which u gave for level updating what should i give there..

1) can i remove the block for slider in screen1 which i have rounded?

Once check my blocks for auto read and updating level , bluetooth for both the labels
1)I gave label3 for the value from bluetooth of level upadtion
2) label4 for value from bluetooth for 100 ml level updation
3) label 5 message given from bluetooth for autoread out
4) label 6 message from bluetooth for autoread out

[Ghica]

Unfortunately I do not have time the next few days.
But maybe you can explain more clearly what the problem is and attach an .aia. There are more people on this forum who understand Bluetooth.
Cheers, Ghica

[pranay reddy]

ok !!

basically this app is the saline level indicator. In which i will get the values through bluetooth into the LABEL 3  for the level updation for 500ml bottle

and into LABEL 5  is the message for the reading out automatically this is also i will get through bluetooth.

LABEL 4 for similary for 100ml bottle which i will get the values for 100ml level updation and LABEL 6 for the message reading out the value 

this is what i want and put them in the blocks format.

But what blocks i put are not working and it is showing me the warnings 

and i also put them in list index format for the spliting into labels and i think there is problem in that tooo

i dont want that slider which is used for testing can i remove that complete blocks of sliders?? 

AND MAIN IMP IS I WANT TO USE THE VALUES AND USING THE VALUES MY LEVEL INDICATOR SHOULD CHANGE.

Im posting my aia.file and blocks and desgin page please solve my problem..

[Ghica]

Look at the red triangles! You have duplicate blocks for Screen1.initialize and Clock2
No wonder nothing works. Handle this first.
Cheers, Ghica.

[pranay reddy]

if i use different clocks will it work?

and if i remove that slider blocks anything will happen to my level updation :(

and how to use the values to saline level updation 

[Italo]

Pranay, I don't understand why you keep asking the same over and over. Since I uploaded the project I said that the sliders are there as tests, just to show you how the bars update with different values. So, one more time YES! YOU CAN DELETE THE SLIDERS!

How to update the bars levels: I also showed you and explained before that in the procedure UPDATE_METER, the parameters are only 2: Meter number (1 or 2) and value received from Bluetooth for that meter. That will update the bars levels. Please read and re read the previous answers.

Honestly I don't know how else I can make it more clear. Start by fixing those duplicates Ghica pointed to you. Don't ask if this or that will work. Try it by yourself first. Don't be afraid of trying. That's how everyone here learned.

[Taifun]

[pranay reddy]

Yes sure i will do them now and put the blocks
Thank you
I feel that if i do anything again they wont work thats y im not changing what ever u give
Sorry

[pranay reddy]

hello 

i have now no errors as ghica said i removed them and i also removed slider

but my design have become like this i couldn't see the red yellow and green indication in saline level bar

and my blocks are also not working 

i am not able to understand were did i go wrong please check out

[Italo]

I see you are sending the global BytesRead to the update_meter procedure and that global is a list. That's wrong.

The procedure is not intended to receive a list. So, send only a number to it. That number is the current amount of saline solution that your Bluetooth sent you. You don't have to send a whole list.

[Italo]

Also I noticed another thing. You have the procedures setLabels, setlabel5 and setlabel6. But those procedures are never called from anywhere.

Are you aware that the purple procedure blocks are executed ONLY when they are called?

[pranay reddy]

yes now i corrected them

i call the procedure blocks too

again im getting same :(

and my saline level is not getting updated 

y did i lose those that color indication  of yellow and red green 

[Italo]

Please re read the first of my last 2 replies. You didn't fix that. You are still sending a list to the update_meter procedure.

[pranay reddy]

yes now i changed that!!

now i have a small doubt regarding that is

im sending the values from the bluetooth to the labels right 

1) so with those values will help the level update is my doubt?

2) and  to update should I give any delay in arduino code or in how much time gap should i send the values?

[Italo]

Why did you put the numbers 500 and 100 in there? That will always show 500 and 100, not the value Bluetooth is receiving.

Meter 3? There's no meter 3!

Also, is Clock3 even enabled? 

[Abraham Getzler]

You can eliminate all those if meter = 1 then this canvas else this other canvas sections by passing the matching canvas component into the procedure as a third parameter..

ABG

[pranay reddy]

If i put clock 2 it is showing me error , then what should put there

I will get the bluetooth values into the labels3 and label4 for the indication of saline level
Instead of numbers please tell how to send bluetooth values into procedure.

[Italo]

Well, you just said you are going to put the levels in label3 and label4, so put the same thing in the procedure.

[pranay reddy]

can i put like that , now what i changed in the procedure (but again i m getting run time error as i did now)

and what about the clock, i think i did wrong in the clock also

[Italo]

Use "Do It" to show what's in the labels.

[Italo]

Please look at the image attached.

1. That block is not connected.

2. What is that block for? You are setting label3 when you call the procedure setLabels. 

3. Why do you need Clock3? Why don't you put the calls to the Update_Meter at the end of the setLabels procedure and eliminate Clock3?

[pranay reddy]

2nd which u said  i used it there because, i will get the values first to label3 then i will split them and sent into the other labels 

thats why i put like that. if it wrong i will remove it

3rd i removed clock3 and put them in do it

though i put there i lost my green yellow and red indication in my level

[Italo]

But what do you have in label3 and label4? Did you receive the numbers from Bluetooth or not?

[pranay reddy]

I Dont know y my blocks are not working?

im not even receiving the values from bluetooth y

did i give wrong labels that is y my level is not upgrading??

please help me where did i go wrong i will correct my blocks and aia.file too please

did i miss any of the components required in desinger part 

but im not getting into the labels3 and label 4

[Ghica]

You should enable clock2 in Screen1.Initialize, when the BT device is connected.
Cheers, Ghica.

[pranay reddy]

Is that only one problem remaining all the blocks are correct
Will they work ghica
All labels did i give excatly
Anything else did i miss
And now the saline level will update
Now i corrected the clock2

[Italo]

That's something you have to find out Pranay. Once you make the changes, just try it. Did it work?

[pranay reddy]

Now I'm getting an error in the app
I m receiving the values in terminal app from 500 and as the saline will be decreasing I will also receive the decreasing values such that saline should reduce but that's not happening

[Italo]

The error says you are trying to get the item number 2 from a list with only 1 item. (not possible). So check why the list has only 1 item.

How many items is the list supposed to have?

[pranay reddy]

im not able to solve the error

so i thought of changing the thing. can i change the 2 meters into only one meter italo 

i can use only one meter for both the saline bottles like when i put 500ml bottle the values of that saline only bluetooth will send and when i put 100ml bottle i will receive the values of 100ml

so now in my canvas blocks what should i remove such that only one meter will there?

 

[Ghica]

I think you should answer Italos's question, otherwise there can be no progress.

It would also help if you provided a set of test-data, since we have no Bluetooth saline bottles to test with.

Cheers, Ghica.

[Italo]

Like Ghica said, we are shooting in the dark here, because we don't know WHAT and HOW is your Bluetooth sending and/or receiving the information. Only you know. May be if you explain it to us?

I know that the procedure I made draws the meter with the number you send to it, that's it. You are supossed to isolate that single number that says how much saline solution is in the bottle right now and put it in the procedure parameter. That's about it. If you can't get that number, what can we do from here? Believe me, I wish I could have one of those bluetooth devices you are using to be able to help you even further. But you need to keep trying and testing until you get it right.

If you want to use only one meter, You have to do the following: 

1. In the designer, set the arrangement that contains the whole meter 2 to invisible.

2. In the blocks: Set the bottle size in the global Meter1_MaxValue. Or a way for the user to select the size of the bottle while running the app (textbox? spinner? listpicker? you choose.)

3. Always use the update_meter procedure to send information to meter 1 only, since meter 2 will be hidden.

That's it, I think.