Getting started

Adding Tmplits Library

Tmplits uses Node Package Manager (NPM) to install and manage dependencies. To install Tmplits, you will need to have Node.js installed on your machine.

Info

As of this writing, Tmplits packages are published within the LoupeTeam organization on Github. If you are not a member, you will need a distribution package.

Loupe Package Manager (LPM) streamlines the login process to get access to the packages.

Preparing your application

We recommend using Node’s node_modules folder as the base path for your application. You can add your application’s root folder to the node_modules folder by reference by adding it as a dependency in your package.json file.

Add "app" : "file:./" to your package.json file:

{
  "name": "hmi",
  "version": "1.0.0",
  "description": "My Custom HMI",
  "dependencies": {
    "app" : "file:./"
  }
}

Now, when you need to access your application assets, you can use the following path:

<script src="app/main.js"></script>

To access any library installed with NPM you can use the library package directly:

<script src="@loupeteam/tmplits/index.js" type="module"></script>
<script src="jquery/dist/jquery.min.js"></script>
<script src="bootstrap/dist/js/bootstrap.min.js"></script>

    //In an ES6 module
    import app from './App/main.js';

    //In a standard javascript file
    import('./App/main.js')

Install Tmplits

Install Tmplits into your main application folder (not the Electron application folder):

lpm install tmplits

Install the base Tmplits components into your main application folder:

lpm install tmplit-basic

Your package.json file should look like the following:

{
  "name": "hmi",
  "version": "1.0.0",
  "description": "My Custom HMI",
  "dependencies": {
    "@loupeteam/tmplits": "*",
    "@loupeteam/tmplit-basic": "*",
    "app" : "file:./"
  }
}

Info

When you install a package, an entry is automatically added to the package.json file with a fixed version for that package. If you want to always use the latest version, insert a * in the version field. If you want to use a specific version, enter that version number instead.

If you are using * in the version field, you can update the package to the latest versions by deleting the package-lock.json file and running the npm install command again.

Info

The package-lock.json file is used to lock the version of the packages you are using. This is useful when you are working on a project with multiple developers, and need to ensure everyone uses the same versions. If you are not concerned with the file versions, you can delete this file and it will be recreated when you run the npm install command.

The package-lock.json is not required to be source controlled, but it is required to run Tmplits, as this is one way the library knows which Tmplits packages are installed and where they are located.

Add a tmplits.json file at the root of your app

Example tmplits.json file:

{
    "startPage" : { 
        "container" : "mainContainer", 
        "name": "mainView" 
    },
    "pages": [
        {            
            "name": "mainView", 
            "file": "../views/main.handlebars"
        }
    ],
    "libraries":[
        "../Components/library.handlebars" 
    ]
}

For more details on the tmplits.json file and its schema, see Tmplit Configuration.

Create an index.html file

These are the minimal components needed in index.html to get Tmplits working.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My Tmplit HMI</title>
        <!--Set the base path for your applications to the 
        node modules folder, this will simplify pathing-->
        <base href='node_module'/>
    </head>
    <body>
        <!--Create an entry point for tmplits-->
        <div id="mainContainer"></div>

        <!--Add any additional libraries you need-->
        <script src="bootstrap/dist/js/bootstrap.min.js"></script>

        <!--Default widget setup, you may need to copy this file 
            into your app and modify it if you have a special case-->
        <script src="@loupeteam/tmplits/index.js" type="module"></script>

        <!-- Add any application scripts -->
        <script src="app/main.js"></script>

    </body>
</html>

Create a main.handlebars file

Create this file in a folder called “views” located at the root of your web app. This will be the first custom Partial in your application.

<div>Hello World</div>

Create a main.js file

Create this file at the root of your web app. This will contain your application’s custom JavaScript.

//Any custom javascript you need to run
console.log("Hello World");

Verify your folder structure

Your folder structure should look something like the following:

ProjectName
├── tmplits.json
├── package.json
├── index.html
├── main.js
├── Views
│   ├── main.handlebars
├── Components
│   ├── library.handlebars
├── node_modules
│   ├── app - This is your application linked to the node_modules folder
│   │   ├── tmplits.json
│   │   ├── package.json
│   │   ├── index.html
│   │   ├── main.js
│   ├── @loupeteam
│   │   ├── tmplits
│   │   │   ├── index.js
│   │   ├── tmplits-basic
│   │    ...

Launching Example HMI with a Server

If using VSCode, download and use the ‘Live Server’ extension. This allows you to preview the HMI with hot-reloads.

Once the extension is install simply open the main HMI folder structure in VSCode. To get a visual of the current HMI right click on the index.html and click ‘Live Server’.