Why that trash symbol?

[beyonlo]

Hello @peterhinch

I'm using micro-gui with the ssd1306 mono display (128 x 64) with three buttons, but the micro-gui is showing in all demos a strange symbol (like as a trash) on the top right side. Why that symbol and how to remove?

Here a screenshot showing that trash symbol inside the green circle using demo/simple.py:

As I'm using a mono display I just changed the simple.py:

1. All places where has CWriter to Writer
2. wri = CWriter(ssd, arial10, GREEN, BLACK) to wri = Writer(ssd, arial10)

gui/demos/simple.py:

# simple.py Minimal micro-gui demo.

# Released under the MIT License (MIT). See LICENSE.
# Copyright (c) 2021 Peter Hinch

# hardware_setup must be imported before other modules because of RAM use.
import hardware_setup  # Create a display instance
from gui.core.ugui import Screen, ssd

from gui.widgets import Label, Button, CloseButton
from gui.core.writer import Writer

# Font for CWriter
import gui.fonts.arial10 as arial10
from gui.core.colors import *


class BaseScreen(Screen):

    def __init__(self):

        def my_callback(button, arg):
            print('Button pressed', arg)

        super().__init__()
        # verbose default indicates if fast rendering is enabled
        wri = Writer(ssd, arial10)
        col = 2
        row = 2
        Label(wri, row, col, 'Simple Demo')
        row = 50
        Button(wri, row, col, text='Yes', callback=my_callback, args=('Yes',))
        col += 60
        Button(wri, row, col, text='No', callback=my_callback, args=('No',))
        CloseButton(wri)  # Quit the application

def test():
    print('Simple demo: button presses print to REPL.')
    Screen.change(BaseScreen)  # A class is passed here, not an instance.

test()

Output:

$ mpremote run simple.py 
Using 3 switches.
Simple demo: button presses print to REPL.
Orientation: Horizontal. Reversal: False. Width: 128. Height: 64.
Start row = 0 col = 0
Warning: attempt to create Button outside screen dimensions.
Warning: attempt to create Button outside screen dimensions.

My hardware_setup.py:

from machine import Pin, SPI
import machine
import gc
import time

from ssd1306 import SSD1306_I2C as SSD

WIDTH = const(128)
HEIGHT = const(64)

i2c = machine.SoftI2C(scl=machine.Pin(18), sda=machine.Pin(17))
gc.collect()  # Precaution before instantiating framebuf
ssd = SSD(WIDTH, HEIGHT, i2c)

from gui.core.ugui import Display

# Define control buttons
nxt = Pin(42, Pin.IN, Pin.PULL_UP)  # Move to next control
sel = Pin(12, Pin.IN, Pin.PULL_UP)  # Operate current control
prev = Pin(41, Pin.IN, Pin.PULL_UP)  # Move to previous control
display = Display(ssd, nxt, sel, prev)  # 3-button mode

The ssd1306.py is from official micropython driver.

Thank you!

[beyonlo]

I tested with font6.py (and others fonts) on the demo/simple.py and I have same result

import gui.fonts.font6 as font6
wri = Writer(ssd, font6)

As you know, I was using the nano-gui and I was running nano-gui demos in the same display and that symbol never showed.

[beyonlo]

Ohh, I realized that symbol is the exit button, right? So sorry!

Is there how do not use and do not show that exit button? Because that exit button use a very large space on the display when used little display as the ssd1306 with 128x64 pixels.

[beyonlo]

Let me to do another question: on the nano-gui I was using the demo/mono_test.py. I would like to use that example in the micro-gui, where Next/Prev buttons change between fields(), multi_fields() and meter(). How is better way to do that?

Thank you in advance!

[beyonlo]

I think the micro-gui is no adapted very well to little display, like as 128x64, am I correct or not?

