Creating web interface (part 2)

This Example shows how to access GPIO pins via web interface.

First you need to install on mini2440 linux kernel with GPIO support.
Unfortunately FriendlyARM comes with kernel without GPIO and SPI support.
If you decide to try to compile kernel take a look at "Kernel Tweaking" link below. There is a good explanation how to do it.
The other option is to download already compiled kernel from
http://rapidshare.com/files/409529369/zImage-2.6.32.2-mini2440_gpio_spi.html
It is for 7" display but for this example only network access to mini2440 is needed.
I'm not going to explain how to upload the kernel image. It's shown in the board's manual.

HOW TO CONTROL GPIO FROM THE COMMAND LINE:
When the new kernel is uploaded let's first check the access to GPIO from the command line.
Telnet to mini2440 and go to sys/class/gpio folder:

$ telnet 192.168.1.230
[root@FriendlyARM /]# cd sys/class/gpio/
[root@FriendlyARM gpio]# ls
export       gpiochip0    gpiochip128  gpiochip160  gpiochip192  gpiochip224  gpiochip32   gpiochip64   gpiochip96   unexport

Folders gpiochip0 , gpiochip128 .... represent GPIO drivers for each port. Ports are named A,B,C....
Check the port for each gpiochipX:

[root@FriendlyARM gpio]# cat gpiochip0/label
GPIOA
[root@FriendlyARM gpio]# cat gpiochip32/label
GPIOB
[root@FriendlyARM gpio]# cat gpiochip192/label
GPIOG

Each pin has it's corresponding access number. For example buzzer is connected to GPB0 ( Port B pin 0) and port B is accessible from gpiochip32 so the number to access the buzzer is 32.
Led1 is connected go GPB5. It's access number is 32+5 = 37
Buttons are connected to port G - gpiochip192

Function    Port    Access number
Buzzer        GPB0    32
Led1           GPB5    37
Led2           GPB6    38
Led3           GPB7    39
Led4           GPB8    40
Btn1           GPG0    192
Btn2           GPG3    195
Btn3           GPG5    197
Btn4           GPG6    198
Btn5           GPG7    199
Btn6           GPG11    203


Now open access to the buzzer. :

[root@FriendlyARM gpio]# echo 32  > export
[root@FriendlyARM gpio]# ls
export       gpio32       gpiochip0    gpiochip128  gpiochip160  gpiochip192  gpiochip224  gpiochip32   gpiochip64   gpiochip96   unexport

A new link gpio32 appeared now. Let's check the current direction and make it an output:

[root@FriendlyARM gpio]# cat gpio32/direction
in

[root@FriendlyARM gpio]# echo "high" > gpio32/direction
[root@FriendlyARM gpio]# cat gpio32/direction
out

Turn the buzzer on and off:
[root@FriendlyARM gpio]# echo "1" > gpio32/value
[root@FriendlyARM gpio]# echo "0" > gpio32/value

Close the access:
[root@FriendlyARM gpio]# echo 32  > unexport

CONTROL GPIO FROM WEB INTERFACE:
First stop the Led player as shown on one of previous posts.



The project consists from the following files:
access_num.h     -    definitions of GPIO driver access numbers            

gpio.h gpio.cpp -     class for control of GPIO. Each instance is for control of one pin

readbtn.cpp    -     CGI program that reads the state of the six board buttons and shows
            it in table on a web page. The page is automatically refreshed each
            two seconds.

ledbuzz.cpp    -     CGI program that reads the query string sent to the web server and
            turns on/off the LEDs and the Buzzer.Then the state of the four board
            leds and the buzzer are shown on a web page as checkboxes.
            The user can change the    checkboxes. When submit button is pressed
            the new states are sent to the web server using GET method and the
            same program is called again.
download the project folder from:
https://rapidshare.com/files/3267170017/webcontrol.zip
https://rapidshare.com/#!download|560tg|3267170017|webcontrol.zip|16

compile with command:
$ arm-linux-g++ gpio.cpp ledbuzz.cpp -o ledbuzz.cgi
$ arm-linux-g++ gpio.cpp readbtn.cpp -o readbtn.cgi

Note: In the project folder there are already compiled binaries ledbuzz.cgi and readbtn.cgi

upload ledbuzz.cgi and readbtn.cgi to the board to /www/cgi-bin folder and give them executable attribute
# chmod a+x ledbuzz.cgi
# chmod a+x readbtn.cgi

Run them from the command line. You should get HTML output

