I'm interested in whether the XD units serving up HTML5 content allow for filesystem access from javascript?
I'm trying to build a menu dynamically based on a JSON config file with the names and files for a number of videos. The config file will live next to index.html in the file system.
Is there a way to load JSON into some JS code using jquery or simple javascript? We will not have a server running elsewhere.
I know that chrome by default does not support this. The Preview function in BrightAuthor seems to allow it.
I do not have a unit (XD1030) to test on. Has anyone had success using this sort of a setup?
I've thought I could maybe activate the file server on the brightsign unit and make an ajax call to localhost:xx/config.json
Is that the way to go?
Thanks
Date
Votes
11 comments
-
Lyndon Yes, you can load json into js. But, that's not a function of the brightsign or brightscript. It's supported by javascript. So, you can also do it on the Brightsign. I've attached the html file from the sushi demo that's posted on our support site. That project uses json to read data from a file that's included on the sd card. Here's a snippet showing the get menu function from that html file..
//***********************************************************************************************
//'getmenu' gets menu item pictures via a url to a local file, i.e. <img src="images/'+image+'.png" />
//
function getmenu(){$.getJSON("data/menu4.json", function(results) {
$.each(results, function(index) {
var divid = results[index];
var name = results[index].name;
var description = results[index].desc;
var price = results[index].price;
var image = 'images/'+results[index].image+'.png';
var items = [];
var branditems =[];
console.log(image);
if (index === 7){
// limit this menu to 7 items
return false;
}
items.push('<div id="' + [index] + '" style="position:inherit; width:730px; height:80px; margin-top: 20px; position:relative; left:20%; top:10px; font-size:45px" class="itemmenu">  '+name+'<div id="SD'+[index]+'" class="subitem" style="position:absolute; left: 3%; width: 525px; top: 50px; height: 35px; font-size:30px;">' +description+'</div> <div id="SA'+index+'" style="position:absolute; left: 300px; width: 338px; top: 0px; height: 58px; font-size:75px; text-align:right">$'+price );
$("#main").append(items);
var newdiv = ('<div id="D'+index+'" class="highlightitemshow" ><span id="S'+index + '" style="position:inherit;left:180px; font-size:60px;top:20px"> '+name+'</span><span id="DX'+index+'" style="position:inherit; background-size:cover; font-size:30px; top: 80px; left:200px; width: 480px; height: 200px;color:#333333">'+description+'</span><span id="DA'+index+'" style="position:inherit; font-size:100px; top: 120px; left:220px; width: 490px; height: 200px;color:#333333">$'+price+'</span><img style="position:absolute; left:500px; top:100px" src="'+image+'" width="278" height="249" /></div>');
var divname = '"'+ String(index) + '"';
console.log(divname);
$("#menuslate").append(newdiv);
});
// end getmenu -
Nate Turley It is supported by javascript but local file access without a local file server is blocked by chrome for obvious security issues.
Anyway, thanks for the example. I think that will do just fine. -
Nmccartney I am getting Cross-origin error when doing a basic $.get() on a local file. How can I resolve this?
-
par Is there a solution for this question? I also get CORS errors when trying to read files in a local html document. Is there a workaround available?
-
Neil Thomas I am having an issue where I keep getting a Security error when using xhr to download a file to the FILE System, anyone know a way to solve this? Or an example of a successful call to save a file to the sd card.
-
Lyndon can you send us a sample of your html/jscript, and I'll have someone look at it. You can submit it to support @ brightisgn.biz. or post it here..
-
Neil Thomas window.webkitRequestFileSystem(window.TEMPORARY, 100 * 1024 * 1024, // 300MB
fileSystemPath, handleError);When trying to access the filesystem like this I get the error
An operation that depends on state cached in an interface object was made but the state had changed since it was read from disk.
-
Neil Thomas I Have an app that needs to load all of the videos to the disk via API, once it finished loaded it then starts the videos.
Does anyone have a solution or example of how I can do this if I can't access the fileSystem this way?
Thanks
-
Lyndon Some feedback from one of our developers:
Attached demo downloads a video file and saves it into /storage/sd/video.mp4.
Normally xmlhttprequests etc. are limited with system memory, because they want to download everything into memory, this sample code gets fragments of video as they arrive from network. And a normal web browser cannot access the filesystem, but since we have node, we have fs module to do that.
They can download the videos using the same method and track the progress.
Download exmaple:
https://www.brightsignnetwork.com/download/Tools/nodedownload/download-test.zip
-
Lyndon If you want to support external urls, add another line to the server config..
-
kris gale Lyndon, thanks for being a prolifically helpful resource in these forums... my current project calls for exactly this, and here is an 'official' example. great work as always.
Please sign in to leave a comment.