MWM Suggestion & Issue

[Wajinn]

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]

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]

• Import gg
  

  mui/examples/mwm_with_image.v

  Line 3 in faf6bf2

  import gg

• Add init_fn to reload image
  

  mui/examples/mwm_with_image.v

  Lines 26 to 28 in faf6bf2

  	mut main_page := m.create(title:"Main Page (MWM) - MUI Example", height:150, width:400, app_data: &app, init_fn: fn (e m.EventDetails, mut app m.Window, mut _ voidptr) {
  	app.get_object_by_id("image")[0]["image"].img = app.gg.create_image("v-logo.png") or { gg.Image{} }
  	})

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

[Wajinn]

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