Use assets on Image

After several hours trying to draw an image, I have to ask for help…

assets/haxeui_96.png
assets/main.xml

After several hours trying to draw an image, I have to ask for help…

assets/haxeui_96.png

assets/main.xml

 <vbox>
 <image resource="haxeui-core/styles/default/haxeui.png" style="horizontal-align: center;" />
 <image id="img" resource="assets/haxeui_96.png"  width="200" height="200"  />
 </vbox>

First image is visible (based on png inside haxeuicore module)
Seconde image is empty whatever I tried…
I tried

<image id="img" resource="assets/haxeui_96.png"  width="200" height="200"  />
<image id="img" resource="haxeui_96.png"  width="200" height="200"  />
<style>
        .image {
            border: 1px #999999;
            resource: "haxeui_96.png";
        }
    </style>
img.resource = "assets/haxeui_96.png

but in every case, I have a blank 200x200 square.
I saw in component-explorer than this case isn’t handled.
So, is there a way ?! Do I need to setup something on the hxml (like --resource …?)
On the same note, how do you debug this ? it seems compiler doesn’t complain if name of resource is wrong or not…

Tested on hxwidget and html5

Regards

So, there are two “types” of image resources in haxeui (kind of). The first is specific to the target framework, the second is unspecific and can be used by any backend, basically, for the second type haxeui turns haxe resources in a bunch of bytes and then turns them into the format that is correct for the backend, this is there because haxeui-core (and themes) might want to use images without having to package them in different ways for each backend.

So in the case of hxwidgets they are actually one and the same, ie, haxeui-core resources are haxe resources, and hxwidgets resources are haxe resources also, so as you say, you would need to package them with the --resource flag in your app.

However, there is an easier method (which haxeui-core uses), and that is to use a haxeui module, this essentially allows you to package a load of resources for you recursively, more information here: https://github.com/haxeui/haxeui-guides/blob/master/modules.md

Let me know if that helps any

Cheers,
Ian

Also, btw, since haxeui-hxwidgets is a sys backed (ie, has access to the file system) you can also use external files:

<image resource="file://C:/Temp/some_image.png" />

Note: this wont work for haxeui-html5 (or anything that doesnt have access to the file system)

(http/https should also work for all backends)

OK, so I was on the right way…

Method1
using --resource, how do you use them after that ?
I mean if on my hxml, I add

–resource assets/logo.png@logo

how do i set it on haxeui ?

this way :

       <image resource="logo" /> 

method2
so if I add a module.xml on my projet root with

 <module id="projectmodule">
      <resources>
        <resource path="/assets" prefix="assets" />
      </resources>
 </module>

I could then use

<image resource="assets/logo.png" /> 

?

method3
Of course, using full path file:// isn’t very interesting.

regards

Yeah, method 1 and 2 look right to me, keep in mind that the module.xml has to be in your classpath, not your project root (your project root may be in your class path, but it also may not be - its the -cp flag in your hxml)

Thanks for the details, I had to move module.xml like you said.

It’s now working!
The module.xml is a lot easier so I’ll go with this…and explore what module has to offer

1 Like

How do you define an image on code ?
It worked on XML but I don’t find how to do it by code…

 var img:Image = new Image();
 img.resource = "icons/check.png";

Does nothing on my item renderer…

Can you paste a minimal code example / project so i can just run it and see, its a pain sometimes creating a new project to try and match whatever you are doing, and sometimes i might not be matching it at all (since im guessing).

Cheers,
Ian

understood,

you can see it (and some others) on https://bitbucket.org/WillNa/haxeui-bugs
here, it’s bug 2

1 Like