Bafang SW102 Bluetooth LCD - OpenSource firmware and mobile app

[casainho]

Nick,

Can you please tell the various sizes of the fonts you plan to use or that are available, so I can make a sketch of the design as I did for 850C? -- this image file has the pixels of the LCD and fonts, spaces, etc and so it makes easy when implementing the code by following the design file:

 

[Nick]

Hello guys,

just did some work on the layout for the lcd.
Nothing is working with real data yet but just playing around with some info on the lcd.

IMG_9399 (1).jpg

Nice work! I like

@casainho
Do you really want a graph on that tiny display? I think we can use the space better for some more infos or to make some fonts even bigger. Barts layout uses the display quite nice, IMHO.

About the fonts to use:
I have no special plans. We can create just what we want, so just go ahead an do a design sketch and I can give feedback.

 

[Nick]

I pushed new code to the 12.3.0 branch.
I implemented the UART RX/TX part with some example how to use in the main.c (including a standard config in eeprom.h).
With this, I was able to let the wheel spin and change the Assist level

Next I will have a look into saving config to flash (eeprom emulation).

Please give feedback. I understand my code as design base and I have no problems when f.i. the naming or structured should be changed to fit into the project.

 

[casainho]

@casainho
Do you really want a graph on that tiny display? I think we can use the space better for some more infos or to make some fonts even bigger. Barts layout uses the display quite nice, IMHO.

About the fonts to use:
I have no special plans. We can create just what we want, so just go ahead an do a design sketch and I can give feedback.

Well, I think that a graph is interesting visually and even because it shows some historic, unlike numbers only. But I am not sure it will work on the small 64 pixels wide... I would like to try.

Barts1006, can you please share the fonts sizes you used on your picture?? I would like to take them as reference.

 

[casainho]

I pushed new code to the 12.3.0 branch.
I implemented the UART RX/TX part with some example how to use in the main.c (including a standard config in eeprom.h).
With this, I was able to let the wheel spin and change the Assist level

Next I will have a look into saving config to flash (eeprom emulation).

Please give feedback. I understand my code as design base and I have no problems when f.i. the naming or structured should be changed to fit into the project.

I was looking and seems very good. A good opportunity to learn NRF51xx and Bluetooth.

I found that the Bluetooth libs already use flash to store persistent values so I think will be fast for you to get eeprom/storage of the configurations.

 

[bart1006]

@casainho
Do you really want a graph on that tiny display? I think we can use the space better for some more infos or to make some fonts even bigger. Barts layout uses the display quite nice, IMHO.

About the fonts to use:
I have no special plans. We can create just what we want, so just go ahead an do a design sketch and I can give feedback.

Well, I think that a graph is interesting visually and even because it shows some historic, unlike numbers only. But I am not sure it will work on the small 64 pixels wide... I would like to try.

Barts1006, can you please share the fonts sizes you used on your picture?? I would like to take them as reference.

Hello Casino,

Good idea to make a drawing!!
At this moment I only use the font from ugui in the sizes 22x36 (for assistlevel and speed) and the 6x8 (for time and BRK).
The battery icon from Nick is 24x12.

 

[bart1006]

I made a light icon in gimp and then tried to vectorize and scale (12x18) it with inkscape but no good results. Probably to small?
I just upload it here so if somebody else want to try or use it for other displays.

example:


gimp file:
View attachment light.zip

 

[Nick]

I made a light icon in gimp and then tried to vectorize and scale (12x18) it with inkscape but no good results. Probably to small?
I just upload it here so if somebody else want to try or use it for other displays.

example:
light4.png

gimp file:
light.zip

I am no expert in graphics but I think this is the wrong way. You should paint in Inkscape in vector graphics directly. In File -> Document Properties set 'Units' to 'px', width and hight to appropriate values (you can change them later too) and untick 'Use antialiasing'.
When ready with painting, import this in gimp because there you have more export options. When importing, you can also change the size of the icon. Export to bmp with 24bit R8,G8,B8.
You also should know that 24x12 px is VERY tiny. You will not be able to reproduce details like those curves in your picture.

