Écran

L'écran d'OLEM est un écran LCD-TFT équipé d'une dalle tactile capacitive. Ses caractéristiques techniques sont :

320*240 px
couleurs RGB565 : chaque pixel est stocké sur 2 octets. Le rouge et le bleu sont codés sur 5 bits, le vert sur 6 bits.
(x=0, y=0) est le coin en haut à gauche de l'écran

Les callbacks des composants de l'écran, comme les boutons, sont implémentés sous forme d'événements stockés dans une file. Chaque composant peut être associé à un identifiant, qui est ajouté à la file quand l'événement se produit. Cette file peut être lue avec l'API.

Préparer les images

D'autres formats seront gérés plus tard. Pour l'instant, le seul format supporté est celui généré par https://lvgl.io/tools/imageconverter en V8.

Pour générer le fichier image :

Préparez l'image en lui donnant la taille qu'elle aura à l'écran (l'écran fait 320*240 px)
Choisissez la version : LVGL v8
Choisissez le Color format : CF_TRUE_COLOR_ALPHA ou CF_TRUE_COLOR
Output format : Binary RGB565
Lancez la conversion

L'image obtenue peut maintenant être utilisée.

Exemples

Texte

import olem

message = "Hello world !"

# Afficher au milieu de l'écran
text_obj = olem.display_text(message, olem.FONT_DEFAULT, olem.ALIGN_CENTER)
olem.display_center(text_obj)
olem.delay_ms(5000)

# Changer le contenu
olem.display_set_text(text_obj, "Now I barely fit on screen")
olem.delay_ms(5000)

# Redimensionner
olem.display_set_size(text_obj, 200, 100)
olem.delay_ms(1000)

# Changer la couleur
olem.display_set_text(text_obj, "Now I do.\nI can also change color!")
olem.display_set_text_color(text_obj, "#00FF00")
olem.delay_ms(5000)

# Déplacer
olem.display_set_text(text_obj, "Or move")
for i in range(6):
    olem.display_set_pos(text_obj, i * 10, i * 10)
    olem.display_wait_for_next_frame()

# Supprimer
olem.display_del(text_obj)

# Taille de police
text_obj = olem.display_text("New texts are still white", olem.FONT_SMALL, olem.ALIGN_CENTER)
olem.display_center(text_obj)
olem.delay_ms(5000)

# Changer la couleur par défaut, tous les nouveaux textes l'utilisent
olem.display_set_default_text_color("#FF00FF")

# Supprimer tous les objets affichés
olem.display_del_all()

# Le nouveau texte utilise la couleur par défaut
olem.display_mutex_take()
text_obj = olem.display_text("But not anymore !", olem.FONT_BIG, olem.ALIGN_CENTER)
olem.display_set_size(text_obj, 320, 100)
olem.display_center(text_obj)
olem.display_mutex_give()

olem.delay_ms(5000)

Boutons

Trois boutons changent la couleur des LEDs, le bouton image termine l'exemple. Les événements sont vérifiés régulièrement avec display_get_event().

import olem

X_MARGIN = 10

# Identifiants des événements
EVENT_RED   = 1
EVENT_GREEN = 2
EVENT_BLUE  = 3
EVENT_EXIT  = 4

# Créer les composants de l'écran
b = olem.display_button("Red", EVENT_RED)
olem.display_set_pos(b, X_MARGIN, 20)

b = olem.display_button("Green", EVENT_GREEN)
olem.display_set_pos(b, X_MARGIN, 80)

b = olem.display_button("Blue", EVENT_BLUE)
olem.display_set_pos(b, X_MARGIN, 140)

b = olem.display_img_button("/common/images/settings.bin")
olem.display_add_event_cb(b, EVENT_EXIT)
olem.display_set_pos(b, X_MARGIN, 180)
olem.display_set_size(b, 50, 50)

# Vérifier les événements régulièrement
should_exit = False
while not should_exit:
    event = olem.display_get_event()

    if event == EVENT_RED:
        olem.led_on(olem.LEDALL, "#FF0000")
    elif event == EVENT_GREEN:
        olem.led_on(olem.LEDALL, "#00FF00")
    elif event == EVENT_BLUE:
        olem.led_on(olem.LEDALL, "#0000FF")
    elif event == EVENT_EXIT:
        should_exit = True

    olem.delay_ms(50)

