這篇講一下如何使用"網頁to binary"小工具。
路徑：component/common/network/lwip/lwip_v2.0.2/src/apps/httpd/makefsdata/

hana@makefsdata/ 
$ ls # www 是我自己寫的網頁資料夾，把它放進makefsdata/目錄底下
fsdata.c  makefsdata  makefsdata.c  readme.txt  www

hana@makefsdata/ 
$ ls www/ # 網頁資料夾裡長這樣，有基本的html、js/、css/(asset/是我的jpg檔案，也可以一起轉，但我後來沒有使用它們)
asset  css  data.txt  index.html  js

www/放好後，執行以下perl。

$ perl makefsdata # 執行完後，會在同一層目錄產生fsdata.c

來看看fsdata.c長什麼樣。

static const unsigned char data_www_css_index_css[] = {
        /* /www/css/index.css */
        0x2f, 0x77, 0x77, 0x77, 0x2f, 0x63, 0x73, 0x73, 0x2f, 0x69, 0x6e, 0x64, 0x65, 0x78, 0x2e, 0x63, 0x73, 0x73, 0,
        0x48, 0x54, 0x54, 0x50, 0x2f, 0x31, 0x2e, 0x30, 0x20, 0x32,
        0x30, 0x30, 0x20, 0x4f, 0x4b, 0xd, 0xa, 0x53, 0x65, 0x72,
        0x76, 0x65, 0x72, 0x3a, 0x20, 0x6c, 0x77, 0x49, 0x50, 0x2f,
        0x70, 0x72, 0x65, 0x2d, 0x30, 0x2e, 0x36, 0x20, 0x28, 0x68,
        0x74, 0x74, 0x70, 0x3a, 0x2f, 0x2f, 0x77, 0x77, 0x77, 0x2e,
// 中間略

binary太難看了，可以參考此範例檔，
component/common/network/lwip/lwip_v2.0.2/src/apps/httpd/fsdata.c

static const unsigned char data__img_sics_gif[] = { 
/* /img/sics.gif (14 chars) */
0x2f,0x69,0x6d,0x67,0x2f,0x73,0x69,0x63,0x73,0x2e,0x67,0x69,0x66,0x00,0x00,0x00,

/* HTTP header */ // 連http header都有囉！
/* "HTTP/1.0 200 OK
" (17 bytes) */
0x48,0x54,0x54,0x50,0x2f,0x31,0x2e,0x30,0x20,0x32,0x30,0x30,0x20,0x4f,0x4b,0x0d,
0x0a,
/* "Server: lwIP/1.3.1 (http://savannah.nongnu.org/projects/lwip)
" (63 bytes) */
0x53,0x65,0x72,0x76,0x65,0x72,0x3a,0x20,0x6c,0x77,0x49,0x50,0x2f,0x31,0x2e,0x33,
0x2e,0x31,0x20,0x28,0x68,0x74,0x74,0x70,0x3a,0x2f,0x2f,0x73,0x61,0x76,0x61,0x6e,
0x6e,0x61,0x68,0x2e,0x6e,0x6f,0x6e,0x67,0x6e,0x75,0x2e,0x6f,0x72,0x67,0x2f,0x70,
0x72,0x6f,0x6a,0x65,0x63,0x74,0x73,0x2f,0x6c,0x77,0x69,0x70,0x29,0x0d,0x0a,
/* "Content-type: image/gif
" (27 bytes) */ 
0x43,0x6f,0x6e,0x74,0x65,0x6e,0x74,0x2d,0x74,0x79,0x70,0x65,0x3a,0x20,0x69,0x6d,
0x61,0x67,0x65,0x2f,0x67,0x69,0x66,0x0d,0x0a,0x0d,0x0a,

/* raw file data (724 bytes) */ // 但我只需要這部份啦
0x47,0x49,0x46,0x38,0x39,0x61,0x46,0x00,0x22,0x00,0xa5,0x00,0x00,0xd9,0x2b,0x39,
0x6a,0x6a,0x6a,0xbf,0xbf,0xbf,0x93,0x93,0x93,0x0f,0x0f,0x0f,0xb0,0xb0,0xb0,0xa6,
0xa6,0xa6,0x80,0x80,0x80,0x76,0x76,0x76,0x1e,0x1e,0x1e,0x9d,0x9d,0x9d,0x2e,0x2e,
0x2e,0x49,0x49,0x49,0x54,0x54,0x54,0x8a,0x8a,0x8a,0x60,0x60,0x60,0xc6,0xa6,0x99,

fsdata是這個app吃的格式，所以才會連http header都寫了。但我沒有要使用他的httpd(懶得trace code)，所以我只需要它的"raw file data"就好。

所以，搭配原本的httpd(component/common/example/httpd/example_httpd.c)使用的話，就會長以下這個樣子。

// 全域變數，存index.css的"raw file data"。也就是剛才我說"但我只需要這部份啦"的地方。
const unsigned char data_www_css_index_css[] = {0xa, 0x62, 0x6f, ...};

static void example_httpd_thread(void *param)
{
// 中間略

	httpd_reg_page_callback("/", index_html_cb); //為每一個檔案準備一個callback
	httpd_reg_page_callback("/index.htm", index_html_cb);
	httpd_reg_page_callback("/index.html", index_html_cb);
    httpd_reg_page_callback("/css/index.css", css_index_css_cb);
	httpd_reg_page_callback("/js/util.js", js_util_js_cb);
 }
 
 // /css/index.css的callback，可想成會回傳index.css的"內容"
 // html, js的callback也長的差不多，稍微改一下就好，這邊就不列出了
 void css_index_css_cb(struct httpd_conn *conn) 
{
	uint32_t len = 1192; // 請愛用ls -l index.css取得檔案size
	char *body = data_www_css_index_css; // 本例最上方定義的全域變數
	char *type = "text/css"; // type記得改

	if(httpd_request_is_method(conn, "GET")) {

		// write HTTP response
		httpd_response_write_header_start(conn, "200 OK", type, len);
		httpd_response_write_header(conn, "Connection", "close");
		httpd_response_write_header_finish(conn);
		httpd_response_write_data(conn, (uint8_t*)body, len);
	}
	else {
		// HTTP/1.1 405 Method Not Allowed
		httpd_response_method_not_allowed(conn, NULL);
	}
	httpd_conn_close(conn);
}

這樣就完成了！但每次改html/css/js都要重新跑一次perl，手動改C code，重新compile，有夠難用的啦，哈哈哈。有空再寫個script或找其他方法了。

雖然很麻煩，但至少網頁有變好看啦...哈哈...

(我澆！)