Panel Network — Webserver (Secure HTTPs)Setup

 Topic: CM455

The C-more panel can function as a simple Webserver (Secure HTTPs). The Webserver (Secure HTTPs) feature is disabled on C-more panels by default, so you must enable it using the C-more Programming Software.

You must transfer the project to the panel with the feature enabled.

A default set of HTML, CSS, and JS files are installed on the panel, but you may customize them with custom HTML files using the Data Maintenance tool in the Panel tab.

  • The panel does not support CGI programming. All source is for client-side execution.

Remote Access

The Web server provides the most common access to the panel Remote Access feature. If Remote Access is configured in the Panel Network>Remote Access section, the default Web page includes a link to download the Remote Access console.

Open Ports

For the web server to work correctly, you need to make sure two ports are open in your network.

  • Web server port number: By default, this number is TCP port 80 (http) or TCP port 443 (https). The configured port must be open.
  • Web Socket port number: Webserver (Secure HTTPs) uses Web Socket which requires TCP port 10902. This port number cannot be changed.

Configure Webserver (Secure HTTPs)

To configure a Web server:

  1. Select Webserver (Secure HTTPs) In the Panel Network window.
  • The Webserver (Secure HTTPs) window opens.

  1. Complete the fields on the screen using the information in this table.
Panel Network — Webserver (Secure HTTPs)
Field Description
Webserver (Secure HTTPs) Function Select the Webserver (Secure HTTPs) Function check box to enable the Webserver (Secure HTTPs) feature in this panel.
If you do not use the Webserver (Secure HTTPs), clear (uncheck) this box for security purposes.
Port Number You may change the Webserver (Secure HTTPs) Port Number if required by the C-more network.
Picking a port other than the default of 80 is more secure.
If the port is not the default TCP port 80, the port must be known and entered in the URL to access the panel Webserver (Secure HTTPs).
For example: if the port configured is 8080 the URL would be http://192.168.100.10:8080.
If you use HTTPS, the default port is 443 and is implied if the url is https://.
Page Title The Web Page title in the Web Browser tab when you access the C-More panel Webserver (Secure HTTPs). For this field to work properly, you must use the tag %TITLE% in the HTML code.
Password Option Select if you want to restrict access to the Webserver (Secure HTTPs). You can require an account and password.
Account Enter a User name or ID required to access the Webserver (Secure HTTPs) on the panel.
Password Enter a password required to access the Webserver (Secure HTTPs) on the panel.

Once you download the project to the panel, enter the IP address in a Web browser on the network to access the Webserver (Secure HTTPs).

Using Webserver (Secure HTTPs)

  1. To make the Webserver (Secure HTTPs) connection more secure using TLS, select the Use Webserver (Secure HTTPs) check box.
  • The default Port for Webserver (Secure HTTPs) is port 443.
  1. Webserver (Secure HTTPs) require both a Private Key File and a Server Certificate file. Both files must be PEM format.
  • For the connection to be secure, the Client PC must also have the same Trusted Certificate installed.

Key File

The Key File is a Private Key used in data encryption/decryption sent between the specific C-more Webserver (Secure HTTPs) and the connecting client Webserver (Secure HTTPs). When the certificate owner creates the certificate, they create a private key. The certificate is usually for a specific domain or IP Address.

Server Certificate File

A certificate file is a digital certificate that authenticates the C-more Webserver (Secure HTTPs) identity and enables an encrypted connection between the web browser and the C-more panel Webserver (Secure HTTPs).

  1. Click on the folder icon and browse for Select a Key File and Certificate file.
  2. To remove the Key for Certificate from the project, select the red X icon.
  1. Open any web browser and type the panel IP address in the Address field. If you don't include HTTPS, the default is HTTP.
  2. If the client PC does not have the certificate installed as a Trusted Root Certificate for the specific Server (C-more Panel), the client browser gives a warning.

You can proceed with a less secure connection or back out of the connection. If you proceed, the connection to the communication with the C-more Panel is not encrypted.

For a secure encrypted connection, install a Trusted Root Certificate on the Client PC that corresponds to the certificate installed in the C-more panel.

If the Server Panel and Client PC both have matching certificates, then the secure connection is established.

Install the certificate on your PC to trust the C-more Webserver (Secure HTTPs)

 

Note: Only install certificates from a source that you trust. If you are not sure where to source certificates, see your IT support staff.
  1. Open the PC User Certificate Manager.
  2. Select Action>All Tasks> Import.
  3. Select the Store Location: User.
  4. Browse for the Certificate File.
  5. Select Place All Certificates in the following Store: Trusted Root Certification Authority.
  6. Check your information and select Finish.

Default Web Pages

The default web pages include links to view the Panel Information, download Log Files, view static images of all Screens, and links to download the Remote Access application.

