Code Window HTML Export

The code window HTML export makes a web page from any code window. The web page is continuously updated with new data as the code window changes. This allows you to share live data from SportsCode/StudioCode via the internet or a local network. The export works in conjuction with code button scripts, which automatically produce output during coding.

Web Page Customization

The export is designed to allow web developers to insert code windows into existing web pages if desired. This is done via a JavaScript library called SC.js, which can be obtained from any directory that has been exported to.

To add a code window to an existing web page requires three steps:

  1. Include SC.js in the web page.

    <script type="text/javascript" src="SC.js"></script>

    The above code assumes that the SC.js file is in the same directory as the HTML file.

  2. Put a canvas element where you want the code window to appear, and give it a unique id attribute.

    <canvas id="myCodeWindow"></canvas>

    The canvas element will automatically resize when the code window data is loaded.

  3. Use the SC.js library to begin updating the canvas.

    <script type="text/javascript">
        cw = new SC.CodeWindow(document.getElementById('myCodeWindow'), 'codewindow.json');
        cw.startUpdating();
    </script>

    The above code creates a new code window object. The constructor requires the canvas element to display the code window in, and the URL of the JSON file that was created by the HTML export. The above code assumes that the HTML file is in the same directory that is being exported to, and therefor the codewindow.json file (which is created by the export) is also in that directory.

    SC.CodeWindow objects (e.g. cw in the above code) have two methods: startUpdating and stopUpdating. When an object is created it does not automatically begin updating, so startUpdating must be called.