Maybe you should try to use "GLCD Font Creator" where you can paint your font (or pictogram) directly! I never used it and we have to find some apropriate export settings for uGUI library. Anyway, you can get a feeling what detail is feasible with 24x12 pixels.

P.S.
I already lost some words about font usage here.

 

[casainho]

Here is my proposal for the design (on my monitor I can see at real scale, if I put internet browser zoom to 100%):

There are some small displacements on the final image but not on the source SVG file I did on Inkscape, I think it is because of final optimizations of JPEG or something - I hope on the LCD this will be better.
Source file here: https://github.com/OpenSource-EBike-firmware/SW102_LCD_Bluetooth/tree/master/design

MAIN SCREEN

Explanation of main screen:
1. Top left: battery SOC in numeric value because it is the only way for user to be able to read. Values changes in steps of 10, like 40, 50, etc up to 99 as 100 would take space for 3 digits.
2. Top right: time yet to be implemented and I hope we can get it.
3. Left: assist level from 0 to 9.
4. Right: wheel speed from 0 to 99 (no space to write km/h but that is a fixed field anyway).
5. Center: numeric field can be configured to show any variable, like motor power, motor temperature, pedal cadence, etc and can show at right 1 letter or more to indicate the units and this way make also more clear what is the variable.
6. Center: graph field can be configured to show any variable, like motor power, motor temperature, pedal cadence, etc and can show at top right a numeric value that can be or max value (or the actual value??) and 1 letter or more to indicate the units and this way make also more clear what is the variable.
7. Bottom: brakes, lights, etc can be a small icon or just a letter like B from brakes, L for lights, etc. Maybe we should show here also any error code / message, that can be on top of any other information since it will have the most priority.

NOTE: for an initial version, I would put fixed variables of motor power on the numeric field and human pedal power on the graph.

CONFIGURATIONS SCREEN

Explanation of configurations screen:
This menus works mostly as on 850C LCD. UP and DOWN buttons to scroll up and down, OK button to start or stop change the variable.
1. Top: Menu title.
2.1 Variable name 2 lines of text. This entries are numbered because due to small space we may need cut letter on variables names and so we will need to keep a wiki page explaining each entry number (does this make sense or we simple can avoid that numbering and the wiki page??)
2.2 Variable value the selected variable will have the name blinking. Once we select it for change, the value will blink instead.

I think ideally the configuration menu could have all the configurations however, we are limited for the available flash memory on SW102 and then we may be obligated to move some configurations to the mobile app. I think that at least, we could try to have the minimum configurations that make system usable without the need to use the mobile app because we may have some limitation and be without mobile phone, battery discharged on mobile phone or such.

 

[Rydon]

Here is my proposal for the design (on my monitor I can see at real scale, if I put internet browser zoom to 100%):

There are some small displacements on the final image but not on the source SVG file I did on Inkscape, I think it is because of final optimizations of JPEG or something - I hope on the LCD this will be better.
Source file here: https://github.com/OpenSource-EBike-firmware/SW102_LCD_Bluetooth/tree/master/design

MAIN SCREEN

This is nice but I think on this small display the graph should be optional or a mode. There were many, many complaints about people not being able to read the display because of the small fonts on a small display in the Eggrider group. This prompted a recent effort to improve it and make all of the critical numbers bigger and everything more readable. I posted about this earlier here. https://endless-sphere.com/forums/viewtopic.php?f=30&t=99698&hilit=sw102#p1460132

Note the 4 modes with different info shown in the 4 images. Other modes could include graphs.

 

[casainho]

This is nice but I think on this small display the graph should be optional or a mode. There were many, many complaints about people not being able to read the display because of the small fonts on a small display in the Eggrider group. This prompted a recent effort to improve it and make all of the critical numbers bigger and everything more readable. I posted about this earlier here. https://endless-sphere.com/forums/viewtopic.php?f=30&t=99698&hilit=sw102#p1460132

Note the 4 modes with different info shown in the 4 images. Other modes could include graphs.

