[Feature] Create basic UI and run animation for EV3

[laurensvalk]

The EV3 does not have a proper UI yet. Once pybricks/pybricks-micropython#388 is merged, the bluetooth system code will be properly separated from the UI. There will be functional HMI variants, such as hmi_lcd (nxt, ev3) and hmi_single_led (technic, move, city, essential), hmi_light_matrix (prime).

This has already been split, so we can start working on it. It still just implements the 5x5 light matrix UI for now, but can be modified easily. This means we can also keep a static framebuffer for the UI there if we want to. I would like to propose the following simple UI to get started.

     example.py
     -----
 >   hello.py
     -----     
     -----    

You would use the up/down buttons to move the selection > up and down. Other visualizations to indicate selections are also fine.

This is functionally equivalent to what we have already, just visually displayed with text instead of 5 blocks.

Unused slots should be selectable (so > ----- ) since that is where the program will be downloaded to.

To get the names, we can add a hook to lib/pbio/include/pbsys/main.h such as pbsys_main_program_get_info(pbsys_main_program_t *program) with an implementation in bricks/_common/micropython.cto get the name from thempyblob. Seepbsys_main_program_validate` which is also a application specific hook.

In principle, someone can already start on this even if pybricks/pybricks-micropython#388 is not merged yet.

---

The part where we clear the screen or start visual run animations has also been moved to these respective UIs. This means we can think about the animations for EV3.

On SPIKE, we'll keep the animated square. I'm not opposed to keeping it on EV3, but we could do something different. It would be nice if the name of the current program is displayed next to it.

---

I think this UI will be good enough for the first alpha release. We can think about something more elaborate as we go.

[laurensvalk]

This may be relevant to @schodet! 😄

[schodet]

Yes, thanks :)

Did you see pybricks/pybricks-micropython#384 ?

[laurensvalk]

Yes, this is why I thought you might like this one. I will definitely try your PR, hopefully soon.

Most of the big refactoring stuff should be done soon :)

[laurensvalk]

There isn't currently a good way to get the script name (see #2364), so the version above can't be fully done yet, but we can still experiment with different visuals for now.

We could even evaluate ideas by implementing something as Python user code so everyone can run and compare things.

[laurensvalk]

Given this, I made some minor tweaks to the existing UI to make it passable for an early release.

The UI code has also been refactored to allow for all kinds of experimentation for anything regarding the UI. It is fully decoupled from the SPIKE Prime UI.

[laurensvalk]

I went ahead and added a hook to retrieve and show the name in the placeholder UI.

It will show __main__ for any valid program until #2364 is implemented by the host, but this unblocks progress here.

[schodet]

@laurensvalk do you receive my emails? if not, can you check your spam folder?

I made a python mock-up:

# Menu mock-up.
from pybricks.hubs import ThisHub
from pybricks.tools import wait
from pybricks.parameters import Button, Color, Image

progs = [
    "robot",
    "ikinematic",
    "try_motors",
    "-----",
    "-----",
]

def bat_icon(level):
    """
    ***************
    *             *
    * *** *** *** **
    * *** *** *** **
    * *** *** *** **
    * *** *** *** **
    *             *
    ***************
    """
    fg = Color.BLACK

    img = Image.empty(16, 16)
    img.clear() # workaround

    img.draw_box(0, 4, 0 + 15 - 1, 4 + 8 - 1, 0, False, fg)
    img.draw_box(15, 6, 15, 6 + 4 - 1, 0, True, fg)
    for i in range(level):
        img.draw_box(2 + i * 4, 6, 2 + i * 4 + 3 - 1, 6 + 4 - 1, 0, True, fg)

    return img

def bt_icon(state):
    """
       *
       **
       * *
    *  *  *
     * * *
      ***
       *
      ***
     * * *
    *  *  *
       * *
       **
       *
    """
    fg = Color.BLACK if state else Color.WHITE * 0.7

    img = Image.empty(7, 16)
    img.clear() # workaround

    img.draw_line(3, 2, 3, 14, 1, fg)
    img.draw_line(3, 2, 6, 5, 1, fg)
    img.draw_line(6, 5, 0, 11, 1, fg)
    img.draw_line(0, 5, 6, 11, 1, fg)
    img.draw_line(6, 11, 3, 14, 1, fg)

    return img


def pybricks_logo(scale):
    fg = Color.BLACK
    bg = Color.WHITE

    def s(v):
        return int(v * scale + 0.5)

    img = Image.empty(s(154), s(84))
    img.clear() # workaround

    def box(x, y, w, h, r, v):
        img.draw_box(s(x), s(y), s(x) + s(w) - 1, s(y) + s(h) - 1, s(r), True, v)
    def disc(x, y, r, v):
        img.draw_circle(s(x), s(y), s(r), v)

    # Rounded rectangles making up the left and right side of the head.
    box(0, 0, 42, 84, 11, fg);
    box(112, 0, 42, 84, 11, fg);

    # Forehead, main fill, and jaw.
    box(14, 0, 126, 14, 0, fg);
    box(14, 14, 126, 56, 0, bg);
    box(28, 56, 98, 14, 0, fg);

    # Eyes.
    disc(49, 29, 10, fg);
    disc(106, 29, 10, fg);

    # Teeth.
    for i in range(6):
        box(40 + 14 * i, 51, 4, 5, 0, fg);

    return img


def draw_menu(scr, logo, bat_icons, bt_icons, bat_level, bt, selected):
    scr.draw_box(-4, -4, logo.width + 5 - 1, logo.height + 5 - 1, 2)
    scr.draw_image(2, 2, logo)
    scr.draw_line(logo.width + 5, 16, scr.width - 1, 16)
    scr.draw_text(logo.width + 7, 0, "Pybricks")
    scr.draw_image(scr.width - bat_icons[bat_level].width - 2, 0, bat_icons[bat_level])
    bt = 1 if bt else 0
    scr.draw_image(scr.width - bat_icons[bat_level].width - bt_icons[bt].width - 4, 0, bt_icons[bt])
    for i in range(5):
        if selected != i:
            fg = Color.BLACK
            bg = Color.WHITE
        else:
            fg = Color.WHITE
            bg = Color.BLACK
        scr.draw_text(16, 40 + i * 18, "{}: {}".format(i, progs[i]), fg, bg)


hub = ThisHub()
hub.screen.clear()

selected = 0
bat_level = 3
bt = True

logo = pybricks_logo(0.25)
bat_icons = [bat_icon(i) for i in range(4)]
bt_icons = [bt_icon(False), bt_icon(True)]

while True:
    pressed = hub.buttons.pressed()
    if Button.UP in pressed:
        selected = (selected + 4) % 5
    elif Button.DOWN in pressed:
        selected = (selected + 1) % 5
    elif Button.CENTER in pressed:
        bt = not bt
        bat_level = (bat_level + 3) % 4

    draw_menu(hub.screen, logo, bat_icons, bt_icons, bat_level, bt, selected)

    while hub.buttons.pressed() == pressed:
        wait(50)

[laurensvalk]

@laurensvalk do you receive my emails? if not, can you check your spam folder?

Yep, they were there. That's odd considering that I emailed you first 😄 Sorry about the delay!