XPicoWiFi/CustomizeWebPages

From Lantronix Developer Wiki
Jump to: navigation, search

Contents

Introduction

A very common use case for the xPico Wi-Fi is to customize the web pages that are served by the web server that is integrated into the xPico Wi-Fi. There are multiple ways to achieve this, so you need to think about how you want it to look.

You can use the existing Lantronix pages and remove certain items while also adding your own items, or you can create your own completely custom pages that don't use the Lantronix HTML/Javascript content at all.

This document shows how to get started with doing both.

Using the Lantronix pages

Default Web Manager

This is what by default the Lantronix Web Manager looks like:

WebManagerDefault.jpg

Overriding files

The HTML, Javascript, and CSS that makes the default Lantronix web pages is built into the Lantronix firmware. These are called Overridable files, in that you can create your own to be served instead of the default ones. The list of overridable files is in the "Branding the xPico Wi-Fi Unit" chapter of the xPico Wi-Fi User Guide. The overridable files are:

  • index.html – Main file controlling text and graphics
  • style.css – Style sheet
  • img/bg.gif – Main background
  • img/company_logo.gif – Company logo in header container
  • img/product_logo.gif – Product logo in header container
  • img/favicon.ico – Shortcut icon
  • img/header_bg.gif – Head container background

If you would like to override a file, place it in the following directory in the filesystem: /main/http/web_manager

You can create the override file from scratch, or you can save as source the Lantronix one and modify it. If you would like to see the source of the Lantronix default page, you can find it in the following directory: /embedded/main/http/web_manager


The following picture shows the effect of the different overridable files:

OverridableFiles.jpg

Removing Configuration Tabs

If you would like to remove tabs from the left-hand side menu, you can do so by overriding the style.css file with your own which hides the different menus. Copy the default style.css file and set any menus you want to hide to the display:none; style. For example, to hide the tab for SPI, the style.css file would have:

#spi_Index
{
	display: none;
} 

The list of IDs used for each tab is:

  • quickconnect_Index
  • status_Index
  • aes_credentials_Index
  • bridge_Index
  • cpm_Index
  • clock_Index
  • device_Index
  • diagnostics_Index
  • discovery_Index
  • filesystem_Index
  • httpserver_Index
  • line_Index
  • modem_emulation_Index
  • monitor_Index
  • ntp_Index
  • network_Index
  • performance_Index
  • spi_Index
  • tunnel_Index
  • user_Index
  • wlan_profiles_Index

Adding Configuration Tabs

The Lantronix User Data module makes it easy to add additional tabs with your own data to the existing default pages, without having to redesign all the pages by yourself. This also lets you save your own configuration values that you can get via XML through the usual ways of reading configuration (either serial port or WebAPI).

To add a new tab, follow these steps:

  1. Create /user_data directory on the filesystem
  2. Create /user_data/http directory
  3. Create /user_data/http/web
  4. In the web directory, add file called user_data_specification.js
  5. Go back and create /user_data/http/help directory
  6. Put config.Custom.html file into the help directory
  7. Reboot your device, notice the new "Customization" tab


user_data_specification.js:

UserData_RegisterTab(
    {
        name: "Customization",
        page: [
            {
                group:"Alarms",
                item:["Alarm Level","Notify","Severity"],
                checkFormValues: function() {
                    PrintMsg("");
                    var a = UserData_GetValue("Alarm Level");
                    if(a && ! a.match(/^\d+$/)) {
                        PrintMsg("ERROR: Alarm Level must be numeric.\r");
                        return false;
                    }
                    return true;
                }
            },
            {
                group:"Device",
                item:["Serial Number","Rank"]
            }
        ]
    }
);


config.Custom.html file:

<div id="help.config.Custom" style="display:none">
    <p>
        The idea is, user custom configuration values are stored under this group.
    </p>
</div>
<div id="help.config.Custom.Alarms" style="display:none">
    <p>
        The OEM places help for the overall <b>Alarms</b> page here.
    </p>
</div>
<div id="help.config.Custom.Alarms.Alarm Level" style="display:none">
    <p>
        The OEM describes <b>Alarm Level</b> in detail here.
    </p>
</div>
<div id="help.config.Custom.Alarms.Notify" style="display:none">
    <p>
        The OEM describes <b>Notify</b> in detail here.
    </p>
</div>
<div id="help.config.Custom.Alarms.Severity" style="display:none">
    <p>
        The OEM describes <b>Severity</b> in detail here.
    </p>
</div>
<div id="help.config.Custom.Device" style="display:none">
    <p>
        The OEM places help for the overall <b>Device</b> page here.
    </p>
</div>
<div id="help.config.Custom.Device.Serial Number" style="display:none">
    <p>
        The OEM describes <b>Serial Number</b> in detail here.
    </p>
</div>
<div id="help.config.Custom.Device.Rank" style="display:none">
    <p>
        The OEM describes <b>Rank</b> in detail here.
    </p>
</div>

The files above will create the following tab called Customization:

CustomizedPage.jpg

Accessing your custom data

To access your custom configuration data stored when a user enters data in the page above, you can use the standard methods of getting the configuration XML (XCR) data, and look for the "Custom" configuration group.

<configgroup name = "Custom" instance = "Alarms">
    <configitem name = "Item" instance = "Alarm Level">
       <value name = "Value"></value>
    </configitem>
    <configitem name = "Item" instance = "Notify">
       <value name = "Value"></value>
    </configitem>
    <configitem name = "Item" instance = "Severity">
       <value name = "Value"></value>
    </configitem>
</configgroup> 

Creating your own webpages

If instead of modifying the existing pages, you would like to create your own pages, you can do so easily by placing your source files in the /http directory of the filesystem. That directory might need to be created.

Any HTML file placed there will be served at the root of the web server. That is, if you create a file called /http/test.html, it will be seen at address:

http://<ip address of xPico Wi-Fi>/test.html

Accessing Configuration and Status

To access xPico Wi-Fi configuration and status from your own custom web pages, you can use the WebAPI with Javascript transactions to get the XML data (XCR for configuration, XSR for status). With the WebAPI you can:

  • View current configuration
  • Upload new configuration
  • View current status
  • Take status actions (such as toggling GPIO, send data to serial ports, etc)

Please see the WebAPI chapter in the User Guide for more details and Javascript examples.

Personal tools
Namespaces

Variants
Actions
Navigation
Tools