Build your website interface

This page provides an introduction to creating your own embedded user interface (website) for uploading to your NetSat1 embedded web server

It is not an introduction to creating webpages from HTML, CSS, Javascript or any other web technology.  It assumes the user has, or can find information or tutorials what is already available

The user interface website is considered the of a Plug & Program embedded web server application

Before you start

Before starting your project please note the restrictions here .  This page also shows you how to upload your user interface website content to your Plug & Program embedded web server

Limited resources

By its nature an embedded webserver has limited resources.  This is particularly relevant to the space available to store your website content.  The Plug & Program embedded webserver uses a 4MByte flash memory module ( PNP-MEMFL32 ) for website content storage

Preinstalled demonstration website

Each Plug & Program embedded web server has a demonstration user interface website preloaded.  This interface is always available and can be accessed by going to http://ip_address/pnp/index.htm where ip_address is the ip_address displayed on the lcd display ( PNP-LCD16X2 module )

This website uses combinations of dynamic variable tags, form posts, javascript and css to interact with the NetSat1 embedded web server

Default page

The default start page is index.htm

When entering the address of your Plug & Program embedded web server into the browser with no specific page, the default start page is index.htm from your custom web content.  If you have not yet uploaded any custom web content, or if you did not include a page index.htm in your web content the resulting default page will be /pnp/index.htm per above

Static content

To create a website using static pages, simply create your web site content as you would for hosting on any other web server and upload it

Dynamic content

Displaying dynamic content in your website is enabled by including  dynamic variable tags in your source files:

  • dynamic variable tags are recognised because they are enclosed by the ‘~’ character e.g. ~version~
  • some dynamic variable tags also accept parameters e.g. led(1) refers to LED 1
  • most dynamic variable tags retrieve values but some also change settings
  • refer to the dynamic variables index for available tags already available and their functions

When the Plug & Program embedded web server reads a requested page from the stored website content it looks for dynamic variable names enclosed with the ‘~’ character.  It replaces the dynamic variable tag with the output identified by the tag before resuming serving the requested content

This mechanism that performs this substitution is similar to how you would achieve the same thing using PHP (for example) by inserting content into HTML.  However for a Plug & Program embedded web server this is instead done by functions written in C and compiled as part of the underlying embedded webserver firmware (Middle layer).  The C functions behind each dynamic variable available on the NetSat1 embedded web server are available here .   Refer here for our resources on customising the underlying firmware

inc dynamic variable

The ‘inc’ dynamic variable is particularly useful for reusing HTML segments resulting in saved website storage .  When the Plug & Program embedded web server  firmware encounters this dynamic variable it inserts the website content file named in the include parameter

For example ~inc(header.htm)~ will allow each page to use a predefined header file

Note however that dynamic variables in an included file are ignored