animate background question. how to control it with state

[omac777]

https://releases.slint.dev/1.0.0/docs/slint/src/reference/animations
https://releases.slint.dev/1.0.0/docs/slint/src/recipes/recipes#custom-button
The custom-button example is really close to what I want:
-rounded border shape
-mouse event triggers the animate, but I want a non-gui state to trigger the animate
-I tweaked the background easing with ease-in-out gives a blinking effect
-I added iteration-count to -1 to make it blink forever.

Then I tried to change the iteration-count to 0 on click to make it stop but it doesn't stop. It seems to stay set to -1 forever once the animate is launched.

So my question is how would one go about making a button blink forever until I start/stop the animate again with a custom state?

Thank you in advance :) Cheers

[ogoffart]

i'd go with something like that:
background: toucharea.pressed ? red.mix(green, 0.5 + 0.5* Math.sin(animation-tick()/3s * 1turn)) : blue;

[omac777]

I tried to change a non-gui property outside of the scope of the blinking button, I'm getting an error not found in scope that I am trying hard to comply with. I tried making a global property but it still says the same error.

// Copyright © SixtyFPS GmbH <[email protected]>
// SPDX-License-Identifier: MIT

slint::slint! {
    import { AppWindow } from "fullscreen_toggle.slint";
}

// slint::slint!{
// export global Logic {
//     in-out property<bool> blinking_toggled: false;
// }
// }

fn main() -> Result<(), slint::PlatformError> {
    let ui = AppWindow::new()?;
    let mut fullscreen = false;
    let mut blinking = false;

    let ui_handle = ui.as_weak();
    ui.on_rs_request_fullscreen_toggle(move || {
        let ui = ui_handle.unwrap();
        fullscreen = !fullscreen;
        ui.window().set_fullscreen(fullscreen);
	println!("blah: fullscreen:<<{:?}>>", fullscreen);
});

    let ui_handle_2 = ui.as_weak();
	ui.on_rs_request_blink_toggle(move || {
            let ui2 = ui_handle_2.unwrap();
            blinking = !blinking;

	    ui2.global::<Logic>().set_blinking_toggled(blinking);
	    //error[E0412]: cannot find type `Logic` in this scope
	    //  --> examples/fullscreen_toggle/main.rs:31:15
	    //   |
	    //31 |     ui2.global::<Logic>().set_blinking_toggled(blinking);
	    //   |                  ^^^^^ not found in this scope

	    println!("blah: blinking:<<{:?}>>", blinking);
	});

    ui.run()
}

// Copyright © SixtyFPS GmbH <[email protected]>
// SPDX-License-Identifier: MIT

import { Button, VerticalBox } from "std-widgets.slint";

export global Logic  {
    in-out property<bool> blinking_toggled: false;
}

component BlinkingButton inherits Rectangle {
    in-out property text <=> txt.text;
    callback clicked <=> touch.clicked;
    border-radius: root.height / 2;
    border-width: 1px;
    border-color: root.background.darker(25%);
    //background: touch.pressed ? #6b8282 : touch.has-hover ? #6c616c :  #456;
    background: Logic.blinking_toggled ? red.mix(green, 0.5 + 0.5* Math.sin(animation-tick()/3s * 1turn)) : blue;
    height: txt.preferred-height * 1.33;
    min-width: txt.preferred-width + 20px;
    txt := Text {
        x: (parent.width - self.width)/2 + (touch.pressed ? 2px : 0);
        y: (parent.height - self.height)/2 + (touch.pressed ? 1px : 0);
        color: touch.pressed ? #fff : #eee;
    }
    touch := TouchArea {
        //clicked => {
        //    blinking_toggled = !blinking_toggled;
        //}
    }
}

