Value from text field input into dynamic text? AnimateCC HTML5 Canvas

[jeffery wright]

I want a user to be able to add a string of text from an HTML text field input that will be displayed by a dynamic text field on the canvas stage:

Is anyone aware of how to do this? I thought it would be easy to find, but cannot locate any information.

Thanks!

[JoãoCésar]

Hi.

You could do this:

var inputText; // your input text component
var outputText = this.outputText; // your regular canvas text field
setTimeout(function() // wee need to make sure that the input component can be referenced
{
    inputText = document.getElementById("inputText"); // "inputText" is the name of your component instance in the Properties Panel
    inputText.addEventListener("input", function(e) // I'm just using the "input" listener. Maybe you're gonna need others for maximum compatibility
    {
          outputText.text = e.currentTarget.value;
    });
}, 0);

Regards,

JC

[jeffery wright]

JC, thanks for the info!

I might not understand your code properly, my input text field is <input type="text" name="textfield" id="textfield">

Line 01: Would that mean my line should read? var inputText = this.textfield; or is inputText just declared as a variable without defining its value as = this.textfield?

Line 06: inputText = document.getElementById("inputText"); is the component instance name in my canvas? In my case it would read:

inputText = document.getElementById("b_Txt"); correct?

Shouldn't the canvas be referenced somehow? Does my component need to be identified by some kind of path to it?

Line 08: is generating this error: Uncaught TypeError: Cannot read property 'addEventListener' of null

Thanks again!

[JoãoCésar]

Hi.

I thought you were using an HTML5 component from Animate CC.

Because ids of Animate CC components can be assigned in the Properties panel.

But no problem. The code is almost the same if you created the input element by writing HTML. You only have to replace the id.

Just replace

var outputText = this.outputText; // canvas text

by

var outputText = this.b_Txt; // canvas text

and

inputText = document.getElementById("inputText"); // HTML DOM text

by

inputText = document.getElementById("textfield"); // HTML DOM text

Dynamic text fields created in Animate IDE using the text tool are referenced by using dot notation: this.yourText or this.someContainer.yourText, and so on.

Any regular HTML DOM based element like input texts are referenced by id or class name (e.g.: document.getElementById or document.querySelector) like you would do in regular HTML5 development.

Please let me know if you have any further questions.

Regards,

JC

[ClayUUID]

JoãoCésar  wrote

Dynamic text fields created in Animate IDE using the text tool are referenced by using dot notation:

Minor correction: Any named symbols created in the Animate IDE can be referenced using dot notation. They can also be referenced using bracket notation, e.g.--

var outputText = this["b_Txt"];

The important point is they exist in the CreateJS stage hierarchy, and thus are referenced like any other nested JavaScript object.

Property accessors - JavaScript | MDN

[jeffery wright]

JC,

I really dig this stuff, it's fascinating to try and figure out, thanks for your insight on this.  Yeah, sorry, I should have made clear that I am using an HTML form element outside of the canvas and javascript to affect an element in the canvas.

What I have so far is:

var inputText = this.textfield; // your input text component
var outputText = this.b_Txt; // canvas text
setTimeout(function() // wee need to make sure that the input component can be referenced
{
    inputText = document.getElementById("textfield"); // HTML DOM text 
    inputText.addEventListener("input", function(e) // I'm just using the "input" listener. Maybe you're gonna need others for maximum compatibility
    {
          outputText.text = e.currentTarget.value;
    });
}, 0);

How does line 02 know I mean the component inside the canvas? Is referencing the canvas part of the path to the component?

Line 08 is updating the component every time a change is made, right? So every time a user adds a character, it is added to the canvas component?

Would line 10 be compiled as? this.b_Txt.text as component paths in Animate are referenced?

Line 10  is still giving me Cannot set property 'text' of undefined do you think it's the currentTarget?

Should I declare what the currentTarget is somewhere?

Hopefully other people will find this very educational, too. Once this is sorted out I'd like to place the source files somewhere for anyone who wants it.

Thanks again!

[JoãoCésar · Accepted solution]

Hi.

It's awesome that this content is helping you to learn something!

How does line 02 know I mean the component inside the canvas? Is referencing the canvas part of the path to the component?

Basically, when you export an HTML5 content in Animate CC, the exporter creates a default canvas element called canvas and associates a default CreateJS stage (called stage) to this default canvas. Then it adds the root of your application to this stage and this root is called exportRoot. This exportRoot object is what we refer to when we write this in the main timeline.

You can check it for yourself in the default HTML that Animate CC exports.

So in this line...

var inputText = this.textfield; // your input text component

... you're gonna get an error because your HTML form element doesn't live inside of any CreateJS stage or even it lives inside of the default canvas.

Line 08 is updating the component every time a change is made, right? So every time a user adds a character, it is added to the canvas component?

Yeah. That's right.

Would line 10 be compiled as? this.b_Txt.text as component paths in Animate are referenced?

Line 10  is still giving me Cannot set property 'text' of undefined do you think it's the currentTarget?

Should I declare what the currentTarget is somewhere?

It's because your reference is wrong on line 1 as I explained above. The currentTarget event property returns the element whose event listeners triggered the event.

In the end, your code should look like this:

var inputText; // your input text component 
var outputText = this.b_Txt; // your regular canvas text field 
setTimeout(function() // wee need to make sure that the input component can be referenced 
{ 
    inputText = document.getElementById("textfield"); // "textfield" is the name of your component instance in the Properties Panel 
    inputText.addEventListener("input", function(e) // I'm just using the "input" listener. Maybe you're gonna need others for maximum compatibility 
    { 
          outputText.text = e.currentTarget.value; 
    }); 
}, 0);

Please let me know if you still have any further questions.

Regards,

JC

[jeffery wright]

Thanks again, man, I appreciate all your help.

It's still not working, do I need to define what the currentTarget is somehow?

the line: outputText.text = e.currentTarget.value;  

is generating the error: Uncaught TypeError: Cannot set property 'text' of undefined

Line 1 var inputText; declares inputText as a variable, but is that enough?

outputText.text becomes this.b_Txt.text when the function fires, correct?

Sometimes coding seems indistinguishable from magic!

Thanks again!

[jeffery wright]

What I did instead was use AnCC's clunky TextInput component, so everything is contained within the canvas, which is not ideal but will have to do for now.

This is the code AnCC generated:

if(!this.add_Text_click_cbk) {
function add_Text_click(evt) {
// Start your custom code
this.gotoAndPlay("loop");
this.b_Txt.text = document.getElementById("btn_Text").value ;
// End your custom code
}
$("#dom_overlay_container").on("click", "#add_Text", add_Text_click.bind(this));
this.add_Text_click_cbk = true;
}

Thanks again everyone, I really do appreciate your help!

[ClayUUID]

https://forums.adobe.com/people/jeffery+wright  wrote

What I did instead was use AnCC's clunky TextInput component, so everything is contained within the canvas, which is not ideal but will have to do for now.

Components are not contained in the canvas. They are DOM elements, overlaid on the canvas, in a div container. It's named dom_overlay_container.

Therefore they are referenced in the same manner as any other DOM element, which is what you started with. Animate assigns them a DOM ID equivalent to their stage instance name.