slint-ui / slint

Slint is a declarative GUI toolkit to build native user interfaces for Rust, C++, or JavaScript apps.
https://slint.dev
Other
16.96k stars 568 forks source link

quickstart/memory_tile: wrong @image-url for the Rust case #5824

Closed matta closed 1 month ago

matta commented 1 month ago

I'm running through https://releases.slint.dev/1.7.1/docs/slint/src/quickstart/memory_tile using the Rust path.

The instructions have you unpack the images within a ui subdirectory relative to the Cargo.toml file as so:

.
├── Cargo.lock
├── Cargo.toml
├── src
│   └── main.rs
└── ui
    ├── icons
    │   ├── at.png
    │   ├── at-solid.svg
    │   ├── balance-scale.png
    │   ├── balance-scale-solid.svg
    │   ├── bicycle.png
    │   ├── bicycle-solid.svg
    │   ├── bus.png
    │   ├── bus-solid.svg
    │   ├── cloud.png
    │   ├── cloud-solid.svg
    │   ├── cogs.png
    │   ├── cogs-solid.svg
    │   ├── motorcycle.png
    │   ├── motorcycle-solid.svg
    │   ├── README.md
    │   ├── tile_logo.png
    │   ├── video.png
    │   └── video-solid.svg
    └── icons.zip

Then within the main.rs slint! macro you're instructed to place this (this is a sub-snippet of what the guide prescribes, to emphasize the @image-url):

    Image {
        source: @image-url("icons/bus.png");
        width: parent.width;
        height: parent.height;
    }

However, this doesn't build:

salami% cargo run
   Compiling memory v0.1.0 (/home/matt/scratch/memory)
error: Cannot find image file /home/matt/scratch/memory/icons/bus.png
  --> src/main.rs:12:21
   |
12 |             source: @image-url("icons/bus.png");
   |                     ^

error[E0433]: failed to resolve: use of undeclared type `MainWindow`
 --> src/main.rs:2:5
  |
2 |     MainWindow::new().unwrap().run().unwrap();
  |     ^^^^^^^^^^ use of undeclared type `MainWindow`

For more information about this error, try `rustc --explain E0433`.
error: could not compile `memory` (bin "memory") due to 2 previous errors

The problem is explained in the guide:

Inside the Rectangle place an Image element that loads an icon with the @image-url() macro. When using the slint! macro, the path is relative to the folder that contains the Cargo.toml file.

So the fix is to patch src/main.rs:

12c12
<             source: @image-url("icons/bus.png");
---
>             source: @image-url("ui/icons/bus.png");

...and it works after that.

C++ and NodeJS lack the slint! macro, and are instead putting the slint code in a ui/appwindow.slint file, which might explain why this discrepancy was introduced.

ogoffart commented 1 month ago

Thanks for reporting the issue (this one and #5825 as well) We re-worded the quickstart guide to use a .slint file like for the other languages and it should fix these issues.

tronical commented 1 month ago

The updated docs are at https://snapshots.slint.dev/master/docs/slint/src/quickstart/ and will be in the regular URL after today's 1.7.2 release.