export component AppWindow inherits Window {
    callback rs_request_fullscreen_toggle(); //external function
    callback rs_request_blink_toggle(); //external function
    VerticalBox {
        Text {
            text: "Toggle Button";
        }
        Button {
            text: "Toggle fullscreen";
            clicked => {
                root.rs_request_fullscreen_toggle(); //call external function
            }
        }
        Button {
            text: "Toggle Blinking";
            clicked => {
                root.rs_request_blink_toggle(); //call external function
            }
        }
        BlinkingButton {
            text: "I might blink";
            //clicked => {
            //    root.rs_request_fullscreen_toggle(); //call external function
           // }
        }

    }
}

[Vadoola]

I'm not sure using the slint::slint! macro to import AppWindow works that way (although I've never tried). That macro as I understand is for creating the slint code withing your .rs file. If you are using a .ui file you probably want to just use slint::include_modules!() somewhere in your main.rs

[omac777]

Ok so here's an answer that I assumed would work. Essentially the gui is in the slint and the callbacks are handled on the rust side's main.rs. Unfortunately it doesn't compile.

Here are the two files slint gui and main.rs:

export global PtiGlobals {
    in-out property<color> foreground-color;
    in-out property<color> background-color;
    in-out property<bool> blinking_toggled: false;
}

import { Button, VerticalBox } from "std-widgets.slint";

export component BlinkingButton inherits Rectangle {
    in-out property text <=> txt.text;
    callback clicked <=> touch.clicked;
    border-radius: root.height / 2;
    border-width: 1px;
    border-color: root.background.darker(25%);
    background: PtiGlobals.blinking_toggled ? red.mix(green, 0.5 + 0.5* Math.sin(animation-tick()/3s * 1turn)) : blue;
    height: txt.preferred-height * 1.33;
    min-width: txt.preferred-width + 20px;
    txt := Text {
        x: (parent.width - self.width)/2 + (touch.pressed ? 2px : 0);
        y: (parent.height - self.height)/2 + (touch.pressed ? 1px : 0);
        color: touch.pressed ? #fff : #eee;
    }
    touch := TouchArea {
        //clicked => {
        //}
    }
}

export component App inherits Window {
    callback rs_request_fullscreen_toggle(); //external function
    callback rs_request_blink_toggle(); //external function
    VerticalBox {
       Text {
              text: "Hello";
       	      color: PtiGlobals.foreground-color;
       }

       Text {
       	         text: "Toggle Button";
        }

        Button {
            text: "Toggle fullscreen";
            clicked => {
                root.rs_request_fullscreen_toggle(); //call external function
            }
        }

	Button {
            text: "Toggle Blinking";
            clicked => {
                root.rs_request_blink_toggle(); //call external function
            }
        }

	BlinkingButton {
            text: "I might blink";
            //clicked => {
            //}
        }

    }
}

slint::slint! {
    import { App, PtiGlobals } from "fullscreen_toggle.slint";
}

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    let mut fullscreen = false;
    let mut blinking = false;

    // way #1
    app.global::<PtiGlobals>().set_background_color(slint::Color::from_rgb_u8(0, 0, 0));

    // way #2
    PtiGlobals::get(&app).set_foreground_color(slint::Color::from_rgb_u8(255, 255, 255));

    let ui_handle = app.as_weak();
    app.on_rs_request_fullscreen_toggle(move || {
        				    let ui = ui_handle.unwrap();
        				    fullscreen = !fullscreen;
        				    ui.window().set_fullscreen(fullscreen);
					    println!("app.on_rs_request_fullscreen_toggle: fullscreen:<<{:?}>>", fullscreen);
	});


    let ui_handle_2 = app.as_weak();
	app.on_rs_request_blink_toggle(move || {
            let ui2 = ui_handle_2.unwrap();
            blinking = !blinking;
	    ui2.global::<PtiGlobals>().set_blinking_toggled(blinking);
	    println!("app.on_rs_request_blink_toggle: blinking:<<{:?}>>", blinking);
	});

   app.run()
}

[ogoffart]

I'm not sure using the slint::slint! macro to import AppWindow works that way

It does actually work.

[Vadoola]

It does actually work.

Good to know. I never considered it before but it makes sense. The ui files get compiled to native could in build.rs so the rest of rust can access it. The slint macro gets compiled during the normal rust compilation, and should be able to access the compiled ui code as well.

