Text Orientation

[A Curious Dude]

Hey all,

I'm trying to get two different orientations of text to draw a graph like so:

I am wondering how I can achieve such a result so I can get the x axis title orientated horizonally and the y-axis title orientated vertically.

Regards,

A Curious Dude

[jamesbowman]

There is no direct support in the hardware for sideways text.

But there are ways of doing it using a bitmap. If the vertical text is always the same, you can just use a bitmap image of the text.

[A Curious Dude]

Thank you James Bowman,

I have a question is there a way to use bitmaps without using the asset converter or SD card could I just create an asset array for the bitmap image?

Regards,

A Curious Dude

[jamesbowman]

Yes, it is possible, with a little code.

Am adding this to the GD library right now.


github.com/jamesbowman/gd2-lib/issues/11

[jamesbowman]

OK, the latest Gameduino2 library can now draw text at any angle.



You use Bitmap objects - which are a new feature of the GD2 library.
Each bitmap gets initialized with "fromtext". Bitmaps can be drawn at any angle - the implementation of "draw()" does all the fiddly math.

#include <EEPROM.h>
#include <SPI.h>
#include <GD2.h>

Bitmap hello;
Bitmap world;

void setup()
{
 GD.begin();

 hello.fromtext(31, "hello");
 world.fromtext(31, "world");
}

int angle = DEGREES(0);

void loop()
{
 GD.Clear();

 int x = GD.w / 2;
 int y = GD.h / 2;

 GD.ColorRGB(0x008080);
 hello.draw(x, y, angle);

 GD.ColorRGB(0xffa500);
 world.draw(x, y, -angle);

 angle += DEGREES(1);

 GD.swap();
}


And to answer the original question, here is a small chart:



#include <EEPROM.h>
#include <SPI.h>
#include <GD2.h>

Bitmap title, xaxis, yaxis;

void setup()
{
 GD.begin();

 title.fromtext(30, "This is the Chart Title");
 xaxis.fromtext(27, "This is the X axis title");
 yaxis.fromtext(27, "This is the Y axis title");
}

void loop()
{
 GD.ClearColorRGB(0xffffff);
 GD.Clear();

 GD.ColorRGB(0x000000);
 title.draw(240, 30);
 yaxis.draw( 20, 136, DEGREES(270));
 xaxis.draw(240, 250);

 GD.Begin(LINE_STRIP);
 GD.LineWidth(24);
 for (int x = 50; x < 440; x += 20) {
   int y = 255 - (x / 2 + random(20));
   GD.Vertex2ii(x, y);
 }
 GD.swap();
}


[tftlcdcyg]

Great work James!

One question: Is it possible to put an image like background together the text in angle?

[jamesbowman]

Yes, you can can have a background as well - here the 'background' is loaded from SDcard file "tree.jpg":



#include <EEPROM.h>
#include <SPI.h>
#include <GD2.h>

Bitmap background, title, yaxis, xaxis;

void setup()
{
 GD.begin();

 background.fromfile("tree.jpg");
 title.fromtext(30, "This is the Chart Title");
 xaxis.fromtext(27, "This is the X axis title");
 yaxis.fromtext(27, "This is the Y axis title");
}

void loop()
{
 GD.ClearColorRGB(0xffffff);
 GD.Clear();

 GD.ColorA(144);
 background.draw(GD.w / 2, GD.h / 2);
 GD.ColorA(255);

 GD.ColorRGB(0x000000);
 title.draw(240, 30);
 yaxis.draw( 20, 136, DEGREES(270));
 xaxis.draw(240, 250);

 GD.Begin(LINE_STRIP);
 GD.LineWidth(24);
 for (int x = 50; x < 440; x += 20) {
   int y = 255 - (x / 2 + random(20));
   GD.Vertex2ii(x, y);
 }
 GD.swap();
}


[tftlcdcyg]

THx James!.

I has modified your library in order to work with an external SD reader (with SdFat library) on STM32F429ZI-DISCO and a TFT FT813".


#include <GD2UB.h>

Bitmap background, SaidHello;

int PIx=0, VX=-10, velP=VX, AvanceC=1;

void setup()
{
 GD.begin();
 background.SDfromfile("F429c.jpg");
 SaidHello.fromtext(31, "FT8XX on STM32F");
 espera();
}

