Babylonjs gui svg icon id support

Feature requests
1

Hi, so my request actually stemmed from the last question in this post (detectPointerOnOpaqueOnly for gui image only buttons). Turns out, I’m going to need many icons. Many meaning > 100. And manually defining sourceLeft/sourceTop, icon size width/height definitions isn’t really efficient for batch loading of svg assets. Ideally, I’d like to use the icon id, ala spritesheet.svg#icon or spritesheet.svg#home for fast simple autoloading.

So asking if there’s any chance to add an options to the gui image controls constructors for loading via icon id for svg assets? Primary benefit: speed up svg UI artist workflow. Thoughts ?

1 Like
2

Absolutely fine with the idea. Do you want to try submitting a PR?

3

Um, up to my neck making assets. If no one takes it in Sept., I can prolly take it. Thanks for the green light !

edit: need getBBox or getBoundingClientRect ?

2 Likes
4

Working on this right now and getting build errors: ChromeHeadless have not captured in 300000 ms, killing.

@Deltakosh @sebavan Is this a chrome error ? I don’t have chrome installed btw. What should I do ?

The exact message is fairly long

07 09 2019 16:44:23.991:WARN [launcher]: ChromeHeadless have not captured in 300000 ms, killing.
07 09 2019 16:44:25.994:WARN [launcher]: ChromeHeadless was not killed in 2000 ms, sending SIGKILL.
07 09 2019 16:44:28.000:WARN [launcher]: ChromeHeadless was not killed by SIGKILL in 2000 ms, continuing.
[16:44:28] '<anonymous>' errored after 5.15 min
[16:44:28] Error: 1
    at formatError (C:\Users\shinj\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\format-error.js:20:10)
    at Gulp.<anonymous> (C:\Users\shinj\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\versioned\^4.0.0\log\events.js:31:15)
    at Gulp.emit (events.js:187:15)
    at Gulp.EventEmitter.emit (domain.js:441:20)
    at Object.error (C:\Users\shinj\Babylon.js\node_modules\undertaker\lib\helpers\createExtensions.js:61:10)
    at handler (C:\Users\shinj\Babylon.js\node_modules\now-and-later\lib\mapSeries.js:47:14)
    at f (C:\Users\shinj\Babylon.js\node_modules\once\once.js:25:25)
    at f (C:\Users\shinj\Babylon.js\node_modules\once\once.js:25:25)
    at tryCatch (C:\Users\shinj\Babylon.js\node_modules\async-done\index.js:24:15)
    at done (C:\Users\shinj\Babylon.js\node_modules\async-done\index.js:40:12)
    at removeAllListeners (C:\Users\shinj\Babylon.js\node_modules\karma\lib\server.js:354:9)
    at webServer.close (C:\Users\shinj\Babylon.js\node_modules\karma\lib\server.js:365:13)
    at Server.close (net.js:1576:9)
    at Object.onceWrapper (events.js:273:13)
    at Server.emit (events.js:187:15)
    at Server.EventEmitter.emit (domain.js:459:23)
[16:44:28] 'tests-babylon-unit' errored after 5.2 min
[16:44:28] 'tests-unit' errored after 5.2 min
[16:44:28] 'tests-all' errored after 5.2 min
[16:44:28] 'default' errored after 13 min
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! babylonjs@0.0.0 build: `gulp --max-old-space-size=8192 --tsLintFix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the babylonjs@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Also in the ‘do not commit’ from https://doc.babylonjs.com/how_to/how_to_start, I don’t see gui in the list. Does it mean I should just go ahead and commit ?

also, I should ask here, is there a limit on the character length of an declared observable ? I have added in a fairly long onSVGAttributesComputedObservable, is this an issue?

5

You need to have chrome installed in order to run the test locally.

Gui should not be commited like the other files.

I do not think there are any issues with the number of characters at lest it is self descriptive.

1 Like
6

Thanks, PR is up!

1 Like
7

And merged! thanks a ton!

1 Like
8

demo PG for using svg spritesheets and loading multiple icons via id:
https://playground.babylonjs.com/#E5CARD

Pre-requisite: valid SVG document with width, height, viewbox, icons grouped via ids
Tested against ffox and chrome.

Do I need to do anything to update the doc ? Lemme know, thanks.

9

Yes ideally updating this page: Documentation/Gui.md at master · BabylonJS/Documentation · GitHub (in the section about Image control)

1 Like
10

I am trying to implement this in my project right now, but I am having some dificulty. I cant find the onSVGAttributesComputedObservable on my gui button, so my asumption right now is that it does not get added because my svg is not formated coredtly ? Any tips/tutorials on how to correctly set this up would be apreciated, preferably in Illustrator, but i guess I can manage with Inkscape if the only way to go with this…

11

I am pretty sure a repro in the playground would help a lot here :slight_smile:

1 Like
12

I tried with the svg from the PG mentioned earlyer in my local project, but no more luck with that, do I need to enable some extention or somthing maybe, that comes default with the PG and I have to load in my local project ? I will see if I can make a playground, but what I am trying to do is just the same as the PG mantioned (Babylon.js Playground) so not sure if that is gonna be that easy/helpfull …

13

Silly me, I was using a local copy of the GUI lib, not the preview from online, sutch a silly mistake, thanks for the help tho :slight_smile:

1 Like
14

Hello again. The svg initialy load correctly now, but I can’t seem to change them image afterwords, i tried with something like button.image.source = “same.svg#nev_icon”;

https://www.babylonjs-playground.com/#8KNS7K#3

Also tried to trigger the onSVGAttributesComputedObservable again, but did not seem to help.

https://www.babylonjs-playground.com/#8KNS7K#4

Am i missing something else i need to do here ?

15

The problem comes from the svgCheck function. it will update the parameter on load but the second time the svg element is already loaded so the onload is never called

16

I have a fix :wink: It will be in next nightly

17

Sweet. Thanks so much David :slight_smile: :+1:

18

Did you get it working ? I can post another example for your use case but the correct way is to make a button with both ON and OFF images, keeping the ON image invisible. Then activate it in the pointer callback. In this way, your button has a single callback to tackle both ON and OFF use cases. In the documentation, the PG example uses 2 buttons and therefore 2 callbacks, one to deal with ON and the other with OFF use cases. It really depends on user needs.

The svg codes in this feature request here do not impact how you build your ui, they only cut out the hassle of having to define source sizes for every single svg asset by shortcutting with #id.

Lemme know how it goes, cheers ! :slight_smile:

19

Yeah, got it working now.

I was using StackPanel to build parts of my UI, so i figured just having one icon and switching the image would be easier then using two images that, I guess, I would have had to nest or manualy align. But the #id is realy nice, that way I wont have to update a lot of values if i change my icon sheet dimentions.

Took me a little while to figure out some of the svg setup needed in inkscape tho. Would love to see it work with Illustrator or Affinity Designer out of the box, but since I can make my changes in Inkscape now that the file is initialy set up it is all good :slight_smile:

Thanks so much for implementing this. :+1:

2 Likes