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

Importing from external text files in HTML5 Canvas? (Not using XML or JS)

New Here ,
May 08, 2017 May 08, 2017

Copy link to clipboard

Copied

Hi,

I've searched the forums here and not been able to quite find exactly what i want unfortunately, so thought I would write my own question.

I'm creating a file exporting to HTML5 Canvas and I need to allow any text in the file to be edited / modified externally by someone else once I hand it over. I would like to do this so it is as simple as possible for them, so i'm trying to rule out having them update XML and JS files. Is it possible to have my HTML5 Canvas code import external text from something like an Excel document, or even a basic Notepad text file?

I've had a bit of experience in the past with importing external text using XML in AS3, but my coding skills are still relatively basic and I just can't find anything that points me in the right direction on this.

Views

2.6K

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

correct answers 1 Correct answer

LEGEND , May 08, 2017 May 08, 2017

When you test a file from Animate it runs the page through a local web server, so any XMLHttpRequest calls should work properly.

Assigning XML content to dynamic text fields

Votes

Translate

Translate
New Here ,
May 08, 2017 May 08, 2017

Copy link to clipboard

Copied

UPDATE - Okay, so I've found a way to create XML Schema and XML files through Excel, which should make the process easier for the end user. All they need to do is fill out the Excel and Export XML via the Developer tab.

Now I just need to get that data from the XML that they generate into the dynamic text fields on my Animate file and exported out into HTML5 Canvas.

Is it true that I can't test how my XML import works on a local filesystem due to the browser restrictions? If so, is there ANY way around this, so I can test it? I mean without having to go the complete other route of JS?

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 ,
May 08, 2017 May 08, 2017

Copy link to clipboard

Copied

When you test a file from Animate it runs the page through a local web server, so any XMLHttpRequest calls should work properly.

Assigning XML content to dynamic text fields

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 ,
May 08, 2017 May 08, 2017

Copy link to clipboard

Copied

Excellent, thanks Clay. Thanks for your other posts on this subject as well. I've been reading those too. Very helpful.

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 ,
May 08, 2017 May 08, 2017

Copy link to clipboard

Copied

Hi Clay,

I seem to still be getting whitescreen when I test it. I've created a one frame test file which has 3 dynamic text boxes on it, just to get used to the process before using on a live project. I've used / adapted your code from your replies on other topics to load the XML and display it, but its just not showing up for me either hitting Test, or Publishing.

The HTML5 Canvas Actions:

this.stop();

// load XML file 

var req = new XMLHttpRequest(); 

req.open("GET", "test-data-set.xml", true); 

req.addEventListener("load", transferComplete); 

req.send(); 

 

function transferComplete(e) { 

    console.log(e.target.response); 

}

// return array of all matching tag values 

function getTagValues(xml, tag) { 

    var match; 

    var matches = []; 

    var re = new RegExp("<" + tag + ">(.*?)</" + tag + ">", "gi"); 

    while (match = re.exec(xml)) { 

        matches.push(match[1]); 

    } 

    return matches;

}

var textEntry = getTagValues(rawXML, "TextEntry");

this.textFile01.text = textEntry[0];

this.textFile02.text = textEntry[1];

this.textFile03.text = textEntry[2];

with the XML code looking like this:

<textFiles>

  <TextEntry>This text should appear within the textfile 01</TextEntry>

  <TextEntry>This text should appear for textfile 02</TextEntry>

  <TextEntry>More text to appear here for textfile 03</TextEntry>

</textFiles>

What am I missing?

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 ,
May 08, 2017 May 08, 2017

Copy link to clipboard

Copied

White screen almost always means a runtime error. Open your browser's dev console and check for errors.

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 ,
May 08, 2017 May 08, 2017

Copy link to clipboard

Copied

Just the one error was listed. It said, "Uncaught ReferenceError: rawXML is not defined"

So after re-reading your other posts, I took a guess that it might be that I was using the wrong code in the function, and so rawXML wasn't there to be found. So I changed it to:

function transferComplete(e) { 

    var rawXML = e.target.response; 

    console.log(rawXML); 

}

But that doesn't seem to have fixed it either.

UPDATE - After playing around and commenting out aspects of the code, the problem seems to be in this line:

var textEntry = getTagValues(rawXML, "TextEntry");

rawXML logs to the console fine earlier on in the transferComplete function, but when it comes to getTagValues, it says that rawXML is not defined.

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 ,
May 08, 2017 May 08, 2017

Copy link to clipboard

Copied

LATEST

"rawXML" is just an example variable name I made up to illustrate a point.

When you define rawXML inside the transferComplete function, of course it won't be visible anywhere else, because you've defined it as a local variable to that function. If you want a variable visible to multiple functions you have to define it outside of those functions.

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