Basic Webpages Demo

WIZ550WEB Web Server(YouTube Link)
https://www.youtube.com/watch?v=6aOf8vgB-gc

The Screenshots of Basic Demo Web Page were captured from Google Chrome Browser version 37

Provided basic demo web page of WIZ550web is in tab style of one HTML page (index.html). The configuration and purpose of each tabs are as below.

 

  • Device Settings: Device information, Network / Serial Port configurations
    • Device Information
    • Network Configuration
    • Serial Port (for Data & Debug / AT commands)
  • Digital I/O Status: Indicates Digital I/O's Direction and Status
    • On-board LED Status
    • Digital I/O Direction / Status: When the I/O is output direction, users can be set On/Off
  • ADC Status: Displays the Analog input value changes into a bar graphs
    • Analog Input Signals
  • I/O Configuration: Digital I/O's Direction and Alias settings
    • Digital I/O State and Alias Configuration
    • Digital I/O Settings Factory Default
  • Serial Data: Serial data transfer examples via Webpage to UART1.
    • Serial Tx (Web to UART1) / Rx (UART1 to Web)

Device Settings

The 'Device Settings' tab is configured as below.

The user can check the device information like MAC address / Firmware version and set the network information (IP address, DHCP options and etc.), serial port configuration through the 'Device Settings' tab. After adjusting the settings, if the [Save Settings and Reboot] button is pressed, the configurations is saved and the WIZ550web module reboots. Please note that the module will change the settings after reboot. 

If the 'DHCP' option has enabled (DHCP Enable: IP address allocated from DHCP server), Network informationHTML input tag is disabled and attribute changed to disabled. If the user successfully allocated the IP address from DHCP server after module reboot, the modified debug message is output to terminal as below.

Digital I/O Status

The 'Digital I/O Status' tab is configured as below.

[On-board LED] WIZ550web's LEDs can be control by On/Off button in web page. 
[Digital I/O Status] Digital I/O Status indicates the current status. When the I/O is output, users can set On/Off. Each I/O information are configured as below.

  • Pin number (e.g., D0): Direction (Input / Output / NotUsed)
  • Status LED Images ( Blue LED /  Green LED /  Off)
  • On/Off Buttons (for Output directions)

For 'Input', 
- On/Off button is not indicated. If the input signal is 'high', the 'green LED' is turned on. 
For 'Output', 
- On/Off button is indicated. If the output signal is 'high', the 'blue LED' is turned on. 
For 'NotUsed', 
- On/Off button is not indicated. turned off the LED (off LED). 

Users can set each I/O directions in 'I/O configuration' tab. See below for digital I/O status setting examples.

ADC Status

The 'ADC Status' tab is configured as below.

The Analog input signal through ADC changes into a bar graphs is displayed in real-time.

WIZ550web baseboard is equipped with Potentiometer and Temperature sensor on A0 / A1. For example, by adjusting the value of the Potentiometer (A0), users can see the changes in the graph as below.

I/O Configuration

The 'I/O Configuration' tab is configured as below.

Change of the I/O Directions and Aliases setting will be reflected immediately. Each I/O's LED images are the same as I/O status page (Blue / Green / Off).

Only when the 'Not Used' option is selected, the red 'X' is displayed for visibility.

When you press the [IO Settings Factory Reset and Reboot] button, the WIZ550web module factory reset is executed, and is rebooted. Please note that the module is rebooted into default settings.

If you change the various settings, it is displayed as below.

Serial Data

The 'Serial Data' tab is configured as below.

In this page, user can test the 'Serial data input/output through Webpage to UART1' (Serial data Tx/Rx) functions.

Type 'hello world!' in the 'Data to send' input box and then press the [Send] button.

Serial terminal shows the string from web page through UART1.

On the contrary, if the user types the string on serial terminal, the 'Received data' box in web page shows the typed string.

Note

Favicon

Favicon is a complex word of 'favorites' and 'icon', and is displayed as a small icon in the address bar / tabs of web browser (e.g., Google Chrome, MS Internet Explorer). By using this, the user is able to know the provider of the web page. The example basic demo web pages include 'favicon'.

User can add the 'Favicon' as the following steps

  1. Create the target image to 16×16 sized icon and save in the name of 'favicon.ico'
  2. Move the 'favicon.ico' to web content storage
  3. Insert the link code at the top of the 'index.html' page

e.g., <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon'>