• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Importing external text to dynamic text Html5 canvas

Community Beginner ,
Nov 17, 2020 Nov 17, 2020

Copy link to clipboard

Copied

I am very new to javascropt so keep answers simple please.

I have a dynamic text field with the instance name "Genealogy". I would like to load an external text file named "Genealogy.txt" file to it. I did it with flash before. How do I do it  in an html5 canvas document using javascript?
Keep it simple please. (A newbee with javascript)

🙂

Thank you in advance for your help.

Views

1.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

use an xml instead of plain text.  so, for example, instead of:

 

file.txt containing "this is the next in file.txt"

 

use:

 

<tag1>this is the text in file.txt</tag1>

 

 

and in animate use:

 

var r = new XMLHttpRequest();
r.open("GET", "file.txt", true);
r.addEventListener("load", rF);
r.send();

function rF(e) {
parser = new DOMParser();
var xml = parser.parseFromString(e.target.response, "text/xml");
alert(xml.getElementsByTagName("tag1")[0].childNodes[0].nodeValue);
}

 

p.s. if you're extracting anything other than the entire text or parsing that text, use a proper xml file

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

If memory serves, XHR can load any arbitrary data, not just XML. A plain text file should be fine.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

Okay, are you saying that I cannot load a plain txt file to a dynamic text instance in a html5-canvas?
I gave you the instance name (Genealogy) And the file name I am trying to load (Genealogy.txt). Would it be possible for you to use those names in your example code. It would make your example much easier to understand. Please remember I am very new to JavaScript for an Html5-canvas. Furthermore is there not a ''scrollbar' component for html5-canvas? If the text file is larger than the dynamic text instance, can I add a scrollbar to the text instance?

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

yes, you can use a . txt file as shown in the sample code.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

Could you please read my above response. Please.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 18, 2020 Nov 18, 2020

Copy link to clipboard

Copied

Also if the text file is larger than the dynammic text area is ther no scrollbar component in html5-canvas. Maybe Animate 2021 is just not ready for primetime.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 19, 2020 Nov 19, 2020

Copy link to clipboard

Copied

var r = new XMLHttpRequest();
r.open("GET", "Genealogy.txt", true);
r.addEventListener("load", rF);
r.send();

function rF(e) {
parser = new DOMParser();
var filecontents = parser.parseFromString(e.target.response, "text/xml");
// you'll need to figure out how to extract the text from filecontents and add it to your textfield here.
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

The instance name of my text field is Genealogy. where do I refer to that instance name so that the text file displays in the text field Genealogy?
Thank you in advance. The first part I got before. It is applying the text to the instance I don't get. Also if the ore text than will fit in the text filed does it automatically scroll. Maybe it would be better for you to see the Flash movie I am trying to convert. Here it is:
This is the first one I have many more to do. Note the Genealogy of Jesus text field, it scrolls.

https://the4gnetwork.com/Charts/GenealogyOfJesus/GenealogyOfJesus.html

)

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

var r = new XMLHttpRequest();
r.open("GET", "Genealogy.txt", true);
r.addEventListener("load", rF.bind(this));
r.send();


function rF(e) {
parser = new DOMParser();
var filecontents = parser.parseFromString(e.target.response, "text/xml");

this.Genealogy.text = // something parsed from filecontents
// you'll need to figure out how to extract the text from filecontents and add it to your textfield here.
}

 

p.s. your textfield will probably resize to display the text.

 

p.p.s. generally, i don't download and fix files unless i'm hired.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 20, 2020 Nov 20, 2020

Copy link to clipboard

Copied

If you can't go to that link I gave you, you will never be able to understand what I am asking, the link is to a Bible chart that I made in Flash that I need to convert to html5. The text has a scrollbar on the right it does not resize, it scrolls. The Chart is just one small example of the charts I made over the years with Flash. it is not malware it is made for God's glory and to help people understand scripture in a graphic form. I guess no one is that interested in God's glory anymore. Thank for your help but it has not been complete in anyway. Perhaps if I were making a video game you could be of more help. (no offense intended) I will not give up. It appears that Animate 2021 html5-canavs is not ready to replace flash yet. Time is short. God bless.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 25, 2020 Nov 25, 2020

Copy link to clipboard

Copied

Thanks for what little bit of help you gave me But know of you even came close to soving my problem. You can clewarly see what I am trying to do at this link, I don't need to hire any of you because it is something I have already done in Flash as you cna see if you wnat to takke the time to go to the link below.

https://the4gnetwork.com/Charts/GenealogyOfJesus/GenealogyOfJesus.html 

Look fast it will be gone soon.

🙂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 22, 2021 Nov 22, 2021

Copy link to clipboard

Copied

LATEST

Can you let us all know how was it done @terryj41605550 ?

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines