malisipi / mui

A Cross-Platform UI Library
https://malisipi.github.io/mui/
Apache License 2.0
102 stars 10 forks source link

MWM Suggestion & Issue #32

Closed Wajinn closed 1 year ago

Wajinn commented 1 year ago

Suggestion:

Maybe it would be good if the MWM example had a more complex GUI (containing an image) and was clear about intended usage for multiple GUIs. Would think a significant percentage would want or need multiple GUIs.

Issue:

It seems that MWM has problems with images, where if the original GUI contains an image, then it will disappear after switching back and forth between GUIs. The image disappears when the GUI is later shown. In the example below, an image was added. In the tests done, the image will show only the first time, then disappear when coming back to the main page GUI.

Not yet sure of the cause. But, did notice that image.v file doesn't allow for specifying the path to the image again, unlike the other objects. Can not use: app.wm.uis["main_page"].get_object_by_id("image")[0]["path"].str = "picture.jpg" How GUIs with images are to be handled with MWM, might need to be clarified.

import malisipi.mui as m
import malisipi.mui.mwm

/* define app data */
struct AppData {
    mut:
    wm  mwm.MuiWindowManager
}

fn main() {
    /* create appdata*/
    mut app := AppData{}
    app.wm.active_ui = "logon_ui"

    /* logon ui */
    mut logon_ui := m.create(title:"Logon UI (MWM) - MUI Example", height:150, width:400, app_data: &app)

    logon_ui.textbox(id:"username", x:"5%x", y:"5%y", width:"90%x", height:"30%y" placeholder:"Enter your username")
    logon_ui.password(id:"password", x:"5%x", y:"35%y", width:"90%x", height:"30%y" placeholder:"Enter your password")
    logon_ui.button(id:"login", x:"5%x", y:"65%y", width:"90%x", height:"30%y", text:"Log in", onclick: button_handler)

    app.wm.uis["logon_ui"] = logon_ui

    /* main page */
    mut main_page := m.create(title:"Main Page (MWM) - MUI Example", height:150, width:400, app_data: &app)

    // added an image to the example (image in same directory)
    main_page.image(id:"image",x: "38.50%x", y: "4.00%y", width: "25.00%x", height: "10.00%y", path: "picture.jpg")

    main_page.label(id:"username", x:"5%x", y:"5%y", width:"90%x", height:"30%y")
    main_page.label(id:"password", x:"5%x", y:"35%y", width:"90%x", height:"30%y")
    main_page.button(id:"logout", x:"5%x", y:"65%y", width:"90%x", height:"30%y", text:"Log out", onclick: button_handler)

    app.wm.uis["main_page"] = main_page

    /* start multi-window manager (mwm) */
    app.wm.run()
}

/* define button handler */
fn button_handler(event_details m.EventDetails, mut active_window &m.Window, mut app AppData) {
    unsafe {
        if app.wm.active_ui=="logon_ui" {
            app.wm.active_ui = "main_page"
            app.wm.uis["main_page"].get_object_by_id("username")[0]["text"].str = "Your username: " + active_window.get_object_by_id("username")[0]["text"].str.replace("\0","")
            app.wm.uis["main_page"].get_object_by_id("password")[0]["text"].str = "Your password: " + active_window.get_object_by_id("password")[0]["text"].str.replace("\0","")
        } 
        else {
            app.wm.active_ui = "logon_ui"
        }
        active_window.destroy()
    }
}
malisipi commented 1 year ago

I guess the issue causes by gg. gg is clearing images when close. So image can not be reloaded.

Not yet sure of the cause. But, did notice that image.v file doesn't allow for specifying the path to the image again, unlike the other objects. Can not use: app.wm.uis["main_page"].get_object_by_id("image")[0]["path"].str = "picture.jpg" How GUIs with images are to be handled with MWM, might need to be clarified.

Images is an exception in MUI. It's not handled by path directly. The path will not be stored. The path will be opened by gg. And the pointer will store the image. When the window was closed, gg is releasing the images. So i need to self-cache images or find a way to force gg to store these caches.

Until fix the issue, you can reload the images yourself

malisipi commented 1 year ago

Full example: https://github.com/malisipi/mui/blob/faf6bf268940145c6cdb469033c74ef4d8ac2633/examples/mwm_with_image.v

Wajinn commented 1 year ago

Excellent, as usual. And the example nicely clarifies a way for this to be done.