Hello,

Thanks for your feedback, we will look into updating the datasheet to make this more clear.

The value listed in datasheet for “font width(max)” row refers to the maximum width value of all ASCII chars listed in the same table of the datasheet.

The font width value for font 28 ‘@’ symbol is 19, which includes the ‘@’ symbol image bitmap width (18 pixel) plus spacing to next char (1 pixel). The bitmap handler will use this value to determine the starting position of next text char in the text string.


Best Regards,
BRT Community

Hi,

Here is one small example of using some gradients along with a gauge widget.

Here is the code and a short description attached,

CLEAR_COLOR_RGB(255, 255, 255)
CLEAR(1, 1, 1)

// *** Draw the invisible circles to make the ARC in the stencil buffer ***
COLOR_MASK(0, 0, 0, 1) // Disable writes of R, G and B to the screen
STENCIL_OP(INCR, INCR) // Set the stencil to increment

COLOR_RGB(0, 0, 255)
BEGIN(POINTS)
POINT_SIZE(1600) // Draw an outer circle defining the outside of the arc
VERTEX2II(200, 200)
COLOR_RGB(0, 255, 0)
POINT_SIZE(800) // Draw an inner circle defining the inside of the arc
VERTEX2II(200, 200)
END()

// *** Draw the gradient arc ***
COLOR_MASK(1, 1, 1, 1) // Enable writes to the colors again
STENCIL_OP(KEEP, KEEP) // Stop the stencil INCR
STENCIL_FUNC(EQUAL, 1, 255) // Only draw where the stencil buffer is =1 which is our arc
SCISSOR_SIZE(100, 100) // Constrain drawing to one half of the arc
SCISSOR_XY(100, 100)
CMD_GRADIENT(200, 150, 0xFFFF00, 100, 200, 0xFF0000) // Draw a gradient from red to yellow
SCISSOR_SIZE(100, 100) // Constrain drawing to the other half of the arc
SCISSOR_XY(200, 100)
CMD_GRADIENT(200, 150, 0xFFFF00, 300, 199, 0x00AA00) // Draw a gradient from yellow to green

// *** Return the stencil and scissor to normal***
STENCIL_FUNC(ALWAYS, 1, 255)
SCISSOR_SIZE(800, 480)
SCISSOR_XY(0, 0)

// *** Draw a gauge with no background or tickmarks ***
COLOR_RGB(0, 0, 0)
CMD_GAUGE(200, 200, 107, OPT_NOBACK | OPT_NOTICKS, 4, 8, 32, 100)
Best Regards, BRT Community

Hi,

There are a few ways to do this, which can be
- entirely with EVE display objects (including the gauge background and the pointer)
- entirely via loading images (e.g. have a series of bitmap cells with the gauge at different positions)
- or a combination of these (e.g. image as the gauge background and use EVE shapes for the pointer)

One suggested way would be to use an image as the background of the gauge, and then to have a second bitmap of just the pointer and then rotate the pointer image.

You can also make the background using EVE shapes.

We can make a couple of small examples of these for you and post them here.

Best Regards, BRT Community

Hi,

Glad to hear that it helped,

Here is a very rough beta of one way to do highlighting of a block of text and also to do a cursor (by highlighting one character in a similar way)

It needs more testing and optimisation before we publish it officially but hope it helps in the meantime,

The main idea is to get the widths of each character and then add them up to work out where the highlighting rectangle should begin and how wide it should be.

Then, you can draw the rectangle either using a rectangle primitive or via efficient rectangles (see the Gameduino 2 cookbook by James Bowman available on the web as a PDF)

Finally, the text can be placed on top.

The same idea can be used to re-size shapes etc. based on the text within them or if you wanted to write a string and snapshot it etc. or any other case where you need to know the character widths.

This example uses built in fonts but you can also use widths for custom fonts.

In the code, the following lines set which char has the cursor and which chars have the highlight.

   Cursor_Position = 10;

   FirstCharToHighlight = 20;   // highlight 20th-30th characters
   LastCharToHighlight = 30;

The output looks like the attached file,

Best Regards, BRT Community


    
#define Handle_Highlight 7
#define Handle_Cursor 8

char message[] = "Built-In Font with Highlighting";


