emWeb — Web Server to Control Target with Graphical Interfaces
Provide easy to use graphical interfaces to control your target. Easy to maintain by separating design and content.
emWeb allows you to use the most widely accepted language for providing Graphical User Interfaces in the world, HTML.
emWeb can not only be incorporated into embedded targets, but PC/Mac or even mobile applications as well.
Even targets that do not feature traditional network access via Ethernet cable or WiFi access can benefit by using a browser UI. With the IP-over-USB technology, SEGGER provides a state-of-the-art solution for USB devices to be powered by a browser UI.
Design only one UI that will work on any end user device.
For your product, using a browser based UI comes with a lot of advantages over a traditional application GUI. The biggest advantage, of course, is that you can operate the target from any host that features a browser, independent of the operating system. While this is a clear advantage to the programmer and designer of an UI, there are even more advantages for your customers, making your device more user friendly than ever before:
- No software to download or install
- Can be accessed and configured using any device with a browser (PC/Mac or mobile devices like smartphones or tablets)
- Can even be made available over the Internet
- Provide easy to use graphical interfaces for control or data acquisition
- Compatible with all browsers for PC/Mac and mobile devices
- Supports modern standards like WebSockets (additional add-on), REST, SSE and many more
- Independent of the TCP/IP stack: Any stack with sockets can be used
- Can be used on embedded targets or PC (Windows/Linux/...) and Mac
- Samples for embedded targets and PC included, showing simple and advanced use cases
- High performance
- Small footprint
- Smallest configuration can run in a single task for multiple connections
Devices Using Browser UIs
Devices that use browser UIs are becoming more standard. The following devices already use browser UIs for configuration purposes:
- Routers, switches & access points
- Almost any IoT device
- Debug probes
- Many more gadgets
Let’s have a look at a few examples:
Printers are a popular examples for devices that already use a browser UI for configuration, at least if they support a network interface like Ethernet or WiFi anyhow.
While a browser based UI is typically thought of being exclusive to Ethernet or WiFi capable devices, this is not where it has to end!
Even targets that do not feature traditional network access via Ethernet cable or WiFi access can benefit by using a browser UI. With the IP-over-USB technology, SEGGER provides a state-of-the-art solution for USB devices to be powered by a browser UI. This allows using the same UI for device families that come in different models and features regarding their host interfaces.
An example for this would be different printer models of the same product family that come with different host interfaces. One model might come with USB only while another model features USB, Ethernet cable and WiFi. All of them can share the same browser UI.
Using the IP-over-USB technology, basically all devices that come with an USB connector can feature a browser UI. As almost all modern devices use regular USB for charging, this means all of these products are ready by their hardware to feature this state-of-the-art technology.
Typical examples of devices that benefit from a browser UI are non-stationary like:
- Wireless headphones (configuration of presets)
- MP3 player (configuration and playlist management)
- Fitness tracker (configuration and statistics)
Using a browser based UI is not exclusive to an external device being accessed. Due to the fact that a browser UI is operating system independent, it makes a great alternative for any kind of application GUI. UIs designed this way can also be easily integrated into other application. An example would be a configuration page of one application/product that can easily be added into any other application using the WebKit engine.
TCP/IP stack: emWeb requires a TCP/IP stack. It is optimized for emNet, but any RFC-compliant TCP/IP stack can be used. The shipment includes a Win32 implementation sample which uses the standard Winsock API, as well as an implementation which uses the socket API of emNet.
Multi Tasking: The web server needs to run as a separate thread. Therefore, a multi tasking system is required to use the web server emWeb.
HTTP is a communication protocol originally designed to transfer information via hypertext pages. The development of HTTP is coordinated by the IETF (Internet Engineering Task Force) and the W3C (World Wide Web Consortium). The typically used protocol version is still 1.1 that gets extended by various sub-protocols.
The HTTP protocol itself is implemented on top of the TCP protocol.
|Application layer||Application layer protocol:|
|Transport layer||Tranport layer protocol:|
|Network layer||Network layer protocol:|
|Link layer||Link layer protocol:|
Ethernet (IEEE 802.3), ...
HTTP Communication Basics
HTTP is a challenge and response protocol. A client initiates a TCP connection to the Web server and sends a HTTP request. A HTTP request starts with a method token. [RFC 2616] defines 8 method tokens. The method token indicates the method to be performed on the requested resource. emWeb implements the major methods which are typically required.
|GET||The GET method means that it retrieves whatever information is identified by the Request-URI.|
|POST||The POST method submits data to be processed to the identified resource. The data is included in the body of the request.|
emWeb supports different techniques to create dynamic pages.
The Common Gateway Interface (CGI) is a replace mechanism that is used in conjunction with a template page. A visitor counter in a page with static content would be one of the simplest use cases.
The template page can be a simple HTML page with a placeholder for the counter value. Whenever the page is processed by emWeb, the placeholder will be exchanged for the output of a custom application code.
|Virtual files||Virtual files allow to deliver complete pages that are built when they are requested. Typical examples are XML files that represent the current state of an application and are therefore subject to change for almost every request.|
To request data, with AJAX the browser needs to poll for data.
Unlike AJAX, Server-Sent Events (SSE) are an HTML5 technique that allows a server to send data to the browser, without the browser permanently polling for data and therefore reducing unnecessary data overhead.
SSE works by the browser subscribing to the Web server and keeping the connection up for further data sent.
Dynamic page samples
emWeb Live Statistic Sample
The chart sample is part of the emWeb shipment. The sample can easily be modified to fit your needs.
In the sample application, that is available for Windows and can be downloaded below, emWeb is listening on TCP port 8181. To access the web page after starting the executable, the web browser should be directed to: http://127.0.0.1:8181.
emWeb Web server live statistics sample
emWeb supports the following authentication mechanisms.
As the name implies, the Basic Authentication scheme is a very simplistic mechanism for access control, in terms of security. The user name and password are transmitted in clear text.
While it is insecure by its design, it is still in use as SSL/TLS security in modern applications strengthen the underlying layers.
|Digest||The Digest Authentication scheme uses an MD5 based challenge/response handshake including nonce data. The password is never sent in clear text, which makes it a good choice in case a lightweight and secure authentication is required where SSL/TLS is not possible.|
emWeb supports both, POST and GET methods to receive form data from a client. An easy to use application API allows to retrieve and process form data in a simple and memory efficient way.