[IoT自製玩具][Ameba Z2][Note 8] 想做个好看一点的网页，但不是在讲如何写网页喔...(2)

这篇讲一下如何使用"网页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  wwwhana@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); //为每一个档案準备一个callbackhttpd_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取得档案sizechar *body = data_www_css_index_css; // 本例最上方定义的全域变数char *type = "text/css"; // type记得改if(httpd_request_is_method(conn, "GET")) {// write HTTP responsehttpd_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 Allowedhttpd_response_method_not_allowed(conn, NULL);}httpd_conn_close(conn);}

这样就完成了！但每次改html/css/js都要重新跑一次perl，手动改C code，重新compile，有够难用的啦，哈哈哈。有空再写个script或找其他方法了。

虽然很麻烦，但至少网页有变好看啦...哈哈...

(我浇！)