Highlight Implement

[kaiakz]

It is great to highlight the selected item. I have finished the swapping data between JS and WASM, JS can get a string(widget attribute) from WASM and parse it into JSON. We can get the position and size of the widget now, it's time to achieve the highlight, I think there are some ways:

In Browser, since WASM displays on a Canvas

• Use JavaScript to draw rectangles on it.
• Use WebAPI to draw the Canvas.

In WASM:

• Use SDL to draw.

• Simulate the lv_group: I found the widgets in lv_group have the highligh. @kisvegabor @embeddedt How can I simulate it, can you show some details about lv_group

• Change the selected widget style: border, colour, etc.

[kisvegabor]

In my opinion, it's better to use the SDL or JavaScript to display a rectangle because it will give more flexibility later.

The purpose of groups is to enable keyboard/encoder navigation and highlighting is designed to work well with typical selectable objects. Some issues:

• If you select a button the label on it also will have orangish color.
• If you set an orange color for something the default highlighting won't be really visible.
• There are some special style settings with some object types (a lot of transparent parts) where highlighting might not give the expected result.

So, in summary, I think manually drawing a rectangle will give a more flexible and predictable result.

[kaiakz]

OK, I use JS to the CANVAS. Due to WASM also draw on CANVAS, highlights sometimes can't display normally, I might fix it later.