From 8d7252fe6a5baed69eb3b5adbfdcd81a40dfb771 Mon Sep 17 00:00:00 2001 From: HAALniner21 Date: Sat, 3 Sep 2022 21:31:42 +0600 Subject: [PATCH 1/4] Update GfxWrapper.h Added rotation and flip support --- src/GfxWrapper.h | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/GfxWrapper.h b/src/GfxWrapper.h index d14c208..bfe26e3 100644 --- a/src/GfxWrapper.h +++ b/src/GfxWrapper.h @@ -12,20 +12,37 @@ #pragma once #include "Adafruit_GFX.h" + template class GfxWrapper : public Adafruit_GFX -{ +{ public: + int Xres,Yres,orientation=0; Base &base; typedef typename Base::Color Color; - GfxWrapper(Base &vga, const int xres, const int yres) + GfxWrapper(Base &vga,const int xres, const int yres) :base(vga), Adafruit_GFX(xres, yres) { + Xres=xres; + Yres=yres; } virtual void drawPixel(int16_t x, int16_t y, uint16_t color) - { - base.dot(x, y, base.RGBA((color >> 8) & 0b11111000, (color >> 3) & 0b11111100, (color << 3) & 0b11111000)); + { + if(orientation==0){ + base.dot(x, y, base.RGBA((color >> 8) & 0b11111000, (color >> 3) & 0b11111100, (color << 3) & 0b11111000)); // actual orientation + }else if(orientation==90){ + base.dot(Xres-y, x, base.RGBA((color >> 8) & 0b11111000, (color >> 3) & 0b11111100, (color << 3) & 0b11111000)); // 90 degree c.c rotation from actual + }else if(orientation==180){ + base.dot(Xres-x, Yres-y, base.RGBA((color >> 8) & 0b11111000, (color >> 3) & 0b11111100, (color << 3) & 0b11111000)); //180 degree c.c rotation from actual + }else if(orientation==270){ + base.dot(y, Yres-x, base.RGBA((color >> 8) & 0b11111000, (color >> 3) & 0b11111100, (color << 3) & 0b11111000)); //270 degree c.c rotation from actual + }else if(orientation==-1){ + base.dot(Xres-x, y, base.RGBA((color >> 8) & 0b11111000, (color >> 3) & 0b11111100, (color << 3) & 0b11111000)); //horizontal flip + }else if(orientation==-2){ + base.dot(x, Yres-y, base.RGBA((color >> 8) & 0b11111000, (color >> 3) & 0b11111100, (color << 3) & 0b11111000)); //vertical flip + } + } -}; \ No newline at end of file +}; From 0a0f4ae29bd9ef8d9c83faaf9e76f2e74aed85cc Mon Sep 17 00:00:00 2001 From: HAALniner21 Date: Sat, 3 Sep 2022 21:35:14 +0600 Subject: [PATCH 2/4] Create GFXwrapper_oreintation_example.ino added an example for orientation change --- .../GFXwrapper_oreintation_example.ino | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 examples/GFXwrapper_oreintation_example/GFXwrapper_oreintation_example.ino diff --git a/examples/GFXwrapper_oreintation_example/GFXwrapper_oreintation_example.ino b/examples/GFXwrapper_oreintation_example/GFXwrapper_oreintation_example.ino new file mode 100644 index 0000000..da22e7b --- /dev/null +++ b/examples/GFXwrapper_oreintation_example/GFXwrapper_oreintation_example.ino @@ -0,0 +1,68 @@ +/* + * Date : 7/8/2022 + * Author: Md. Asifuzzaman Khan + * Github: https://github.com/AsifKhan991/Customized-GFXwrapper-library-for-Bitluni-ESP32 + * + * This example shows how the display orientation can be changed using Bitluni's ESP32 VGA library by + * the "object.orietnation" vairable of Gfxwrapper class. + * + * Tested on ESP32 DevKit-V1 & DevKitC-V4 + * + * There are 4 modes total: + * object.orientation = 0 -> (default)actual orientation + * object.orientation = 90 -> 90 degree clockwise rotation relative to actual + * object.orientation = 180 -> 180 degree clockwise rotation relative to actual + * object.orientation = 270 -> 270 degree clockwise rotation relative to actual + * object.orientation = -1 -> flip horizontally + * object.orientation = -2 -> flip vertically + * + * Credit goes to bitluni for creating such an amazing library. + * Project page: https://github.com/bitluni/ESP32Lib + */ +#include +#include +#include + +const int redPin = 14; +const int greenPin = 12; +const int bluePin = 27; +const int hsyncPin = 32; +const int vsyncPin = 33; +VGA3BitI vga; +GfxWrapper gfx(vga, 640, 480); + +void setup() { + vga.init(vga.MODE640x480, redPin, greenPin, bluePin, hsyncPin, vsyncPin); // initiating in 640 by 480 resolution + gfx.setTextColor(0x0F00); + gfx.setFont(&FreeSansBold12pt7b); +} + +void loop() { + gfx.orientation = 0; //Not necessary to declare the default orientation + gfx.setCursor(80 , 40); + gfx.print("Rotation example"); + gfx.orientation = 90; + gfx.setCursor(80 , 40); + gfx.print("Rotation example"); + gfx.orientation = 180; + gfx.setCursor(80 , 40); + gfx.print("Rotation example"); + gfx.orientation = 270; + gfx.setCursor(80 , 40); + gfx.print("Rotation example"); + + gfx.orientation = 0; + gfx.setCursor(325 , 150); + gfx.print("Horizontal flip"); + gfx.orientation = -1; + gfx.setCursor(325 , 150); + gfx.print("Horizontal flip"); + + gfx.orientation = 0; + gfx.setCursor(220 , 235); + gfx.print("Vertical flip"); + gfx.orientation = -2; + gfx.setCursor(220 , 235); + gfx.print("Vertical flip"); + +} From 40c3772cfb47e0adea9a3f966290606c63c6c3d7 Mon Sep 17 00:00:00 2001 From: HAALniner21 Date: Sat, 3 Sep 2022 21:37:53 +0600 Subject: [PATCH 3/4] Update README.md --- README.md | 31 ++++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 18315b5..a715df3 100644 --- a/README.md +++ b/README.md @@ -149,4 +149,33 @@ Make sure your STL is low poly. The 3D example use a model with < 5000 triangles ## Converting Sprites and Images The Utilities folder provides a convenient [SpriteEditor](https://htmlpreview.github.io/?https://github.com/bitluni/ESP32Lib/blob/master/Utilities/SpriteEditor.html) that you can use directly from the browser. No worries, your files are not uploaded. The correct pixel format for VGA14Bit and VGA3Bit is R5G5B4A2 (that will be improved in future). You can import PNG files to use transparency. -Each sprite has the origin in the center by default. You can modify it by changing the x/y values of the first point definition. Clicking on the image creates additional points that can be used for other purpouses like hit boxes etc. \ No newline at end of file +Each sprite has the origin in the center by default. You can modify it by changing the x/y values of the first point definition. Clicking on the image creates additional points that can be used for other purpouses like hit boxes etc. +# Changing orentation +Initiate a Gfxwrapper class
+```C++ +VGA3BitI vga; +GfxWrapper +```C++ +gfx.orientation = 90; +``` +There are 6 types of oreintation that is supported:
+* object.orientation = 0 -> (default)actual orientation +* object.orientation = 90 -> 90 degree clockwise rotation relative to actual +* object.orientation = 180 -> 180 degree clockwise rotation relative to actual +* object.orientation = 270 -> 270 degree clockwise rotation relative to actual +* object.orientation = -1 -> flip horizontally +* object.orientation = -2 -> flip vertically +# Notes +* Rotating the display causes your horizontal and vertical resolution to change. For example: if you have default resolution of 640 by 480 then rotating 90 degree clockwise will change your resolution to 480 by 640. So you have to keep it in mind while displaying rotated graphics. please refer to the [example](https://github.com/AsifKhan991/Customized-GFXwrapper-library-for-Bitluni-ESP32/blob/main/GFXwrapper_oreintation_example.ino) sketch to understand how it works. +* It is possible to set individual rotation for individual graphics objects in the display. For this just simply set the desired orientation before displaying the graphics and then just revert to previous orientation. For exaample: +```C++ +gfx.orientation = 270; //setting desired orientation before displaying +gfx.setCursor(320 , 240); +gfx.print("individual rotation"); //displaying sometihng (can be text or graphics) +gfx.orientation = 0; // revert baack to original orientation +``` +* Although it is not implemented, tweaking a bit in the library will enable rotating to any arbitrary angles (i.e: 15, 129, 287 etc). The functionality lies in the drawPixel() function of the Gfxwrapper class. +# How the example sketch looks in display +![alt text](https://github.com/AsifKhan991/Customized-GFXwrapper-library-for-Bitluni-ESP32/blob/main/IMG_20220807_180029.jpg) From 12b42678e9e80ff5aa0a9b8a0900dec595092cd2 Mon Sep 17 00:00:00 2001 From: HAALniner21 Date: Sat, 3 Sep 2022 21:40:51 +0600 Subject: [PATCH 4/4] Update README.md added instructions for display orientation change --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index a715df3..13d5a19 100644 --- a/README.md +++ b/README.md @@ -150,7 +150,7 @@ Make sure your STL is low poly. The 3D example use a model with < 5000 triangles The Utilities folder provides a convenient [SpriteEditor](https://htmlpreview.github.io/?https://github.com/bitluni/ESP32Lib/blob/master/Utilities/SpriteEditor.html) that you can use directly from the browser. No worries, your files are not uploaded. The correct pixel format for VGA14Bit and VGA3Bit is R5G5B4A2 (that will be improved in future). You can import PNG files to use transparency. Each sprite has the origin in the center by default. You can modify it by changing the x/y values of the first point definition. Clicking on the image creates additional points that can be used for other purpouses like hit boxes etc. -# Changing orentation +## Changing orentation Initiate a Gfxwrapper class
```C++ VGA3BitI vga; @@ -167,7 +167,7 @@ There are 6 types of oreintation that is supported:
* object.orientation = 270 -> 270 degree clockwise rotation relative to actual * object.orientation = -1 -> flip horizontally * object.orientation = -2 -> flip vertically -# Notes +### Notes * Rotating the display causes your horizontal and vertical resolution to change. For example: if you have default resolution of 640 by 480 then rotating 90 degree clockwise will change your resolution to 480 by 640. So you have to keep it in mind while displaying rotated graphics. please refer to the [example](https://github.com/AsifKhan991/Customized-GFXwrapper-library-for-Bitluni-ESP32/blob/main/GFXwrapper_oreintation_example.ino) sketch to understand how it works. * It is possible to set individual rotation for individual graphics objects in the display. For this just simply set the desired orientation before displaying the graphics and then just revert to previous orientation. For exaample: ```C++ @@ -177,5 +177,5 @@ gfx.print("individual rotation"); //displaying sometihng (can be text or graphic gfx.orientation = 0; // revert baack to original orientation ``` * Although it is not implemented, tweaking a bit in the library will enable rotating to any arbitrary angles (i.e: 15, 129, 287 etc). The functionality lies in the drawPixel() function of the Gfxwrapper class. -# How the example sketch looks in display +### How the example sketch looks in display ![alt text](https://github.com/AsifKhan991/Customized-GFXwrapper-library-for-Bitluni-ESP32/blob/main/IMG_20220807_180029.jpg)