Creating a New Page

This will guide you through adding a new page to our basic electron framework.

Step 1: Create HTML and JS Pages

Choose a name for your page, such as 'linechart'.

Create two files in the src/content folder - one called '<name>.html' and one called '<name>.js'.

Step 2: Create Your Page

In the html file, add the content of your page. We suggest placing the bulk of your content in an object with the class name 'focusimage', as the content of that object will be saved when pressing 'Save…' in the menu.

For example if your page was just going to include an SVG image, your HTML would look like this…

<svg class="focusimage">
 
</svg>

Step 3: Create Your Javascript

Next, you need to add a couple of functions to your js file.

Our framework calls two functions from your Javascript code.

The initPage function is called once the page is loaded and ready to be drawn.

This is where you might want to use the data functions such as LoadLiveData.

window.initPage = function () {    
    //Call a function that loads the data we want to chart...
    reloadChart();    
}

And the refreshContent function is called every time the page may need to be redrawn. This includes live data updates and screen resizes.

This is where you might want to take advantage of variables such as liveData.

window.refreshContent = function () {    
   console.log('Draw Stuff Here!');
};

You can optionally also provide a toolTipUpdate function that is called when a tooltip needs to be updated.

window.toolTipUpdate = function (ob) {
    return ob.getAttribute("data-name") + ": " + ob.getAttribute("data-value");
};

Add to Navigation

Finally, you can add your new page to the navigation.

Open index.html and find the nav object.

<nav class="uk-navbar-container primary" style="width: 100%;">          
    <ul class="primary headnav" uk-tab style="margin-bottom: 0px;">
            <li class="uk-active"><a href="#" data-panel="bar">Bar Chart</a></li>
            <li id="nav_2"><a href="#" data-panel="diag">Mine Face</a></li> 
            <li id="nav_3"><a href="#" data-panel="hmap">Face Maps</a></li>
            <li id="nav_4"><a href="#" data-panel="tmap">Shearer Maps</a></li>
    </ul>          
</nav>

You can add extra 'li' elements to add more navigation options. Make sure you edit the value of data-panel to match the name of your new page (for example, 'linechart' if your files were named 'linechart.html' and 'linechart.js').

Creating a New Page