Loading images to background-image property with haxeui-kha

#1

From the r3d9u11 haxe basics we can see multiple ways of doing it with pure HaxeUI i.e. with module.xml.

But with kha we can’t use module.xml or I just haven’t found the way to create the class and use the xml blob to assign to it like we can do with Toolkit.componentFromString.

The weird thing is that when I declare <image resource="grid"/> it works. But when doing this <grid style="background-image: grid/>" it doesn’t work and I get haxe/ui/styles/Parser.hx:1316: Invalid value grid for css background-image. The name of the resource is grid.png and it’s in the Assets/** folder.

#2

Have you tried <grid style="background-image: 'grid'"/> (with the quotes)?

Any chance you might be able to zip up a simple example project?

Cheers,
Ian

#3

So I tried and it worked with the quotes. Now the issue I am having is that background-image-repeat doesn’t seem to want to repeat. I attached the code in a zip file. I also found that the width and height in % don’t work in haxeui-kha. Icon also seems to be broken in kha.

For haxeui-kha and haxeui-core I use the haxelib git versions. I used the latest version of kha that comes with KodeStudio.

Zip

#4

Great, thanks for the .zip - ill check it out later today - i had a brief look at the xml and it all looks fine to me. I presume you are using master branch?

Cheers,
Ian

#5

No I am using the dev branch(new-component-method). I am using that branch for haxeui-kha and haxeui-core.

1 Like
#6

Ok, even better. Ill check later this eve.

Thanks!
Ian

#7

Hmmm, ok, this seems to work for me just fine:

<vbox style="background-color: blue; width: 200px; height: 200px;  ">
    <box width="100%" height="100%" style="background-color: red;padding:10px;">
        <box width="100%" height="100%" style="background-color: green;padding:10px;">
            <box width="100%" height="100%" style="background-color: blue;padding:10px;">
                <box style="background-color: yellow; width: 100%; height: 100%;" />
            </box>    
        </box>    
    </box>
</vbox>    

image

When you say it doesnt work, in what sense do you mean? Nothing shows at all?

#8

Ok so it works; I realized that sometimes with the xml markups when someone(like me :P) makes errors they null out and don’t notify you that a mistake was made. The effect of that can be that when say I have an error in :

<vbox id="Mistake in style"  width="100%" style="height: 100%;" >
    <box id="I will not appear because vbox height is ill defined">
    <box/>
<vbox/>

The box might not appear because vbox has an error. In the debug output the nulled out feature doesn’t output an error message so it’s hard to know what went wrong. Maybe ncannasse’s new domkit could solve this kind of issue ? I can make an issue on github if you agree that this is an issue.

Thanks a lot for checking this out even if it was just a user error :stuck_out_tongue:

#9

Ok, great - glad it worked! And yeah, I agree, sounds like there should be GH issue to output better errors when loading runtime (possibly compile time too).

Out of interest, what is the error above? I cant see it.

#10

So in style="height: 100%" the 100% is not valid apparently in the css prop, it probably should be, but maybe it’s a bug .
While I have you background-image-repeat: repeat; or background-image-repeat: 'repeat'; should work right ? Because I can’t seem to be able to repeat an image with the background with these settings. The image just doesn’t show.

For reference:


    <grid id="grid1" columns="2" style="width: 200px;
        height: 200px;
        border:1px;
        background-image: 'grid';
        background-image-repeat: repeat;">
#11

Im not sure if repeat is implemented in the haxeui-kha backend. Ill check, as for the height: 100% i would expect that to also work, so sounds like another bug.

#12

Ok will create issues.

#13

Great, Thanks! So it looks like repeat isnt implemented in haxeui-kha at the moment. Any chance you could open an issue in haxeui-kha about that too?

#14

Yes will do :slight_smile:

1 Like