How to update image by updating its source which is an url?

[dilawar]

My application uses an API that returns a link to an image that would like to show in the UI. Instead of using this URL to download the image (svg) and creating slint::Image out of it, I was hoping for a simpler way where I just update the URL and slint-ui does the rest.

How to create slint::Image from a URL? I thought it will be straightforward because we already have @image-url. (I don't think, I can pass property to @image-url?).

For example.

Image {
   source: root.load_from_url(root.url_svg_image)
}

And somewhere in my application, I update the root.url_svg_image by calling set_url_svg_image. Any example or link to discussion?

[ogoffart]

What programming language are you using.
You can create a image with `slint::Image::load_from_path
rust docs , cpp docs

But does it need to be a url, cannot not be an image dirrectly?
eg:

MyApp := Window {
  property <image> svg_image;
  //...
  Image {
   source: svg_image;
  }

[dilawar]

I am using Rust. It has to be an URL! The URL is sent to me by a third-party application.

Currently, I am using reqwest to fetch the data and the image crate to load it into a buffer. I am using the example at the top of the page (https://docs.rs/slint/latest/slint/struct.Image.html) as a guideline. I was expecting a method load_from_url?

[tronical]

We don’t have support for loading from urls yet. It might make sense to offer this as an opt-in feature (that pulls in a network stack). Meanwhile I think your approach is a good solution. Or is there something specific about it that doesn’t work?

[dilawar]

I got curious after I saw @image-url("...") in the .slint example files. I thought that by default, somehow, slint can fetch images from URLs and display them.

Example: https://slint-ui.com/releases/0.2.4/docs/rust/slint/docs/builtin_elements/index.html#example-1

[dilawar]

Is it possible to add a feature that allows loading images from a base64 encoded string e.g. Image::from_string_base64? It would be convenient. Though it's not hard to implement using an external crate. Just my 2-cents.

[shoutmarble]

I want to embed my assets in my executable and then load my assets to Slint. However, I need a way to convert a rust_embed'ed (or binary image) file to a Slint Image object.

Any help appreciated, thank you.

**Cargo.toml** 
[dependencies]
# https://github.com/pyrossh/rust-embed
# https://docs.rs/rust-embed/6.4.2/rust_embed/
rust-embed="6.4.2" 

Main.rs

**main.rs**
#[derive(RustEmbed)]
#[folder = "ui"]
struct Asset;

Rust_Embed List files:

for file in Asset::iter() {
    println!("{}", file.as_ref());
}

Slint Load Image:

let path = Path::new("./ui/O_TIC_TAC.png");
let image = Image::load_from_path(path);
match image {
    Ok(img) => {
	    ui_handle.unwrap().set_image_url(img);
	    },
    Err(e) => {
	    println!("error setting image path");
    }
}

[ogoffart]

If you use @image-url, then slint takes care to embed the assets (this can actually be configured with CompilerConfiguration::embed_resources() https://docs.rs/slint-build/latest/slint_build/enum.EmbedResourcesKind.html )

But to anwser your question, you would need to use the image crate ( https://lib.rs/image ) and then render that to a SharedPixelBuffer, and use Image::from_rgba8

There is some docs there:

https://docs.rs/slint/latest/slint/struct.Image.html

instead of image::open() you can use image::load()

let mut cat_image = image::open("cat.png").expect("Error loading cat image").into_rgba8();
let buffer = SharedPixelBuffer::<Rgba8Pixel>::clone_from_slice(
    cat_image.as_raw(),
    cat_image.width(),
    cat_image.height(),
);
let image = slint::Image::from_rgba8(buffer);

[shoutmarble]

That was it!

• ui/appwindow.slint

I needed to reference my resources from my Slint file

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


struct TileData := {
    image: image,
    image-visible: bool,
    solved: bool,
}

export AppWindow := Window {
    preferred-width: 400px;
    preferred-height: 600px;

    
    title: "Tic Tac Toe Game";

    property<image> x_tic_tac;
    property<image> o_tic_tac;
    property<image> empty_tic_tac;
    
    property<image> image_url;

    property <int> row-count: 3;
    property <int> column-count: 3;

    callback request-change-image();
    callback update-counter();

    property <string> tictacstr;

    Button { 
        text: "this is a button";
        clicked => { update-counter() }
        Text {
            text: "hello world> \{tictacstr}";
            color: green;
        }
        Image { 
            
            source: image_url;
         }
     }

    property<[TileData]> memory-tiles : [
        { image: @image-url("X_TIC_TAC.png") },
        { image: @image-url("O_TIC_TAC.png") },
        { image: @image-url("Empty_TIC_TAC.png") },
    ];

}

This was the tricky part of embedding assets in the executable.

• build.rs

https://github.com/slint-ui/slint-rust-template
I generated my project via cargo-generate which makes a “build.rs”

Set the Configuration to “EmbedFiles” and reference the files also in the appwindow.slint file

fn main() {


    slint_build::compile_with_config(
        "ui/appwindow.slint",
        slint_build::CompilerConfiguration::new()
            .embed_resources(slint_build::EmbedResourcesKind::EmbedFiles),
    ).unwrap();
}

• main.rs

slint::include_modules!();
use std::path::Path;
use slint::{SharedString, Image, LoadImageError};

mod computer;
mod board;
mod draw;
mod gui;
use computer::all_moves::compute_move::{all_board_permutations};
use board::check_board::verify_board::{init_board, BoardSquare, CheckMark, check_win};
use draw::tic_tac_toe_draw::draw_board::draw_tictac;
use rdev::{listen, EventType, Key::{*, self}};

use std::process::exit;
use std::sync::mpsc::channel;
use std::thread;

use crossterm::Crossterm;
// this module is used for styling the terminal
use crossterm::style::{Color};

use crate::board::check_board::verify_board::put_move;

fn main() {
    let ui = AppWindow::new();

    let ui_handle = ui.as_weak();

    ui.on_update_counter(move || {

        let tiles = ui_handle.unwrap().get_memory_tiles();

        let opt_tiledata = tiles.row_data_tracked(0);
        let tiledata = opt_tiledata.unwrap();
        let x_tile = tiledata.image;

        let opt_tiledata = tiles.row_data_tracked(1);
        let tiledata = opt_tiledata.unwrap();
        let o_tile = tiledata.image;



        let tictac = ui_handle.unwrap().get_tictacstr();

        if tictac.contains("X_TIC_TAC.png") || tictac.contains("") {
            ui_handle.unwrap().set_tictacstr(SharedString::from("O_TIC_TAC.png"));
            ui_handle.unwrap().set_image_url(o_tile);

        }
        if tictac.contains("O_TIC_TAC.png") {
            ui_handle.unwrap().set_tictacstr(SharedString::from("X_TIC_TAC.png"));
            ui_handle.unwrap().set_image_url(x_tile);
        }
  
    });

    
    ui.run();

}

• Cargo.toml

[package]
name = "tic_tac_toe"
version = "0.1.0"
edition = "2021"
build = "build.rs"

[profile.release]
strip = true  # Automatically strip symbols from the binary.
opt-level = "z"  # Optimize for size.
lto = true
codegen-units = 1
panic = "abort"

[dependencies]
sled = "0.34.7" # embedded db https://lib.rs/install/sled  https://github.com/spacejam/sled
rdev = "0.5.1"  # key capture
crossterm = "0.5.0" # terminal colors
log = "0.4.17" # logger
env_logger = "0.9.1" # https://crates.io/crates/env_logger/0.9.1
# https://slint-ui.com/releases/0.3.0/docs/tutorial/rust/getting_started.html
slint = "0.3.0"  # https://slint-ui.com/releases/0.3.0/docs/rust/slint/index.html

[build-dependencies]
slint-build = "0.3.0"