Css caches files

[dimitrisfasoulas]

I have a widget with the following CSS:

        const widget = Widget.Box({
            className: 'overview-tasks-workspace',
            vpack: 'center',
            css: `
            background-image: url("file:///tmp/workspace${index}.jpg");
            `

Now the file /tmp/workspaceX.jpg is changing constantly. But whenever I show the widget it shows the image that was there the first time ags run. I have to kill ags in order to load a newer image.

I tried cachebusting with:

        const widget = Widget.Box({
            className: 'overview-tasks-workspace',
            vpack: 'center',
            css: `
            background-image: url("file:///tmp/workspace${index}.jpg?${Math.random()}");
            `

But it still caches the first image. Is there a way to fetch the contents of the file each time?

[kotontrion]

gtk will load the image and keeps it in memory. It won't monitor the file. So you have to monitor the change yourself. Here is an example using a Variable:

const img_path = Variable("path_to_image")

const widget = Widget.Box({
    className: 'overview-tasks-workspace',
    vpack: 'center',
    css: img_path.bind().as(path => `background-image: url(${path});`)

Utils.monitorFile(file_path, (_, eventType) => {
    if (eventType === Gio.FileMonitorEvent.CHANGES_DONE_HINT) {
        img_path.set_value(file_path);
        //if the path does not change you can also do this instead of set_value
        img_path.emit("value")
    }
});

Note that if you change the file from within ags, you don't need the file monitor. You can just notify the change using the variable after the file change.

[Aylur]

correction: its img_path.setValue notimg_path.set_value