<< Click to Display Table of Contents >> Navigation:  Waijung Blockset > Waijung WebPage Designer (W2D) > W2D Web Interface Setting up

Setting up Web Interface

Installation

The steps for W2D installation is as follows;

 

Open your Chrome Browser and point to your MCU Webserver address (192.168.1.30 as demo). It will direct you to login.html page. Please wait here at the login screen about a couple minutes for W2D to initialize the database for the first time.

Login page during initialization process when first start (or resetting the database to default)

After the initialization process finished, sign in with default username:admin and password:admin . It will direct you to main page.

If the initialization process stop in the middle, please delete database file from micro SD card on the SQLite module and refresh login screen again.

Design Web Interface

Click menu "Design" to start designing your web interface. Then click menu "Pages" to load up the pages you design. The rest of the menus are described here.

Tool Box on the right lists all available items. Drag items into Drop Target to add page component. New page will not be saved until you press Save/Update on Action Bar.

The following lists all available items and their meaning.

Once an item, e.g. Frame, is Dragged & Dropped into Drop Target, its properties will be listed in Property Box as shown below.

You need to specify those properties following these guide lines. Then press Save/Update on Action Bar to save the edited page into database.

Note: For Alarm item, you can upload the alarm sound (small .wav) file to server via setup.html page

Clip Showing How to use Map and Photo Items

Note: To set refresh interval and table access (real table or dv),
it is recommended to set values at 'event' and 'table' on the first Frame item.

Chart Properties

1.Static Chart -- [where you load many rows from data table to display on chart at once, never refresh]

The chart property will tell chart what Column to use as xaxis, and what Columns to use as yaxis. There can be more than one yaxis. Yaxis minimum and maximum can also be specified, as well as the number of points per each line to keep data. The default values are, min=0, max=100, point=30.

Property has these formats; (properties in square brackets are optional)

xaxis yaxis1,yaxis2,yaxis3 [min=0 max=100 point=30]

(e.g. time adc1,adc2)

2.Dynamic Chart -- [where you keep loading new row entry (on time interval, specified in Event prop) into chart]

The chart property will tell chart to use browser time as xaxis, and use what Columns as yaxis. There can be more than one yaxis. Yaxis minimum and maximum can also be specified, as well as the number of points per each line to keep data. The default values are, min=0, max=100, point=30.

Property has these formats; (properties in square brackets are optional)

auto yaxis1,yaxis2,yaxis3 [min=0 max=100 point=30]

(e.g. auto adc1,adc2 min=0 max=4 point=50)

Chart Table

1.Static Chart -- [where you load many rows from table data to display on chart at once, never refresh]

Select 'SQLite Table Column' then specifying the table name and (optionally) condition for querying data from table into chart.

Property has these formats;

table_name or table_name SQLite_optional_condition [SM for SQLite Method only]

(e.g. sensors where adc1>50 or sensors limit 20)

2.Dynamic Chart -- [where you keep loading new row entry (on time interval, specified in Refresh Rate) into chart]

Select 'SQLite Table Column' then specifying the table name and row condition for querying one row of data from table adding into chart, or set it to 'Mapped Data Storage' in case of Direct Method [DM]

Property has these formats;

table_name row_condition [SM]

(e.g. sensors where rowid=1)

Gauge and Bar Gauge Properties

Specifying the Minimum and Maximum as well as a Caption for Gauge or Bar Gauge. It assume min=0, max=100 and name=ColumnName/VariableName as default.  Note: for dial gauge you have option to set number of major ticks and minor ticks on the gauge face.

Loading Web Interface

You can load the web interface you have created from menu "Pages". List of pages available will show up under main menu as page number. "Click" to go to that page.

SQLite Query Statement

You can use general SQLite Statement here. This page will allow you to CREATE/DROP table, INSERT, UPDATE, DELETE, SELECT data on table. Other statements are not thoroughly tested and may or may not work. The SQLite Query Statement Input are there to help you fix and fine tuning your database table.

Examples of Valid SQLite Statements

The most common uses of SQLite Query are shown (for example) here. (CAP are SQLite Keywords and NonCAP are your addition, lower case SQLite keywords also work.)

CREATE TABLE IF NOT EXISTS table_name (col1 INTEGER, col2 REAL, col3 TEXT)

DROP TABLE table_name

CREATE TABLE table_name (id INTEGER PRIMARY KEY, col2 REAL, col3 INTEGER, col4 TEXT)

INSERT INTO table_name (col2,col3,col4) VALUES (1.25,10,'your first text')

INSERT INTO table_name (col2,col4) VALUES (54.2,'your second text')

UPDATE table_name SET col2=12.5, col3=20 WHERE col4='your first text'

UPDATE table_name SET col3=30 WHERE col2=54.2

SELECT * FROM table_name LIMIT 2

SELECT * FROM table_name WHERE col3=10

SELECT col4 FROM table_name WHERE col2<10

SELECT * FROM table_name ORDER BY col3 ASC

SELECT * FROM table_name ORDER BY col2 DESC

DELETE FROM table_name WHERE col4='your second text'