Button click can not work in assemblyweb

[HustWu]

Hi, When I use slint with rust. I meet a problem.
When I compile to exe, I click button, the list can update, but when I compile to assemble web, the list can not update and when click the button on once, the button will be disabled.

Here is my code.

main.slint

import { GroupBox, HorizontalBox, VerticalBox, StandardListView, LineEdit, Button } from "std-widgets.slint";  
    
// 导出全局单单例  
export global Logic {  
    // You can collect other global properties here  
    in-out property <int> counter: 0;  
    // 全局单例中的回调（带参数和返回值）  
    pure callback to-upper-case(string) -> string;  
}  

// 对外导出全局单例（可与 Rust 代码直接交互）  
export global ListViewPageAdapter  {  
    // StandardListView model (in StandardListViewItem): The model  
    in property <[StandardListViewItem]> list_data: [  
        {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
        {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
        {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
        {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
        {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
        {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
        {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
    ];  
}  
    
export component MainWindow inherits Window {  
    preferred-width: 500px;  
    preferred-height: 300px;  

    in-out property <int> counter: 0; //in-out类型的属性  
    in-out property <bool> getsmart: false;
    callback button-pressed <=> button.clicked; // 双向绑定属性的回调  

    VerticalBox {  
        alignment: start;  
        GroupBox {  
            title: "Rust Modify Property";  
            button := Button {  
                height:30px;  
                // 属性绑定  
                text: "Get Smart Info";  
            }  
        }  

        GroupBox {    
            title: "StandardListView";  
            vertical-stretch: 0;  
            height: 300px;  
            StandardListView {  
                // model方案1: 直接写死数组  
                // model: [  
                //     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
                //     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
                //     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
                //     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
                //     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
                //     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
                //     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},  
                // ];  
                // model方案2: 可与 Rust 代码动态交互的数据  
                model: ListViewPageAdapter.list-data;  
            }  
        }  
    }  
}  

main.rs

slint::include_modules!();
use std::{rc::Rc, process::Command};  
use slint::{StandardListViewItem, VecModel}; 

#[cfg_attr(target_arch = "wasm32",
           wasm_bindgen::prelude::wasm_bindgen(start))]
pub fn main() {  
    let window = MainWindow::new().unwrap();  
    // 全局单例中的回调（带参数和返回值）  
    window.global::<Logic>().on_to_upper_case(|string| {  
        string.as_str().to_uppercase().into()  
    });  
  
    let main_window_weak = window.as_weak();  
    // on_button_pressed() is a callback that is bound to the Button's text  
    window.on_button_pressed(move || {   
        let tiles_model: Rc<VecModel<StandardListViewItem>> = Rc::new(VecModel::default());   
        let main_window = main_window_weak.unwrap();  
        // // get_xxx() 函数获取属性  
        // let mut value = main_window.get_counter();  
        // value = value + 1;  
        // // set_xxx() 函数重新设置属性  
        // main_window.set_counter(value);  
        main_window.set_getsmart(true);
        let command = "smartctl --scan";
        let output = Command::new("Cmd").args(&["/C", command]).output().expect("Command Fail");
        let stdout = String::from_utf8_lossy(&output.stdout);
        let words: Vec<&str> = stdout.split(' ').collect();
        for str in &words {
            println!("the element is {}", str);
        }
        let smart_command = "smartctl -i ";
        let smart_output = Command::new("Cmd").args(&["/C", &(smart_command.to_string() + words[0])]).output().expect("Command Fail");
        let stdout = String::from_utf8_lossy(&smart_output.stdout);
        let smart_words: Vec<&str> = stdout.split('\n').collect();
        for (index, value) in smart_words.iter().enumerate() {
            if index >= 4 && index <= 9 {
                tiles_model.push(slint::format!("{value}").into())
            }
        }
        main_window.global::<ListViewPageAdapter>().set_list_data(tiles_model.clone().into());  
        // main_window.run().unwrap()   
    });  
  
    // // 获取 StandardListView Model数据，这里用到 VecModel，才能修改值  
    let tiles_model: Rc<VecModel<StandardListViewItem>> = Rc::new(VecModel::default());  
    if window.get_getsmart() {
        let command = "smartctl --scan";
        let output = Command::new("Cmd").args(&["/C", command]).output().expect("Command Fail");
        let stdout = String::from_utf8_lossy(&output.stdout);
        let words: Vec<&str> = stdout.split(' ').collect();
        for str in &words {
            println!("the element is {}", str);
        }
        let smart_command = "smartctl -i ";
        let smart_output = Command::new("Cmd").args(&["/C", &(smart_command.to_string() + words[0])]).output().expect("Command Fail");
        let stdout = String::from_utf8_lossy(&smart_output.stdout);
        let smart_words: Vec<&str> = stdout.split('\n').collect();
        for (index, value) in smart_words.iter().enumerate() {
            if index >= 4 && index <= 9 {
                tiles_model.push(slint::format!("{value}").into())
            }
        }  
    }
    else {
        for r in 1..=100 { // 100行  
            tiles_model.push(slint::format!("Item {r}").into());  
        }
    };
    window.global::<ListViewPageAdapter>().set_list_data(tiles_model.clone().into());  
    // 运行窗体  
    window.run().unwrap();  
}

[ogoffart]

Do you see any panic message in the web console?
You may need to add console_error_panic_hook to get decent panic message.
What I suspect is that your code is panicking with webassembly because you are using std::process::Command which is not implemented in wasm.

[HustWu]

Yes，I see a panic, but if I have to use std::process::Command, is there any way to solve this problem?

[HustWu]

[ogoffart]

You cannot run processes from the browser I'm afraid

[HustWu]

Ok I understand， Thank you！