How do you put an image on a DynamicTexture?

[chicagobob123]

I give up I have searched and search. I can fill a background put text on this thing but I want to add an ICON to it. I would put up a Playground but I don't know any pictures I could use to reference. 

My basic code takes a preloaded Image  

var WiFiimg = new Image();
    WiFiimg.src = 'texture/WiFi.png';
     WiFiimg.loaded=false;
    //drawing of the test image - img1
    WiFiimg.onload=function() {
      WiFiimg.loaded=true;
    };

Then I create the texture fill the background with black then create a canvas element. (NOT SURE IF THIS IS RIGHT)

drawImage and .. nothing. All I get is a semi transparent black background. 

  dTexture=new BABYLON.DynamicTexture("dtex",adjwidth,scene,true);
    context=dTexture.getContext();
    context.save();
    context.fillStyle="black"; // make it transparent.
    context.fillRect(0,0,adjwidth,dTexture._canvas.height);

    //draw background image
    // dx, dy, dWidth, dHeight
    if(WiFiimg.loaded==true)
    {
     //And the brush canvas
     var brushcanvas = document.createElement('canvas');
     brushcanvas.width = adjwidth;
     brushcanvas.height = dTexture.height;
     var brushcontext = brushcanvas.getContext('2d');
     brushcontext.drawImage(WiFiimg,3,0,40,40);
     }
    context.restore();

     var Materialbackground=new BABYLON.StandardMaterial("bkgndmat",scene);
     Materialbackground.diffuseTexture=dTexture;
     Materialbackground.diffuseTexture.hasAlpha=true;
     Materialbackground.diffuseColor=new BABYLON.Color3(0.0,0.0,0.0);
     dTexture.update();

     var bkgndMesh=BABYLON.Mesh.CreateGround("bkgnd",adjwidth,adjustedheight,2,scene);
     bkgndMesh.material=Materialbackground;

     // WORK AROUND for DynamicTexture that can only be a power of 2
     bkgndMesh.material.diffuseTexture.uScale=adjwidth/textMesh1.material.diffuseTexture._canvas.width;
     bkgndMesh.material.diffuseTexture.vScale=adjustedheight/textMesh1.material.diffuseTexture._canvas.height;
     bkgndMesh.material.specularColor=new BABYLON.Color3(0.0,0.0,0.0);
     bkgndMesh.material.alpha=0.5;
     bkgndMesh.material.backFaceCulling=false;

 

[Hillardo]

Some pictures are available in the playground. For example: "textures/crate.png" or "textures/grass.png". Maybe you can use them to create a playground for your problem.

Edit: You draw the image on the brushcanvas, but never use the brushcanvas as a texture.

[chicagobob123]

28 minutes ago, chicagobob123 said:

Thanks I will use

 

[chicagobob123]

https://playground.babylonjs.com/#8JBZNX#5 

OK Playground thing up where is the grass ?  You might guess I have no idea how to do this just need to. 

Is it even possible?

 

[Hillardo]

I don't know what you want to achieve with your program, but I tried something similar and ended up using GUI elements.

https://www.babylonjs-playground.com/#FA2H83#2

There are special elements for images: https://doc.babylonjs.com/how_to/gui

 

[chicagobob123]

I am trying to add this Wifi icon to the identity in front of a text number thats number 4591

Currently I have the text and background Number 4533

 

I have the text and transparent black background but can not get the image to show up. 

And I need the image to go from green to red. Not sure how to get this done. 

 

 

 

 

[Hillardo]

With the GUI you can use an Image and a TextBlock on one mesh. Maybe this will solve your problem.

[chicagobob123]

Thanks I trying to find that. I have not see this new AdvancedTexture thing

[chicagobob123]

So far the AdvancedTexture looks like a great add on for static items that do not move. Love finding out about it but its not helping me. 

I need to make a mesh on the fly that displays dynamic information and moves with the model. 

OOPs thats not true. I see where its attached to a sphere and moves with it, which might be good enough. Still not sure. 

 

 

 

[Guest]

GUI can be updated dynamically (for its content) and can be projected onto meshes or linked to meshes so it should work for your use case

[chicagobob123]

I got this far. How do I control the destination position of the image?

 

https://www.babylonjs-playground.com/#ZI9AK7#134

[chicagobob123]

OK then After messing with this a little I have seen the light .

https://www.babylonjs-playground.com/#ZI9AK7#134

[dbawel]

@chicagobob123-

Perhaps this is more of what you are looking for?

https://www.babylonjs-playground.com/#1390ZN#2

I use Dynamic Textures to draw onto meshes in babylon routinely. They are one of the most powerful tools I've found in  the BJS framework, and I use them in so many scenes for different purposes, I've lost count..

DB

[chicagobob123]

Why doesn't this rotate?

I attached the plane to the scene. 

https://www.babylonjs-playground.com/indexstable#ZI9AK7#169

 

 

[Vorion]

You mean like this?

https://www.babylonjs-playground.com/indexstable#ZI9AK7#172