Web Monitoring wtih W2D

<< Click to Display Table of Contents >>

Navigation:  STM32F4 Target > Demos > Waijung Demos > Network Monitoring and Control >

Web Monitoring wtih W2D

Previous pageReturn to chapter overviewNext page

demo File: web_monitor.mdl

This model is for target STM32F4 Discovery, update model then build to program to target board. See here for Setup Blocks information.

w2d_web_monitor_detail

w2d_setup_detail

Description

Using Waijung WebPage Designer (W2D) tool to make a web interface for monitoring value (sine wave) on MCU Webserver and displaying on web browser as Text, Gauge, Bar Gauge and Chart. Sine value goes from 50 to 100 to 50 to 0 to 50 and so on.  Green LED lights up when sine value >= 90 while Orange LED lights up when sine value <=10.

Hardware Setup

w2d_hardware_monitor

Web Interface Setup

Drag & Drop 3 Frames, 1 Gauge, 1 Bar Gauge, 1 Display, 1 Text Input, 1 Chart into drop target.

w2d_web_monitor_design

Configure each item using the following information. Notice the order of each item id. More details here.

w2d_web_monitor_sqlite

What should be happening?

Sine value goes from 50 to 100 to 50 to 0 to 50 and so on.  Green LED lights up when sine value >= 90 while Orange LED lights up when sine value <=10. Gauge, Bar Gauge, Text Input and Chart show the value of sine read from SQLite table. Gauge, Bar Gauge and Text Input update every 600 ms. Chart update every 1000 ms. The Chart keep 50 points of sine value.

w2d_web_monitor_page

The Appearance on Chome for Android

w2d_web_monitor_page_mobile