Pour attendre les événements au lieu de les vérifier régulièrement, remplacez la boucle par display_wait_for_event(), ou par display_wait_for_event_timeout() pour faire autre chose quand aucun événement n'arrive à temps :

# Attendre chaque événement, 500 ms au maximum
should_exit = False
while not should_exit:
    event = olem.display_wait_for_event_timeout(500)

    if event == EVENT_RED:
        olem.led_on(olem.LEDALL, "#FF0000")
    elif event == EVENT_GREEN:
        olem.led_on(olem.LEDALL, "#00FF00")
    elif event == EVENT_BLUE:
        olem.led_on(olem.LEDALL, "#0000FF")
    elif event == EVENT_EXIT:
        should_exit = True
    elif event == 0:
        print("no event before timeout")

QR code

Le texte encodé dans le QR code change à chaque fois qu'une main passe au-dessus du capteur du dessus.

import olem

qr_code = olem.display_qr_code(220, "Hello OLEM")
olem.display_center(qr_code)

for i in range(5):
    # Attendre une main au-dessus du capteur du dessus, puis qu'elle s'en aille
    while not olem.ir_top_is_hand_present():
        olem.delay_ms(50)
    while olem.ir_top_is_hand_present():
        olem.delay_ms(50)

    olem.display_set_qr_code_data(qr_code, "Hello OLEM " + str(i + 1))

Constantes et fonctions

Constants

Constant	Value	Description
`FONT_DEFAULT`	`0`	Default font size.
`FONT_SMALL`	`1`	Small font size.
`FONT_BIG`	`2`	Big font size.
`ALIGN_LEFT`	`0`	Text aligned on the left.
`ALIGN_CENTER`	`1`	Text centered.
`ALIGN_RIGHT`	`2`	Text aligned on the right.

`class lv_obj`

Type of the screen objects returned by the display functions, such as display_text() or display_button(). It cannot be created directly.

The screen is 320 x 240 px, (0, 0) is its top left corner.

`display_text(text, font_size, align)`

Create a text object.

Parameter	Description
`text`	text to display
`font_size`	`FONT_SMALL`, `FONT_DEFAULT` or `FONT_BIG`
`align`	`ALIGN_LEFT`, `ALIGN_CENTER` or `ALIGN_RIGHT`

Returns: the text object

`display_button(text, event_id)`

Create a button. When it is pressed, event_id is added to the event queue, see display_get_event().

Parameter	Description
`text`	text of the button
`event_id`	integer identifying the button in the event queue, 0 is not allowed

Returns: the button object

`display_img(file_name)`

Create an image object from a file. Images must be converted with the LVGL v8 image converter, in binary RGB565.

Parameter	Description
`file_name`	path of the image file, relative to the assets folder of the game

Returns: the image object

`display_img_button(file_name)`

Create a clickable image object from a file. Use display_add_event_cb() to choose the event it triggers.

Parameter	Description
`file_name`	path of the image file, relative to the assets folder of the game

Returns: the image object

`display_qr_code(size, data)`

Create a QR code object, black on white.

Parameter	Description
`size`	width and height in px
`data`	text encoded in the QR code

Returns: the QR code object

`display_set_qr_code_data(lvgl_obj, data)`

Change the text encoded in a QR code object.

Parameter	Description
`lvgl_obj`	QR code object created with `display_qr_code()`
`data`	new text to encode

`display_add_event_cb(lvgl_obj, event_id)`

Make an object clickable: when it is clicked, event_id is added to the event queue, see display_get_event().

Parameter	Description
`lvgl_obj`	object to make clickable
`event_id`	integer identifying the object in the event queue, 0 is not allowed

`display_del(lvgl_obj)`

Delete an object from the screen. It must not be used afterwards.

Parameter	Description
`lvgl_obj`	object to delete

`display_del_all()`

Delete all the objects from the screen. The background color is kept.

`display_center(lvgl_obj)`

Center an object on the screen.

Parameter	Description
`lvgl_obj`	object to center

`display_set_pos(lvgl_obj, x, y)`

