Motorcycle HUD

[Jemmicat69]

I have been working on a motorcycle HUD that attaches to a visor. I have had it working using the TTGO display, added IMU, battery and GPS all in a compact package (55mm x 30mm x 25) to give speed, lean angle, time, temperature, etc. I had been working to implement turn by turn directions from the phone to show on the screen as well using another package connecting by Wifi but was struggling to adapt the graphics to the screen. I had first stumbled on your project about a year ago but was having trouble making a reliable BLE connection.

Anyway, I had gotten away from the project for a year with a move from the US to the UK and am finally working on it again. I found you had updated your project to include support for the TTGO screen and was thrilled. I have adjusted some things to get it to display horizontally instead of vertically and it is working perfectly. Now I am trying to add my code in for the GPS data to be displayed on half the screen with the directions shown on the other half. I have a few questions, though.

First off, I am a mechanical engineer and know mostly Arduino and some C so I am struggling with the C++ type callouts.

1. The distance data shown on the screen is in feet/miles but the speed limit of the road shown is in Kmh. I adjusted to the code to do a conversion on this to display it properly, but is there a way to grab the data that Sygic is putting out that is in MPH? The read me mentions a UUID table but I don't see it listed anywhere
2. All of the data is shown in the center of the screen which is nice. But I would like to shove it all to the left half of the screen so that I can show the data from the GPS and IMU on the right. I am struggling to figure out how to do that with your code. Can you give me any tips?
3. Also, it would be nice to use a proper font for writing the messages like distance on the screen rather than the glyph shifter. what are your thoughts.

The picture attached is my test piece. It has the IMU,GPS, Battery and TTGO all packed in the small area. A housing then goes over this that then snaps onto the visor. It is free floating and not complete while I've been developing it

[alexanderlavrushko]

Great work! Nice and compact hardware.

