This repository is for creating fonts and image bitmaps to use with LameUI GUI library.
It consists of three tool. First two for font generation, the 3rd one is for image to bitmap generation.
- font2image: This is a GUI tool written in C++. This is a modified version of https://github.com/andryblack/fontbuilder. font2image creates a
.png
image containing all the characters and a.json
description file. These files are processed bylameui_fontgen.py
in the next step. - lameui_fontgen.py: This is a CLI tool written in Python. lameui_fontgen.py takes
.png
and.json
files created byfont2image
as input and process them to create.c
. and.h
font files for LameUI. - lameui_bitmapgen.py: This is a CLI tool written in Python. It takes
.png
or.jpg
iamges as inputs and creates.c
and.h
file containing the bitmap. This tool is used to create image bitmaps that can be used in LameUI.
- Qt5
- Python3
- Python PIL library
- make, qmake
- gcc
Following steps are used to create fonts for LameUI.
Use font2image to create .png
and .json
files from a .ttf/.otf
font file. font2image has multiple tabs. Follow below instructions sequentially.
If font2image is not already compiled, compile and run using below commands. The output binary is created inside font_tools folder.
qmake -o Makefile font2image.pro
make -j8
cd font_tools
./font2image
After running font2image, follow these steps:
[Font Tab]
- Select
Fonts directory
and chooseFont family
,Size
, andStyle
of font. - Set
DPI
of font or keep it to default. - Set
Hinting
type from dropdown. Switch toFont image preview
tab to the right pane to visualize how the font will look. Most of the timeHinting: Disabled
gives suitable result. - Change sliders of
Faux bold
andFaux italic
to make font bold or italic. - Keep
Width
andHeight
to 100%.
[Characters Tab]
- Enter the characters that should be in the generated font. Keep it to default for most use cases.
[Layout Tab]
- Select
Padding
offsets. This is the spacing between 2 characters. Recommended to keep it to default value (1).
[Output Tab]
- Choose output directory. Recommended directory is lameui_fonts. But it can be any directory too.
- Set file name or keep it to default (recommended).
- Click on
Write Font
button. Now this will generate a.PNG
file and ajson
file in current directory.
Use lameui_fontgen.py to convert those generated .PNG
and json
file pair to .c
and .h
file. It also adds png icons to the font. Icons are in icons folder.
Read more about icons here (1), here (2), and here (3).
Now follow these steps:
-
Run lameui_fontgen.py with:
python lameui_fontgen.py <font_png_file> <font_json_file> <system_icons_folder> <user_icons_folder> <C_files_output_folder>
- <font_png_file>: .PNG file created by font2image
- <font_json_file>: .json file created by font2image
- <system_icons_folder>: folder where system icons are stored. Recommended: sys_icons.
- <user_icons_folder>: folder where user icons are stored. Recommended: usr_icons.
- <C_files_output_folder>: Folder where output
.c
. and.h
files will be stored. Recommended: lameui_fonts.
Example command:
python lameui_fontgen.py ubuntu_bold_16.PNG ubuntu_bold_16.json icons/sys_icons/ icons/usr_icons/ lameui_fonts/
-
Use generated
.c
. and.h
font files in LameUI project by including the header and compiling the c file.
That's all!!
Following steps are used to create image bitmaps for LameUI.
-
Run lameui_bitmapgen.py with:
python lameui_bitmapgen.py <input_image_file> <output_dir> <output_bpp>
-
<input_image_file>: .png/.jpg/.jpeg image file
-
<output_dir>: folder where output .c/.h files are stored.
-
<output_bpp>: bpp is bits-per-pixel. It sets how many bits will be in per pixel of the output bitmap. Supported values are 1 (monochrome), 8 (grayscale), 16 (RGB565 color). Lower bpp makes smaller image size.
For example, if the image is a simple wifi icon, bpp=1 is enough. Using 16 bpp will be wasteful.
Example command:
python lameui_bitmapgen.py sunset_hill.jpg out/ 16
-
-
Use generated
.c
and.h
image bitmap files in LameUI project by including the header and compiling the c file.