Babylonjs gui svg icon id support

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

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

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 ?


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! 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, 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?

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

Thanks, PR is up!

1 Like

And merged! thanks a ton!

1 Like

demo PG for using svg spritesheets and loading multiple icons via id:

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.

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