Mostly micro-gui demos the widgets go to out of display or I have error ValueError: row is out of range or showed message to use a display with at least 320x240 pixels. So, maybe is a good way use micro-gui working with Next/Prev between entire Screen, like as in the fields(), multi_fields() and meter() and if Select is pressed on the multi_fields() for example, another Screen can be called, or some thing like that - any idea or example that I can run as a start point?

[peterhinch]

The symbol is the CloseButton: just remove that line to get rid of it.

micro-gui is not optimisd for such a tiny screen, and I've never investigated the sort of modes you have in mind.

[beyonlo]

The symbol is the CloseButton: just remove that line to get rid of it.

Sorry for that dummy question. Now I see in the buttons.py code:

# Preferred way to close a screen or dialog. Produces an X button at the top RHS.
# Note that if the bottom screen is closed, the application terminates.
class CloseButton(Button):

micro-gui is not optimisd for such a tiny screen, and I've never investigated the sort of modes you have in mind.

Now I have three buttons on the display to use inputs Prev, Select, Next, but as the menus e etc of micro-gui are very large to that 128x64 display, I'm in a dillema what to do:

1. Back to nano-gui (that is optimised to tiny display) and continue with re-invente the inputs Prev, Select and Next (now that I have three buttons on hardware). In that examples that I was testing in nano-gui I was already working changing of Screen.
2. Continue on micro-gui and find a way (any idea?) to not use the standard menus (that are very large for 128x64 display). Has the micro-gui something that I can just use Prev and Next to change of Screen/Window? and use the Select on that Screen to show another Screen/Window?

Ps:

• As is a tiny display the idea is not to use widgets like as select, dropbox, etc, but just show the informations in each Screen and a way to change Screens with Next, Prev and Select
• For now, as is a very tiny display I do not need to change configurations, just read information and execute some commands (that is the use for Select), like as enable/disable WiFi AP mode, or a INPUT/OUTPUT, etc.
• If I choose the option 2 (micro-gui), the advantage is if in the feature I need to configure only few things, I'm already using micro-gui that support config. If I choose the option 1 (nano-gui) and I need to configure something I think that is possible run micro-gui together nano-gui just to configure that few things.

Below are two prints using nano-gui with that re-inveted inputs next, prev, select that I opened that issue in the nano-gui project: peterhinch/micropython-nano-gui#53

Is just two Screens, but will be much more, and the idea is prev/next change of that complete screen to another and use Select to change of Screen too.

Could you please give your thoughts about that?

Thank you

[peterhinch]

Here is the general approach I would use. Use micro-gui. Assign 3 unused pins to Button objects and use them to initialise the GUI. Their job is purely to allow the GUI to start correctly.

Assign the three pins used by your physical buttons to Button objects: let's call those Next, Prev and Sel. Note that Button instances allow you to dynamically assign callbacks.

Examine the demos to see how next and prev virtual buttons work. On your first screen, define an after_open method which assigns a callback to your Next button*. On the next screen, after_open would assign callbacks to Next, Prev and Sel. You'll need to be sure that every screen has an after_open which assigns appropriate callbacks to the three buttons.

*On the first screen you'll also need to assign callbacks to Prev and Sel, because you might run this screen in response to Prev from the next. You can also disable the callback - see docs.

I'm convinced this could work, but it will require careful coding and studying the screen change mechanism.

[beyonlo]

Hello @peterhinch I liked so much about your idea and I understood your rationale. I read many docs and source code as well from demos and ugui.py, but I have still some difficult to put that idea to works

Here is the general approach I would use. Use micro-gui. Assign 3 unused pins to Button objects and use them to initialise the GUI. Their job is purely to allow the GUI to start correctly.

Just to clarify: I already has 3 Pins dedicated for the physical Buttons, so need I more 3 Pins (even temporary Pins) to initialize the GUI? If yes, I have no more Pins unused in my board, the last two unused pins I used to complete 3 physical Buttons instead 1 Button. But, if is really necessary, I can to start the display part of code before others async applications, so I use that 3 pins in temporary mode from that others applications until GUI will be started, and after remap that 3 Pins again to others applications.

