A small library to make a CODEF canvas responsive .

A small library to make a CODEF canvas responsive – so it can run inside a Word Press article.

I’ve just started playing with the excellent CODEF library by Antoine Santo (aka NoNameNo).

However, I thought it would be quite nice to be able to run CODEF demoscene remakes inside a Word Press post! So I’ve created a little library to make a CODEF canvas responsive.

My library will shrink the CODEF canvas down with CSS so it fits within the screen. Will fill the whole screen maintaining aspect ratio when a fullscreen event happens. Also when fullscreened it will hide the rest of the document so you don’t have to worry about seeing the Word Press post behind it – this will no doubt break everywhere.

As an example, I’ve modified the intro supplied with the CODEF documentation (91_intro.html) to run in Word Press. You can see it, by pressing the play button below to start the animation!

To see how the canvas scales with the rest of the web page, make your web browser window smaller.



Here is how I inserted the animation above into Word Press.

There is also a zip at the bottom of this article containing everything you need to run the above animation inside or outside of Word Press.

HTML to insert into the Word Press document:

 
 
 

 
 
 

 
 
   
 




The above HTML needs to be inserted into the Word Press post. It loads all the files needed to run the animation.

An Event Listener will call a function called main to initialise the animation once DOM content has loaded, and make everything ready for the viewer to press the play button.

The div element is where CODEF will place the canvas when it creates it. It needs to have the same ID as the CODEF canvas object – see mycanvas=new canvas(640,480,”codef-main”); below.

Finally, two buttons are added. A fullscreen button that is hidden at startup, and a play button.

Once the viewer presses the play button, the init() function in the CODEF tutorial example is called and the animation begins.


Fullscreen function:

function toggleFullscreen() {
  if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

I added the above toggleFullscreen() function to the CODEF example file, and it’s triggered by the fullscreen button in the HTML above.


First function called when DOM loaded:

function main() {
    document.getElementById('play-animation').disabled = false;
}

In the HTML above, I call main when DOM content has loaded. In this example I only make the play button pressable.


Make the CODEF canvas responsive + changes buttons:

mycanvas=new canvas(640,480,"codef-main");
responsiveCodefCanvas(mycanvas);

document.getElementById('play-animation').hidden = true;
document.getElementById('fullscr-animation').hidden = false;

To use my responsive library, simply call responsiveCodefCanvas(mycanvas); after you create your CODEF main canvas object. And that’s it!

Finally I hide the play button, and show the fullscreen button.


Archive of all files – including CODEF:

Here is an archive containing all files needed to run the above animation with responsive support (including CODEF libraries and graphics/sound). Also included is a standalone html file called 91_intro_wp.html to allow you to run the animation outside of Word Press.

91_intro_responsive_example.zip

OK, that’s it! Sorry if this post isn’t up to my usual (low) standard, unfortunately my Internet connection keeps dropping out – so I’ve had to bang this out quickly… 🙁







Leave a Reply

Your email address will not be published. Required fields are marked *