In a previous post, the idea of using the Google Web Toolkit to create a new kind of embedded web administration interface for devices was discussed. I continue the discussion by providing some examples and a working demonstration of the user interface.

The interface is designed, in this case, to be the administrative web console of a OpenWrt-based firmware. As such, it is a tool to configure (linux) system parameters and files - which may be different depending on the underlying system. For instance, the WhiteRussian branch of OpenWrt use NVRAM settings while Kamikaze uses the new UCI Configuration.

Working with XML

The application in this example uses XML to define the system configuration and also to define the user interface to edit this configuration. XML is well suited for this purpose and offers many benefits, including:

  • Easy to read and edit by hand
  • System independence and interoperability
  • Transformed into other formats using a structured language
  • Excellent open-source libraries, tools, and resources

The well-formed structure of the XML resources are converted into JSON objects by a CGI program running the server-side of the application. The GWT interface exchanges JSON objects with this CGI back-end to load or save data.

Defining system configuration

The GWT-based user interface is designed as a configuration editor. The configuration itself is stored in XML as specified in the sysconfig DTD. The DTD defines how a system is configured and is used for basic syntax verification. Here is a portion of the “config.xml” system configuration based on this specification:

<sysconfig>
  <system>
    <settings boot_wait="true" hostname="Coova"/>
  </system>
  <network>
    <interface id="loopback" proto="static" .../>
    <interface id="lan" proto="static" .../>
    <interface id="wan" proto="dhcp" .../>
  </network>
  ...
</sysconfig>

The XML is transformed into JSON by the CGI program when sent to and stored by the GWT application (as a JSONObject), as shown in the “Status / Config Tree” tab of the demo.

Defining the user interface

The user interface screens are defined in XML based on the cap-ui DTD. The portion that builds the systems settings screen to configure the above XML segment is as follows:

<cap-ui>

  <menu name="System">

    <submenu name="Settings">

      <inputset name="System Settings" object="system.settings">

        <input label="Host Name" key="hostname">
        </input>

        <input label="boot_wait" key="boot_wait">
          <option name="Enabled" value="true"/>
          <option name="Disabled" value="false"/>
        </input>
        ...
      </inputset>
      ...
    </submenu>
    ...
  </menu>
  ...
</cap-ui>

Configuration transformations

Taking the XML configuration and using it to set the underlying system configuration is done using XSLT. Transforms take the XML and produce scripts for WhiteRussian (example) and Kamikaze (example), the output of which is shown in the “Status / Config Files” tab of the demo.

The demo

See an on-line demonstration of the user interface using something similar to the above configuration. Please, keep in mind it is still a work in progress and not all the screens and dependencies are defined. The configurations transforms are also incomplete - as is the UCI configuration of Kamikaze.

If you want to help out, come join the forum! (when your done helping out OpenWrt) ;)