UTFT Create Bars

Hi
Is anyone know a good library or some functions or classes
To create graphs and Bars for for displaying temp or any analog signals
Somthing simple with examples…
I need to create something like the picture i attached…
But my coding skiils is limited
Im working with the UTFT lib and with ILI9341 driver
(Not the GFX)
Thanks!!!

Go on. You take a piece of paper. Copy out the diagram. (Incidentally, it looks like a GFX program)

You draw in setup():

  1. Rectangle in lilac.
  2. Scale gradations in white
  3. Scale numbers in white text in small font
  4. Message at the bottom in big Font

You draw in loop():
5. Value in big font at the top
6. Filled rectangle in lilac scaled to Value for the bar
7. Filled rectangle in purple for the empty area.

Yes, you can turn it into a re-usable function e.g. with parameters: x, y, w, h, scale, message, value.

But quite honestly, your paper diagram is "good enough".

You should be able to find GFX code that is re-usable. It is not difficult to re-write for UTFT methods.
You set color separately
Rectangles are x1, y1, x2, y2 instead of x, y, w, h, color

Note that your JPEG has a changing value e.g. 506 into 507.
You draw the Value with foreground and background colors.

David.

David i love you! I will try and post if something will compile

People have forgotten about pencil and paper.

You can do all your "design" work away from the PC.
Sit down with a nice cup of tea and a biscuit. And possibly a calculator.

David.

OK
this is what i was able to create (and it take me alot of time)
i really try to make it flexible so eventually it will becabe a function
so far im happy with the result
but know im stack

the goal for know is to add a varible that will acale this graph with correct numbers
so if i will decide i want a range from 0 - to 100 with 5 steps it will automatc will scale the
bar

so please help :slight_smile:

#include <UTFT.h>
#include <URTouch.h>

// Declare which fonts we will be using
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t Dingbats1_XL[];

UTFT          myGLCD(ILI9341_16,38,39,40,41);
URTouch        myTouch(6,5,4,3,2);


#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define GREY 0xEEEF


  double x = 100; // x position
  double y = 50; // y position 
  double w = 20; //  width
  double h = 150; // Hight
  double inc = 5; // scale devision between high and low
  double loval =0; // low value for graph
  double hival = 50; // max value for graph
  unsigned int textcolor = CYAN;
  String label = "Temp"; // lable  for bottom
  unsigned int bordercolor = WHITE;

  void setup()
    {
     myGLCD.InitLCD();
     myGLCD.clrScr();
     myGLCD.setFont(SmallFont);
     myTouch.InitTouch();
     myTouch.setPrecision(PREC_MEDIUM);
  
     myGLCD.drawRect(x , y, x+w, y+h);    
     myGLCD.setColor(textcolor);
     myGLCD.setFont(SmallFont);
     myGLCD.print(label,x-3,y+h+4);
     myGLCD.setColor(WHITE);
 
     for (int i=y; i <= y+h; i+=4)
       myGLCD.drawLine(x-10, i, x, i);
    for (int z =y; z <= y+h; z+=20)
      myGLCD.drawLine(x-15, z, x, z);
}

void loop()
{  

}

I have written integer-only functions.

You can see that it gets very fiddly when you don’t know how many gradations or the overall scale.
Yes, double loval, hival, inc, val would probably be sensible parameters.
x, y, w, h are always going to be integers.

Life gets very complicated when you have lots of global variables.

#include <UTFT.h>
#include <URTouch.h>

// Declare which fonts we will be using
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t Dingbats1_XL[];

//UTFT          myGLCD(ILI9341_16,38,39,40,41);
UTFT          myGLCD(SSD1289, 38, 39, 40, 41);
URTouch        myTouch(6, 5, 4, 3, 2);


#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define GREY 0xEEEF


double x = 100; // x position
double y = 50; // y position
double w = 20; //  width
double h = 150; // Hight
double inc = 5; // scale devision between high and low
double loval = 0; // low value for graph
double hival = 50; // max value for graph
unsigned int textcolor = CYAN;
String label = "Temp"; // lable  for bottom
unsigned int bordercolor = WHITE;

