dynamic texure - drawText attributes - get text to wrap?

[Zimbofly]

Hey all !

 

I',m playing around with dynamic texture and drawText to layer some text over my mesh.

 

anyone have any idea on how to wrap the text on the box?

 

I'm able to position, change font and size as per the documentation - but wrapping is a bit of a mystery!

 

here - I'm able to layer text over an image of a yellow sticky, but so far - no wrapping....

var sticky = new BABYLON.Mesh.CreateBox("sticky", 0.5, scene);    	if (farWall) {    		sticky.rotation.x = sign * (Math.PI);    		sticky.scaling = new BABYLON.Vector3(1, 1, 0.01);    	} else {    		sticky.scaling = new BABYLON.Vector3(0.01, 1, 1);    		sticky.rotation.x = sign * (-Math.PI / 2);    	}    	sticky.position = new BABYLON.Vector3(pos.x, pos.y, pos.z);    	sticky.material = new BABYLON.StandardMaterial("matPaint", scene);    	sticky.material.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene);    	sticky.material.specularColor = new BABYLON.Color3(0, 0, 0);    	sticky.material.diffuseColor = new BABYLON.Color3(0, 0, 0);    	sticky.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);    	var content = new BABYLON.Mesh.CreateBox("content", 0.5, scene);    	if (farWall) {    		//sticky.rotation.x = sign * (Math.PI);    		content.scaling = new BABYLON.Vector3(1, 1, 0.01);    	} else {    		content.scaling = new BABYLON.Vector3(0.01, 1, 1);    		content.rotation.x = sign * (-Math.PI / 2);    	}    	content.position = new BABYLON.Vector3(pos.x, pos.y, pos.z);    	content.material = new BABYLON.StandardMaterial("matPaint", scene);    	content.material.specularColor = new BABYLON.Color3(0, 0, 0);    	content.material.diffuseColor = new BABYLON.Color3(0, 0, 0);    	content.material.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);    	var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);    	content.material.diffuseTexture = backgroundTexture;    	    	backgroundTexture.drawText(stkyContent, null, 80, "50px Segoe UI", "black", "#F7FAA9");    	//hover over image    	sticky.actionManager = new BABYLON.ActionManager(scene);    	sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, sticky, "visibility", 1, 100));    	sticky.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, sticky, "visibility", 0.6, 100));

 

 

cheers!

[Dad72]

I think this should best operate. With ......        ....  => bad englich

var stickyMat = new BABYLON.StandardMaterial("matPaint", scene);stickyMat.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene);stickyMat.specularColor = new BABYLON.Color3(0, 0, 0);stickyMat.diffuseColor = new BABYLON.Color3(0, 0, 0);stickyMat.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);var contentMat = new BABYLON.StandardMaterial("matPaint", scene);contentMat.specularColor = new BABYLON.Color3(0, 0, 0);contentMat.diffuseColor = new BABYLON.Color3(0, 0, 0);contentMat.emissiveColor = new BABYLON.Color3(0.6, 0.6, 0.6);var backgroundTexture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);content.material.diffuseTexture = backgroundTexture;

[Wingnut]

Hi Z!  Are you talking about WORD-wrapping the text, or uWrap and vWrap of the dynamicTexture?  (I'll assume word wrap.)

 

I don't think there is a way to word-wrap the text... unless you build your own word-wrap function.  (I could easily be wrong)

 

But you can use multiple drawText lines...

 

backgroundTexture.drawText(stkyContentLine1, null, 80, "50px Segoe UI"...

backgroundTexture.drawText(stkyContentLine2, null, 160, "50px Segoe UI"...

backgroundTexture.drawText(stkyContentLine3, null, 240, "50px Segoe UI"...

 

(To get the most text in the least width, choose your font family carefully.)

 

You know all this already... so why am I babyloning-on? 

[Zimbofly]

Hi dad - I'm not really sure i understand what you mean - are you saying i should remove sticky.material = new BABYLON.StandardMaterial("matPaint", scene);

and move it to var stickyMat = new BABYLON.StandardMaterial("matPaint", scene);  ?

is it just cleaner code - or something I'm doing wrong?

 

Hey Wingnut!

yes - word-wrapping is the game!

I'm taking the content from a database

I'm making yellow stickies for the walls on my room.

 

Maybe I need to find/make a little function that takes the database content, works max characters per line then splits content into those different lines as you show....

ouch!

[Dad72]

Yes Zimbofly this:

 

""

are you saying i should remove sticky.material = new BABYLON.StandardMaterial("matPaint", scene);

and move it to var stickyMat = new BABYLON.StandardMaterial("matPaint", scene); 

""

 

exemple:

var sticky = new BABYLON.Mesh.CreateBox("sticky", 0.5, scene);

var stickyMat = new BABYLON.StandardMaterial("matPaint", scene);
stickyMat.diffuseTexture = new BABYLON.Texture("./GalleryAssets/sticky1_tmp.png", scene);

sticky.material = stickyMat;

 

it is faster and more secure. After I do not know if will solve your problem. but I find this method more secure, more reliable.

[Zimbofly]

Thanks Dad - just making those changes to see if any improvement...

 

Next question.....

 

at the moment, I can double click on yellow sticky on the wall and edit content - then update database - BUT

 

HOW do I make it refresh the test with new value??????

 

I have var LoadImagesFromHTML = function () 

I have tried to put this again after submit button - no change...

 

also tried to copy:

engine.runRenderLoop(function () {

                scene.render();

            });

after submit button - no joy

 

Any ideas?

[GameMonetize]

Wrap text is not a canvas supported feature (not related to babylon.js)

 

You have to simulate it manually

[Zimbofly]

ahhh - Ok DeltaKosh...

I will update when I get mr manual working!

 

thanks...

[garidan]

If I do multiple drawText on my texture, only the last one is shown.

 

I have to show multiple lines of text, any clue please ?

[Xeonzinc]

This is what i currently use to wrap my text:

function wrapText(context, text, x, y, maxWidth, lineHeight) {	var words = text.split(' ');	var line = '';		for(var n = 0; n < words.length; n++) {	  var testLine = line + words[n] + ' ';	  var metrics = context.measureText(testLine);	  var testWidth = metrics.width;	  if (testWidth > maxWidth && n > 0) {		context.fillText(line, x, y);		line = words[n] + ' ';		y += lineHeight;	  }	  else {		line = testLine;	  }	}	context.fillText(line, x, y);}

which gets used as follows:

	textureContext = menuTexture.getContext();	textureContext.font = "bold 40px Calibri";	textureContext.save();	textureContext.fillStyle = "white";	textureContext.textAlign="centre";	wrapText(textureContext,"Lots of really long and exciting text",null,80,300,25);	textureContext.restore();	menuTexture.update(); 

[Bob Tarkish]

Rosetta Code has some nice wrapping algorithms:

export function wrap(text, limit) {
  if (text.length > limit) {
    // find the last space within limit
    const edge = text.slice(0, limit).lastIndexOf(" ");
    if (edge > 0) {
      const line = text.slice(0, edge);
      const remainder = text.slice(edge + 1);
      return line + "\n" + wrap(remainder, limit);
    }
  }
  return text;
}

use...

const longString = "my very long string that has characters greater than 10..."
const arrTextWrap = wrap(longString, 10).split("\n") || [];
let currentHeightPos = 75;
arrTextWrap.forEach((string) => {
  dynamicTexture.drawText(string, 10, currentHeightPos, "20px Segoe UI", "#bf0d0d", "transparent", true);
  currentHeightPos = currentHeightPos + 16;
});