ICP DAS USA ISaGRAF VP-23W7, Руководство пользователя

Страница: 74 / 192

ISaGRAF WinCE ViewPAC User Manual , V.1.6 , 1/2017 by ICP DAS
4-24
4.4 Design The Web Page
After finishing the ISaGRAF project & download it to the ISaGRAF WinCE ViewPAC, we are going to
design the Web Page for this ISaGRAF project.
If you haven’t practiced “ Chapter 3: Setting Up A Web HMI Demo ” listed in the, it’s better to do it
once to get familiar with it .
We will use “
Microsoft Office FrontPage 2003 ” (or advanced version) to build web pages in this manual.
User may choose your prefer web page editor to do the same thing.
You may refer to the finished web pages of this example in the ISaGRAF WinCE ViewPAC CD-ROM at
design time. However it is better to do it one time by yourself to get more understanding.
ISaGRAF WinCE ViewPAC CD: \napdos\isagraf\vp-25w7-23w7\wp-webhmi-demo\example1\
4.4.1 Step 1 – Copy The Sample Web HMI pages
These is a sample Web HMI pages in the ISaGRAF WinCE ViewPAC CD-ROM:
\napdos\isagraf\vp-25w7-23w7\wp-webhmi-demo\sample\
Please copy this “sample” folder to your drive and rename it, for example, “
example1 ”.
The basic Web HMI files include 2 folders and 3 DLL files and 4 htm files as below.
Folders
1 ./img/ (default image files - *.jpg , *.bmp , *.gif )
2 ./msg/ (default message files – wincon.js & xxerror.htm)
DLL Files
1 whmi_filter.dll (three DLL files)
2 login.dll
3 main.dll
HTM Files
1 index.htm (first default page)
2 login.htm (the Web HMI welcome page)
3 menu.htm (the page-menu page, normally on the left on the Internet Explorer)
4 main.htm (first page when successfully login)

User may put his own image files into the folder named as “user_img”. And put user-defined
JavaScript file or css file into the folder named as “user_msg”. Other folder name is not acceptable
by the ISaGRAF ViewPAC Web HMI.

The “ index.htm ” file is the default entry page of the web server. User should not modify it. The
“index.htm” re-directs to the “login.htm” file in 1 to 2 second if someone visits the ISaGRAF PAC via
the Internet Explorer.

User may modify the “login.htm” , “menu.htm” & “main.htm” to fit his own need. We will only
modify the “main.htm” in this example.