|
Post by A Curious Dude on Jul 19, 2017 5:13:47 GMT -8
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
|
|
|
Post by jamesbowman on Jul 19, 2017 18:35:36 GMT -8
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.
|
|
|
Post by A Curious Dude on Jul 20, 2017 3:34:46 GMT -8
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
|
|
|
Post by jamesbowman on Jul 20, 2017 14:30:26 GMT -8
|
|
|
Post by jamesbowman on Sept 6, 2017 7:15:49 GMT -8
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(); }
|
|
|
Post by tftlcdcyg on Sept 10, 2017 11:35:41 GMT -8
Great work James!
One question: Is it possible to put an image like background together the text in angle?
|
|
|
Post by jamesbowman on Sept 10, 2017 13:17:54 GMT -8
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(); }
|
|
|
Post by tftlcdcyg on Sept 10, 2017 15:52:48 GMT -8
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!
|
|
|
Post by tftlcdcyg on Oct 1, 2017 2:48:28 GMT -8
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íaBest Regards! FT81XMania team
|
|
|
Post by jamesbowman on Oct 1, 2017 10:09:25 GMT -8
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.
|
|
|
Post by tftlcdcyg on Oct 11, 2017 21:17:19 GMT -8
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!.
|
|