I’m working on a project where I want to host a website from it. I got to a point where I can get a HTML file with very basic formatting to work, but I cannot get media, CSS, JavaScript or any other things that are external to the .html file on my SD card to show up.
I am using relative links in the html file (eg <link rel="shortcut icon" type="image/jpg" href="src/favicon.png"/>) and everything is stored on the base directory of my SD card. The method for the web server is the same as in the tutorial, except I replaced the responseString with my StreamReader.
So I would like to know where I need to add or change what in order to get this to work.
PS: would it also be possible to pass variables to the HTML and if so, how?
TinyCLR provides html capabilities but it is not a “server” where you can just put files on SD cards. You can process the requests and send back images but all needs to be done manually.
I see. I think I’ll just do it less elegant and convert any images to Base64 and do CSS/JS internally to the HTML for now, until I build enough knowledge and confidence to do it differently.
Now I did look at the HTTP example again and saw that string.Format is used for passing variables, but when I use it with my code I get a System.FormatException upon accessing the page.
I put a {0} in my html, since it’s just plain text anyways (right?), and edited my C# code to the following:
string responseString;
using (StreamReader reader = new StreamReader(new FileStream($@"{drive.Name}index.html", FileMode.Open, FileAccess.Read, FileShare.Read)))
{
responseString = string.Format(reader.ReadToEnd(), ReadTemp().ToString("N2"));
}
Where ReadTemp() returns a double.
Not sure what is going wrong there, would appreciate it if I could get steered into the right direction.
I’m not sure how this fits your project design, but many IoT devices will use references to CDN or other cloud storage for fixed assets and just use the device to source json payloads or html that is dependent on that device’s state.
You can still target the device to host the top-level html and thus directly to kick off the web session, but the top-level html will then reference cloud resources for scripts and other static content and only pull device-specific dynamic content from the device. It does require that you set up cloud storage (aws S3; Azure blob storage; or a CDN).
This helps reduce load on your device and reduces the need for firmware updates to update otherwise static content.
Again, I say this without knowing your specific design requirements, but hope this is helpful.
1 Like