KontrolSystem2 icon indicating copy to clipboard operation
KontrolSystem2 copied to clipboard

Enhancement for UI

Open PhilouDS opened this issue 1 year ago • 15 comments

Hi,

I have this simple UI to select a script from all available processes. Is it possible to add a sort of Scroller list to UI? For now, I'm using a slider but I thought that scroll list could be better. image

PhilouDS avatar Mar 30 '24 10:03 PhilouDS

The 0.5.7.6 release now has a .add_vertical_scroll(width, height) method (width and height are the minimum size of the scroll container, otherwise I is similar to a regular vertical layout). Currently only vertical scroll is possible (mostly because I forgot to create assets for a horizonal scollbar).

untoldwind avatar Mar 31 '24 16:03 untoldwind

Thanks! I'll show you the new UI as soon as I restart KSP2.

Ah... I see that the vertical scroll is a Container too... That means we can't select an element from there. I realized that the name scroller wasn't what I thought. Sorry. I wanted a pop up list, as in kOS.

image

Sorry for that confusion... Anyway, scrollers are great too!

PhilouDS avatar Mar 31 '24 16:03 PhilouDS

Pre-release 0.5.7.7 (https://github.com/untoldwind/KontrolSystem2/releases/tag/v0.5.7.7) Has a ui_container.add_dropdown(options: string[]) method, that should realize that:

Example:

use { Vessel } from ksp::vessel
use { CONSOLE } from ksp::console
use { open_window, open_centered_window, screen_size, Align } from ksp::ui
use { wait_until, yield } from ksp::game

pub fn main_flight(vessel: Vessel) -> Result<Unit, string> = {
    CONSOLE.clear()

    const dialog = open_centered_window("Monitor", 0, 0)

    const dropdown = dialog.add_dropdown((1..20).map(fn(i) -> $"Option {i}"))

    dropdown.on_change(fn(i) -> {
        CONSOLE.print_line($"Selected {i}")
    })

    wait_until(fn() -> dialog.is_closed)
}

The graphics still might need some tweaking, creating a dropdown requires a loot of interconnected game-objects, so there are probably some quirks I have not noticed yet.

untoldwind avatar Apr 01 '24 18:04 untoldwind

Thanks! I'll have a look at this in the next days!

PhilouDS avatar Apr 01 '24 18:04 PhilouDS

@untoldwind Thanks to you I have a new Boot UI :) image

The harder part was to save the parameter values if they are changed. That's the purpose of my validate button. image

Once the parameters are validated by the user, the field are disabled. You can click on the BACK button to change again the parameters or the Start button to... run the script 🥳 image

PhilouDS avatar Apr 02 '24 18:04 PhilouDS

This was a lot of wok to do what Kontrol System already do 😅 The difference is that my list of missions is organised in the reverse order. So, the last mission is on the top of the list.

PhilouDS avatar Apr 02 '24 18:04 PhilouDS

I slightly adjusted the positioning of the inner elements in 0.5.7.8: https://github.com/untoldwind/KontrolSystem2/releases/tag/v0.5.7.8

It should remove some of the pixel-atrifacts

untoldwind avatar Apr 03 '24 18:04 untoldwind

With version 0.5.7.8: image image

PhilouDS avatar Apr 04 '24 11:04 PhilouDS

Is there any variable that returns the actual version of Kontrol System? I'd like to add this version number at the bottom of my UIs... If I can do that automatically, it would be great.

PhilouDS avatar Apr 04 '24 11:04 PhilouDS

In the 0.5.7.9 release I added a version field to the ksp::game::MAINFRAME (https://kontrolsystem2.readthedocs.io/en/latest/reference/ksp/game.html)

untoldwind avatar Apr 04 '24 18:04 untoldwind

image

Actually, the last modification had been made with version 0.5.7.9 but I wanted to test my script.

PhilouDS avatar Apr 04 '24 22:04 PhilouDS

I created a list with all the bodies of the game and I used it in a dropdown. Then I have this piece of code that updated different float cells:

dropdown.on_change(fn(i) -> {
  body_name.value = find_body(dropdown.options[i]).value.name
  periapsis_input.value = floor(find_body(dropdown.options[i]).value.atmosphere_depth) + 10000
  apoapsis_input.value = floor(find_body(dropdown.options[i]).value.atmosphere_depth) + 10000
  altitude_input.value = floor(find_body(dropdown.options[i]).value.atmosphere_depth) + 10000
})

This gives me the following error: image

I can make this error disappears adding in a last line CONSOLE.print("").

I think it's a normal behaviour, the last line acting for the Return statement... But it feels artificial to add this CONSOLE line.

PhilouDS avatar Apr 05 '24 14:04 PhilouDS

Yes, this is kind of a bug with type inference. The dropdown callback is probably not the only callback affected by this.

untoldwind avatar Apr 05 '24 19:04 untoldwind

Yes, this is kind of a bug with type inference. The dropdown callback is probably not the only callback affected by this.

Indeed, I've already noticed that with button and field input.

PhilouDS avatar Apr 05 '24 21:04 PhilouDS

This should be fixed in pre-release 0.5.8.0 (https://github.com/untoldwind/KontrolSystem2/releases/tag/v0.5.8.0): The callback are tweaked to accept functions with arbitrary returns (which just gets ignored)

untoldwind avatar Apr 06 '24 20:04 untoldwind

Hi,

I have a new UI to select a specific vessel among all vessels. After selecting a vessel, I can use its geocoordinates. image

I want to improve the UI to let the player enter geocoordinates (after selecting a body). So the player must choose between "select a vessel", "enter geocoordinates" or "nothing".

1- I can do that with toggle buttons but is it possible to have radio buttons more suitable when only one item can be selected?

2- Until now, when I need to change from one container to an other, I have to remove the container and if I need it later, I must recreate it. I think it's not optimal. Is it a way to "hide" and "show" a container without destroying it each time?

PhilouDS avatar May 24 '24 06:05 PhilouDS

Unluckily I had not much time to test this. In the current pre-release: https://github.com/untoldwind/KontrolSystem2/releases/tag/v0.5.9.3 the UI elements now have a .visible field to toggle show/hide. There might be some issue with layouting though

untoldwind avatar May 30 '24 06:05 untoldwind

Thanks, I'm trying this. I'm having this error message with a dropdown: image

const dropdown_vessels = ves_box.add_dropdown(names_of_vessels.value)
  dropdown_vessels.bind(names_of_vessels)

names_of_vessels is a list of all my owned vessels' names.

How can I correct this error? How can I get a Cell<T>?

PhilouDS avatar May 30 '24 08:05 PhilouDS

The visible field works as expected. Thank you. My next wish: radio button instead of toggle 😋 image image

PhilouDS avatar May 30 '24 08:05 PhilouDS

The dropdown.bind creates a binding for the value of the dropdown (i.e. the currently selected index) not the available options to select from. You can change the options just by setting the dropdown.options field. IMHO there is no need to create a special binding method for this.

untoldwind avatar Jun 01 '24 13:06 untoldwind

This issue is stale because it has been open for 60 days with no activity.

github-actions[bot] avatar Aug 01 '24 02:08 github-actions[bot]

This issue was closed because it has been inactive for 14 days since being marked as stale.

github-actions[bot] avatar Aug 16 '24 02:08 github-actions[bot]