Wahoo Kickr Bike - External Gear Display

Hi

Yes the steps is.:

  1. Download and install the Arduino IDE.: https://www.arduino.cc/en/software
  2. Download and install the LilyGO descriptor for the Arduino.: https://github.com/Xinyuan-LilyGO/TTGO_TWatch_Library/blob/master/docs/arduino-ide/boards_manager.md
  3. Download the code.:GitHub - jurzz/kickrbike_display: Wahoo Kickr Bike external display TTGO T-display
  4. Wait for your board to arrive :blush:

BòóX

2 Likes

Thank you, @BooX.

Does the BIKE need to connect to the board while programming?
The BIKE is out in the workshop, out of BT range of my computer.
Does it need to actually pair, or is the board just intercepting the signal?

This is a great looking project.

Just program the TTGO, next time you power it up it will connect to the first Kickr Bike within range.

BòóX

1 Like

My AliExpress order was closed, they said, “We had to close this order due to account security concerns. Please place an order again later, or remove the coupon and try again.”
I don’t even know what that means.
Looks like I’ll go right to the vendor.

Hi

Where are you located ?, sometimes Amazone or a “local” eBay shop is a better alternative.

Was the original order placed at the official LilyGO shop at Aliexpress ?
https://lilygo.aliexpress.com/

BòóX

I’m in the US.
The original order was not through the LilyGo shop.
I did re-order through LilyGo.cc
Amazon was more expensive, especially with the case.

I finally got the display board.
I made a few modifications to the Sketch.

I modified the updatedisp section and commented out the updates for visual gear, tilt, and grade. My old eyes can’t see the numbers in the 7 size, and I centered the numbers a bit since the other information was not being displayed.

tft.drawString(String(frontgear), 15, 25, 8);
tft.drawString(“:”, 75, 25, 8);
tft.fillRect(100,25,tft.width() - 80,80,TFT_BLACK);
tft.drawString(String(reargear), 110, 25,8);

Thank you to all in this thread.

Dan

2 Likes

This is such a cool idea. It never made much sense to have the display where it is on the bike. It seemed awkward as heck. Covered by towels and such. Good job!

2 Likes

First ride today with the external gear selection display and I have to say it was fantastic. Even with my old man eyes, I could see the display clearly.
Again, thank you to all in this thread for the inspiration.

3 Likes

cool, can you share the code? I’d don’t really know what I’m doing but managed to install from github and have the version with the lock and cogs working great. But maybe just the big gear number is the way to go. I’d mess around with he sketch but have no idea how to see what you have done without sending to the board and connecting to the bike every time. Is that even possible?

1 Like

I really don’t know much about Arduino programming either, but I have done enough with coding over the years to sort of follow along.

To have just the large gear number show, as in the picture above, I made changes to 2 sections, both at the bottom of the Sketch.

Change “updatedisp” to look like this -

void updatedisp(){
update_gear();
//update_grade();
//update_front();
//update_rear();
//update_lock();
}

The “//” indicates it is remarked, and won’t execute. I didn’t want to delete it entirely, since I wasn’t sure it would work.
Then, change “update_gear” to look like this -

void update_gear(void){
// tft.drawString(frontgear, 0, 0, 7);
// tft.drawString(“:”, 35, 0, 7);
// tft.fillRect(50,0,tft.width() - 50,50,TFT_BLACK);
// tft.drawString(reargear, 50, 0, 7);
tft.drawString(String(frontgear), 15, 25, 8);
tft.drawString(“:”, 75, 25, 8);
tft.fillRect(100,25,tft.width() - 80,80,TFT_BLACK);
tft.drawString(String(reargear), 110, 25,8);
}

I remarked out the original settings, copied them, and pasted, and made adjustments. The “8” is the largest font size that the display can handle.
These settings will show just like the picture above.
I did not make any other changes that I can remember.

1 Like

Thanks Dan

I knew how to comment lines out.

I went more nuclear, made a copy of the sketch and just deleted out loads of code and kept compiling until it worked.

I hadn’t realised that just the updatedisp at the end was all that needed commenting out and deleted all the code relating to grade, front, rear etc. It did work though and now I have 2 sketches depending which version I want.

If I knew more what I was doing, I’d like large gear and grade. Don’t need the lock or the gear visuals.

1 Like

Uncomment the “update_grade” from the updatedisp.

Modify this portion (it’s just above updatedisp) -

void update_grade(void) {
tft.drawString(grade, 140, 10, 4);
}

Toy around with the “140, 10”. That’s the x and y position, and the 4 is the font size.
Font size is really limited. I think 6, 7 and 8 are restricted to only digits, colon, dash, and period. There is no 5.
It looks like the “grade_update” section formats the grade display to include the “+” and “-” symbol, and adds the “%”.

In that section, you could possibly change the lines where it’s adding those characters, and then you could use a larger font size.

sprintf(s, “- %.1f %%”,tmp);

I’m not really sure what to change, though. Let me toy around with it a bit and I’ll post back.
You could toy around with changing the font color, too, depending on if it was positive or negative. I believe drawString would allow a color tag after the font size.

1 Like

I toyed around with things a bit.
I think I have something that may work for you.

If that appeals to you, make the following modifications to the code.
Uncomment the line for “update_grade” in the updatedisp section.

Change update_grade section to look like this -

void update_grade(void) {
// tft.drawString(grade, 140, 10, 4);
tft.drawString(grade, 80, 90, 6);
}

This will position the grade at the bottom center of the display, and increase the font size. The font size of 6 will not display a “+”, but it will show a “-”.

Change the “update_gear” section to this -

void update_gear(void){
// tft.drawString(frontgear, 0, 0, 7);
// tft.drawString(“:”, 35, 0, 7);
// tft.fillRect(50,0,tft.width() - 50,50,TFT_BLACK);
// tft.drawString(reargear, 50, 0, 7);
tft.drawString(String(frontgear), 15, 5, 8);
tft.drawString(“:”, 75, 5, 8);
tft.fillRect(100,5,tft.width() - 80,80,TFT_BLACK);
tft.drawString(String(reargear), 110, 5,8);
}

This will keep the same font size as my original modification, but move it up to accommodate the larger grade display.

2 Likes

Thanks for your help. Got it working. Tried to add colour but hasn’t worked.

Have a slightly weird artefact too.

1 Like

Color would probably be a bit harder.
The artifact is probably from a digit that was not ‘overwritten’ when the grade changed.
Did it show up going from negative tilt to positive tilt?

1 Like

Have taken out the colour code but that hasn’t help, moved the text a little left. Seems to get left behind when going double digit grade to single digit - doesn’t really matter

If there’s still some of my original code left in there, you get that artefact when you pull the right brake lever :wink:

BòóX

don’t think its that. Just using the buttons to change angle and it sometimes gets left behind from double digit angles?

You can get rid of the artifact by adding a line for fillRect -
That basically blanks out anything that was on the screen before it shows the grade.

void update_grade(void) {
// tft.drawString(grade, 140, 10, 4);
tft.fillRect(100,90,tft.width() - 100,90,TFT_BLACK);
tft.drawString(grade, 80, 90, 6);
}

1 Like