Scrolling Ticker Tape Help (loading text from JSON)

[jerander (Jeremy Anderson)]

I’m trying to teach myself Hype and have been stumbling around a bit. Working on a new project to add an HTML widget for a digital signage screen. I need to output the Title and Description from the following JSON url feed.

https://www.menloschool.org/live/json/news/group/digital%20signage/tag/Athletics

Ideally, it will read through and then return to the first item again. I want to set the display area to 1800 wide x 100 tall pixels (so it will scroll across the bottom of my page in the designated area).

Would welcome any advice on how to accomplish this. Thanks all!

[h_classen (Hans-Gerd Claßen)]

https://forums.tumult.com/search?q=json

you may also attach your hype-attempts which makes it easier for someone to help …

[MarkHunte]

This great example by the legend @h_classen should work with slight changes

Load text from JSON

var request = new XMLHttpRequest(); request.open('GET', '/my/url/animation-text.json', true); request.onload = function() { if (request.status >= 200 && request.status < 400) { var obj = JSON.parse(request.responseText); var titleA = obj.mydata.block-a.title; hypeDocument.getElementById('yourHypeElementsId').innerHTML = titleA; } else { } }; request.onerror = function() { }; request.send();

And there is probably one way to skin this cat for the actual ticker tape…

tickertape.hype.zip (13.3 KB)

[jerander (Jeremy Anderson)]

Hi Mark,

Thanks for posting this, I am very appreciative! I downloaded and tried to run it but it doesn’t appear to do anything (neither with Hype or in browser preview). Are there some setup steps I need to run in order for this to load? Very thankful that you took time to put this together and look forward to trying it out:)

[jonathan (Jonathan Deutsch)]

The loading is being restricted by the browser’s security policy not allowing cross-domain XMLHttpRequests. You can get around this problem by choosing Develop > Disable Cross-Origin Restrictions in Safari and then reloading the page. You’ll then see the scrolling behavior.

I definitely recommend changing the setting back when you’re done!

[MarkHunte]

The problem is with the json file being on a server at a different domain. In Safari you can disable cross domain restrictions to see it working. I assume you will have control over the actual access to the file…?

More info you actual setup and where the real file will be coming from. is needed for further help

In the mean time here is the same example that use a local file

http://markosx.com/hypeTests/tickerTape/

[jerander (Jeremy Anderson)]

Question: If I plan to zip this up as an HTML widget, are there any special steps I need to do in order for it to play correctly?

I am planning on running this on a PC which uses a digital signage playback engine. The software I use accepts and plays .wgt files. I usually zip up the website directory and rename .zip to .wgt and then publish the widget to the local machine. Not sure if there are any steps I need to do in order to accomplish this goal. I appreciate your assistance Tumult community!

[MarkHunte]

knowing nothing how this signage engine works and it setup I can not say for sure but the one thing that you have not told us is how you really are accessing the json file?

So as I said before you may run into security issues related to cross domain access. i.e your widget on a local machine or server and the file on another.

One way to avoid that is to put the son file in the project and set the path for the request to post to it like so:

request.open('GET', '${resourcesFolderName}/Athletics.json', true);

tickertape2.hype.zip (19.2 KB)

[AlexSteele]

First let me say thank you!!! I also have a similar need, so I am trying this out, and was able to get it to work when the ${resourcesFolderName} is in the url string and the file has been loaded in to the resource library. BUT I need to pull this data in from the URL string and not have it be part of the resources file, because if we use hype for this, it is going to be updated weekly / biweekly and I need to be able to pull the current data off a server, not from inside the hype file. Is there a working example where the get url is pointing at a server and it functions properly without having to embed the json file into the hype document??

[Daniel]

I need to be able to pull the current data off a server,

It should be straightforward to use the full URL of the file if it is on the same domain – is it? If it is on a different domain there are some security considerations that might block access (which you can override).

[AlexSteele]

its the security issue - can you point me to an explanation how to override the security?

[Daniel]

Can you share a barebones example so I can see what error is being returned when attempting to load the JSON file? It is likely similar to these issues: Search results for 'xmlhttprequest json' - Tumult Forums

[AlexSteele]

i was able to get this to work, I think the main issue is that I was trying to test locally and pull the hosted json data into a local hype file. i moved everything into the server and now its working pretty well! thank you so much for all the advice.