Using sym3.js

We will now run through the basics of using sym3.js.

Using sym3.js

sym3.js consists of five files:

• sym3.js
• sym3operatorruntime.js
• sym3operatorruntime.data
• sym3operatorruntime.wasm
• sym3operatorruntime.html.mem

In same folder as index.html, create a folder named sym3. It has to be exactly “sym3”, all lowercase. Copy the five sym3.js files mentioned before into your new sym3 folder. You should end up with the following file structure:

Editing index.html

Please note that the order of the following is important.

Canvas: first you will need to create a canvas. The ‘id’ has to be ‘canvas’. This is where sym3.js will render all the graphics needed

Include sym3.js: add a reference to sym3.js like this:

Include your own script: include a reference to your own script that uses sym3.js:

Include sym3operatorruntime.js: this must follow the other two scripts:

By the end it should look like this:

Editing script.js

In this script, we need to create an instance of sym3.js. The first thing we need to do is to call this function:

CreateSym3’s first parameter is the port to connect to. The next parameter is the server to connect to. If not provided (like in script.js) then “localhost” is assumed – that is, a Sym3 Operator Server instance running locally on your machine. That function call should be sufficient to initialize the client. After a load time, you should see your project.

To improve the rendering of your first page using sym3.js, you can add this following line that to resize sym3.

To render your canvas to all of the page, you can add the following CSS:

Event

To use sym3.js’s additional functionality, you have to wait for the project to be fully loaded. Subscribe to the OnProjectInitialised callback, and the function you’ve given will be called once everything is ready:

Example:

You can download the demo website below: