NCD5500 Ethernet Module Web Interface User Guide

NCD5500 Ethernet Module Web Interface User Guide

About the Web Interface

The NCD5500 allows you to easily change from a simple TCP socket or UDP datagram communication architecture over to a web interface based control and monitoring system. This interface is usable out of the box or completely customizable using HTML, CSS, and JS.

Compatibility

Currently the Web Interface configuration of the NCD5500 Ethernet module is only compatible with ProXR Lite.

Getting Started

Step 1: Hardware Setup

  1. Connect your Ethernet module to your network via Ethernet.
  2. Power up the board while the ethernet module is connected
  3. Make sure that the Windows computer you’ll be using for configuration is on the same network as the ethernet module

Step 2: Software Setup

Follow these steps to set up the software. The diagram below the steps will correspond to a step number.

  1. Navigate to the NCD5500 Repository at https://github.com/ncd-io/ncd_Ethernet
  2. On the repository page, download the repositry (Code Button> Download ZIP)
  3. Unzip the file you just downloaded
  4. Run the NCD5500 Configuration utility (/configuration/NCD ConfigTool.exe)
  5. Make sure that the IP address drop down in the top left has the IP address of your computer on the network (Figure 1)
    • Some windows computers have a loopback interface that will display here. This interface will have an IP address such as 127.0.0.1. Do not choose this interface
  6. Click the “Search” Button (Figure 1)
  7. Select the MAC address of the device you would like to configure (Figure 1)
    • You can match the MAC address displayed here against the one printed on the top of the ethernet module
    • If the device shows an IP address of 0.0.0.0 it has not fully booted yet, select search again until a valid IP address is displayed
  8. Under the “Connections” section change “Work As” to “3. Web-i” (Figure 1)
  9. Click on the “Upload” button along the top of the NCD5500 Configuration Utility (Figure 1)
  10. Select Upload Firmware
  11. In the file explorer that comes up navigate to the unzipped firmware folder and upload the file marked NCD5500.bin
  12. Allow this upload time to process
  13. Once the firmware has finished uploading click on the Reset button along the top of the application and click on “Reset Now!”
  14. Click on the “Upload” button along the top of the NCD5500 Configuration Utility again and select “Upload Webpage”
  15.  In the file explorer that pops up navigate to the unzipped firmware folder and go to the HTML folder inside of it
  16. Choose the .html file appropriate for the number of relays you have on your relay controller
NCD Config Tool
Figure 1

Step 3: Confirmation

  1. The NCD5500 Utility will display the IP address of the module in the “Network Settings” section next to the label “IP Address” (Figure 2)
  2. Enter the IP address displayed here into the URL bar of your computer’s browser (we recommend google chrome)
  3. Log in the with default password of “admin” without the quotes
  4. In the left navigation select “Web-i” (Figure 3)
  5. You should now see controls for each relay on your controller with its current status.
  6. Click on the “Toggle” button to make sure that the status of the relay updates (Figure 3)
“Toggle” button to make sure that the status of the relay updates
Figure 2
NCD Io Configuration
Figure 3

Customization

Number, Names, and Buttons for Relays

The NCD5500 module does not have on-board storage for variables so you must alter the HTML files saved into the module. First you will need to have the .HTML file for your board which can be obtained from: https://github.com/ncd-io/ncd_Ethernet.

  1. Open the HTML file for your relay controller with a text or code editor. I recommend Atom (atom.io) or Notepad++ (notepad-plus-plus.org/downloads/)
  2. Perform a find operation (CTRL+F) and look for “get_standard_ui_json” without the quotes
    • This function simply builds and returns an object in JSON format to the UI constructor
    • You can alter the number of relays using the number_of_relays property
    • You can alter the names of the relays using the names property. If you do no name all of the relays your UI is configured to show then the unnamed relays will be labeled Relay X where X is the relay number
    • You can add and remove control buttons using the buttons property. By default On, Off, and Toggle are shown. The property name here is the function that will be called when the button is clicked. The property value is the text displayed on the button. By default these buttons will also call query_relay_bank_status and update_relay_bank_status_ui in order to update the UI with the new state of the relay.
  3. Alter this function to suit your requirements
  4. Save this file
  5. Use the NCD5500 Configuration Utility to find and upload the new .html file

Macros

The NCD5500 module does not have on-board storage for variables so you must alter the HTML files saved into the module. First you will need to have the .HTML file for your board which can be obtained from: https://github.com/ncd-io/ncd_Ethernet.

  1. Open the HTML file for your relay controller with a text or code editor. I recommend Atom (atom.io) or Notepad++ (notepad-plus-plus.org/downloads/)
  2. Perform a find operation (CTRL+F) and look for “get_macros_ui_json” without the quotes
    • This function simply builds and returns an object in JSON format to the UI constructor
    • You can alter the number of macros by creating a new object keyed by integer index
    • You can alter the label of the button by altering the label property of each button object
    • You can alter what is triggered after the macros are executed for further parsing by altering the callbacks property. The default callback simply displays the response on the Macros page. Multiple callbacks can be entered and they will trigger in the order entered
    • You can alter what commands are executed by either entering an integer array in for the command you wish to send or calling a get_…_command function such as get_toggle_relay_command to obtain the desired command
  3. Alter this function to suit your requirements
  4. Save this file
  5. Use the NCD5500 Configuration Utility to find and upload the new .html file

Code

You can alter and customize the code of the web page itself if you want to. NCD has limited support for doing so and a working knowledge of HTML5 is recommended.

kwargs

Many functions in the base code expect an argument called kwargs. This is short for keyword arguments and allows you to pass context and variables through our functions and access them through your own callbacks later on down the communications flow. You can find an example of doing this in our standard relay control code which passes the kwargs of ‘callbacks’ (array of function to pass GET request responses to) and ‘bank’ (specifies the target bank for UI updates after getting current relay status’). This argument is not required and will default itself to being empty if no kwargs are passed. We recommend if you design your own code for the NCD5500 web interface to implement this practice as well.

Command Function List

The list of callable commands is in development. Contact us for questions or peruse the code. All of the pertinent functions will be listed after the NCD_AJAX function.