How do I embed an HTML5 Canvas animation into my home?

[mlapido]

I have a site (https://www.a3sil.com.br) where I use the Pro theme and I want to embed an HTML5 Canvas animation that expands to both edges (left and right).

At the moment, my attempt isn’t working. Can you guys help me with that?

[ruenel]

Hello @mlapido,

Thanks for writing in!

To extend your custom code to the left and right parts of your browser screens, do the following:
1.) Edit your page and change your page template to Blank - No Container | Header, Footer. For more details about the different page templates in the theme, please check this out:

• https://theme.co/docs/page-settings#page-attributes

2.) In your page, add a section, row and column. And in the row settings, TURN OFF the Global Container.

3.) Place a content area element in the column. Your HTML5 canvas code can be inserted in the content area element and it should be applied to the page.

Hope this helps.

[mlapido]

Unfortunately guys, that did not do the trick. I think it has something to do with the fact that the html being loaded into the iframe that I placed in the content area in the column, tries to set the iframes and divs it’s in width with their containers width. The problem is that the content area or the column is reporting a width of only 395 when in fact the window is much bigger.

[ruenel]

Hello @mlapido,

The column and the content area element has the 100% width already. The only problem is that even if I open the site in a big screen, your iframe contents only to display up to 1024 pixels only. It is clear when you view the page source of the iframe.

See the secure note below.

Thanks.

[mlapido]

Hello @ruenel,

thanks for your reply.

I understand what you’re saying but, bellow is what I see in 7 different browsers I tested the the file you mentioned in the secure note.

I also have updated the html file to set the iframe width to 1920px and the height to 731px (after I took the screenshot above) but the result didn’t change, as you can see in the site.

Like I said before and like you’ll see if you inspect the page, the iframe width is adjusted (to the reported container width) by the javascript once it starts running. It seems to me that the container is reporting its width to be 393 even though it is supposed to be as big as the browsers window.

[nabeel]

Hey @mlapido,

When your canvas is rendered, it only gets the width of 492px (see screenshot)

There are inline styles to both animation_container and canvas where width and height properties are being added. Try removing the width and height properties from both canvas and animation_container completely and if this width is added dynamically via script, you need to remove the code that adds the width and height properties because the all the parent containers above the animation_container has the 100% width.

Let us know how this goes!

[mlapido]

hey guys,

we’re almost there!! I sort of used your suggestion to solve the problem, but it worked only partially. As you can see in the site, the animation now fits the whole browser window width, but for that to work I had to insert a height value into the column and the iframe. And on that lies the problem, because as you resize the window the animations width and height will adjust but even though the columns and ifames width also adjusts, the height doesn’t. Any ideas on how to solve that? Please feel free to access the admin, duplicate the page and play with it.

[christian]

Hey @mlapido,

Your iframe still has fixed sizes controlled by Javascript. Because the theme does not have control over the said Javascript though, you will need to contact the iframe developer or provider to tweak the iframe source according to your needs. We cannot provide the modification or any custom coding or development as part of our theme support.

Hope that leads you in the right direction and thank you for understanding.

[mlapido]

Hey guys,

maybe I wasn’t clear. I did what you suggested (as you can see on this version of the page:https://a3sil.com.br/a3siltech-the-digital-workspace-hub-themeco/ ) and it did not work. The javascript is a canvas animation generated by Adobe Animate CC. In the original page I have tweaked the javascript to set the width and height properly, but the theme row/column somehow is set at a fixed height and clips the animation (as you can see if the minHeight is removed from both the column and iframe in content area).

[ruenel]

Hello @mlapido,

The slider itself is generated from a 3rd party source. You have this:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="Adobe_Animate_CC">
<title>HomeSlider</title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="HomeSlider.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
	canvas = document.getElementById("canvas");
	anim_container = document.getElementById("animation_container");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	var comp=AdobeAn.getComposition("F2A3A3D18B054BD7B43A63B6764F6291");
	var lib=comp.getLibrary();
	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
	var lib=comp.getLibrary();
	loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
	var images=comp.getImages();	
	if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }	
}
function handleComplete(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	var queue = evt.target;
	var ssMetadata = lib.ssMetadata;
	for(i=0; i<ssMetadata.length; i++) {
		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
	}
	exportRoot = new lib.HomeSlider();
	stage = new lib.Stage(canvas);	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs.Ticker.framerate = lib.properties.fps;
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	AdobeAn.makeResponsive(false,'width',false,1,[canvas,anim_container,dom_overlay_container]);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}
</script>
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
	<div id="animation_container" style="background-color:rgba(248, 248, 251, 1.00)">
		<canvas id="canvas" style="position: absolute; display: block; background-color:rgba(248, 248, 251, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>
</html>

This means that there is something with the javascript not detecting the 100% width of the container of the iframe. I also have check the containers, both the iframe and the content area is wide enough. See the image below:

Viewing in a widescreen:

Content Area

Iframe

this shows that the contents of the iframe do not display in fullwidth or do not detect the width of the iframe which is in fact 100%. You may need to contact the source of the 3rd party code for your canvas HTML.

Thank you for your kind understanding.