Index.html is the entry point for the panel web site. You can modify the source files to suit users' individual needs. Only a website developer familiar with HTML, CSS and JavaScript should modify these files or create new ones.

Use the Data Maintenance tool in the Panel tab to access default HTML files or to copy customized HTML files to the panel. Then you can access the Web Contents folder.

Reset Default Web Pages

In the Panel Tab "Reset Webserver (Secure HTTPs) Contents" to restore these pages to the panel.

Webserver (Secure HTTPs) Specifications

There are 11 tags for use in web page code to display different information in the panel.

Tag Name

Function
%TITLE% The C-More software text in Webserver (Secure HTTPs) Setup
%VER% The C-more HTTP Server Version
%IP-E1% Ethernet port 1 IP
%IP-E2% USB Ethernet port (T4W, T7W) IP
Ethernet port 2 (T10W~T22W) IP
%IP-E3% USB Ethernet port (T10W~ T22W) IP
%IP-RMT% Remote Access IP
%FILE% Log file reference
%ALARMFILE% Alarm log file reference
%MESSAGEFILE% Message log file reference
%TRENDGRAPHFILE% Trend Graph log file reference
%SCREENCAPTUREFILE% Screen Capture log file reference

 

%TITLE%

The text displayed on the Browser Tab. The Page Title field in the Webserver (Secure HTTPs) configuration determines this tag text.

Example code

<head> <title>%TITLE%</title> </head>

Result

%VER%

This tag displays the version of the Webserver (Secure HTTPs).

Example code

<div> Web Screen Version %VER% </div>

Result

%IP=Ex%

The C-more panel has up to 4 possible IP Addresses: one for each port and one for remote access from an external network. Display these IP addresses with their associated tag.

Example Code

<p> Ethernet Port 1 IP Address = %IP-E1%</p>

<p>Ethernet Port 2 IP Address = %IP-E2%</p>

<p>Ethernet Port 3 IP Address = %IP-E3%</p>

<p>Remote Ethernet Port IP Address = %IP-RMT%</p>

Result

%FILE%

The %FILE% tag allows you to display any of the log files in the panel memory. They are displayed in order:

  1. Alarm Logs
  2. Message Logs
  3. Line Trend Graph Logs
  4. Screen Capture Files

Then by Date

Example Code

<p>%FILE%</p>

<p>%FILE%</p>

<p>%FILE%</p>

<p>%FILE%</p>

<p>%FILE%</p>

<p>%FILE%</p>

etc.

Result

%ALARMFILE%

Like the %FILE% tag, the %ALARMFILE% tag displays log files. In this case, only Alarm log files created by the Event Manager Alarm Action are displayed. They are in order by date.

Example Code

<p>%ALARMFILE%</p>

<p>%ALARMFILE%</p>

<p>%ALARMFILE%</p>

Result

%MESSAGEFILE%

Like the %FILE% tag, the %MESSAGEFILE% tag displays log files. In this case, only Message log files created by the Lookup Text Object and the Message Database are displayed. They are in order by date.

Example Code

<p>%MESSAGEFILE%</p>

<p>%MESSAGEFILE%</p>

<p>%MESSAGEFILE%</p>

Result

%TRENDGRAPHFILE%

Like the %FILE% tag, the %TRENDGRAPHFILE% tag displays log files. In this case, only Line Trend Graph log files created by Line Trend Graph objects are displayed. They are in order by date then screen and object name.

Example Code

<p>%TRENDGRAPHFILE%</p>

<p>%TRENDGRAPHFILE%</p>

<p>%TRENDGRAPHFILE%</p>

<p>%TRENDGRAPHFILE%</p>

Result

%SCREENCAPTUREFILE%

Like the %FILE% tag, the %SCREENCAPTURE% tag displays log files. In this case, only Screen Capture files created by the Event Manager and Screen Capture Action are displayed. The first file listed is the most recent screen capture. Then the remainder are in order by date.

Example Code

<p>%SCREENCAPTUREFILE%</p>

<p>%SCREENCAPTUREFILE%</p>

<p>%SCREENCAPTUREFILE%</p>

<p>%SCREENCAPTUREFILE%</p>

Result

Display Screen Panel Image

To display an image of Screen 1 with a height of 600 pixels on your panel web page, add this code to your HTML file.

<div><img src='/1.jpg' height="600">

</div>

This code displays smaller images with a link to a separate web page with a larger image.

<div>

<a href="screen1.html"> <img src="/1.jpg" height="120"></a>

<a href="screen2.html"> <img src="/2.jpg" height="120"></a>

<a href="screen3.html"> <img src="/3.jpg" height="120"></a>

<a href="screen4.html"> <img src="/4.jpg" height="120"></a>

</div>

Related Topics Link IconRelated Topics