iT邦幫忙

0

[IoT自製玩具][Ameba Z2][Note 7] 想做個好看一點的網頁,但不是在講如何寫網頁喔...(1)

在之前的Note 4,已經學會了如何使用SDK的"內嵌式"陽春網頁,如下。
檔案:component/common/example/httpd/example_httpd.c

void homepage_cb(struct httpd_conn *conn)
{
// 中間略

	// GET homepage
	if(httpd_request_is_method(conn, "GET")) {
		char *body = \ // HTML code直接寫在C code裡的"內嵌式"寫法
        "<HTML><BODY>" \
        "It Works<BR>" \
        "<BR>" \
        "Can test GET by <A href=\"/test_get?test1=one%20%26%202&test2=three%3D3\">/test_get?test1=one%20%26%202&test2=three%3D3</A><BR>" \
        "Can test POST by UI in <A href=\"/test_post.htm\">/test_post.htm</A><BR>" \
        "</BODY></HTML>";  

但我們一般寫網頁,不可能只有一個index.html而已,通常還有css、javascript,甚至是jpg、png等圖片檔,這樣要怎麼寫進C code呢?
/images/emoticon/emoticon06.gif
以我淺薄的知識,想出了以下幾種解法,還有實際上操作遇到的困難。(如果有其他解法請一定要告訴我!)

1. 製作file system,把整份網頁資料夾(例如 www/)存進去,再讓httpd的"/"路徑指定到www/

  Amebaz2 SDK裡有FAT file system的example,只要打開"CONFIG_EXAMPLE_FATFS"這個macro就可以了。可支援filesystem建立在
  a. 開發板內的flash,位置0x200000 ~ 0xA9000,共512KB => 我還沒研究怎麼把www/放進這個位置,但理論上應該可行
  b. 外接式SD card => 失敗。因為SDK內缺乏應有的header file,無法編譯。已經有去論壇詢問了~
  c. USB storage => README寫說只支援Ameba-1,所以不行

2. 維持原樣,把所有的檔案放進C code,文字檔容易,圖片檔的話嘛...

  a. 把圖片用html的方式呈現 => 請參考本網址。很神奇的方式,但會讓size暴增(該網頁的例子中,原本3KB的jpg,轉成html code會變成274KB),所以放棄此解法。因為經過實驗,我放了一個20多KB的jpg檔,網頁就開不起來了。
  b. 把圖片直接轉成binary,寫進http封包,並把header type改為image/jpeg => 這招可以,但如同我剛才說的,只要jpg大於20KB就會開不太起來。
  c. 比較大的圖片放在其他空間,用url指定過去吧 => 這招OK,寫法如下。

<img src="https://XXX.YY/XXX.jpg"></img>

/images/emoticon/emoticon10.gif

綜合以上幾個想法,最後使用了2.b和2.c(其實1.a應該才是正解?)。也就是html、css、js檔案我先轉成binary,圖片就用url。
下一篇來介紹一下轉binary的方法,也是使用SDK內附的小工具就好了喔!
/images/emoticon/emoticon20.gif


尚未有邦友留言

立即登入留言