GUI AdvancedDynamicTexture ImageOnly Button Color change

[DylanD]

Hey everyone, I have another strange question I was wondering if there was a way to change the color of a image within Babylonjs code.  The image is only white so I think I could just shade it or something like that right? My idea would be to put something over it color it then change the alpha, however  I need to do this to many images so it would become cluttered and not very efficient.

I would like to change the tint or color of an imageOnlyButton's image.  I know I can access the image with button.children[0], but there doesn't seem to be anything on that, that will help. 

So any ideas?

[Arte]

@DylanD

material.diffuseColor

https://www.babylonjs-playground.com/#SUJDTR

http://www.babylonjs-playground.com/#20OAV9#15

[DylanD]

14 hours ago, Arte said:

@DylanD

material.diffuseColor

https://www.babylonjs-playground.com/#SUJDTR

http://www.babylonjs-playground.com/#20OAV9#15

Thanks! This should work great! 

[DylanD]

15 hours ago, Arte said:

@DylanD

material.diffuseColor

https://www.babylonjs-playground.com/#SUJDTR

http://www.babylonjs-playground.com/#20OAV9#15

It doesn't seem that imageOnlyButtons have a material or texture or diffuseColor at all  any ideas?

[Arte]

Sorry, I misunderstood you. I had in mind (plane with texture). 

[DylanD]

4 minutes ago, Arte said:

Sorry, I misunderstood you. I had in mind (plane with texture). 

Ahh, ok.  Thanks anyways, that should come in hand for something else I was thinking about.

[Wingnut]

Hi guys!  Ok, let's try something...  https://www.babylonjs-playground.com/#PF5SYT#11

I guess we COULD call it a MostlyImageOnlyButton... but... I decided-on MarginedImageOnlyButton.

Its name can be easily changed. 

You need to include lines 2-20... early in your code... to be able to call CreateMarginedImageOnlyButton.  I call it in line 42... with 3 parameters... name, imageUrl, marginAmount.

I don't know if this hack will help your issue, but I thought I would show it to you, DD.  It allows you to colorize an imageOnlyButton... without needing to change the .color (which, along with .thickness, is the border color). 

This "margin method" is strictly a .background color adjustment... with no affect on .color or .thickness.

Note:  I think you would like to change colors of the image itself, but the image used in Image Buttons... is a DOS-ish image, I believe (gotten with a URL).  Being that way, I THINK there are security issues with directly modifying the image.  There is a slight chance, using intense hacking... to use JS to draw the image yourself, and then MAYBE use THAT image as the image for the button.  That would likely be called something similar to... createDynamicImageOnlyButton.  Essentially, you would draw the image yourself, in code, using strokes and fills seen at... https://www.w3.org/TR/2dcontext/  

I used a similar method... to color-sparkle the inside of fonts... here:  https://www.babylonjs-playground.com/#11JINV#58

I hope this helps, or gives more ideas.  The PG app is currently broken. 

Loading "vs/language/typescript/src/mode" failed  loader.js:1:3904
Detail:  error { target: <script>, isTrusted: true, currentTarget: <script>, eventPhase: 2, bubbles: false, cancelable: false, defaultPrevented: false, composed: false, timeStamp: 1530740760810000, cancelBubble: false, originalTarget: <script> }  loader.js:1:3953
Here are the modules that depend on it:  loader.js:1:4044
Array [ "===anonymous3===" ]

Someone is working-on something, I suspect.  It will likely be back soon.  Party on.

[DylanD]

16 hours ago, Wingnut said:

Hi guys!  Ok, let's try something...  https://www.babylonjs-playground.com/#PF5SYT#11

I guess we COULD call it a MostlyImageOnlyButton... but... I decided-on MarginedImageOnlyButton.

Its name can be easily changed. 

You need to include lines 2-20... early in your code... to be able to call CreateMarginedImageOnlyButton.  I call it in line 42... with 3 parameters... name, imageUrl, marginAmount.

I don't know if this hack will help your issue, but I thought I would show it to you, DD.  It allows you to colorize an imageOnlyButton... without needing to change the .color (which, along with .thickness, is the border color). 

This "margin method" is strictly a .background color adjustment... with no affect on .color or .thickness.

Note:  I think you would like to change colors of the image itself, but the image used in Image Buttons... is a DOS-ish image, I believe (gotten with a URL).  Being that way, I THINK there are security issues with directly modifying the image.  There is a slight chance, using intense hacking... to use JS to draw the image yourself, and then MAYBE use THAT image as the image for the button.  That would likely be called something similar to... createDynamicImageOnlyButton.  Essentially, you would draw the image yourself, in code, using strokes and fills seen at... https://www.w3.org/TR/2dcontext/  

I used a similar method... to color-sparkle the inside of fonts... here:  https://www.babylonjs-playground.com/#11JINV#58

I hope this helps, or gives more ideas.  The PG app is currently broken. 

Loading "vs/language/typescript/src/mode" failed  loader.js:1:3904
Detail:  error { target: <script>, isTrusted: true, currentTarget: <script>, eventPhase: 2, bubbles: false, cancelable: false, defaultPrevented: false, composed: false, timeStamp: 1530740760810000, cancelBubble: false, originalTarget: <script> }  loader.js:1:3953
Here are the modules that depend on it:  loader.js:1:4044
Array [ "===anonymous3===" ]

