Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Home
  • Knowledge base
  • Contact Us
  • Home
  • Developers

Upload custom portal web interface

How to add and upload your own custom web interface

Written by Ioannis Panteleakis

Updated at March 3rd, 2022

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Installation & Technical information
    Introduction SIA Connect Standalone SIA Connect ANY-Ware Cellular & WiFi connectivity
  • Configuration in the Web UI
    Getting started with the UI Connectors Instances Items Mapping Data System Network Tools & Add-ons DigiCert IoT Trust Manager
  • Connectors
    Siemens S7 Azure IoT Ethernet/IP Mitsubishi MELSEC OPC-UA Server SQL MQTT Omron Host Link REST API Omron FINS Keyence Beckhoff TwinCAT BACnet Virtual OPC-UA Client MS SQL File M-Bus Modbus
  • Scripting & Variables
    Data formatting
  • Developers
    API documentation Shadow API
  • Tutorials & Guides
    InfluxDB AWS IoT Core - Amazon Web Services Microsoft Power BI KaaIoT Siemens S7 AVEVA Insight SIA Connect Demo Rack Grafana Azure
  • General
+ More

Table of Contents

Sample web interfaceVideoConfigure the systemUpload & apply the web interfaceAccess the custom Web Interface

Sample web interface

To get started quickly we provide a sample web application that can be uploaded to SIA and used as a custom portal web interface. 
The demo web application is written in Vue.js and shows the basic usage of the API with basic setup instructions.


Download the demo source code from: https://bitbucket.org/siagateway/demo-webapi-vuejs/src/master/


Video

The video below shows a video of the sample web interface using the API.

Your browser does not support HTML5 video.


Configure the system

The system needs to be properly configured to handle custom web interfaces which uses an Apache2 web server to handle the web interface.

While this guide makes use of the webcustom folder/endpoint, this can be renamed to any other term as long as it doesn't contain any symbols or spaces.

The webcustom term is marked as bold for easier identification.


  1. Login to SIA using ssh (default IP addresss to SIA can be found in the article Network configuration of client computer‍)
    ssh username@SIA_IP
    where username is the SIA username and SIA_IP is the IP address assigned to SIA. The username and password to SIA can be obtained by contacting our support team.

  2. create a folder where your build files will be copied and change the default permissions
    sudo mkdir -p /opt/SIA/web/webcustom/
    sudo chown -R mmtec:mmtec /opt/SIA/web/webcustom/
  3. edit the web server configuration file by using the nano editor
    sudo nano /etc/apache2/sites-available/siaweb.conf
  4. move the cursor after the following section
    <Directory /opt/SIA/api/main>
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
        # New directive needed in Apache 2.4.3:
        Require all granted
    </Directory>
  5. and add the following code
    Alias /webcustom /opt/SIA/web/webcustom
    <Directory /opt/SIA/web/webcustom>
        Options Indexes FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
  6. save the file by pressing Ctrl+X and enter
  7. finally, restart the web server by running
    sudo systemctl daemon-reload
    sudo service apache2 reload


Upload & apply the web interface

Build the files of the SIA API Demo simply by running

yarn build
or
npm build


This will generate a folder called dist containing all the built files. Follow the instructions on the repository for further details.
The same concept should apply for any other custom made web application.

The built files need to be uploaded to SIA. This can be achieved in different ways.

  • Using WinSCP on Windows:
    • Create a new connection to SIA on winscp using the given credentials (username, password) and the SIA IP address
    • After logging in, there will be 2 panels. The left one is the host computer and the right one is SIA
    • On the host (left) panel, navigate to the built web app files
    • On the SIA remote panel navigate to the folder
      • /opt/SIA/web/webcustom
    • Drag and drop the built files from the host to the remote SIA
  • Using Linux:
    • On a terminal, "cd" into the folder containing the built files
    • Execute the following command
      • scp -r ./* mmtec@SIA_IP:/opt/SIA/web/webcustom/


Access the custom Web Interface

The new web interface should now be available by following the link:
http://SIA_IP/webcustom

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Using the Shadow API
  • Shadow API (Proxy API to SIA)

0
0
Expand