How to create a Text Input screen like this?

How-to
1

Description

What MCU/Processor/Board and compiler are you using?

Nordics’s nRF52840

What do you want to achieve?

I have a monochrome OLED with 5 buttons (Up, Down, Left, Right, Enter).

I want to create a screen where I can enter text. Like the photo attached below.

What have you tried so far?

I tried to use a roller with Alphabets as options. I tried to stylize it but the final result is not very satisfying.

Does anyone have any suggestions how I can create an input screen like this ?

Screenshot and/or video

image
image.jpg742×294 60.1 KB

2

The most simple solution is

  1. create a label with _ _ _ _ _ _ _ text
  2. keep track of the current position in a variable
  3. when up/down is pressed change the appropriate letter
  4. Call lv_label_set_text() to refresh the label
3

I have 5 buttons in my hardware. Like this.

image
image.jpg1300×887 165 KB

I need the screen to be somewhat like this.
image ---------On pressing right------->image
image ---------On pressing left------->image
image ---------On pressing down------->image

I think this type of navigation is not possible with label. I am trying to make it using buttons.

As of now I have two concerns. Will the buttons consume too much memory ? How can I make the buttons arrange themselves on screen ?

Is there something else you suggest ?

Thank You

4

You can create 4 labels to and use lv_label_set_body_draw(label, true); it will draw a background with style.body appearance.
With style.body.border.part = LV_BORDER_BOTTOM you can display only a line in the bottom.

So it seems you can do it by

  1. creating labels for each letter
  2. 2 styles (a full border, a bottom border)
  3. changing the style of the labels and the text of the labels on button press
1 Like
5

Thank you for your reply. You are awesome.

I think this could actually work. I will share my work soon.

1 Like