Importing content from a text file (.txt)


#1

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.

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);

Loading external text
Replace inner html with text from an external file
Importing XML text
Xml url import of product details
How to change urls in Hype generated files without opening Hype?
Client input needed
Edit on the run
(strmiska) #2

is this also possible loading a json-file?


(strmiska) #3

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


#4

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


(strmiska) #5

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.


#6

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.


(strmiska) #7

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


(info9r) #8

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:


#9

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


(info9r) #10

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.


#11

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


(info9r) #12

:ok_hand: thanks. That simple.


(Stephen G) #13

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.


(Hans-Gerd Claßen) #14

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


(jangeltun) #15

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

external_text_import_jQuery.zip (123.8 KB)


(haytham) #16

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


(haytham) #17

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


#18

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


(jangeltun) #19

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)