Dynamic Text

Hi,

I'm trying to set up a scene with simple dynamic text.

* What I mean by "dynamic" is that I could change the text on the fly in my website.
Like text input that'll change the text on the scene.

Have anyone try it already ?
There any document that you guys can refer to me please ?

Thanks !

Hi Nivnoiman, welcome to the forum.
There is a great example of this in the Code Snippets. You have a copy of this in your SDK but you can see it on line here: Canvas Texture. You can use the "View Code" button at the lower left.
In the scene, you will see "Hello World!" on one of the cube faces. This is generated by this code:


This uses functions from the Texture Module.

Hi Will Welker,
Thanks for the quick answer :)

It seems like something is missing here.

I need to create throw the Blender Software the Json and the bin files that have the same objects in the code you sent me.

How can I do this ?

Once you start using JavaScript in your project, you will need to make a new project with the Project Manager. This will create all the starter files for your new project.
There is a great YouTube video about this from Ian Scott.
Since the making of this video there have been a few changes. All of your new project files will end up in: blend4web_sdk\projects\your_project_name.
As a shortcut, you can access the Code Snippets from your Project Manager (SDK Index > Code Snippets). Select the code example you want and use the "Make Project" button at the lower left. This will create a new project with all the example files copied for you to start with.
Any time you make changes in your .blend file, you will need to re-export the JSON file to your asset directory (this makes a bin file as well).

I'll try it :)
Thanks !

Hey Again :)
First - Thank you for the help.

I created the scene with the image and the text.
I wonder now, how can i change dynamic the text "Hello World" through JavaScript ?
When I tried to change it ( after the init function ) I got error "not defined"
even though I made the variable global.

Thanks,
Niv.

I could take a look at your code if you want. Maybe you can attach your JS file and copy the console error as well.

Hi :)

This is my scene
https://www.screencast.com/t/bBbkhs9S8
I marked the place I want the text to appear.

This is my code

    cube            = m_scs.get_object_by_name("Cube");
    ctx_image   = m_tex.get_canvas_ctx(cube, "Image");

    var inline_text = location.search.split('name=')[1];

    if( inline_text !== undefined && inline_text.length ){
        imageText = inline_text;
    } else {
        imageText = "Hello World";
    }
    if (ctx_image) {
        img          = new Image();
        img.src    = "image.jpg";
        img.onload = function() {
            ctx_image.drawImage(img, 0, 0, ctx_image.canvas.width,
                    ctx_image.canvas.height);
            ctx_image.fillStyle = "rgba(255 ,255 ,255 ,1)";
            ctx_image.font      = "250px Arial";
            ctx_image.fillText( imageText , 300, 300); // 300 300
            m_tex.update_canvas_ctx(cube, "Image");
        }
    }

I want to place the text inside the red block ( in the screen shoot )

As you can see :
1. The text very small.
2. The text appear every block.

Thanks,
Niv.

You will need to assign a materiel and texture to a face or group of faces. Then reference that texture context with:


API referance

It might help if you look at the blend file for the code snippets example. You can find it in your SDK: blend4web_sdk/blender/code_snippets/canvas_texture.
I have attached it here for convenience. canvas_texture.blend
See how the cube has a material assigned to each face?

Then each material has a texture with no image.
So you will want to assign a material and texture to the area you want text to appear.
Also notice that m_tex.get_canvas_ctx(cube, "Image") gets the texture slot, not the material. In the example blend file, you can select a material then go to the texture tab to see the texture slot. In this case, the textures are capitalized (Image, Video, Picture).

If you need to attach images or files to your post, there is a little "Attach" button at the lower right. Then if you click the link or image icon, it will paste it inline with your post.

How do I stretch the small blocks to the size of the whole block I marked ?


In the end I want the Image to be the size of the big block I marked.



At the moment it consists of filling small blocks.

* In your example the entire side of the cube is marked as material.
** In my scene ( the ring ) it consists of small cubes.