Configuring a Tmplits HMI

Important Files

index.html - This file is located in the root app folder. index.html has several functions:

• Act as the root file for the HMI.
• Load any required CSS files.
• Load any additional, globally-needed libraries for the HMI.
• Contain a div with the ID defined in the tmplits.json startPage.container.
• Call the Tmplits library script.

@loupeteam/tmplits/tmplits.js - This is the main library for the widget system. It defines the Tmplit class and the tmplit function.

@loupeteam/tmplits/index.js - This is a loader script that will load the tmplits library and all the assets defined in the tmplits.json file. Users may want to copy this file into their app and modify it if they have a special case.

tmplits.json - This file is how the user tells the template system where to find all the user assets. It should live at the root of your app. This file has three main sections.

• startPage - This section defines the page that will load when the server is up. This section defines the container that the page will be loaded into and the name of the page that will be loaded into the container.
• pages - This sections loads Partials and assigns them a name to be used in the DOM. These pages are developed to go directly into the DOM as is. These can be thought of as reusable views.
• libraries - Defines files that are a collection of Partials. The Partials define in these files can be referenced using their ‘id’.

main.handlebars - is one example of a page used as a view in the tmplit system. In the example below, the main.handlebars file is linked to index.html using tmplits.json. This file is the last step to this linking process. It contains the Tmplits and Partials that will show on the start page.

Example:

{{! This is a tmplit }}
{{tmplit 'Button' type='set' data-var-name="StartProcessButton"}} 

{{! This is a page }}
{{>  cncControl}} 

The above example will add a tmplit button to the DOM. After the button, it will add everything within the cncControl page. This is an example of using pages and tmplits to build out a section of an HMI.

Linking Pages and Libraries to the DOM

Defining new pages or libraries is as simple as adding them to the tmplits.json file. There is an example HMI that Loupe provides within the library. See the example below for instructions.

{
    //The startPage section defines the page that will 
    //  loaded when the server is up
    "startPage" : { 

        //container is the id of the element that the page 
        // will be loaded into
        "container" : "mainContainer", 
        //name is the page that will be loaded into 
        //  the container element
        "name": "mainView" 
    },
    //This section links the files that contain the
    //  Partials and a name to reference them by
    "pages": [
        {            
            "name": "mainView", 
            "file": "../views/main.handlebars"
        },
        {
            "name": "components",
            "file": "../views/components.handlebars"
        }
                {
            "name": "cncControl",
            "file": "../views/cncControlRightJustified.handlebars"
        }
    ],
    //Libraries do not need a name because 
    //  the Partials defined in them are accessible
    //  via their defined IDs
    "libraries":[
        "../componentLibrary/library.handlebars" 
    ]
}