// Variables for the built-in font properties
    uint32_t FontByte;
    uint16_t FontIndexCounter;
    uint32_t FontTableAddress = 0;
    uint32_t X = 0;
    uint32_t Y = 0;
#define BuiltInFont 30

    // ###################################################################################################################################
    // Get font properties for a built-in font
    // ###################################################################################################################################

    // ------------------------- Get font properties for a built-in font --------------------
    // This shows how to get the width and properties of internal fonts. We need to read the
    // properties from EVE as the data is not currently in the MCU

    EVE_GPU_FONT_HEADER BuiltInFont_props; // Structure defined in the header file to hold font data

    FontTableAddress = ((HAL_MemRead32(EVE_ROMFONT_TABLEADDRESS)) + ((BuiltInFont-16) * FT_GPU_FONT_TABLE_SIZE));
    // Note that font table starts at font 16
    // EVE_ROMFONT_TABLEADDRESS is equivalent to ROM_FONTROOT
    // Font Table Address = [address at ROM_FONTROOT] + ((font required - 16) * 148)

    FontIndexCounter = 0;
    while(FontIndexCounter < 128)
    {
    FontByte = HAL_MemRead8(FontTableAddress + FontIndexCounter);
    BuiltInFont_props.FontWidth[FontIndexCounter] = FontByte;
    FontIndexCounter ++;
    }
    FontByte = HAL_MemRead32(FontTableAddress + FontIndexCounter);
    BuiltInFont_props.FontBitmapFormat = FontByte;
    FontIndexCounter = FontIndexCounter + 4;

    FontByte = HAL_MemRead32(FontTableAddress + FontIndexCounter);
    BuiltInFont_props.FontLineStride = FontByte;
    FontIndexCounter = FontIndexCounter + 4;

    FontByte = HAL_MemRead32(FontTableAddress + FontIndexCounter);
    BuiltInFont_props.FontWidthInPixels = FontByte;
    FontIndexCounter = FontIndexCounter + 4;

    FontByte = HAL_MemRead32(FontTableAddress + FontIndexCounter);
    BuiltInFont_props.FontHeightInPixels = FontByte;
    FontIndexCounter = FontIndexCounter + 4;

    FontByte = HAL_MemRead32(FontTableAddress + FontIndexCounter);
    BuiltInFont_props.PointerToFontGraphicsData = FontByte;


    // ###################################################################################################################################
    // Calculate the length of the characters to highlight or to select with cursor
    // ###################################################################################################################################

uint8_t CurrentCharIndex = 0;
volatile char CurrentChar;
volatile uint8_t CurrentCharWidth;
volatile uint8_t CurrentCharHex;
uint32_t MessageSize = (sizeof(message) -1);
uint32_t TotalStringWidth = 0;

// For highlighting a block of text, here we highlight 18th-30th
uint32_t FirstCharXCoord = 0;
uint8_t FirstCharToHighlight = 0;
uint8_t LastCharToHighlight = 0;
uint32_t HighlightStringWidth = 0;
uint8_t Highlight_Enable = 0x00;

// For a cursor highlighting one character, here we select the 10th
uint8_t Cursor_Position = 0; //10
uint8_t CursorCharWidth = 0;
uint32_t CursorCharXCoord = 0;
uint8_t Cursor_Enable = 0x00;


// ######################################## Highlight ##########################################

FirstCharToHighlight = 20; // highlight 20th-30th characters
LastCharToHighlight = 30;

// --------------------- For the highlight -------------------------
// Pass in index to FirstCharToHighlight and LastCharToHighlight
// Provides output of FirstCharXCoord and HighlightStringWidth which are X coordinates to be used to draw a rectangle
CurrentCharIndex = 0;
HighlightStringWidth = 0;
TotalStringWidth = 0;
Highlight_Enable = 0xFF;

