Search code examples
javascriptclutter

Clutter.Image Properties -- Loading an image from disk


Using Javascript, and thus remarkably terrible introspection documentation, I am attempting to create a ClutterImage which is supposed to replace the deprecated ClutterTexture. I cannot determine the Property name to use to specify a filename/uri to load for such an image:

const Clutter = imports.gi.Clutter;

Clutter.init(null);

let stage = new Clutter.Stage();

stage.connect("destroy", Clutter.main_quit);
stage.title = "Test";

stage.set_background_color(new Clutter.Color({
    red  : 0,
    blue : 128,
    green : 64,
    alpha : 255
}));

let img = new Clutter.Image({
    uri : 'some-image.jpg'
});

stage.add_actor(img);
Clutter.main();

My error is currently: Error: No property uri on this GObject ClutterImage which of course means that I have an invalid name for a property I'm trying to use for the uri. Does anyone know where I can look this up, or know what the filename/uri property is called in ClutterImages?


Solution

  • there is no property or function for loading texture data from file to a Clutter.Image instance.

    you should use GdkPixbuf to load the image data from file, buffer, or stream, and then put it in a Clutter.Image with something like:

    const Clutter = imports.gi.Clutter;     
    const Cogl = imports.gi.Cogl;           
    const GdkPixbuf = imports.gi.GdkPixbuf; 
    
    const pixbuf = GdkPixbuf.Pixbuf.new_from_file('...');
    const image = new Clutter.Image();
    
    image.set_data(pixbuf.get_pixels(),
                   pixbuf.get_has_alpha() ? Cogl.PixelFormat.RGBA_8888
                                          : Cogl.PixelFormat.RGB_888,
                   pixbuf.get_width(),
                   pixbuf.get_height(),
                   pixbuf.get_rowstride());
    

    which should work; if it doesn't, then it's an introspection issue, and will likely need some tweaks in GdkPixbuf.