Plugin project : using globals across several files. What am i doing wrong ?

[loloof64]

Hi, I'm trying to code a package for using with Slint UI in Rust : ChessboardSlintRust.

But, I'm struggling with a little problem, which is mainly because of my misconception of Slint Ui globals as well of exports.
In the file examples/demo.rs, I've got an error at line 5:18 : cannot find type FenUtils in this scope. This symbol comes from the ui/chessboard.slint.

The demo.rs source

slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let app = App::new().unwrap();
    app.global::<FenUtils>().set_get_piece_from_fen();
    app.run()
}

The chessboard.slint source

global FenUtils {
    pure callback get_piece_from_fen(string, int) -> string;
    pure callback is_white_turn_in_fen(string) -> bool;
}

export component Chessboard inherits Rectangle {
    in-out property<length> size: min(root.width, root.height);
    in property <color> bgColor: cadetblue;
    in property <color> whiteCellColor: navajowhite;
    in property <color> blackCellColor: peru;
    in property <color> coordinatesColor: yellow;
    in property <bool> reversed: false;
    in property <string> positionFen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1";
    private property<length> cellsSize: size * 11.1%;

    background: bgColor;

    function intDivision(value: int, divisor: int) -> int {
        floor(value / divisor)
    }

    function cellBackground(cellIndex: int) -> color {
        ((mod(mod(cellIndex, 8) +  intDivision(cellIndex, 8), 2)) == 0) ? whiteCellColor : blackCellColor
    }

    function cellImagePath(cellValue: string) -> image {
        if (cellValue == "P") {return @image-url("images/Chess_plt45.svg");}
        if (cellValue == "N") {return @image-url("images/Chess_nlt45.svg");}
        if (cellValue == "B") {return @image-url("images/Chess_blt45.svg");}
        if (cellValue == "R") {return @image-url("images/Chess_rlt45.svg");}
        if (cellValue == "Q") {return @image-url("images/Chess_qlt45.svg");}
        if (cellValue == "K") {return @image-url("images/Chess_klt45.svg");}
        if (cellValue == "p") {return @image-url("images/Chess_pdt45.svg");}
        if (cellValue == "n") {return @image-url("images/Chess_ndt45.svg");}
        if (cellValue == "b") {return @image-url("images/Chess_bdt45.svg");}
        if (cellValue == "r") {return @image-url("images/Chess_rdt45.svg");}
        if (cellValue == "q") {return @image-url("images/Chess_qdt45.svg");}
        if (cellValue == "k") {return @image-url("images/Chess_kdt45.svg");}
        return @image-url("images/void.svg");
    }

    for cellIndex in 64: Rectangle {
        x: (mod(cellIndex, 8) + 0.5) * cellsSize;
        y: (intDivision(cellIndex, 8) + 0.5) * cellsSize;
        width: cellsSize;
        height: cellsSize;
        background: cellBackground(cellIndex);
        Image {
            source: cellImagePath(FenUtils.get-piece-from-fen(positionFen, reversed ? 63 - cellIndex : cellIndex));
            width: cellsSize;
            height: cellsSize;
        }
    }

    for fileIndex in 8 : Text {
        x: (fileIndex + 0.85) * cellsSize;
        y: 0.10 * cellsSize;
        font-size: 0.3 * cellsSize;
        font-weight: 700;
        color: coordinatesColor;
        text: reversed ? ["H", "G", "F", "E", "D", "C", "B", "A"][fileIndex] : 
        ["A", "B", "C", "D", "E", "F", "G", "H"][fileIndex];
    }

    for fileIndex in 8 : Text {
        x: (fileIndex + 0.85) * cellsSize;
        y: 8.60 * cellsSize;
        font-size: 0.3 * cellsSize;
        font-weight: 700;
        color: coordinatesColor;
        text: reversed ? ["H", "G", "F", "E", "D", "C", "B", "A"][fileIndex] :
        ["A", "B", "C", "D", "E", "F", "G", "H"][fileIndex];
    }

    for rankIndex in 8: Text {
        x: 0.15 * cellsSize;
        y: (rankIndex + 0.75) * cellsSize;
        font-size: 0.3 * cellsSize;
        font-weight: 700;
        color: coordinatesColor;
        text: reversed ? ["1", "2", "3", "4", "5", "6", "7", "8"][rankIndex] : 
        ["8", "7", "6", "5", "4", "3", "2", "1"][rankIndex];
    }

    for rankIndex in 8: Text {
        x: 8.65 * cellsSize;
        y: (rankIndex + 0.75) * cellsSize;
        font-size: 0.3 * cellsSize;
        font-weight: 700;
        color: coordinatesColor;
        text:  reversed ? ["1", "2", "3", "4", "5", "6", "7", "8"][rankIndex] : 
        ["8", "7", "6", "5", "4", "3", "2", "1"][rankIndex];
    }

    Rectangle {
        x: 8.50 * cellsSize;
        y: 8.50 * cellsSize;
        width: 0.5 * cellsSize;
        height: 0.5 * cellsSize;
        border-radius: cellsSize;
        background: FenUtils.is-white-turn-in-fen(positionFen) ? white : black;
    }
}

The demo.slint source

import { Chessboard } from "chessboard.slint";

export component App inherits Window {
    min-width: 100px;
    min-height: 100px;
    preferred-width: 200px;
    preferred-height: 200px;
    background: lemonchiffon;

    board := Chessboard {
        reversed: true;
        positionFen: "rnbqkbnr/pp1ppppp/8/2p5/4P3/5N2/PPPP1PPP/RNBQKB1R b KQkq - 1 2";
    }
}

build.rs

fn main() {
    slint_build::compile("ui/demo.slint").unwrap();
}

So, how can I simply access FenUtils from Demo file ? I've also tried by exporting the global in the chessboard.slint, but it did not helped me neither.

[tronical]

Hi! You're almost there :). Export Fenutils from
Chessboard, import it in demo and export it again from there.

We do something like this with the PrinterQueue global in the printer demo:

slint/examples/printerdemo/ui/printerdemo.slint

Line 11 in 24d3775

export { PrinterQueue }

[loloof64]

Thank you very much 😃

I took a slightly similar approch before I landed on your answer.
But now it works. 😃