UI Elements

ui_elements is an experimental library for building stateful voice activated canvas UIs using a HTML/CSS/React-inspired syntax for python, for use with Talon.

Features

• 20+ elements such as div, text, button, table, icon, input_text, textarea, select, cursor
• 90+ CSS-like properties such as width, background_color, margin, padding_left, flex_direction
• Reactive utilties state, effect, and ref
• Dragging and scrolling
• Talon actions for highlighting elements, changing state, setting text
• Voice activated hints
• Skia canvas based rendering

Prerequisites

• Talon

Installation

Download or clone this repository into your Talon user directory.

# mac and linux
cd ~/.talon/user

# windows
cd ~/AppData/Roaming/talon/user

git clone https://github.com/rokubop/talon-ui-elements.git

Done! 🎉 Start learning below.

Examples

Say "elements test" to bring up the examples.

Tutorials

Tutorial	Preview	Concepts Covered
Hello World		screen, div, text, CSS-like properties, ui_elements_show(), ui_elements_hide()
Cheatsheet		state, table, tr, td, style, flexbox, dragging, ui_elements_set_state()
Game Key Overlay		icon, style, grid layouts, reusable functions, ui_elements_highlight(), ui_elements_highlight_briefly()

Storybook

Interactive component explorer for testing elements and tweaking properties in real-time.

Documentation

References: Elements · Properties · Actions · Icons

Concepts: Components · Cursor · Defaults · Effect · Ref · Rendering · State · Style · SVG · Window

More examples: Dashboard · Todo List · Inputs · Alignment

Development suggestions

While developing, you might get into a state where the UI gets stuck on your screen and you need to restart Talon. For this reason, it's recommended to have a "talon restart" command.

In a .talon file:

^talon restart$:            user.talon_restart()

Inside of a .py file:

import os
from talon import Module, actions, ui

mod = Module()

@mod.action_class
class Actions:
    def talon_restart():
        """restart talon"""
        # for windows only
        talon_app = ui.apps(pid=os.getpid())[0]
        os.startfile(talon_app.exe)
        talon_app.quit()

• Sometimes the UI may not refresh after saving the file. Try hiding the UI, saving the file again, and showing again.

• Recommend using "Andreas Talon" VSCode extension + its dependency pokey command server, so you can get autocomplete for talon user actions, and hover over hint documentation on things like actions.user.ui_elements() or actions.user.ui_elements_show().

Under the hood

Uses Talon's Canvas and Skia canvas integration under the hood.

More Talon packages

Check out my other Talon packages for mouse control, input mapping, parrot, and more at talon-hub-roku.