Someone is working-on something, I suspect.  It will likely be back soon.  Party on.

Seems like the playground is still down  , I think I know what you meant though, however I don't think thats what I needed, but it might end up working.  So il just have to keep checking up on it here.  Thanks though WingNut!

[Guest]

It is back now

[DylanD]

46 minutes ago, Deltakosh said:

It is back now

Haha thanks, you must of just woke up your computer(or yourself) I think you have replied to every front page question in the last 30 mins. 

Thanks!

[DylanD]

21 hours ago, Wingnut said:

Hi guys!  Ok, let's try something...  https://www.babylonjs-playground.com/#PF5SYT#11

I guess we COULD call it a MostlyImageOnlyButton... but... I decided-on MarginedImageOnlyButton.

Its name can be easily changed. 

You need to include lines 2-20... early in your code... to be able to call CreateMarginedImageOnlyButton.  I call it in line 42... with 3 parameters... name, imageUrl, marginAmount.

I don't know if this hack will help your issue, but I thought I would show it to you, DD.  It allows you to colorize an imageOnlyButton... without needing to change the .color (which, along with .thickness, is the border color). 

This "margin method" is strictly a .background color adjustment... with no affect on .color or .thickness.

Note:  I think you would like to change colors of the image itself, but the image used in Image Buttons... is a DOS-ish image, I believe (gotten with a URL).  Being that way, I THINK there are security issues with directly modifying the image.  There is a slight chance, using intense hacking... to use JS to draw the image yourself, and then MAYBE use THAT image as the image for the button.  That would likely be called something similar to... createDynamicImageOnlyButton.  Essentially, you would draw the image yourself, in code, using strokes and fills seen at... https://www.w3.org/TR/2dcontext/  

I used a similar method... to color-sparkle the inside of fonts... here:  https://www.babylonjs-playground.com/#11JINV#58

I hope this helps, or gives more ideas.  The PG app is currently broken. 

Loading "vs/language/typescript/src/mode" failed  loader.js:1:3904
Detail:  error { target: <script>, isTrusted: true, currentTarget: <script>, eventPhase: 2, bubbles: false, cancelable: false, defaultPrevented: false, composed: false, timeStamp: 1530740760810000, cancelBubble: false, originalTarget: <script> }  loader.js:1:3953
Here are the modules that depend on it:  loader.js:1:4044
Array [ "===anonymous3===" ]

Someone is working-on something, I suspect.  It will likely be back soon.  Party on.

Alright so now that I have been able to see the playgrounds...  The first playground is not what I meant(as you noted).  The second one with the sparkly font is very close.  So I'm going to look into that(I'm pretty trash with strokes and fills...).

 

Thanks again!

[Wingnut]

*nod*.  You might be able to COPY color-bytes from a url-gotten image... into a section of any make-it-yourself canvas (maybe).   The original objective of that sparkle-PG was to paint a picture inside the fonts... and I might have failed at that, due to CORS stuff.  It seems... getImageData(something)...  when used on a URL-gotten image (DOM-ish)... returns a buffer full of zeroes, or maybe an empty buffer.  Report findings, of course.  (thx).

All color values in a context2d image... are color4-like.  So, each pixel has a rgb and 'a'.  Line 180... checks the alpha.  If 'a' is NOT zero, paint it some random color.  If there were MANY controls on this ADT, they would ALL be sparkling. 

It was just for testing... not very useful, but a tolerable intro to power-hacking the gui controls.  Probably  https://www.w3.org/TR/2dcontext/#drawing-images-to-the-canvas  area ... the third variation looks powerful.

[Arte]

@Wingnut, @DylanD

Why not:

Create plane as button -> apply image -> overlay colour... overlay colour ... ???

It will be more simple 

[DylanD]

1 hour ago, Arte said:

@Wingnut, @DylanD

Why not:

Create plane as button -> apply image -> overlay colour... overlay colour ... ???

It will be more simple 

speaking of simple, even easier than this I could just open ms paint and bucket fill, since most of these will force me to rewrite large chunks of code this would be the quickest and most simple way.

Id like to try these options though If I have the time.  But for now I think a few extra .pngs will be fine.

[Wingnut]

3 hours ago, Arte said:

Create plane as button -> apply image -> overlay colour... overlay colour ... ??? 

Interesting idea!  The only problem... a plane-button won't flow-in with standard GUI controls... things like containers and stackpanels.  This plane-button would NOT be a gui control at all, right?

It might need to be parented to the camera, so it can stay in a persistent location on the screen.  Certainly possible, though.  Put an actionManager on the plane, and boom, it's a button.  Full power from BJS StandardMaterial... including setting diffuseCOLOR and emissiveColor WHILE a diffuseTexture (with transparent background?) is also in-place. 

AND, abilities to overlay other colored, partially-transparent planes, as Arte mentioned, but they will need to be set isPickable = false... to keep from blocking clicks targeted to the actionManager on the underlying plane-button).

Sort of a "texture color-tinting system", eh?  *nod*  I think I'm on your frequency, @Arte.  Interesting.

[Arte]

It all depends on where and how it will be used. 

There is always a way.