// Do not render highlight if values out of range
if((FirstCharToHighlight < 0) || (LastCharToHighlight <= FirstCharToHighlight) )
{
FirstCharXCoord = 0;
HighlightStringWidth = 0;
Highlight_Enable = 0x00;
}
else
{
// Correct any other out of range values
if(FirstCharToHighlight > (MessageSize-1))
{
FirstCharToHighlight =  (MessageSize-1);
}
if(LastCharToHighlight > (MessageSize))
{
LastCharToHighlight =  (MessageSize);
}

do
{
// Sum up the widths of the characters beginning with the first (index 0 in message)
CurrentChar = message[CurrentCharIndex];
CurrentCharHex = (uint8_t) (CurrentChar);
CurrentCharWidth = (uint8_t) BuiltInFont_props.FontWidth[CurrentCharHex];

// Record the total when we reach the START of the highlight. This becomes the width of the string up to the
// left-hand side of the FIRST character to be highlighted, allowing us to work out its coordinate
// Note that the index is 0-based and so 9 would be the 10th character.
if(CurrentCharIndex == FirstCharToHighlight)
{
FirstCharXCoord = TotalStringWidth;
}

// Record the total when we reach the END of the highlight. This becomes the width of the string up to the
// right-hand side of the LAST character to be highlighted, allowing us to work out its coordinate.
if((CurrentCharIndex >= (FirstCharToHighlight)) && (CurrentCharIndex <= (LastCharToHighlight)))
{
HighlightStringWidth += CurrentCharWidth;
}

CurrentCharIndex ++;
TotalStringWidth += CurrentCharWidth;

} while(CurrentCharIndex <= MessageSize);
}


// ######################################## Cursor ##########################################

Cursor_Position = 10;

// --------------------- For the cursor -------------------------
// Pass in index to Cursor_Position
// Provides output of CursorCharXCoord and CursorCharWidth which are X coordinates to be used to draw a rectangle
CurrentCharIndex = 0;
TotalStringWidth = 0;
Cursor_Enable = 0xFF;

// Correct any invalid inputs
if(Cursor_Position < 0)
Cursor_Position = 0;
if(Cursor_Position > MessageSize)
Cursor_Position = MessageSize;

do
{
// Sum up the widths of the characters beginning with the first (index 0 in message)
CurrentChar = message[CurrentCharIndex];
CurrentCharHex = (uint8_t) (CurrentChar);
CurrentCharWidth = (uint8_t) BuiltInFont_props.FontWidth[CurrentCharHex];

// when we reach the selected character where the cursor should go record the values to
// specify where the rectangle should begin and end
if(CurrentCharIndex == Cursor_Position)
{
CursorCharXCoord = TotalStringWidth;
CursorCharWidth = CurrentCharWidth;
}

TotalStringWidth += CurrentCharWidth;
CurrentCharIndex ++;

} while(CurrentCharIndex < MessageSize);


// ###################################################################################################################################
    // Using the font in a display list
    // ###################################################################################################################################


EVE_LIB_BeginCoProList();
EVE_CMD_DLSTART();
EVE_CLEAR_COLOR_RGB(0, 0, 0);
EVE_CLEAR(1,1,1);
EVE_COLOR_RGB(255, 255, 255);

X = 50;
Y = 100;

// ----- add a highlight -----

if(Highlight_Enable == 0xFF)
{
// Draw a rectangle using the efficient rectangles method (see Gameduino 2 cookbook), this is for the highlight
EVE_SAVE_CONTEXT(); // Save details such as current color
EVE_BEGIN(EVE_BEGIN_BITMAPS);
EVE_COLOR_RGB(0, 0, 128); // Set a blue color for the highlight
EVE_BITMAP_HANDLE(Handle_Highlight); // Set the handle
EVE_BITMAP_LAYOUT(EVE_FORMAT_L8, 1, 1); // Set an L8 bitmap 1 x 1
EVE_BLEND_FUNC(EVE_BLEND_ONE, EVE_BLEND_ZERO); // Set the blend function
// Set the size of the rectangle to be the width of the area to be highlighted and the height of the font
EVE_BITMAP_SIZE(EVE_FILTER_NEAREST, EVE_WRAP_REPEAT, EVE_WRAP_REPEAT, HighlightStringWidth, BuiltInFont_props.FontHeightInPixels);
EVE_VERTEX2F((X+FirstCharXCoord)*16, Y*16); // Place the top-left of the rectangle at the same coordinate as the character to be highlighted
EVE_RESTORE_CONTEXT(); // Restore the settings such as text colour for the next characters

// You could also use a standard rectangle here instead of the efficient rectangles
//EVE_COLOR_RGB(0, 0, 128); // Set a blue color for the highlight
//EVE_BEGIN(EVE_BEGIN_RECTS);
//EVE_VERTEX2F((X+FirstCharXCoord)*16, Y*16); // Top-left coordinate
//EVE_VERTEX2F((X+FirstCharXCoord + HighlightStringWidth)*16, (Y+BuiltInFont_props.FontHeightInPixels)*16); // Bottom right coordinate
}