There is no index.html. Open CGIs from PC web browser directly:
http://192.168.1.230/cgi-bin/ledbuzz.cgi
http://192.168.1.230/cgi-bin/readbtn.cgi


LINKS:
Access to GPIO pins explained
http://www.avrfreaks.net/wiki/index.php/Documentation:Linux/GPIO

Kernel Tweaking
http://members.cox.net/ebrombaugh1/embedded/mini2440/index.html

P.S. If you find this articles useful please pay some attention to the ads.
Some of them might be interresting to you too. Thanks.

Creating web interface

FriendlyARM comes with installed Boa web server. 
Web interface can be very useful feature for real life applications. 
It might be used for editing and storing settings to a file or to access the real world - ADC, GPIO, SPI, Serial.

The purpose of this tutorial is to show the basics of creating a simple web interface using CGI in C.

All that you need is mini2440 board with or without LCD and PC with GCC cross-compiler  
http://www.friendlyarm.net/dl.php?file=arm-linux-gcc-4.4.3.tgz
On my mini2440 I have SD card installed. If  you do not have any you have to make some changes to the code.

Example 1:

The example consists of the following files:

index.html

template.html

savefile.c

showfile.c

This web interface opens example.txt text file from the flash and shows it on a web page. 
The user can edit it and store it back.

The first file is index.html. When you type the IP address of the FriendlyARM board into a web browser Boa 
searches for index.html in /www 

index.html:
<HTML>
  <HEAD>
    <TITLE>REDIRECTING...</TITLE>
    <meta http-equiv="Refresh" content="3;url=./cgi-bin/showfile.cgi">
  </HEAD>
   
  <BODY>
    redirecting in 3 seconds...
  </BODY>
</HTML>

The only purpose of this web page is to redirect the browser to another URL and in particular this is the showfile.cgi

What is CGI? This is a program. It might be a script file or an executable written in no matter what programming language.
You can write CGI in C,Basic or even Assembler. This executable is called by the web server. 
CGI program captures data reading environment variables and the output data is sent to the console. 
The web server captures this output and sends it back to the client's browser.

Two CGI programs are used in this example - showfile.cgi and savefile.cgi
When the web server calls showfile.cgi it reads file template.html from flash and sends it's contents to the console.
The contents of example.txt are sent between </TEXTAREA> and </TEXTAREA> tags. 

template.html
<HTML>
  <HEAD>
    <TITLE>EDIT TEXT FILE</TITLE>
  </HEAD>
   
  <BODY>
    <FORM name="input" action="./savefile.cgi" method= "get">
        <TEXTAREA NAME=textarea ROWS=10 COLS=60>
<!-- /TEXTAREA -->
    <BR><BR>
    <INPUT type="submit" value="Submit" />       <INPUT type="reset" value="Undo changes" />
    </FORM>
  </BODY>
</HTML>

showfile.c
#include <stdio.h>
#include <string.h>
#include <stdlib.h>


int main()
{
//Open template.html file. If unable to open show error web page and return
    FILE * htmlTemplate;
        htmlTemplate =  fopen("/sdcard/html/template.html","r");
    if(htmlTemplate == NULL)
    {
        printf("%s%c%c\n",    "Content-Type:text/html;charset=iso-8859-1",13,10);
        printf("<HTML><HEAD><TITLE>ERROR!</TITLE></HEAD>\n");
        printf("<BODY>\n");
        printf("<H3>ERROR: Unable to open template.html!</H3>\n");
        printf("</BODY></HTML>\n");
        return 0;
    }
//Open example.txt file. If it doesn't exist a new empty file will be created.
    FILE * textFile;
        textFile =  fopen("/sdcard/example.txt","a+");

//start sending template.html to the console
    char row[1000];
    printf("Set-Cookie:MY_COOKIE=ThisIsCookieJustForFun\n"); //This line is only to demonstrate how to set cookie
    printf("%s%c%c\n",    "Content-Type:text/html;charset=iso-8859-1",13,10);

    while(fgets(row,999,htmlTemplate))
    {
        printf(row);
        if(strstr(row,"<TEXTAREA") != NULL)
        {
            if(textFile != NULL)
            {//send example.txt to the console
                while(fgets(row,999,textFile))
                {
                    printf(row);
                }
            }
            printf("</TEXTAREA>\n");
        }
    }
    fclose(htmlTemplate);
    fclose(textFile);
    return 0;
}
   


savefile.c
#include <stdio.h>
#include <string.h>
#include <stdlib.h>


