Importing content from a text file (.txt)

Download the following file to see this in action:

dynamic-javascript-content-txt-file.hype.zip (68.3 KB)

  1. Create a rectangle or other element
  2. Set its Unique Element ID to be f0
  3. Run the following JavaScript ‘On Scene Load’
  4. Export your document and upload it to your server.

Note: Make sure the text.txt file you are loading is on the same domain as the Tumult Hype document displaying this content. This does not work loaded on your local machine.

var txtFile = new XMLHttpRequest();
txtFile.open("GET", "http://tumult.com/support/examples/dynamic-javascript-content-txt-file/text.txt", true);
txtFile.onreadystatechange = function() {
if (txtFile.readyState === 4) { // Makes sure the document is ready to parse.
if (txtFile.status === 200) { // Makes sure the file exists.
allText = txtFile.responseText;
//lines = txtFile.responseText.split("\n"); // Will separate each line into an array
var customTextElement2 = document.getElementById('f0');
customTextElement2.innerHTML = txtFile.responseText;
}
}
}
txtFile.send(null);

Here’s a few additional methods to dynamically set the contents of elements:

// 1) 
var customImageElement = document.getElementById('d4');
customImageElement.style.backgroundImage = "url(http://static.tumult.com/hype/press/media/HypeIconShadow.png)";
customImageElement.style.backgroundSize = "100%";

// 2) 
var customTextElement = document.getElementById('b6');
customTextElement.innerHTML = "This text was set by Javascript!";

// 3) 
var txtFile = new XMLHttpRequest();
txtFile.open("GET", "https://tumult.com/support/examples/dynamic-javascript-content-txt-file/text.txt", true);
txtFile.onreadystatechange = function() {
  if (txtFile.readyState === 4) {  // Makes sure the document is ready to parse.
    if (txtFile.status === 200) {  // Makes sure the file has been found.
      allText = txtFile.responseText; 
      //lines = txtFile.responseText.split("\n"); // Will separate each line into an array
      var customTextElement2 = hypeDocument.getElementById('f7');
customTextElement2.innerHTML = txtFile.responseText;
    }
  }
}
txtFile.send(null);
6 Likes

is this also possible loading a json-file?

sorry, this doesn´t work for me?!! no text is loaded?

Did you create a text.txt file on your server? I didn’t mention this but the document also needs to be exported and hosted on that server.

txtFile.open("GET", "http://tumult.com/support/examples/dynamic-javascript-content-txt-file/text.txt", true);

I just tested this and it works on our server: http://tumult.com/support/examples/dynamic-javascript-content-txt-file/dynamic-javascript-content-txt-file.html

yes-your link is working, but as soon as i export to my desktop and call my own “test.txt” within my folder, it won´t work.

It will only work on a server – this is due to browser restrictions, specifically CORS rules. Since your .txt file is accessed via the ‘file://’ protocol, it is blocked.

yeah - cool. i uploaded to my server and it is working. thank you!! :stuck_out_tongue_closed_eyes:

1 Like

That’s an interesting option. How will it work for
specific font types, font sizes and font coloring?

Will the external text file adjust it’s style from the
rectangle settings in the hype project?

ps: I haven’t tested this on an own server yet.

:coffee:

Yes – you can use the Typography inspector to adjust settings for the text element or shape.

Great – so the text attributes can be set set. Now :smile:
how about line breaks (text formatting) in the text itself?
Without line breaks the whole imported text will result in
a text block, which is not ideal for reading.

Example:
In case somebody wants to change the text content of
the (Hype) website simply by uploading/updating text
files onto a server. Then text style (font,size,color) will
be the same, but line breaks won’t be possible.

You can use standard HTML, so to make a single line break just use <br>.

:ok_hand: thanks. That simple.

Hi I have implemented this on my server but am having problems!

The text fails to load or is slow to load if you navigate to a new scene and return to the original scene with the dynamic text?

I have a feeling it could be due to slow or intermittent internet speeds but cant be 100% sure?

The app i am building will be in schools and i cant afford to have text or images not loading on screen can you please advise @Daniel

Also is there a better way to bring text and images in such as json/xml? The project is complex with 60 scenes and alot of text and images so am trying to build a dynamic template going forward!

Thanking you in advance (again!)
Stephen.

1 Like

there are quite a lot of examples in the forum that work with JSON-files(few with xml). just do a search … :slight_smile:

1 Like

Here is a jQuery example of importing specific paragraphs from an external text file.

external_text_import_jQuery.zip (123.8 KB)

1 Like

Hi Jangeltun
I downloaded the file but it didn’t work, do I have to upload it to Server or not?

Hi Jangeltun
I downloaded the file but it didn’t work, do I have to upload it to Server or not?

Yeah, you’ll need to host the txt file on a server first since the XMLHttpRequest doesn’t work with File URLs.

Yes, you have to run the txt file on a server. I have another example of external text that is using a JS file, and that will run locally. example.zip (117.0 KB)

1 Like

This is pretty cool! Thank you for sharing Daniel. I realize this thread is pretty old but wondering if you could expand on this. I was able to get number 3 to work where it imports a number from an external text file on my server into a text box. Do you know how to expand this to encompass several text boxes in Hype that will contain different bits of text (prices)?
So say I wanted to have the average house price across the country by province and I had text boxes with unique IDs: OntPrice, QuePrice, BCPrice…
How would that work?
Would a json file with the data maybe work better in that case? Something that looked like this?
Or is there a way to do this as a text file as well?
{
“OntPrice”: “105,000”,
“QuePrice”: “99,000”,
“BCPrice”: “86,000”
}
and how would the javascript be changed to bring in those values? Any help would be appreciated!