int ANG=0;
int minX = 0, minY = 0;
int maxX = 800 - minX, maxY = 480 - minY;
int startX = maxX / 2, startY = maxY / 2;
int deltaX = 2, deltaY = 2;

void loop()
{
 ANG = ANG + 1;
 if (ANG>=360){ANG=0;}
  startX = startX + deltaX;   startY = startY + deltaY;
  if (startX >= maxX)
      deltaX = -deltaX;
  if (startX <= minX)
      deltaX = abs(deltaX);
  if (startY >= maxY)
      deltaY = -deltaY;
  if (startY <= minY)
      deltaY = abs(deltaY);

 GD.Clear();
   background.draw(GD.w / 2, GD.h / 2);
   GD.ColorRGB(0xff0000); SaidHello.draw(startX, startY, DEGREES(ANG));
   Cortina();
 GD.swap();
}

void espera()
{
 GD.ClearColorRGB(0xffffff); //fondo de pantalla
 GD.Clear();
 GD.ColorA(255);
 GD.ColorRGB(0x000000); GD.cmd_text(GD.w / 2, GD.h / 2, 27, OPT_CENTERX, "Iniciando sistema...");
 GD.swap();
}

void Cortina()
{
if(velP<1){PIx=PIx+velP;  if(PIx<=-405){velP=0;}}
if(velP>1){PIx=PIx+velP;  if(PIx>=0){velP=0;}}

GD.SaveContext();
  GD.ColorRGB(0x000000);   GD.LineWidth(1 * 16);
  GD.Begin(RECTS);
   GD.Vertex2f((-5) * 16, 0* 16);  GD.Vertex2f((((GD.w-1)/2)+PIx) * 16, (GD.h-1) * 16);
   GD.Vertex2f(((GD.w/2)-PIx) * 16, 0* 16);  GD.Vertex2f((((GD.w-1)/1)+5) * 16, (GD.h-1) * 16);
GD.RestoreContext();
}


Best Regards!

[tftlcdcyg]

Hello again!.

The modifications in order to see it the text in angle looks cool. Curiously this effect works great in FT813 screen with an external SD reader; but in screens FT80X like the gameduino 2 or FT801 from Riverdi, the text not it display good.

The FT813 runs on STM32F429ZI-DISCO. The gameduino 2 on Arduino Due and the FT801 on Teensy 3.6. This is the issue on FT80X screens.

FT810 (left) and Gameduino 2 shield (right) 


FT801(left) and FT813 (right)


Detail on FT801


This is the sketch

//#include <GMD2URiv.h>    //Teensy 3.6
#include <GD2.h>           //Gameduino 2
//#include <GD2UB.h>       //STM32F429ZI-DISCO

Bitmap background, SaidHello;

int ANG=0;
int minX = 0, minY = 0;
int maxX = 480 - minX, maxY = 272 - minY;
int startX = maxX / 2, startY = maxY / 2;
int deltaX = 2, deltaY = 2;

void setup()
{
 GD.begin();
 //background.SDfromfile("tree.jpg");  //F429ZI-DISCO
 background.fromfile("tree.jpg");      //Teensy 3.6, Gameduino 2
 SaidHello.fromtext(31, "FT80X");
}

void loop()
{
ANG = ANG + 1;
 if (ANG>=360){ANG=0;}
  startX = startX + deltaX;   startY = startY + deltaY;
  if (startX >= maxX)
      deltaX = -deltaX;
  if (startX <= minX)
      deltaX = abs(deltaX);
  if (startY >= maxY)
      deltaY = -deltaY;
  if (startY <= minY)
      deltaY = abs(deltaY);

 GD.ClearColorRGB(0x000055);
 GD.Clear();

 background.draw(480 / 2, 272 / 2);
 GD.ColorRGB(0xffffff); SaidHello.draw(startX, startY, DEGREES(ANG));

 GD.swap();
}

Wait for your comments. 

It would be a pleasure for us if you visit our home (and yours of course) in FT81XManía

Best Regards!
FT81XMania team

[jamesbowman]

Aha, thanks. I debugged this for a while before I realized it is very simple - the "tree.jpg" image takes up almost all of the FT800 memory. The text bitmaps cannot fit at the same time.


With a smaller image (e.g. "healsky3.jpg") it all works fine.

[tftlcdcyg]

That's right, my mistake!, bad idea to starting with tree.jpg, that image file is very large!

THX James. With selfie.jpg the show it is really starting!.