I understand how to use pythonosc to receive OSC messages and I was able to use the Flet library to mock up a UI. What I cannot figure out is how to update the UI when I receive a new OSC message.
Here is my code. It correctly listens for incoming OSC messages and prints them to the console, but I cannot figure out how to make it update the UI.
import datetime
import time
import socket
import flet as ft
from pythonosc.dispatcher import Dispatcher
from pythonosc import osc_server
def main(page: ft.Page):
now = datetime.datetime.now()
current_time = now.strftime("%H:%M:%S")
show_event = "The event has not yet been set"
show_venue = "The venue not yet set been set"
show_scene = "n/a"
show_next = "n/a"
# show_message = "None"
hostname = socket.gethostname()
ip_address = socket.gethostbyname(hostname)
ip_port = 5001
show_message = "Ready to receive OSC messages at " + ip_address + ":" + str(ip_port)
# Start page
page.title = "Show - timmrogers@gmail.com"
# page.vertical_alignment = ft.MainAxisAlignment.CENTER
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
# page.window_full_screen = True,
page.window_width = "1280"
page.window_height = "720"
# page.window_min_width = "1280"
# page.window_min_height = "720"
page.window_left = 0
page.window_top = 0
page.window_bgcolor = ft.colors.BLACK
page.bgcolor = ft.colors.BLACK
page.update()
page.add(
# Start row
ft.Row(
[
# Event
ft.Card(
color=ft.colors.AMBER,
# elevation=10,
# shadow_color=ft.colors.BLACK,
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.EVENT, color=ft.colors.WHITE, size=64),
title=ft.Text("Event"),
# subtitle=ft.Text("Prelude to a Kiss"),
subtitle=ft.Text(show_event),
),
]
),
# bgcolor=ft.colors.AMBER,
width=500,
padding=10,
)
),
# Venue
ft.Card(
color=ft.colors.BLUE,
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.HOME, color=ft.colors.WHITE, size=64),
title=ft.Text("Venue"),
subtitle=ft.Text(show_venue),
),
]
),
# bgcolor=ft.colors.AMBER,
width=500,
padding=10,
),
),
],
alignment=ft.MainAxisAlignment.CENTER,
),
# End row
# Start row
ft.Row(
[
# Preshow
ft.Card(
color=ft.colors.GREY,
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.SCHEDULE, color=ft.colors.WHITE, size=64),
title=ft.Text("Preshow"),
subtitle=ft.Text(current_time),
),
]
),
# bgcolor=ft.colors.AMBER,
width=250,
padding=10,
)
),
# Top
ft.Card(
color=ft.colors.GREY,
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.SCHEDULE, color=ft.colors.WHITE, size=64),
title=ft.Text("Top"),
subtitle=ft.Text("00:00:00"),
),
]
),
# bgcolor=ft.colors.AMBER,
width=250,
padding=10,
)
),
# Intermission
ft.Card(
color=ft.colors.GREY,
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.SCHEDULE, color=ft.colors.WHITE, size=64),
title=ft.Text("Intermission"),
subtitle=ft.Text("00:00:00"),
),
]
),
# bgcolor=ft.colors.AMBER,
width=250,
padding=10,
)
),
# Curtain
ft.Card(
color=ft.colors.GREY,
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.SCHEDULE, color=ft.colors.WHITE, size=64),
title=ft.Text("Curtain"),
subtitle=ft.Text("00:00:00"),
),
]
),
# bgcolor=ft.colors.AMBER,
width=250,
padding=10,
)
),
],
alignment=ft.MainAxisAlignment.CENTER,
),
# End row
# Start row
ft.Row(
[
# Scene
ft.Card(
color=ft.colors.GREEN,
# elevation=5.0,
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.THEATER_COMEDY, color=ft.colors.WHITE, size=64),
title=ft.Text("Scene"),
# subtitle=ft.Text("Act 1, Scene 3"),
subtitle=ft.Text(show_scene),
),
]
),
# bgcolor=ft.colors.AMBER,
width=300,
padding=10,
)
),
# Next
ft.Card(
color=ft.colors.YELLOW,
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.NEXT_PLAN, color=ft.colors.WHITE, size=64),
title=ft.Text("Next"),
# subtitle=ft.Text("2.1"),
subtitle=ft.Text(show_next),
),
]
),
# bgcolor=ft.colors.AMBER,
width=300,
padding=10,
),
),
],
alignment=ft.MainAxisAlignment.CENTER,
),
# End row
# Start row
ft.Row(
[
# Message
ft.Card(
color=ft.colors.RED,
# elevation=5.0,
content=ft.Container(
content=ft.Column(
[
ft.ListTile(
leading=ft.Icon(ft.icons.INFO, color=ft.colors.WHITE, size=64),
title=ft.Text("Message"),
subtitle=ft.Text(show_message),
),
]
),
# bgcolor=ft.colors.AMBER,
width=800,
padding=10,
)
),
],
alignment=ft.MainAxisAlignment.CENTER,
),
# End row
# End page
)
def handle_message(address, *args):
# check for commands
if address == "/event":
show_event = args[0]
print(show_event)
elif address == "/venue":
show_venue = args[0]
print(show_venue)
elif address == "/scene":
show_scene = args[0]
print(show_scene)
elif address == "/next":
show_next = args[0]
print(show_next)
page.update()
def default_handler(address, *args):
# print(f"DEFAULT {address}: {args}")
show_message = address
print(show_message)
page.update()
# Create the OSC server
dispatcher = Dispatcher()
# dispatcher.map("/message", handle_message)
dispatcher.map("/event", handle_message)
dispatcher.map("/venue", handle_message)
dispatcher.map("/scene", handle_message)
dispatcher.map("/next", handle_message)
# dispatcher.map("/exit", exit_handler)
dispatcher.set_default_handler(default_handler)
server = osc_server.ThreadingOSCUDPServer((ip_address,ip_port), dispatcher)
server.serve_forever()
# Start GUI
ft.app(target=main)
I am just not comfortable enough with this sort of programming to see what I am missing. Any help or suggestions would be super welcome!