void drawScale(int x, int y, int w, int h, int scale, char *label)
{
    char buf[10];
    int prec = strlen(itoa(scale, buf, 10));
    int inc = scale / 10;
    myGLCD.setFont(SmallFont);
    myGLCD.setColor(WHITE);
    myGLCD.drawRect(x , y, x + w + 1, y + h + 1);
    myGLCD.print(label, x, y + h + 4);
    for (int val = 0; val <= scale; val += inc) {
        int scaled = map(val, 0, scale, 0, h);
        myGLCD.drawLine(x + w + 2, y + h + 1 - scaled, x + w + 5, y + h + 1 - scaled);
        myGLCD.printNumI(val, x + w + 6, y + h - scaled - 6, prec);
    }
}

void drawVal(int x, int y, int w, int h, int scale, int val)
{
    char buf[10];
    int prec = strlen(itoa(scale, buf, 10));
    int scaled;
    myGLCD.setFont(SmallFont);
    myGLCD.setColor(WHITE);
    myGLCD.printNumI(val, x, y - 24, prec);
    scaled = map(val, 0, scale, 0, h);
    myGLCD.setColor(BLUE);
    myGLCD.fillRect(x + 1, y + 1, x + w, y + h - scaled);
    myGLCD.setColor(MAGENTA);
    if (scaled > 0)
        myGLCD.fillRect(x + 1, y + 1 + h - scaled, x + w, y + h);
}

void setup()
{
    myGLCD.InitLCD();
    myGLCD.clrScr();
    myGLCD.setFont(SmallFont);
    myTouch.InitTouch();
    myTouch.setPrecision(PREC_MEDIUM);

    drawScale(x, y, w, h, 50, "Temp");
}

int val;
void loop()
{
    val = random(0, 50);
    drawVal(x, y, w, h, 50, val);
    delay(200);
}

David.

David you are my star i really appreciate your help it work like a dream!!
one last thing…
if i want to map a float value to this beutiful bar chart
whatdo i need to change?
thanks again for your great great help i hope some day my coding skills will improved and i will be able to help others like you did to me!

Hi again the bar is working perfect but when i try to make changes so the scale will be in floats
Lats say between 0- 1 and each level will be 0.1
Everything is geting crazy most of the time the values dissapear what am i missing?

i change the map function to float
and the varibles to double
and everything become crazy… :confused:

#include <UTFT.h>
#include <URTouch.h>

// Declare which fonts we will be using
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t Dingbats1_XL[];

UTFT          myGLCD(ILI9341_16,38,39,40,41);
//UTFT          myGLCD(SSD1289, 38, 39, 40, 41);
URTouch        myTouch(6, 5, 4, 3, 2);


#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define GREY 0xEEEF


double x = 30; // x position
double y = 30; // y position
double w = 10; //  width
double h = 180; // Hight
double inc = 5; // scale devision between high and low
double loval = 0; // low value for graph
double hival = 50; // max value for graph
unsigned int textcolor = CYAN;
String label = "Temp"; // lable  for bottom
unsigned int bordercolor = WHITE;

