Armadillo-400シリーズでWebページ上で表を表示するサンプルデモ

at_kazutaka.bito

2015年7月4日 18時21分

Armadillo-400シリーズで下記のようにWebページ上で表を表示するサンプルデモを作ってみた。

1.まず、表の要素となるデータを出力するスクリプト"rand_data"を作成。

rand_data

rm -f /tmp/log.txt
rm -f /home/www-data/log20.txt
touch /tmp/log.txt
touch /home/www-data/log20.txt
 
for i in `seq 1 1000`
do
echo -n `date +"%Y/%m/%d %p %I:%M:%S"` >> /tmp/log.txt
echo -n ',' >> /tmp/log.txt
echo -n $((RANDOM % 100)) >> /tmp/log.txt
echo -n ',' >> /tmp/log.txt
echo $((RANDOM % 100)) >> /tmp/log.txt
tail -n 20 /tmp/log.txt > /home/www-data/log20.txt
sleep 1
done

このスクリプトは、1秒毎に　日付,乱数,乱数という形式で、 /tmp/log.txt に1000回まで出力する。うち、最新の20行が /home/www-data/log20.txt に出力される。

2.Webページに表を作るプログラムをCGIで作成。

ArmadilloをCGIで制御するサンプル（LED点灯）のredled.cを改造して、下記のような"table_demo.c"を作成する。 table_demo.c

#include <stdio.h>
#include <stdlib.h>
 
int main(void)
{
    FILE *fp;
    char str[256], str1[256], str2[256];
    int ret, val1, val2;
 
    puts(
        "Content-type: text/html\n"
        "\n"
        "<HTML>\n"
        "<HEAD>\n"
        "<TITLE> Armadillo-440 </TITLE>\n"
        "</HEAD>\n"
        "<BODY>\n"
    );
 
//    system("echo 1 > /sys/class/leds/red/brightness");
//    system("sleep 1"); 
//    system("echo 0 > /sys/class/leds/red/brightness");
 
/**** table_demo: begin ****/
    fp = fopen("/home/www-data/log20.txt", "rt");
    if( fp == NULL ){
        printf( "cannot open /home/www-data/log20.txt¥n");
       return -1;
    }
 
    puts(
       "<TABLE border=\\"1\\" align=\\"left\\">\n"
    );
    while((ret = fscanf( fp, "%[^,],%d,%d", str, &val1, &val2)) != EOF){
      sprintf(str1, "%d", val1 * 10);
      sprintf(str2, "%d", val2 * 10);
      if(ret == 3) {
        puts(
          "<TR>\n"
          "<TD>"
         );
        puts(str);
        puts(
          "</TD>\n"
       "<TD>"
         );
        puts(str1);
        puts(
          "</TD>\n"
       "<TD>"
         );
        puts(str2);
        puts(
          "</TD>\n"
       "</TR>\n"
         );
      }
    }
   puts(
        "</TABLE>\n"
    );
 
    fclose(fp);
/**** table_demo: end ****/
 
    puts(
        "</BODY>\n"
        "</HTML>"
    );
 
    return 0;
}

備考） /**** table_demo: begin ****/ /**** table_demo: end ****/ で囲んだ箇所で、/home/www-data/log20.txtの内容を読み込んで、乱数は計算（今回は単に10倍）して表に表示している。

3.ビルドをかける（実行ファイルは、table_demo.cgiとする）

arm-linux-gnueabi-gcc table_demo.c -o table_demo.cgi

4.上記1,2のファイル"rand_data"、"table_demo.cgi"をArmadilloに転送し、/home/www-dataに置く

5.実行権限をつける

[armadillo ~]# chmod +x /home/www-data/rand_data
[armadillo ~]# chmod +x /home/www-data/table_demo.cgi

6.PCのWebブラウザで確認する。

まず、PCとArmadilloをネットワーク経由で接続し、ArmadilloのIPアドレスを確認する。

Armadillo上で

[armadillo ~]# /home/www-data/rand_data &

を実行後、PCのWebブラウザで [ArmadilloのIPアドレス]/table_demo.cgi にアクセスすると、/home/www-data/log20.txtの内容が、Webブラウザで表になって見える。

ブログ