Assign the three pins used by your physical buttons to Button objects: let's call those Next, Prev and Sel. Note that Button instances allow you to dynamically assign callbacks.

I not understand how to that in code, because the hardware_setup.py already has that 3 Pins configured as Prev, Sel and Next

Examine the demos to see how next and prev virtual buttons work. On your first screen, define an after_open method which assigns a callback to your Next button*. On the next screen, after_open would assign callbacks to Next, Prev and Sel. You'll need to be sure that every screen has an after_open which assigns appropriate callbacks to the three buttons.

*On the first screen you'll also need to assign callbacks to Prev and Sel, because you might run this screen in response to Prev from the next. You can also disable the callback - see docs.

I understand very well about the after_open(self). I did some tests with after_open(self) while I was porting (with success 🥳 ) my Screens from nano-gui to micro-gui and It's simple: just execute something after widgets are created on the Screen. So after each Screen start, I need on the after_open(self) to assign a new Screen for the Next, Prev and Sel - but how to do that (what code)?

I examined demo simple.py that has two buttons where is possible test the Prev and Next mechanism, but inside the simple.py I think that mechanismi is not showed, right? So I checked in the ugui.py where has class Display(DisplayIP): that is used to assign that 3 buttons on hardware_setup to the 3 real pins. There is the class Input: maybe is there (I think) where I need to reuse some variables to change the Prev, Sel and Next on the after_open(self)? Sorry, that is too much information for a newbie in GUI.

I'm convinced this could work, but it will require careful coding and studying the screen change mechanism.

I don't know if I'm asking too much, but honestly I need your help for an example to start. So, could you please, create a very simple example with two or 3 Screens implementing that idea to me as a start point? And maybe this example can be a official example for anyone that want to use micro-gui with Prev, Sel, Next moving over Screens (when tiny display) instead to use the menus and some others widgets that are larger too much for that tiny displays.

Thank you so much!

At least I'm glad today that I have ported successfully that two nano-gui Screens to micro-gui (bellow the code):

multi_fields.py:

# simple.py Minimal micro-gui demo.

# Released under the MIT License (MIT). See LICENSE.
# Copyright (c) 2021 Peter Hinch

# hardware_setup must be imported before other modules because of RAM use.
import hardware_setup  # Create a display instance
from gui.core.ugui import Screen, ssd

from gui.widgets import Label, Button, CloseButton, Meter
from gui.core.writer import Writer
import uasyncio as asyncio

# Font for CWriter
import gui.fonts.arial10 as arial10
import gui.fonts.font6 as small

from gui.core.colors import *

def xorshift64star(modulo, seed = 0xf9ac6ba4):
    x = seed
    def func():
        nonlocal x
        x ^= x >> 12
        x ^= ((x << 25) & 0xffffffffffffffff)  # modulo 2**64
        x ^= x >> 27
        return (x * 0x2545F4914F6CDD1D) % modulo
    return func

async def change_multi_fields(nfields):
    random = xorshift64star(2**24 - 1)
    while True:
        for field in nfields:
            value = random() / 16777
            field.value('{:5.2f}'.format(value))
        await asyncio.sleep_ms(500)

class BaseScreen(Screen):

    def __init__(self):

        super().__init__()
        Writer.set_textpos(ssd, 0, 0)  # In case previous tests have altered it
        wri = Writer(ssd, small, verbose=False)
        wri.set_clip(False, False, False)
        nfields = []
        dy = small.height() + 6
        y = 2
        col = 15
        width = wri.stringlen('999.99')
        for txt in ('1:', '2:', '3:'):
            Label(wri, y, 0, txt)
            nfields.append(Label(wri, y, col, width, bdcolor=None))  # Draw border
            y += dy

        dy = small.height() + 6
        y = 2
        col = 82
        for txt in ('4:', '5:', '6:'):
            Label(wri, y, 67, txt)
            nfields.append(Label(wri, y, col, width, bdcolor=None))  # Draw border
            y += dy

        self.reg_task(change_multi_fields(nfields))

        CloseButton(wri)

    def after_open(self):
        print('----------------------------- 1')
        ssd.hline(60, 60, 30, BLUE)
        ssd.vline(67, 0, 28, BLUE)
        print('----------------------------- 2')

