I am stuck with input with submit

I mean not exactly like that, but yes, it is. I PMed you two approaches you could take but I’ll enumerate them here:

  1. create and mount N Input instances. One submit button submits them all at once
  2. one input instance, each time you press submit button, it does one iteration of the input.

I’ll post a quick sample of #2 shortly.

1 Like

yah i guess i need to do what u saying seems no otherway to get this around lol

can u show example 2 approach how can it be done i want to understand how can i make them an instance each time i press

nvm seems like i need to select input afterward i need to drag file it will automatically take location then

OK so here is a simple example. Enter some data and press submit, it’ll show it on the screen. Enter more data and press submit again, etc. You’ll see what I mean.

from textual.app import App
from textual.containers import Container, Horizontal, Vertical
from textual.widgets import Button, Header, Footer, Static, Input
import json


class TeslaClass(Container):
    def on_button_pressed(self, event: Button.Pressed) -> None:
        self.data.append([self.input1.value, self.input2.value, self.input3.value])
        self.input1.value = ""
        self.input2.value = ""
        self.input3.value = ""
        self.output.update(json.dumps(self.data, indent=2))
        # self.output.refresh()
        self.input1.focus()
        print(self.data)

    def compose(self):
        self.data = []
        self.input1 = Input(placeholder="drag ur file .exe or shortcut:")
        self.input2 = Input(placeholder="put ur cd location where npm script run:")
        self.input3 = Input(placeholder="how much time taken to open file type-in-second:")
        self.output = Static("")
        yield Vertical(
            self.input1,
            self.input2,
            self.input3,
            self.output,
            Horizontal(
                Button("Submit", id="send", variant="success"),
                Button("Done", id="done", variant="error"),
                Button("lastSavedDATA", id="time_arc", variant="error"),
            ),
        )


class TeslaApp(App):
    def compose(self):
        yield TeslaClass()


if __name__ == "__main__":
    app = TeslaApp()
    app.run()
1 Like

1 Like

this look great but i guess i already attempt this manner to appending data while updating or extending though it look good on this approach