I understand that you are experienced with users. I will then update my proposal. The graph is something I am not sure would work visual for the reasons you mention although I would like to explore that possibility -- I will keep this design source file archived for future and look at the design you show as a reference.

One question: on that images, we can see time -- does the original firmware includes a time clock??

 

[Nixunen]

In eggrider there is clock like you see in this my picture (bottom left). There is also motor temp (79c), trip km (9km), wh left for battery (477wh), light and lock icon (when locked throttle, pas or motor not working, so no assist. I need to connect phone to display and lock opens and i can use bike. Lock keeps open until next power down, and of course it can set off for good) and R31 is range left in km

But this clock has limitations, because this display not contain any backup battery, clock is not keep time when powered down. (Eggrider only show clock after connected to phone, after that you can disconnect phone / bt connection, and time work until shutdown / power down ) And of course time is retrieved from phone (using bt connection). So basically if i want clock showing in display i need to connect my phone to display every time when i put display on. If not then it show trip time in that place.

 

[casainho]

In eggrider there is clock like you see in this my picture (bottom left). There is also motor temp (79c), trip km (9km), wh left for battery (477wh), light and lock icon (when locked throttle, pas or motor not working, so no assist. I need to connect phone to display and lock opens and i can use bike. Lock keeps open until next power down, and of course it can set off for good) and R31 is range left in km

But this clock has limitations, because this display not contain any backup battery, clock is not keep time when powered down. (Eggrider only show clock after connected to phone, after that you can disconnect phone / bt connection, and time work until shutdown / power down ) And of course time is retrieved from phone (using bt connection). So basically if i want clock showing in display i need to connect my phone to display every time when i put display on. If not then it show trip time in that place.

Thanks for all that knowledge.

I am have 2 different ideas:
1. Try keep SW102 always on and maybe it uses low power and keep clock always running, even when system is "off". Maybe the clock drift is always constant like 2 seconds a day and so user could setup on configurations that offset to be removed everyday. After connecting to mobile, the clock would be updated.

2. Mobile app working as a background service always and so once it SW102 is connected, update the clock.

 

[JaiCee]

The drift will not be constant either on the unit or between units so you won't be able to correct for it. If it was possible to do this drift would not be a problem.

That said this is a bike computer a little drift is not a big issue and it can be corrected manually or automatically with the app connection add you suggest.

 

[casainho]

Here is my proposal v2.

I did increase the font sizes and removed graph. Wheel speed has the spotlight. There are some changes, please read bellow.

MAIN SCREEN

Explanation of main screen:
1. Top left: battery SOC in numeric value because it is the only way for user to be able to read. Values changes in steps of 10, like 40, 50, etc up to 99 as 100 would take space for 3 digits.
2. Top right: day time.
3. Motor power / assist level This field is now shared between assist level and motor power. Motor power is always shown (right image) unless we change assist level and then the assist level value is shown instead and with light blinking for next 3 seconds (left image).
Another idea I would like to explore is show to user the assist percentage of motor, like on the picture, where it is setup to be 350% and on bottom we can see human power as 150 watts and so the final motor power is 525 watts. Maybe user could simple increase/decrease with UP / DOWN buttons the assist percentage in steps like +25% of the previous value instead of using fixed values. I think we are tied to fixed assist levels from 0 to 5 because old cheap ebike technology could not measure and show the human power.
4. Center: numeric field can be configured to show any variable (like odometer field on LCD3), like human power, pedal cadence, motor temperature, etc and can show at right 1 letter or more to indicate the units and this way make also more clear what is the variable.
5. Bottom: brakes, lights, etc can be a small icon or just a letter like B from brakes, L for lights, etc. Maybe we should show here also any error code / message, that can be on top of any other information since it will have the most priority.
I think here we want to show info more like for validate/debug that we just see when we stop the ebike and try see this little icons. For instance, we do not need to see brake icon every time we brake or the light icon.

 

[e3s]

Great idea to replace the old levels system with a simple percentage. I thinked another thing: to select the level with a linear resistor that replace the throttle.

 

