HTML 5 Animation will not work on RV presentation

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members.

I have a webpage with HTML 5 canvas and java script animation in it.  The page loads and plays the animation in any browser.  In Rise Vision neither the HTML widget nor the page URL widget will play the animation.  Here is URL to animation on my server. http://doolin.asurams.edu/rv/Animation-ASU-Logo/ASU-Logo-02.html

Presentation is Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
</head>

<body style="width:1600px;height:900px; margin: 0; overflow: hidden;" >
<div  id="Main" placeholder="true" style="width:1600px;height:900px;left:0px;top:0px;z-index:10;position:absolute;"></div></body>
 
<!-- Warning - Editing the Presentation Data Object incorrectly may result in the Presentation not functioning correctly -->
<script language="javascript">
<!--
var presentationData = {
"presentationData": {
"id": "d4e3acc4-269a-41b5-a8f7-4ae1a3fa1718",
"hidePointer": false,
"placeholders": [
{
"id": "Main",
"items": [
{
"name": "Web Page Widget",
"duration": 30,
"type": "widget",
"objectReference": "df887785-3614-4f05-86c7-fce07b8745dc",
"objectData": "http://s3.amazonaws.com/widget-web-page/1.0.0/dist/widget.html";,
"additionalParams": "{\"interactivity\":{\"interactive\":false,\"scrollbars\":false},\"refresh\":\"0\",\"region\":{\"showRegion\":\"page\",\"horizontal\":0,\"vertical\":0},\"unload\":false,\"url\":\"http://doolin.asurams.edu/rv/Animation-ASU-Logo/ASU-Logo-02.html\",\"zoom\":1}";,
"timeDefined": false
},
{
"name": "HTML Widget",
"duration": 30,
"type": "widget",
"objectReference": "c187c76a-c85b-4bd9-91fa-6f2748c8189c",
"objectData": "http://s3.amazonaws.com/widget-html/0.1.0/dist/widget.html";,
"additionalParams": "{\"html\":\"<!DOCTYPE html>\\r\\n<html>\\r\\n<head>\\r\\n<meta charset=\\\"UTF-8\\\">\\r\\n<meta name=\\\"authoring-tool\\\" content=\\\"Adobe_Animate_CC\\\">\\r\\n<title>ASU-Logo-02</title>\\r\\n<!-- write your code here -->\\r\\n<script src=\\\"https://code.createjs.com/createjs-2015.11.26.min.js\\\"></script>\\r\\n<script src=\\\"http://doolin.asurams.edu/rv/Animation-ASU-Logo/ASU-Logo-02.js\\\"></script>\\r\\n<... canvas, stage, exportRoot;\\r\\nfunction init() {\\r\\n\\tcanvas = document.getElementById(\\\"canvas\\\");\\r\\n\\thandleComplete();\\r\\n}\\r\\nfunction handleComplete() {\\r\\n\\t//This function is always called, irrespective of the content. You can use the variable \\\"stage\\\" after it is created in token create_stage.\\r\\n\\texportRoot = new lib.ASULogo02();\\r\\n\\tstage = new createjs.Stage(canvas);\\r\\n\\tstage.addChild(exportRoot);\\t\\r\\n\\t//Registers the \\\"tick\\\" event listener.\\r\\n\\tcreatejs.Ticker.setFPS(lib.properties.fps);\\r\\n\\tcreatejs.Ticker.addEventListener(\\\"tick\\\", stage);\\t    \\r\\n\\t//Code to support hidpi screens and responsive scaling.\\r\\n\\t(function(isResp, respDim, isScale, scaleType) {\\t\\t\\r\\n\\t\\tvar lastW, lastH, lastS=1;\\t\\t\\r\\n\\t\\twindow.addEventListener('resize', resizeCanvas);\\t\\t\\r\\n\\t\\tresizeCanvas();\\t\\t\\r\\n\\t\\tfunction resizeCanvas() {\\t\\t\\t\\r\\n\\t\\t\\tvar w = lib.properties.width, h = lib.properties.height;\\t\\t\\t\\r\\n\\t\\t\\tvar iw = window.innerWidth, ih=window.innerHeight;\\t\\t\\t\\r\\n\\t\\t\\tvar pRatio = window.devicePixelRatio, xRatio=iw/w, yRatio=ih/h, sRatio=1;\\t\\t\\t\\r\\n\\t\\t\\tif(isResp) {                \\r\\n\\t\\t\\t\\tif((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    \\r\\n\\t\\t\\t\\t\\tsRatio = lastS;                \\r\\n\\t\\t\\t\\t}\\t\\t\\t\\t\\r\\n\\t\\t\\t\\telse if(!isScale) {\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\tif(iw<w || ih<h)\\t\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t\\tsRatio = Math.min(xRatio, yRatio);\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t}\\t\\t\\t\\t\\r\\n\\t\\t\\t\\telse if(scaleType==1) {\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\tsRatio = Math.min(xRatio, yRatio);\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t}\\t\\t\\t\\t\\r\\n\\t\\t\\t\\telse if(scaleType==2) {\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\tsRatio = Math.max(xRatio, yRatio);\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t}\\t\\t\\t\\r\\n\\t\\t\\t}\\t\\t\\t\\r\\n\\t\\t\\tcanvas.width = w*pRatio*sRatio;\\t\\t\\t\\r\\n\\t\\t\\tcanvas.height = h*pRatio*sRatio;\\r\\n\\t\\t\\tcanvas.style.width = w*sRatio+'px';\\t\\t\\t\\r\\n\\t\\t\\tcanvas.style.height = h*sRatio+'px';\\r\\n\\t\\t\\tstage.scaleX = pRatio*sRatio;\\t\\t\\t\\r\\n\\t\\t\\tstage.scaleY = pRatio*sRatio;\\t\\t\\t\\r\\n\\t\\t\\tlastW = iw; lastH = ih; lastS = sRatio;\\t\\t\\r\\n\\t\\t}\\r\\n\\t})(false,'both',false,1);\\t\\r\\n}\\r\\n</script>\\r\\n<!-- write your code here -->\\r\\n</head>\\r\\n<body onload=\\\"init();\\\" style=\\\"margin:0px;\\\">\\r\\n\\t<canvas id=\\\"canvas\\\" width=\\\"1600\\\" height=\\\"900\\\" style=\\\"display: block; background-color:rgba(255, 255, 255, 1.00)\\\"></canvas>\\r\\n</body>\\r\\n</html>\"}",
"timeDefined": false
}
],
"distributeToAll": true
}
]
}
};
//-->
</script>
<!-- No scripts after this point -->
</html>

