2 - The Basics

OK, so, here we go, the basics...

Each CODEF screen is a set of Javascript based instructions embedded within an HTML page. The usual format of a CODEF screen follows this template:

<!DOCTYPE HTML>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>SCREEN TITLE NAME</title> 

<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_core.js"></script> 
// ADDITIONAL LIBRARIES CAN BE LISTED HERE...

<script> 

ENTER JAVASCRIPT HERE....

</script>

</head> 
<body onLoad="init();">
<body bgcolor="#000000">
<br>
<center>
<div id="main"></div><br>
</center>
</body> 

</html>

The above HTML code is the basis of any CODEF screen, and can be added to very easily.

The basis of any CODEF screen is the CODEF_CORE library, which contains the basic commands, and this library MUST BE included in any screen you create. (The other libraries are optional).

If you intend to write some simple CODEF screens, it might be worth you copying and pasting the code into Notepad, and saving the file as something like TEMPLATE.HTML

Simple screens can be executed by simply double-clicking the HTML file, however more complex screens will run foul of cross-origin security settings within the browser.
How I get around this is to store all the files on one of my NAS drives, which has web access enabled, so I can access the HTML files via a URL - which in my case would look something like this example:

http://192.168.2.103/rpc/cat/WEB/codef_screen.html  


You'll notice if you know your way around HTML that the main body of the page is being told to "go to" a function called "init" on loading.

<body onLoad="init();">

What this means is that as the page loads, as soon as the main body of the page is prepared, it looks for a FUNCTION (a set of commands) called "init" and will execute the commands within that function before any others. 


I usually build my pages around three basic areas....

1) Setting up the variables, and storing any data, calling images etc..
2) The "init" function, which initiates all the code ready to run. (At the end of the "init" function, we put a "go();" command, which instructs the page to then look for a function called "go", and then execute those instructions).
3) The "go" function. This is the main set of commands that make the screen work!
At the end of these instructions, we use a "requestAnimFrame" command, which essentially tells the page to run that function again.


No comments:

Post a Comment