[UiFlow] The ability to display multiple "screens" or "cards"
-
I've not found this function after a lot of use, so I'm making the assumption that it's not present.
What I'd like to suggest, is the ability to define separate "Screens" in a single integrated UiFlow Program.
This would operate somewhat like an old "HyperCard" stack, where each "screen" has a separate and defined UI that can be set up via the UiFlow editor.
(Navigation between screens during coding could be added just above the "Units" Selector)To keep code clean, there could be a "screen 0" that contains code that is present across the whole project (e.g. Wifi Connections, MQTT, Global Variables) and sets instructions for an initial screen display or which screen to switch to.
Screens are traversed via blocks that instruct which screen to switch to, which could be tied to events or button presses.
Events/Functions can be triggered by switching into screens (Much like Setup is used per project) or switching away.This simple change could clean up messy projects that rely on code to move the screen around, enhance projects that are data driven, make UI design simpler and more intuitive and add a world of function and the opportunity for more complexity into this simple software.
-
Currently you could define separate screens as separate functions that are called buy actions however a dedicated "screen" block would be handy.
-
Hi @DaveC ,
I understand your thoughts. This feature is indeed very practical. We are also investigating how to implement it. It may not be launched soon. I think we will launch this feature at the right time.
The main problem at present is that we may need to unify the GUI framework of all devices.
This may take a long time. -
@ajb2k3 This is what my bud and I have been talking about today. I figured this would be the work around since there isn't a dedicated "screen" block.
I haven't figured out how to implement it quite yet, as I am still learning the basics of the device and the language.
-
Are you able to build some code that allows you to switch between screens? If so would you mind sharing? I am currently trying to work out how you could set up multiple screens as well. NGL I'm a newb so sorry if I am asking for some basic stuff over here.
-
I did several versions back but lost the code but IIRC I created seperate function for each screen with a clear screen block before defining the new screen.
When a button is pressed or function triggered, the screen function gets called. -
You can have multiple screens, for example in an array, and then switch the screens with screen.load_screen(screens[i])
I use it like this
screen = M5Screen()
screen.clean_screen()
screen.set_screen_bg_color(0xadefeb)
screen.set_screen_brightness(60)
#an array to store screens
screens=[]now everything (M5Label etc) will be drawn on the current screen.
I end the screen with
screen0 = screen.get_act_screen()
screens.append(screen0)then start a new screen with
get a new screen
screen1 = screen.get_new_screen()
screen.load_screen(screen1)
then end this screen and so on
screen1 = screen.get_act_screen()
screens.append(screen1)To switch the screen I use
def getPrevScreen():
global current_screen, screens
lock_obj.acquire()
print('getPrevScreen called')
current_screen-=1
if current_screen < 0 :
current_screen=0
else:
screen.load_screen(screens[current_screen])
lock_obj.release()
pass
def getNextScreen():
global current_screen, screens
lock_obj.acquire()
print('getNextScreen called')
current_screen+=1
if current_screen > len(screens)-1 :
current_screen=len(screens)-1
else:
screen.load_screen(screens[current_screen])
lock_obj.release()
pass
these are called by
def buttonA_wasPressed():global params
do_beep()
reset_idle_counter()
print('ButtonA pressed')screen.clean_screen()
screen.load_screen(screen0)
screen.load_screen(screens[0])
getPrevScreen()
_thread.start_new_thread(getPrevScreen, ())
pass
btnA.wasPressed(buttonA_wasPressed)
and
def buttonC_wasPressed():
do_beep()
reset_idle_counter()
print('ButtonC pressed')screen.clean_screen()
screen.load_screen(screen2)
getNextScreen()
_thread.start_new_thread(getNextScreen, ())
screen.clean_screen()
screen.load_screen(screen1)
screen.load_screen(screens[2])
pass
btnC.wasPressed(buttonC_wasPressed)The formatting here is terrible, as it reads # for markdown...
I will put my code on github (hjgode) later on
BTW: the UIFlow doc is a mess. They use // in fron of line for a python comment line (needs to be a # in front). And I am missing examples, examples....
Still looking for a complete developer doc for the UIFlow micropython stuff. Some functions are named differently and some just do not work, if you try the micropython basic ones (like for example umqtt.simple, which just crashes as someone forget to implement socket.set_timeout) -
