How to change the text displayed in a widget when the space bar is pressed.

[Sevii]

Hey, I'm trying to build a text based game with textual which is driven by the keyboard. I'm trying to get a markdown element to update the text displayed when the user presses the keyboard.

So far I have not found a way to trigger a widget on a keyboard press. It only appears possible to trigger the main application. There are many ways to trigger a widget when you click on it, but my application is not intended to involve the mouse at all.

Thanks

[Sevii]

Here is some example code I have tried which does not work.

from textual.app import App, ComposeResult
from textual.widgets import Static
from textual.widgets import Header, Footer
from textual.containers import ScrollableContainer, Container
from textual.widgets import Button, Footer, Header, Static
from textual.reactive import reactive
from time import monotonic
from rich.markdown import Markdown
from textual import events

hellos = cycle(
    [
        "Hola",
        "Bonjour",
        "Guten tag",
        "Salve",
        "Nǐn hǎo",
        "Olá",
        "Asalaam alaikum",
        "Konnichiwa",
        "Anyoung haseyo",
        "Zdravstvuyte",
        "Hello",
    ]
)


class Hello(Static):
    """Display a greeting."""

    def on_mount(self) -> None:
        self.next_word()

    def on_click(self) -> None:
        self.next_word()

    def next_word(self) -> None:
        """Get a new hello and update the content area."""
        hello = next(hellos)
        self.update(f"{hello}, [b]World[/b]!")

    def on_key(self, event: events.Key) -> None:
        print("key sent")
        self.next_word() 


class CustomApp(App):
    BINDINGS = [("d", "toggle_dark", "Toggle dark mode")]
    def compose(self) -> ComposeResult:
        yield Header()
        yield Footer()
        yield Hello()

    


if __name__ == "__main__":
    app = CustomApp()
    app.run()```

[Jayy001]

Have you looked into https://textual.textualize.io/guide/input/ ?

[Sevii]

That link is useful. It looks like the answer is that key bindings have to be registered at the App layer. They are ignored at other layers. So the solution to my question is to register an action at the App layer, then use a query to find the dom element I want then call a method on that dom element.

Thanks!

[Sevii]

from textual.app import App, ComposeResult
from textual.widgets import Header, Footer
from textual.containers import ScrollableContainer, Container
from textual.widgets import Button, Footer, Header, Static
from textual.reactive import reactive
from time import monotonic
from rich.markdown import Markdown


WELCOME_MD = "Welcome to the game!"
NEXT_TEXT = "This is the next text"

class TextDisplayer(Static):
    text_value = "hat"

    def action_next(self) -> None:
        text_value = "muhahahah"
        print("hello")
        self.query_one('#text').update(NEXT_TEXT)

    def compose(self) -> ComposeResult:
        """Create child widgets of a stopwatch."""
        yield Container(Static(Markdown(WELCOME_MD), id="text"), id="md")


class TimeDisplay(Static):
    """A widget to display elapsed time."""
    start_time = reactive(monotonic)
    time = reactive(0.0)
    total = reactive(0.0)

    def on_mount(self) -> None:
        """Event handler called when widget is added to the app."""
        self.update_timer = self.set_interval(1 / 60, self.update_time, pause=True)

    def update_time(self) -> None:
        """Method to update the time to the current time."""
        self.time = self.total + (monotonic() - self.start_time)

    def watch_time(self, time: float) -> None:
        """Called when the time attribute changes."""
        minutes, seconds = divmod(time, 60)
        hours, minutes = divmod(minutes, 60)
        self.update(f"{hours:02,.0f}:{minutes:02.0f}:{seconds:05.2f}")

    def start(self) -> None:
        """Method to start (or resume) time updating."""
        self.start_time = monotonic()
        self.update_timer.resume()

    def stop(self) -> None:
        """Method to stop the time display updating."""
        self.update_timer.pause()
        self.total += monotonic() - self.start_time
        self.time = self.total

    def reset(self) -> None:
        """Method to reset the time display to zero."""
        self.total = 0
        self.time = 0

class Stopwatch(Static):
    """A stopwatch widget."""

    def on_button_pressed(self, event: Button.Pressed) -> None:
        """Event handler called when a button is pressed."""
        button_id = event.button.id
        time_display = self.query_one(TimeDisplay)
        if button_id == "start":
            time_display.start()
            self.add_class("started")
        elif button_id == "stop":
            time_display.stop()
            self.remove_class("started")
        elif button_id == "reset":
            time_display.reset()

    def compose(self) -> ComposeResult:
        """Create child widgets of a stopwatch."""
        yield Button("Start", id="start", variant="success")
        yield Button("Stop", id="stop", variant="error")
        yield Button("Reset", id="reset")
        yield TimeDisplay("00:00:00.00")


class StopwatchApp(App):
    """A Textual app to manage stopwatches."""
    CSS_PATH = "sim.css"

    BINDINGS = [("d", "toggle_dark", "Toggle dark mode"), ("space, enter", "next()", "Next turn")]

    welcome = WELCOME_MD

    def compose(self) -> ComposeResult:
        """Create child widgets for the app."""
        yield Header()
        yield Footer()
        yield ScrollableContainer(Stopwatch(), Stopwatch(), TextDisplayer())

    def action_toggle_dark(self) -> None:
        """An action to toggle dark mode."""
        self.dark = not self.dark

    def action_next(self) -> None:
        self.query_one(TextDisplayer).action_next()

    def action_set_background(self, color: str) -> None:
        self.screen.styles.background = color

if __name__ == "__main__":
    app = StopwatchApp()
    app.run()
    ```
    
    Working code

[davep]

@Sevii

That link is useful. It looks like the answer is that key bindings have to be registered at the App layer. They are ignored at other layers.

This isn't the case. As you'll see throughout our own codebase, and in many Textual applications, keyboard bindings can be created on the App, on a screen or on a widget. The thing to note though is that for a keyboard binding to be able to work on a widget the widget needs to be capable of being focused, and of course the binding only works when the widget has focus.

The same is true for keyboard events too.

You can read about this and more in the guide to input in Textual.

To illustrate all of this, here's a version of your initial example code that does what you appear to want it to do:

from itertools import cycle

from textual.app import App, ComposeResult
from textual.widgets import Static
from textual.widgets import Header, Footer
from textual.widgets import Footer, Header, Static
from textual import events

hellos = cycle(
    [
        "Hola",
        "Bonjour",
        "Guten tag",
        "Salve",
        "Nǐn hǎo",
        "Olá",
        "Asalaam alaikum",
        "Konnichiwa",
        "Anyoung haseyo",
        "Zdravstvuyte",
        "Hello",
    ]
)


class Hello(Static, can_focus=True):
    """Display a greeting."""

    def on_mount(self) -> None:
        self.next_word()

    def on_click(self) -> None:
        self.next_word()

    def next_word(self) -> None:
        """Get a new hello and update the content area."""
        hello = next(hellos)
        self.update(f"{hello}, [b]World[/b]!")

    def on_key(self, event: events.Key) -> None:
        print("key sent")
        self.next_word()


class CustomApp(App):
    BINDINGS = [("d", "toggle_dark", "Toggle dark mode")]
    def compose(self) -> ComposeResult:
        yield Header()
        yield Footer()
        yield Hello()




if __name__ == "__main__":
    app = CustomApp()
    app.run()

Note that Hello is told that it can receive focus.