[Nick]

How about this for Light and Brake:


For everyone who is interested in drawing some icons, this is how I did it:

Use Inkscape to draw "pixel art". I used this tutorial for the basic settings.
Important settings are:
- File -> Document Properties:
Custom Size to the icon size you want, units to "px".
Untick "Use antialiasing".
Goto "Grids" and add a new one with "Grid Units" to "px" and Spacing X/Y to 1.

Now, draw a rectangle with 1x1 px size ("pixel"). Select it, Copy (STRG-C) and move the cursor to the next spot where you want to draw a pixel, press STRG-V to insert the new pixel. You can draw your icon like this.

When ready, save and quit. I now start gimp, because it has more export options than inkscape (which only can export to png).
Leave import options to defaults (just hit OK). Goto File -> Export as and chosse a name with .bmp file name. Hit "Export" and choose "Advanced Options" "24 bit R8G8B8".
you now have a bmp which you can import in TheDotFactory. Choose the output format which I posted previously, choose you bmp image and generate C-Code. Just have a look in the fonts.h file how to integrate the code in our library.

Sure you can skip the C-code generation. We will be happy if someone is just doing the arts and publish this here.

This are the inkscape files for the icons above for a starting point:
View attachment GFX.7z

Greetings
Niklas

 

[casainho]

How about this for Light and Brake:

I really think, because of the other designs we saw that are already in this LCD, icons will be very small because they are not as relevant as wheel speed or other data, even the battery level is numeric and not an icon because if that. So, for start I would use just the first letter, some letters or full word like "BRK".

Although I like that both icons, I would just rotate the brake icon by 90 degrees that for me represent better the reality.

 

[Nick]

So what is the font size you used in your example above for the bottom line (BRK / Lights)?

 

[casainho]

So what is the font size you used in your example above for the bottom line (BRK / Lights)?

5x6. You can easily measure on the source file on Inkscape or the jpeg image.

 

[Nick]

Okay, that is small :wink:

 

[casainho]

Okay, that is small :wink:

The fonts here are 5x7, so at the same size.

The idea is to be able to see while riding only the important information and that is by priority/font size:
1. wheel speed
2. motor power / assist level and numeric field 1
3. battery SOC and time

The bottom icons/text is not for being read while riding but only at a stop position.

 

[e3s]

How about this for Light and Brake:
IMG_20190605_195258_k.jpg

For everyone who is interested in drawing some icons, this is how I did it:

Use Inkscape to draw "pixel art". I used this tutorial for the basic settings.
Important settings are:
- File -> Document Properties:
Custom Size to the icon size you want, units to "px".
Untick "Use antialiasing".
Goto "Grids" and add a new one with "Grid Units" to "px" and Spacing X/Y to 1.

Now, draw a rectangle with 1x1 px size ("pixel"). Select it, Copy (STRG-C) and move the cursor to the next spot where you want to draw a pixel, press STRG-V to insert the new pixel. You can draw your icon like this.

When ready, save and quit. I now start gimp, because it has more export options than inkscape (which only can export to png).
Leave import options to defaults (just hit OK). Goto File -> Export as and chosse a name with .bmp file name. Hit "Export" and choose "Advanced Options" "24 bit R8G8B8".
you now have a bmp which you can import in TheDotFactory. Choose the output format which I posted previously, choose you bmp image and generate C-Code. Just have a look in the fonts.h file how to integrate the code in our library.

Sure you can skip the C-code generation. We will be happy if someone is just doing the arts and publish this here.

This are the inkscape files for the icons above for a starting point:
GFX.7z

Greetings
Niklas

What about a circle with the letter b inside for the brake?

 

[casainho]

What about a circle with the letter b inside for the brake?

That would be very easy to implement as the ugui already print circles and letters. I think is a good idea for a first version.

I hope to finish a working version of 850C display and then I would like to work on this display, I would like to have a working version soon to use on my own bicycles.

 

[hefest]

What about a circle with the letter b inside for the brake?

Or exclamation mark in circle, kind of universal brake symbol in cars.