Here is the HTML Page code

<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>ASU-Logo-02</title>
<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>;
<script src="http://doolin.asurams.edu/rv/Animation-ASU-Logo/ASU-Logo-02.js"></script>;
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
handleComplete();
}
function handleComplete() {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
exportRoot = new lib.ASULogo02();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
//Registers the "tick" event listener.
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);    
//Code to support hidpi screens and responsive scaling.
(function(isResp, respDim, isScale, scaleType) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {                
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
sRatio = lastS;                
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
canvas.width = w*pRatio*sRatio;
canvas.height = h*pRatio*sRatio;
canvas.style.width = w*sRatio+'px';
canvas.style.height = h*sRatio+'px';
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
})(false,'both',false,1);
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<canvas id="canvas" width="1600" height="900" style="display: block; background-color:rgba(255, 255, 255, 1.00)"></canvas>
</body>
</html>
Photo of ASU Rams

ASU Rams

  • 180 Points 100 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
What device you are using to play this? I tried it on Intel Stick and it works fine. The only problem I am having with this code is two semicolons at the top and I cannot figure out where they are coming from.
(Edited)
Photo of ASU Rams

ASU Rams

  • 180 Points 100 badge 2x thumb
Thanks for your reply.
Most of my players are HP Digital Sign Player DK57UA#ABA with a AMD G-T56N processor.  I have a test box which is a Lenovo 7483WJ MJVP345.  Both players are running Ubuntu 16.10.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
It looks like the problem is in Ubuntu then. I have no much experience running RV in Ubuntu.
Photo of ASU Rams

ASU Rams

  • 180 Points 100 badge 2x thumb
What version of Windows are you running?
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
10
Photo of ASU Rams

ASU Rams

  • 180 Points 100 badge 2x thumb
BTW, the animation HTML runs in Firefox on the player, but not on Rise Vision.
http://doolin.asurams.edu/rv/Animation-ASU-Logo/ASU-Logo-02.html

Is this a case where Ubuntu 16.10 breaks something? I will try Ubuntu 14.04.5 LTS.  I will also try Windows 10.
Photo of ASU Rams

ASU Rams

  • 180 Points 100 badge 2x thumb
I tried the presentation on a windows 10 player and it does not work.
Photo of Darius - PRODO.us

Darius - PRODO.us, Champion

  • 26,850 Points 20k badge 2x thumb
I swear to god man I had no problem. I used your code for webpage. I simply pasted all of it into the html widget and it worked on Intel Compute Stick right away. Now you need to check the code you are actually using in your presentation that does not work or your presentation/schedule/display settings.