Website on a microcontroller

Question

I want to create a simple web server on a SAM4E. I have found a example but I would like to change the website. Now it's just plain html code:

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 );
        }

Is it possible to include an index.html and include that in the build? So I don't have to write the entire code but only include a simple html file.

Answer 1

It seems the code is C, so if it is not a limited edition on that chip model, something like this may work:

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

This is ugly solution, best is to have the file content mixed to code in strcat calls. By ugly I mean this code reads file char per char. (credits to [1])

I am not sure (do not have sam4e at home nor at office) how you may store the file that it would be accessible that way, so I have also third solution:

You can create your own html components (see [2]), and include them from normal server and then use them with a custom tag, so the content is rich but the code on microcontroller is thin and neat.

Your imagination sets limits to the components simplicity, example of one gauge I made was something like:

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

which used css3 and wrote a gauge with 100 x 200 size with only that much code.

Component creation is javacript:

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

, that you can import in script tag.

[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/

Answer 2

You could do something like this (serving a template), but if the webpage is going to be displayed on a browser like Chrome and can run Javascript then it's much simpler to have your function there just output a JSON object (as a string) like: { "pagehits": 50, "tasks": [ {"task": "t1", "state": "idle", "priority": 1}, {"task": "t2", "state": "running", "priority": 2} ] } and access it from a URL like "/get-data"

Then your HTML ("/index.html" or whatever other file/string) can just use Javascript to make an AJAX call to "/get-data", get that JSON, and render it to the HTML DOM with Javascript however you want. It's also nice because if you want to change a lot about how you display this you can just change that HTML and JS, but your "/get-data" method/URL sends the same data. You can also use it from pages and gives you more flexibility. Like being able to combine that task list with some other kinds of data, all in one page and only needing to transfer small amounts of data. Browser takes care of rendering and displaying it.