Interrupt-Driven

Last time we created a simple “hello world” page. Not very useful. For our NAS box we need a way to input/select configuration data. Web interfaces implement user input using HTML forms. Webif^2 provides some features to make it easier to work with them.

The following example allows us to enter the name (text) and job description (selecting a predefined value) of the person you want to cheer. I start with my explanation at the end of the script.

On the lines 11 to 21 we use the function display_form to create the output you can see in the screen shot. display_form is at its heart an AWK script. AWK works on a line by line basis so every line till the EOF marker will be processed on its own. Processing means that the lines are expanded into fragments that will make up the final form.

start_form/end_form are doing exactly what you expect them to do. What about line 13? display_form is not only generating a form, it also embeds the form elements together with other elements into a table. “field” will put the text following it into a cell of this table. Line 14 creates a drop down box. The following two lines add two options to this drop down box. By passing the value of the variable FORM_job we can preselect a particular option. This allows us to remember user input between script invocations (albeit only on the browser side).

The input field to enter the name is created on line 18. As the last step before finishing the form we add a submit button so we can send the form back to the server for processing (line 19). The action associated with the form will be the embedding page.

To wrap up this tutorial we now only have to do something with the data submitted through the form. On line 07 we check if $FORM_name or $FORM_job are empty. If both of them contain a value we display a customized greeting message.
Where do these variables come from? Haserl is parsing POST/GET requests and places form variables into the context of the script it currently exectues. The variables are always prefixed with “FORM_”.

This example wasn’t extensive of course. display_form provides a number of additional features to create radio buttons, check boxes, text areas, …. For a complete list you have to look up files/usr/lib/webif/form.awk.

The time we will extend this example to do some input validation.

This article tries to explain how you can extend Webif^2 with your own functionality. I am myself new to Webif^2. The reason i am writing this article is to get acquainted enough with the code so i can decide if i would like to use it to create some NAS specific functionality.

Webif^2 runs on devices with some severe CPU and memory limits. Given that using one of the mainstream web development platforms was apparently off the table. Instead a combination of shell/awk and sed is used to generate dynamic content. Basically the way your father would have done it back in the days (given that there had been a web to develop for…) Having done some work with Ruby on Rails recently i am not too excited by this prospect but lets see how it goes.

My first goal is to have some pages which are displaying friendly greeting messages. These pages should be grouped into a new category in the main menu. I assume that you have checked out a copy of webif^2. All path references are relative to trunk/package/webif/.

Step1: Adding a new category.

files/www/cgi-bin/webif/.categories contains the entries of the main menu. We just add our entry here (”Test”).

If you now reload your web browser you should see a new category “Test”. The next step will be to add content to this category.

Step2: Putting content into the new category.

I add the file test-hello.sh in files/www/cgi-bin/webif. The name of the file doesn’t matter but the convention seems to be to name it $(category)-$(name).sh.

Webif^2 uses an interpreter called Haserl. It will parse html files and execute the shell fragments it finds enclosed by <? … ?> (basically like it is done by php/jsp/…). The documentation for it can be found here.

The first line tells the linux kernel which interpreter to use when trying to execute this file (webif-page is the actual haserl program). The lines 02 to 09 contain the actual program that will generate our page. 03 pulls in webif.sh which is a library containing the functions we will use. 05 calls the header function (found in webif.sh). It will generate the html header, the head section of page and also the main- and sub-menu. $SCRIPT_NAME is set by haserl. On line 07 we say “hello” to openWrt. The only thing left now is to finish the page. To accomplish this we call the footer function (also found in webif.sh). This function will generate the content you see in the bottom section (”Apply Changes”, “Clear Changes”, …). It will also close the HTML document.

The last three lines contain a strange HTML comment. Lets have a closer look. When the main menu is generated webif^2 scans all files in files/www/cgi-bin/webif/ having the .sh extensions, looking for this special marker. The marker tells it to put an entry “Hello” into the category “Test”. The number can be used to allow a non-alphabetical ordering of the entries. The entry with the lowest number comes first. It will also be the page being selected by default of you click on the category.

So far so good. Next time we try to use some forms.

Webif^2 aka. X-Wrt is a kick ass web interface used on OpenWrt systems. I really like it but as the main focus of OpenWrt is routers and related devices it is missing a lot of functionality which would be needed for a NAS box. Still its a good starting point. It has all the basic functions you would also need for a NAS box. Another point to consider is that most NAS devices have USB so they can be very easily turned into an access point or router where all this standard Webif^2 features would be very handy.