int main()
{
//Open example.txt file.
    FILE * textFile;
        textFile =  fopen("/sdcard/example.txt","w");

    char * query;
    query = getenv("QUERY_STRING");

    printf("%s%c%c\n",    "Content-Type:text/html;charset=iso-8859-1",13,10);
    printf("<HTML><HEAD><TITLE>FILE SAVED</TITLE></HEAD>\n");
    printf("<BODY>\n");
    if(textFile != NULL)
    {// save file to disk
        //cut the beginning if it starts with "textarea="
        if(strstr(query,"textarea=") != NULL) fprintf(textFile,&query[9]);
        else fprintf(textFile,query);
        printf("<H3>File example.txt was saved to SD card</H3>\n");
    }
    else printf("<H3>Failed to save example.txt. Reason - unable to open file for writing.</H3>\n");

    printf("<BR><BR>\n");
    printf("QUERY_STRING:%s<BR><BR>\n",query);
    printf("<a href=\"./showfile.cgi\">Return to edit example.txt</a>\n");

//Nex code is just for fun.
    printf("<HR><BR><BR> Now let's read some environment variables just for fun<BR>");
    char *envvar;
    envvar=getenv("HTTP_COOKIE");
    printf("<BR>HTTP_COOKIE=%s",envvar);
    envvar=getenv("SERVER_SOFTWARE");
    printf("<BR>SERVER_SOFTWARE=%s",envvar);
    envvar=getenv("SERVER_NAME");
    printf("<BR>SERVER_NAME=%s",envvar);
    envvar=getenv("GATEWAY_INTERFACE");
    printf("<BR>GATEWAY_INTERFACE=%s",envvar);
    envvar=getenv("SERVER_PROTOCOL");
    printf("<BR>SERVER_PROTOCOL=%s",envvar);
    envvar=getenv("SERVER_PORT");
    printf("<BR>SERVER_PORT=%s",envvar);
    envvar=getenv("REQUEST_METHOD");
    printf("<BR>REQUEST_METHOD=%s",envvar);
    envvar=getenv("SCRIPT_NAME");
    printf("<BR>SCRIPT_NAME=%s",envvar);
    envvar=getenv("REMOTE_ADDR");
    printf("<BR>REMOTE_ADDR=%s",envvar);
    envvar=getenv("CONTENT_TYPE");
    printf("<BR>CONTENT_TYPE=%s",envvar);
    envvar=getenv("CONTENT_LENGTH");
    printf("<BR>CONTENT_LENGTH=%s",envvar);
    envvar=getenv("HTTP_USER_AGENT");
    printf("<BR>HTTP_USER_AGENT=%s",envvar);
    envvar=getenv("HTTP_REFERER");
    printf("<BR>HTTP_REFERER=%s",envvar);

    printf("</BODY></HTML>\n");

    fclose(textFile);
    return 0;
}
   
Compile it with command
arm-linux-gcc showfile.c -o showfile.cgi
arm-linux-gcc savefile.c -o savefile.cgi  

When "Submit" is clicked on the web page content of the text area is sent back to the web server
and savefile.cgi is called. (Note the FORM tag in template.html)
Used method is "GET" and data is retrieved from the environment variable QUERY_STRING.
If "POST" method is used reading data is read from stdin.
NOTE: When data is sent back to server some special characters are encoded to %XX format. They have to be decoded before saving them to file. To keep this example simple I omitted this step.

Only for demonstration a cookie MY_COOKIE is set and reading some environment variables is implemented.


Upload files to the board:
index.html    -- /www
showfile.cgi  -- /www/cgi-bin
savefile.cgi  -- /www/cgi-bin
template.html -- /sdcard/html


change permissions to execute cgi files with:
[root@FriendlyARM cgi-bin]# chmod a+x showfile.cgi
[root@FriendlyARM cgi-bin]# chmod a+x savefile.cgi  

If you miss to do it you will get error 

   502 Bad Gateway
   The CGI was not CGI/1.1 compliant.





LINKS:

HTML Tutorial
http://www.w3schools.com/html/default.asp

More on CGI
http://www.jmarshall.com/easy/cgi/

cgic: an ANSI C library for CGI Programming
http://www.boutell.com/cgic/
Excellent library that can save you a lot of typing.

iniParser: stand-alone ini parser library in ANSI C
http://ndevilla.free.fr/iniparser/
This is excellent library if you have to save and retrieve data from ini files.