Move an object on the screen.

Parameter	Description
`lvgl_obj`	object to move
`x`	position of its left side in px
`y`	position of its top side in px

`display_get_pos(lvgl_obj)`

Parameter	Description
`lvgl_obj`	displayed object

Returns: position of the object as a list [x, y] in px

`display_get_size(lvgl_obj)`

The object must already be drawn on screen, see display_wait_for_next_frame().

Parameter	Description
`lvgl_obj`	displayed object

Returns: size of the object as a list [width, height] in px

`display_set_size(lvgl_obj, width, height)`

Resize an object. Images are not scaled, only their container is resized.

Parameter	Description
`lvgl_obj`	object to resize
`width`	new width in px
`height`	new height in px

`display_set_text(lvgl_obj, text)`

Change the text of a text object.

Parameter	Description
`lvgl_obj`	text object created with `display_text()`
`text`	new text to display

`display_set_img_src(lvgl_obj, file_name)`

Change the image of an image object.

Parameter	Description
`lvgl_obj`	image object created with `display_img()`
`file_name`	path of the new image file, relative to the assets folder of the game

`display_move_to_foreground(lvgl_obj)`

Draw an object above all the others.

Parameter	Description
`lvgl_obj`	object to move

`display_move_to_layer(lvgl_obj, index)`

Choose in which order an object is drawn.

Parameter	Description
`lvgl_obj`	object to move
`index`	0 is the background, the foreground is the number of objects on screen minus 1

`display_wait_for_next_frame()`

Wait until the next frame is drawn on screen.

`display_mutex_take()`

Prevent the screen from being redrawn, so that several objects can be created and configured before they appear. The screen is frozen until display_mutex_give() is called.

`display_mutex_give()`

Allow the screen to be redrawn again after display_mutex_take().

`display_get_event()`

Get the oldest event triggered by a button or a clickable object, without waiting.

Returns: id of the oldest event, or 0 if there is none

`display_clear_events()`

Delete the events that were not read yet.

`display_wait_for_event()`

Wait for an event triggered by a button or a clickable object. The game can still be stopped during the wait.

Returns: id of the event

`display_wait_for_event_timeout(timeout)`

Wait for an event triggered by a button or a clickable object, for a limited time.

Parameter	Description
`timeout`	maximum time to wait in ms

Returns: id of the event, or 0 if no event happened in time

`display_set_bkg_color(color)`

Change the background color of the screen.

Parameter	Description
`color`	color as a "#RRGGBB" string

`display_set_text_color(lvgl_obj, color)`

Change the color of a text object.

Parameter	Description
`lvgl_obj`	text object created with `display_text()`
`color`	color as a "#RRGGBB" string

`display_set_default_text_color(color)`

Change the color of the text objects created after this call.

Parameter	Description
`color`	color as a "#RRGGBB" string

`display_set_backlight(value)`

Set the brightness of the screen.

Parameter	Description
`value`	brightness from 0 to 100, other values are clamped

Préparer les images​

Exemples​

Texte​

Boutons​

QR code​

Constantes et fonctions​

Constants​

class lv_obj​

display_text(text, font_size, align)​

display_button(text, event_id)​

display_img(file_name)​

display_img_button(file_name)​

display_qr_code(size, data)​

display_set_qr_code_data(lvgl_obj, data)​

display_add_event_cb(lvgl_obj, event_id)​

display_del(lvgl_obj)​

display_del_all()​

display_center(lvgl_obj)​

display_set_pos(lvgl_obj, x, y)​

display_get_pos(lvgl_obj)​

display_get_size(lvgl_obj)​

display_set_size(lvgl_obj, width, height)​

display_set_text(lvgl_obj, text)​

display_set_img_src(lvgl_obj, file_name)​

display_move_to_foreground(lvgl_obj)​

display_move_to_layer(lvgl_obj, index)​

display_wait_for_next_frame()​

display_mutex_take()​

display_mutex_give()​

display_get_event()​

display_clear_events()​

display_wait_for_event()​

display_wait_for_event_timeout(timeout)​

display_set_bkg_color(color)​

display_set_text_color(lvgl_obj, color)​

display_set_default_text_color(color)​

display_set_backlight(value)​