def test():
    Screen.change(BaseScreen)  # A class is passed here, not an instance.

test()

meter1.py

# simple.py Minimal micro-gui demo.

# Released under the MIT License (MIT). See LICENSE.
# Copyright (c) 2021 Peter Hinch

# hardware_setup must be imported before other modules because of RAM use.
import hardware_setup  # Create a display instance
from gui.core.ugui import Screen, ssd

from gui.widgets import Label, Button, CloseButton, Meter
from gui.core.writer import Writer
import uasyncio as asyncio

# Font for CWriter
import gui.fonts.arial10 as arial10
from gui.core.colors import *

async def change_meter(m0, m1, m2):
    steps = 10
    c = 1
    for n in range(steps + 1):
        m0.value(c/steps)
        m1.value(n/steps)
        m2.value(1 - n/steps)
        await asyncio.sleep(1)
        c += 1

class BaseScreen(Screen):

    def __init__(self):

        super().__init__()
        wri = Writer(ssd, arial10, verbose=False)
        m0 = Meter(wri, 5, 2, height = 45, divisions = 4,  legends=('0.0', '50', '100', '245!', '250!'), label='4', style=Meter.BAR)
        m1 = Meter(wri, 5, 44, height = 45, divisions = 4, legends=('0.0', '50', '200', '295!', '300!'), label='5', style=Meter.BAR)
        m2 = Meter(wri, 5, 86, height = 45, divisions = 4, legends=('0.0', '50', '200', '335!', '340!'), label='6', style=Meter.BAR)
        self.reg_task(change_meter(m0, m1, m2))
        CloseButton(wri)

    def after_open(self):
        print('----------------------------- 1')
        ssd.hline(60, 60, 30, BLUE)
        ssd.vline(67, 0, 28, BLUE)
        print('----------------------------- 2')

def test():
    Screen.change(BaseScreen)  # A class is passed here, not an instance.

test()

[beyonlo]

Hi @peterhinch Sorry for one more time request, but I would like to know if will be possible to you to create a very simple example with two or 3 Screens implementing that your idea as a start point to me? A good and perfect example with three screens could be that my two screens above and the third scree the simple.py example, because the simple.py is a perfect screen to execute a command (it has button yes and no) to enable/disable some feature. However as the simple.py has real (not more virtual) buttons (yes and no) maybe need to do a additional remap of pins in the after_open(), and this is another thing that I have no idea how to implement, and that's why it's so important an example with those three screens as start point :)

Don't worry if you can't to do that, is just to me know what way I will follow. Unfortunately I was no capable to implement your idea using micro-gui, and if you can't to create an example, I will back to nano-gui and and continue with re-invente the inputs Prev, Select and Next.

Thank you in advance!

[peterhinch]

I'm sorry but I am far too busy on another project to write and test a demo for you.

I am convinced that micro-gui is the best, and simplest, approach. Looking at simple.py you would have two Pushbutton objects associated with your physical buttons. The Pushbutton close callbacks would be the callback currently associated with the Button objects on the screen.

In the case where screens change, the Pushbutton callbacks might need to change. This would be done in the after_open method.

[beyonlo]

I am convinced that micro-gui is the best, and simplest, approach.

Me too. And I did read this messages bellow dozens of times and still have questions.

Looking at simple.py you would have two Pushbutton objects associated with your physical buttons.

The two Pushbutton that you are talking about are the Button() yes on line 32 and Button() no on line 34 of the file simple.py right?