// ----- add a cursor -----

if(Cursor_Enable == 0xFF)
{
// Draw a rectangle using the efficient rectangles method, this is for the cursor
// You could also use a standard rectangle here instead
EVE_SAVE_CONTEXT(); // Save details such as current color
EVE_BEGIN(EVE_BEGIN_BITMAPS);
EVE_COLOR_RGB(0, 0, 128); // Set a blue color for the highlight
EVE_BITMAP_HANDLE(Handle_Cursor); // Set the handle
EVE_BITMAP_LAYOUT(EVE_FORMAT_L8, 1, 1); // Set an L8 bitmap 1 x 1
EVE_BLEND_FUNC(EVE_BLEND_ONE, EVE_BLEND_ZERO); // Set the blend function
// Set the size of the rectangle to be the width of the current character and the height of the font
EVE_BITMAP_SIZE(EVE_FILTER_NEAREST, EVE_WRAP_REPEAT, EVE_WRAP_REPEAT, CursorCharWidth, BuiltInFont_props.FontHeightInPixels);
EVE_VERTEX2F((X+CursorCharXCoord)*16, Y*16); // Place the top-left of the rectangle at the same coordinate as the character to be highlighted
EVE_RESTORE_CONTEXT(); // Restore the settings such as text colour for the next characters
}

EVE_BLEND_FUNC(EVE_BLEND_SRC_ALPHA, EVE_BLEND_ONE_MINUS_SRC_ALPHA); // Set the blend function back to default to avoid affecting rest of screen content

EVE_COLOR_RGB(255, 255, 255); // Color white
EVE_CMD_TEXT(X, Y, BuiltInFont, 0, message); // Write the text itself

EVE_DISPLAY();
EVE_CMD_SWAP();
EVE_LIB_EndCoProList();
EVE_LIB_AwaitCoProEmpty();

    while(1)
    {
    }

Hi,

For the partial characters, one way may be to reverse your operation and print text only where the stencil is a certain value. For example here the text is only visible in the grey box area where the stencil is 1.

CLEAR_COLOR_RGB(128,128,128)
CLEAR(1, 1, 1)

// increment stencil where the box is drawn
STENCIL_OP(INCR, INCR)
COLOR_A(128)
BEGIN(RECTS)
VERTEX2F(2144, 1728)
VERTEX2F(8000, 4800)
END()
// Stop the stencil incrementing
STENCIL_OP(KEEP, KEEP)

// Text only where the stencil is 1
COLOR_A(255)
STENCIL_FUNC(EQUAL, 1, 255)

CMD_TEXT(107, 144, 30, 0, "TESTS")

// return the function
STENCIL_FUNC(ALWAYS, 0, 255)
We have some explanation on using character widths for things like drawing highlighting using efficient rectangles, which are part of appnotes in development, and so we'll post some snippets from those here too.

Best Regards, BRT Community

Hi,

Could you share your code for loading the 5 custom fonts to EVE and setting up the font e.g. via SetFont2 command?
Could you also share your settings used to convert each font?

Are the loaded from compressed files or are they loaded as raw data?

If the attachment is too large or if you are not able to share the code snippets on the forum, then you can also email the files to us at support.emea@brtchip.com

Best Regards, BRT Community

Hello,

Yes, from the screenshots previously provided it appears as if there may be an overwrite of assets happening in RAM_G.

If the address for the asset has been altered this will cause EVE to attempt to render the asset from the wrong RAM_G location. For example if you have a 100kB image file at RAM_G +0 and you move the allocation to RAM_G+500 the resulting display code will still attempt to render data from RAM_G+0 thus causing corruption in the image.

Do you still experience similar issue in ESD 4.15?

Best Regards,
BRT Community