[looking for[
how do i make the TUI to know when i drag file it auto detect like hover active input been selected

[solved]
otherwise i need to select input before drag file onto it to get it location

[Problem]
the user dont know if it need to select input before drag file onto it


hover seems dont work when mouse click on hold while dragging them

How did you implement the hover effect? I haven’t tried if the hover works with the drag'n drop approach you tried, but I’ve used the hover effect on buttons easily with the CSS Pseudo class.

In the CSS file, you could do something like:

Button {
    background: yellow;
}

Button:hover {
    background: green;
}

This worked fine for me.

tried earlier as well didnt work

Input:hover:focus {
    dock: top;
    margin-top: 1;
    background: green;

}

bro need ur bit help how do i dynamically load save data


here u can see i successfully load the data

        if event.button.id == "time_arc":
                    for v in data2:
                        self.tesla = v[0]
                        self.root = v[1]
                        self.timeleft = v[2]

i want something like this like everytime i submit data it create a load data which contain in this image i dont understand how do i do that i hope u can solve this my last problem :frowning:

def submit(self):
        self.teslav = self.data[0]
        self.root = self.data[1]
        self.timeleft = int(self.data[2])
        self.yolo = [self.teslav, self.root, self.timeleft]
        with open(filename, 'rb') as file:
            self.data3 = pickle.load(file)
            self.data3.append([self.yolo])
            self.output.update(json.dumps(self.data3, indent=2))
        with open(filename, 'wb') as f:
            pickle.dump(self.data3, f)
        log(self.data3)
        log(self.timeleft)
        self.my_function()

    def on_button_pressed(self, event: Button.Pressed) -> None:
        """Event handler called when a button is pressed."""
        try:
            with open(filename, 'rb') as file:
                user_input = pickle.load(file)
                data2 = user_input

                if event.button.id == "time_arc":
                    for v in data2:
                        self.tesla = v[0]
                        self.root = v[1]
                        self.timeleft = v[2]
                    self.add_class("started")
                    self.my_function()
                elif event.button.id == 'done':
                    self.remove_class("started")

                if event.button.id == "send":
                    self.data = [self.input1.value, self.input2.value, self.input3.value]
                    self.add_class("started")
                    self.submit()

                elif event.button.id == 'done':
                    self.remove_class("started")```


something similar to this how do i add automatic future LOAD DATA when submit
i do understand we can do such thing via reactive class but how in loop possible

Are you saying you want to add another button every time something happens?

I gotta say man, looking at your code, it would probably be useful to take a step back and tell me what you’re trying to do because I suspect there’s a better overall approach.

As in, what is the program you’re writing trying to achieve, as opposed to asking questions about specific problems you’re having implementing that.

[replied]
yah i want a dynamic way to assigned data for my newload data and create a button for it

   def my_function(self):
       self.byte_str = bytes(self.teslav .encode())
       self.teslaz = self.byte_str.replace(b"\x00", b"")
       os.startfile(self.teslaz)

if event.button.id == "time_arc":  # as u can see it can trigger only with 1 button
 for v in data2:
   self.teslav = v[0]
 self.my_function() #as u can see i calling an function here

clear explain
[resolved]
with regard to ur append data i want to load data dynamically as well

[in problem
i was making an application that automatic open file and run command for us
but currently it can open 1 exe file

[looking for]
an application which can take 2 input append it then create a load button for those append data which can run function afterward like os.startfile(appendata1 or loopdata[0:1] etc

i have mail u all code

Is there a reason you want to run the programs this way (interactively, sending them keystrokes) instead of just… execing them like you normally would, with say the subprocess module or something similar?

Dynamically adding buttons is not difficult but it seems like an odd way to handle whatever the problem is. I can add an example in a little while.

1 Like

i was actually like this way save alot of time cause i open multiple application when i working on vue3 is kinda alot like TUI django fast api etc

like pycharm webstorm automatic do startup for us would save like 1year time on typing runserver command etc also i have later plan for selenium skipping part while inspect

OK here is a program which, every time you click the submit button, makes a new data button. Every time you click one of the data buttons, it displays the data associated with that button.

from textual.app import App
from textual.containers import Container, Horizontal, Vertical
from textual.widgets import Button, Header, Footer, Static, Input
import json


class TeslaClass(Container):
    DEFAULT_CSS = """
      #horizontal {
          background: blue;
          width: auto;
          height: auto;
      }
    """

    def on_button_pressed(self, event: Button.Pressed) -> None:
        if event.button.id == "submit":
            bnum = len(self.data_buttons) + 1
            button = Button(f"Data {bnum}", id=f"button-{bnum}")
            self.data_buttons.append(button)
            self.horiz_container.mount(button)
            self.data.append([self.input1.value, self.input2.value, self.input3.value])
            self.input1.value = ""
            self.input2.value = ""
            self.input3.value = ""
            self.input1.focus()
        else:
            button_index = int(event.button.id.split('-')[1]) - 1
            data = self.data[button_index]
            self.output.update(repr(data))

    def compose(self):
        self.data = []
        self.input1 = Input(placeholder="drag ur file .exe or shortcut:")
        self.input2 = Input(placeholder="put ur cd location where npm script run:")
        self.input3 = Input(placeholder="how much time taken to open file type-in-second:")
        self.output = Static("")
        self.horiz_container = Horizontal(
            Button("Submit", id="submit", variant="success"),
            id='horizontal'
        )
        self.data_buttons = []

        yield Vertical(
            self.input1,
            self.input2,
            self.input3,
            self.output,
            self.horiz_container,
        )


class TeslaApp(App):
    def compose(self):
        yield TeslaClass()


if __name__ == "__main__":
    app = TeslaApp()
    app.run()
2 Likes

thnx this is awesome