[omac777]

I integrated EVERYTHING on the rust side's main.rs and everything worked like a charm. It's almost the same code as above.
It's a mystery to me why putting everything on the rust side's main.rs works, but leaving the gui in the .slint causes a compiler side-effect.

Here is the known-good and working main.rs with the gui description described directly in the main.rs file:

//beginning of slint macro
slint::slint!{

export global PtiGlobals := {
    property<color> foreground-color;
    property<color> background-color;
    in-out property<bool> blinking_toggled: false;
}

import { Button, VerticalBox } from "std-widgets.slint";

component BlinkingButton inherits Rectangle {
    in-out property text <=> txt.text;
    callback clicked <=> touch.clicked;
    border-radius: root.height / 2;
    border-width: 1px;
    border-color: root.background.darker(25%);
    background: PtiGlobals.blinking_toggled ? red.mix(green, 0.5 + 0.5* Math.sin(animation-tick()/3s * 1turn)) : blue;
    height: txt.preferred-height * 1.33;
    min-width: txt.preferred-width + 20px;
    txt := Text {
        x: (parent.width - self.width)/2 + (touch.pressed ? 2px : 0);
        y: (parent.height - self.height)/2 + (touch.pressed ? 1px : 0);
        color: touch.pressed ? #fff : #eee;
    }
    touch := TouchArea {
        //clicked => {
        //}
    }
}

export component App inherits Window {
    callback rs_request_fullscreen_toggle(); //external function
    callback rs_request_blink_toggle(); //external function
    VerticalBox {
       Text {
              text: "Hello";
       	      color: PtiGlobals.foreground-color;
       }

       Text {
       	         text: "Toggle Button";
        }

        Button {
            text: "Toggle fullscreen";
            clicked => {
                root.rs_request_fullscreen_toggle(); //call external function
            }
        }

	Button {
            text: "Toggle Blinking";
            clicked => {
                root.rs_request_blink_toggle(); //call external function
            }
        }

	BlinkingButton {
            text: "I might blink";
            //clicked => {
            //}
        }

    }
}


}
// end of slint macro

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new()?;
    let mut fullscreen = false;
    let mut blinking = false;

    // way #1
    // app.global::<PtiGlobals>().set_background_color(slint::Color::from_rgb_u8(0, 0, 0));

    // way #2
    // PtiGlobals::get(&app).set_foreground_color(slint::Color::from_rgb_u8(255, 255, 255));

    let ui_handle = app.as_weak();
    app.on_rs_request_fullscreen_toggle(move || {
        				    let ui = ui_handle.unwrap();
        				    fullscreen = !fullscreen;
        				    ui.window().set_fullscreen(fullscreen);
					    println!("app.on_rs_request_fullscreen_toggle: fullscreen:<<{:?}>>", fullscreen);
	});


    let ui_handle_2 = app.as_weak();
	app.on_rs_request_blink_toggle(move || {
            let ui2 = ui_handle_2.unwrap();
            blinking = !blinking;
	    ui2.global::<PtiGlobals>().set_blinking_toggled(blinking);
	    println!("app.on_rs_request_blink_toggle: blinking:<<{:?}>>", blinking);
	});

   app.run()
}

[Vadoola]

I think its because as I mentioned above when using the ui file you need to be using slint::include_modules!() in your main.rs.

However I also forgot to mention, when using a ui file there is a step needed in build.rs something along the lines of slint_build::compile("ui/appwindow.slint").unwrap();.

I'm not sure if importing using the slint::slint! macro will work, but if you aren't compiling your ui file it won't work with that or the import modules macro.

[omac777]

I actually didn't use a build.rs for either version above. I'll give it a go to add a build.rs and compile the .slint file in question as well to see if it makes the "out of scope" error mentioned. Thank you for all your suggestions. They are very helpful to nudge me to something that does work :)

[omac777]

Thank you. I got the include_modules working. I've attached an entire blinking_toggle project in a zip
blinking_toggle_16Jun2024.zip