微控制器上的网站

物联网 微控制器
2021-06-09 04:51:48

我想在 SAM4E 上创建一个简单的 Web 服务器。我找到了一个例子，但我想更改网站。现在它只是简单的 html 代码：

if(( NULL != pcRxString)
        && ( !strncmp( pcRxString, "GET", 3 ) ))
        {
            /* Update the hit count. */
            ulPageHits++;
            sprintf( cPageHits, "%d", (int)ulPageHits );

            /* Write out the HTTP OK header. */
            netconn_write( pxNetCon, webHTTP_OK, (u16_t) strlen( webHTTP_OK ), NETCONN_COPY );

            /* Generate the dynamic page... First the page header. */
            strcpy( cDynamicPage, webHTML_START );

            /* ... Then the hit count... */
            strcat( cDynamicPage, cPageHits );
            strcat( cDynamicPage, "<p><pre>Task          State  Priority  Stack #<br>************************************************<br>" );           

            /* ... Then the list of tasks and their status... */
            vTaskList( ( signed portCHAR * ) cDynamicPage + strlen( cDynamicPage ) );

            /* ... Finally the page footer. */
            strcat( cDynamicPage, webHTML_END );

            /* Write out the dynamically generated page. */
            netconn_write( pxNetCon, cDynamicPage, (u16_t) strlen( cDynamicPage ), NETCONN_COPY );
        }

是否可以包含 index.html 并将其包含在构建中？所以我不必编写整个代码而只包含一个简单的 html 文件。

2个回答

代码似乎是 C，所以如果它不是该芯片型号的限量版，这样的事情可能会起作用：

int c;
FILE *file;
file = fopen("index.html", "r");
if (file) {
    while ((c = getc(file)) != EOF)
        strcat( cDynamicPage, c);
    fclose(file);
}

这是一个丑陋的解决方案，最好是在 strcat 调用中将文件内容混合到代码中。丑陋的意思是这段代码读取每个字符的文件字符。（学分 [1]）

我不确定（家里或办公室都没有 sam4e）您如何存储可以通过这种方式访问​​的文件，所以我还有第三种解决方案：

您可以创建自己的 html 组件（参见 [2]），并从普通服务器包含它们，然后将它们与自定义标签一起使用，因此内容丰富但微控制器上的代码又薄又整洁。

您的想象力限制了组件的简单性，我制作的一个仪表示例如下：

<m-gauge m-height="200"  m-width="100">

它使用 css3 并仅用那么多代码编写了一个 100 x 200 大小的仪表。

组件创建是javacript：

var MGauge = document.registerElement('m-gauge');
document.body.appendChild(new MGauge());

，您可以在脚本标签中导入。

[1] https://stackoverflow.com/questions/3463426/in-c-how-should-i-read-a-text-file-and-print-all-strings

[2] https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

你可以做这样的事情（提供模板），但如果网页将显示在像 Chrome 这样的浏览器上并且可以运行 Javascript 那么让你的函数在那里输出一个 JSON 对象（作为字符串）就简单多了: { "pagehits": 50, "tasks": [ {"task": "t1", "state": "idle", "priority": 1}, {"task": "t2", "state": "running", "priority": 2} ] } 并从像“/get-data”这样的 URL 访问它

然后您的 HTML（“/index.html”或任何其他文件/字符串）可以使用 Javascript 对“/get-data”进行 AJAX 调用，获取该 JSON，然后使用 Javascript 将其渲染到 HTML DOM 中，但是您想要. 这也很好，因为如果您想对显示方式进行很多更改，您只需更改 HTML 和 JS，但是您的“/get-data”方法/URL 会发送相同的数据。您还可以从页面中使用它，并为您提供更大的灵活性。就像能够将该任务列表与其他类型的数据组合在一起，全部在一页中，并且只需要传输少量数据。浏览器负责渲染和显示它。

其它你可能感兴趣的问题
上一篇超过 300 米和最小 20 KB 数据速率的协议？ 下一篇有没有办法用一个接入点创建 WiFi，它应该覆盖一栋大建筑？