double mapf(double val, double in_min, double in_max, double out_min, double out_max) {
    return (val - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}


void drawScale(double x, double y, double w, double h, double scale, char *label)
{
    char buf[10];
    double prec = 10;
    double inc = scale / 10;//100
    myGLCD.setFont(SmallFont);
    myGLCD.setColor(WHITE);
    myGLCD.drawRect(x , y, x + w + 1, y + h + 1);
    myGLCD.print(label, x, y + h + 4);
    for (double val = 0; val <= scale; val += inc) {
        double scaled = mapf(val, 0, scale, 0, h);
        myGLCD.drawLine(x + w + 2, y + h + 1 - scaled, x + w + 5, y + h + 1 - scaled);
        myGLCD.printNumF(val, x + w + 6, y + h - scaled - 6, prec);
    }
}

void drawVal(int x, int y, int w, int h, double scale, double val)
{
    char buf[10];
    int prec = strlen(itoa(scale, buf, 10));
    int scaled;
    myGLCD.setFont(SmallFont);
    myGLCD.setColor(WHITE);
   myGLCD.printNumF(val, x, y - 24, prec);
    scaled = map(val, 0, scale, 0, h);
    myGLCD.setColor(BLACK);
    myGLCD.fillRect(x + 1, y + 1, x + w, y + h - scaled);
    myGLCD.setColor(GREEN);
    if (scaled > 0)
        myGLCD.fillRect(x + 1, y + 1 + h - scaled, x + w, y + h);
}

void setup()
{
    myGLCD.InitLCD();
    myGLCD.clrScr();
    myGLCD.setFont(SmallFont);
    myTouch.InitTouch();
    myTouch.setPrecision(PREC_MEDIUM);

    drawScale(x, y, w, h, 1, "Temp");
}

double val;
void loop()
{
    val = random(0, 3);
    drawVal(x, y, w, h, 1, val);
    delay(500);
}

You created a f-p version of the map() function ok.

But you should check the arguments of the UTFT methods. printNumF() and printNumI() have different arguments and in different order.

Also, you can create random f-p values by simply scaling a big random integer. Look at my “corrections” by search for “kbv”.

#include <UTFT.h>
#include <URTouch.h>

// Declare which fonts we will be using
extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t Dingbats1_XL[];

UTFT          myGLCD(ILI9341_16,38,39,40,41);
//UTFT          myGLCD(ILI9486, 38, 39, 40, 41);
//UTFT          myGLCD(SSD1289, 38, 39, 40, 41);
URTouch        myTouch(6, 5, 4, 3, 2);


#define BLACK 0x0000
#define BLUE 0x001F
#define RED 0xF800
#define GREEN 0x07E0
#define CYAN 0x07FF
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define GREY 0xEEEF


double x = 30; // x position
double y = 30; // y position
double w = 10; //  width
double h = 180; // Hight
double inc = 5; // scale devision between high and low
double loval = 0; // low value for graph
double hival = 50; // max value for graph
unsigned int textcolor = CYAN;
String label = "Temp"; // lable  for bottom
unsigned int bordercolor = WHITE;

double mapf(double val, double in_min, double in_max, double out_min, double out_max) {
    return (val - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}


void drawScale(double x, double y, double w, double h, double scale, char *label)
{
    char buf[10];
    double prec = 2;  //.kbv
    double inc = scale / 10;//100
    myGLCD.setFont(SmallFont);
    myGLCD.setColor(WHITE);
    myGLCD.drawRect(x , y, x + w + 1, y + h + 1);
    myGLCD.print(label, x, y + h + 4);
    for (double val = 0; val <= scale; val += inc) {
        double scaled = mapf(val, 0, scale, 0, h);
        myGLCD.drawLine(x + w + 2, y + h + 1 - scaled, x + w + 5, y + h + 1 - scaled);
        myGLCD.printNumF(val, prec, x + w + 6, y + h - scaled - 6); //.kbv
    }
}

void drawVal(int x, int y, int w, int h, double scale, double val)
{
    char buf[10];
    int prec = strlen(itoa(scale, buf, 10));
    int dec = 2; //2 decimal places .kbv
    int scaled;
    myGLCD.setFont(SmallFont);
    myGLCD.setColor(WHITE);
    myGLCD.printNumF(val, dec, x, y - 24); //
    scaled = mapf(val, 0, scale, 0, h);  //.kbv
    myGLCD.setColor(BLACK);
    myGLCD.fillRect(x + 1, y + 1, x + w, y + h - scaled);
    myGLCD.setColor(GREEN);
    if (scaled > 0)
        myGLCD.fillRect(x + 1, y + 1 + h - scaled, x + w, y + h);
}

void setup()
{
    myGLCD.InitLCD();
    myGLCD.clrScr();
    myGLCD.setFont(SmallFont);
    myTouch.InitTouch();
    myTouch.setPrecision(PREC_MEDIUM);

    drawScale(x, y, w, h, 2.0, "Temp");   //.kbv set scale
    //    while (1);
}

double val;
void loop()
{
    val = 0.01 * random(0, 100);  //.kbv
    drawVal(x, y, w, h, 2.0, val);  //.kbv set same scale
    delay(500);
}

I suggest that you think carefully when designing a function. There is little point in making x, y, w, h double. They are always integer values.

In my initial reply, I said: just translate Kris Kasprzak’s GFX functions to UTFT.
I did that. I could post if you want. Kris’s functions suffer from inappropriate doubles and too MANY arguments. But you can adapt for yourself.

David.

THANKS!!!!!!!!

THANKS AGAIN DAVID