The Pushbutton close callbacks would be the callback currently associated with the Button objects on the screen.

Now you talk about again of the same Pushbutton that I believe to be the same on line 32 and 34. If yes, that Button() do not have close callbacks. They have callback, but that call just the my_callback() on line 22.

And you talk about "associated with the Button objects on the screen", but If Pushbutton are objects (line 32, 34) what line are there the Button objects?

In the case where screens change, the Pushbutton callbacks might need to change. This would be done in the after_open method.

Here I'm confused too because I do not know what lines in the simple.py arePushbutton objects and what are the Button objects.

Could you please clarify that?

Other question: for that solution need I to change some code in some file inside core/ or widgets/ directories, or all the changes needed is just on the simple.py for example?

I'm sorry but I am far too busy on another project to write and test a demo for you.

I agree, but if you could at least write directly here in the GitHub a piece of code as a draft (without any test) I can get better the idea and I will to do the tests and complete what will need.

Thank you so much!

[peterhinch]

Button objects are on-screen widgets. Pushbutton objects are physical pushbuttons.

In your final application you won't have any Button instances. What I am suggesting is that you implement Pushbutton instances for your electrical buttons. You study the examples to see how the callbacks for Buttons work. And you modify the example code so that the callbacks are assigned to the Pushbutton close instead of the Button. The Button instances can then be eliminated from the screen.

[beyonlo]

I had progress.. 🥳 I have one Question below.

In the hardware_setup.py I used unused pins to initialize gui without errors. - Done!

Button objects are on-screen widgets. Pushbutton objects are physical pushbuttons.

Got it!

In your final application you won't have any Button instances.

Got it!

What I am suggesting is that you implement Pushbutton instances for your electrical buttons.

Done on simple.py:

from gui.primitives import Pushbutton
from machine import Pin


class BaseScreen(Screen):

    def __init__(self):

        def my_callback(button, arg):
            print('Button pressed', button, arg)

        super().__init__()
        # verbose default indicates if fast rendering is enabled
        wri = Writer(ssd, arial10)
        col = 2
        row = 2
        Label(wri, row, col, 'Simple Demo')
        row = 50
        Button(wri, row, col, text='Yes', callback=my_callback, args=('Yes',))
        col += 60
        Button(wri, row, col, text='No', callback=my_callback, args=('No',))

        # 3 Pushbuttons implemented (prev, sel, next)
        prev = Pin(41, Pin.IN, Pin.PULL_UP)
        self.btn_prev = Pushbutton(prev)
        sel = Pin(12, Pin.IN, Pin.PULL_UP)
        self.btn_sel = Pushbutton(sel)
        nxt = Pin(42, Pin.IN, Pin.PULL_UP)
        self.btn_nxt = Pushbutton(nxt)

        # test to implement callback on the pushbutton
        #self.btn_nxt = Pushbutton(b_next, callback=my_callback, args=('Test',))

You study the examples to see how the callbacks for Buttons work.

This is in progress yet... I'm stuying!

And you modify the example code so that the callbacks are assigned to the Pushbutton close instead of the Button.

Question: here I got the idea too, but the /gui/primitives/pushbutton.py do not has the close method. What or where is that close on the Pushbutton?

Any additional comments about the code above (including that line commented about callback on the pushbutton) is wellcome!

Thank you!

[peterhinch]

See the Pushbutton docs. You use the press_func method to assign a callback.

[beyonlo]

Hey @peterhinch It works like you told me! 🥳 🎈 Thank you for your support and especially for your patience!

I still testing and finding the best way to call each Screen in the after_open(self) I'm thinking to have a python file for each Screen and import each Python file when I will use it in the callback to sel, next or prev. Any suggestion?

A question about this error: ValueError: Screen has no active widgets. Is possible to do something to not show this error, or to create a invisible active widget? Because sometimes I do not need active widgets. For now I'm using the CloseButton(wri) to works.

Thank you very much!