1. At the moment Sygic app sends speed limit only in km/h (maybe later it will automatically switch to units of the current country, I don't know if it will be done).
2. Check the latest changes, set DISPLAY_ROTATION 270 in the main source file.
3. Proper fonts would be possible with Adafruit_GFX library (I already use it for nRF51 HUD project), but it's not integrated here yet.

P.S. Note that if you look through polarized sunglasses, the TTGO screen looks as black in horizontal orientation. So I use TTGO vertically on my bicycle:

[Jemmicat69]

Unfortunately, since this mounts to the visor on a motorcycle helmet at about an inch from your face just slightly above eye level (to make it mostly invisible under normal riding conditions unless you WANT to see it), mounting it vertical is not an option. I have also noticed the "blackening" with polarized sunglasses, but didn't realize it was about the orientation.

I changed the orientation in the init to rotation(3) and adjusted the graphics to show horizontally properly, but I am struggling with your use of "canvas". It doesn't seem to fill the whole 135x240 area with black (as shown when I flash my GPS version then the Navigation version. I am using sprites from the not modified tft_eSPI library for the various areas to update. I am also using fonts from the non TTGO modified library in the GPS only version. I've included pictures of what I am referring to.

I need to go through the TTGO modified library and compare what is different in it from the standard library.

As I said, what I want to do is have your program on the left half of the screen, and the GPS data I have in mine on the right side of the screen. That way it could be used without navigation as well and still show the information I need at a glance on a motorcycle (without having to look down at the gauges). I just need to understand your use of the canvas and how to add in my data from the IMU and GPS

I have a housing designed in Solidworks that incorporates a 400mah battery in it I can email you... might make mounting it on a bike easier

Also, I added the below code to do the conversion from KMH to MPH. The conversion factor is a bit high but I needed it to be a bit high so it always rounded to the proper MPH when displayed

void DrawSpeed(uint8_t speed)
{
if (speed == 0)
return;

unsigned int speedMPH = speed*0.625;

char str[4] = {};
sprintf(str, "%u", (unsigned int)speedMPH);
DrawImageProgmem(64, 32, 64, 64, reinterpret_cast<const uint16_t*>(IMG_speedLimit64x64_16b));

int x = 10;
int y = 48;
int scale = 4;

if (speedMPH <= 9)
    x = 20;
else if (speedMPH <= 19)
    x = 14;
else if (speedMPH >= 40 && speedMPH <= 49)
    x = 7;
else if (speedMPH >= 100)
{
    y = 52;
    scale = 3;
    if (speedMPH >= 110 && speedMPH <= 149)
        x = 14;
}
DrawMessage(str, 64 + x, y, scale, false, 0x0000);

}

[alexanderlavrushko]

I can see 2 possibilities, how to make the image rotated, and on the left side:

1. Take the latest clean project and modify it this way:
   a. in main file BLEHUDNaviESP32.ino comment out the default display (line 21, 22) and uncomment TTGO selectedDisplay (line 27, 28)
   b. in main file BLEHUDNaviESP32.ino (line 34) set DISPLAY_ROTATION 270
   c. in file TFT_TTGO.cpp (line 6) modify screen height to be this way: const int SCREEN_HEIGHT = 135;
   d. in file TFT_TTGO.cpp (line 39) add yStart adjustment to be this way:
   m_tft.setAddrWindow(xStart, yStart + (240 - SCREEN_HEIGHT), width, height);
2. Implement rendering navigation data yourself (all to be done in main file BLEHUDNaviESP32.ino):
   a. as I can see from pictures, your project already uses a graphics library, which supports nice fonts, and you successfully draw all other data, you can also draw navigation data - there is not much of it
   b. comment out all usages of g_display
   c. comment out all usages of g_canvas
   d. remove drawing logo IMG_logoTbt128x64_4b I guess you don't need it
   e. remove the body of DrawMessage and implement the new body with your graphics library
   f. remove the body of DrawDirection and implement the new body with your graphics library (pay attention, maybe you will need to use your custom images, because images in the project are grayscale 4-bit per pixel, which are not supported in all libraries)
   g. remove the body of DrawSpeed and implement the new body with your graphics library, including your fix KMH/MPH, I guess your graphics library may support drawing circles and texts so you won't need to draw an image nor to use GlyphShifter.

[Jemmicat69]

I have updated adapted your code to use the latest TFT_eSPI library available in the arduino libraries. I am using sprites for all of the "windows" as it allows each to be updated without updating the screen to keep from flickering. I've also got my GPS and IMU code. Once I get the screen layout done, I'll update it all to my github and send you a link

Using the current TFT-eSPI library allows me to use the sprites but also to use proper fonts which look much better on the display. It also lets me draw the speed limit sign without using the BMP. In some ways, it simplifies the program, but the dshowing the direction graphics took a workaround to work with the library as it didn't like using the switch case

Where did you get the graphics for the directions? They are 64x32 and are quite compressed. I'd like to redo them at 64x64 as the library won't let me show a 64x32 array at 64x64.

Other than some graphics layout issues (overlapping sprites), it all works well

[alexanderlavrushko]

Good to know you are moving forward. Graphics for directions are 4-bit per pixel, grayscale, one byte contains 2 pixels (uint8_t leftPixel = (data & 0x0F); uint8_t rightPixel = (data & 0xF0) >> 4;). Unfortunately I cannot share the originals.

[Jemmicat69]

I am actually using the non-modified version of the TFT_eSPI. The same as you but a newer version that is listed in the Arduino library manager(which your program also compiles under and runs fine with). The newer versions allow you to use nicer fonts and have a lot more functionality

I'll take your advice and see what I can do to massage it. Thank you for your help. I'll let you know how it comes out.

[Jemmicat69]

I got the layout complete. I am struggling to get the 4bpp to show up properly using the tft.pushImage command for use with the sprites. But it works and i'll get it sorted at some point. Thank you for your help

[Jemmicat69]

I've completed the basic version but still have more to do. All of the bitmap files have to be loaded to SPIFFS. It works very well... Need to add a menu system and a few other features (speed digits changing colors if speeding) but the general operation is there

https://github.com/Jemmicat69/JCDesigns-HUD

[Jemmicat69]

I plan to add a menu setup where you can view the high speed and lean angle and also set the time zone and speed units

[Jemmicat69]

This is what I used to put the JPG and BMP files into the flash system. When I had then hardcoded into the program, I was well above the amount of available program space. Pushing the graphics off to the SPIFFS brought it down to 85%

https://randomnerdtutorials.com/install-esp32-filesystem-uploader-arduino-ide/

[alexanderlavrushko]

This really makes sense, I didn't know about this approach, thanks for the info.

Uncompressed 64x64 image 16-bit per pixel takes 8KB, in JPG you have 1.7KB in average. With 30 JPG images you saved more than 180KB of space.

[greymda]

@Jemmicat69 is your code private? can't access it.

[b3ksi]

Hi @Jemmicat69 seems like you have deleted your repo, is it possible to share?

[Jemmicat69]

I want larger fonts for the speed area but again was out of room. Going to add that in along with potentially a background image to place the sprites over Also, you can see how I used the actual fonts and all from the latest tft_espi library. It simplifies your program some since no need for the glyph shifter

…

On 16 Aug 2021, at 20:22, alexanderlavrushko ***@***.***> wrote:  This really makes sense, I didn't know about this approach, thanks for the info. Uncompressed 64x64 image 16-bit per pixel takes 8KB, in JPG you have 1.7KB in average. With 30 JPG images you saved more than 180KB of space. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[alexanderlavrushko]

I think you mean this function: setFreeFont(&FreeSerifBold18pt7b). FreeSerifBold18pt7b seems to be a font in AdafruitGFX format. It means you can define NOT ALL characters to save space, for example, only digits, take a look at BLE HUD for nRF51: FontSpeedLimit.h and FontSpeedLimitWide.h.

This is a great online tool for such fonts: https://tchapi.github.io/Adafruit-GFX-Font-Customiser/. It also allows to take a part from existing font (e.g., only digits)

[Jemmicat69]

It is. And I must keep it that way at the moment

…

On 19 Aug 2021, at 15:04, greymda ***@***.***> wrote:  @ Jemmicat69 is your code private? can't access it. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

[greymda]

ok, thanks for replying.

[Jemmicat69]

It is private and must remain that way at the moment

…

On 27 Aug 2021, at 13:34, b3ksi ***@***.***> wrote:  Hi @Jemmicat69 seems like you have deleted your repo, is it possible to share? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.