Step 5: Create a Web page

Use HMWIN Studio to configure the PLC connections and to create a Web page that shows the status of four PLC variables.

A: Direct connection of the devices, B: Connection using a network switch

HMWIN Studio uses tags to display PLC variables. Tags contain information about the memory location and data type of the variables.

In this example, we define two tags for each PLC:

For the FP0R PLC, we define a Boolean tag for a 1s clock pulse and an integer tag for the current value of a ring counter that is increased by one every 2,5ms.
For the FP0H, we define a Boolean tag for the digital output Y0 and an integer tag for the current value of the memory area DT0.

The Web page will contain two lamps to visualize the Boolean values and two numeric fields to display the integer values.

Special flags and special data registers cannot be accessed directly by Modbus TCP but must be moved to an accessible memory area first. Refer to the Control FPWIN Pro7 online help for system variables and the corresponding address offsets.

This task includes the following steps:

: Configure the PLC connections
: Create tags for PLC variables
: Create a simple Web page

Configure the PLC connections

Start HMWIN Studio and select File > New project to start the project wizard.
Enter a project name and click Next.
Select the FP‑I4C device and click Next.
Select Unified and click Finish to complete the creation of the new project.
Go to ProjectView > Configuration and double-click Protocols.
Make settings for the protocol used by the FP0R PLC:
1. Click the + icon and select Panasonic FP/FP7.
  
  Make the following settings:
  
  PLC network: Deactivated
  
  Alias: FP0R
  
  Node ID: 1
  
  Media: Ethernet
  
  Request delay (ms): 0
  
  IP address: 127.0.0.1 (localhost)
  
  Port: 9094 (must match the specified port redirection in the FP‑I4C unit)
  
  Timeout (ms): 500
  
  PLC models: FP
2. Select OK.
Make settings for the protocol used by the FP0H PLC:
1. Click the + icon and select Modbus TCP.
  
  Make the following settings:
  
  PLC Network: Deactivated
  
  Alias: FP0H
  
  IP address: 192.168.0.21 (must match the IP address setting in Control FPWIN Pro7)
  
  Port: 502
  
  Use UDP/IP: Deactivated
  
  Encapsulated RTU: Deactivated
  
  Timeout (ms): 2000
  
  Server busy timeout: 0
  
  Busy retry time (ms): 20
  
  Modbus ID: 1
  
  Max. read bit block: 2000
  
  Write holding registers: 16
  
  Write coils: 15
  
  PLC models: Generic Modbus (0 based)
2. Select OK.

Create tags for PLC variables

Go to ProjectView and double-click Tags.
Create tags for the protocol used by the FP0R PLC:
1. Select the FP0R protocol and click the + icon to add a new tag.
  
  Make the following settings:
  
  Memory type: R - Internal rel
  
  Offset: 901
  
  Data type: Boolean
  
  SubIndex: 0x0C
2. Select OK and rename the tag to Pulse1s.
3. Click the + icon to add another tag.
  
  Make the following settings:
  
  Memory type: DT - Data reg
  
  Offset: 90019
  
  Data type: short (corresponds to INT in the PLC)
4. Select OK and rename the tag to RingCounter_2ms5.
Create tags for the protocol used by the FP0H PLC:
1. Select the FP0H protocol and click the + icon to add a new tag.
  
  Make the following settings:
  
  Memory type: Coil status
  
  Offset: 1 (corresponds to Y0 of the PLC)
  
  Data type: Boolean
2. Select OK and rename the tag to DigitalOutput_Y0.
3. Click the + icon to add another tag.
  
  Make the following settings:
  
  Memory type: Holding registers (corresponds to DT in the PLC)
  
  Offset: 400000 (corresponds to DT0 in the PLC, 400001 is DT1 etc.)
  
  Data type: short (corresponds to INT in the PLC)
4. Select OK and rename the tag to DataRegister_DT0.

Create a simple Web page

Go to ProjectView > Unified > Normal and double-click 1 : Page1.
Go to View > Toolbars and Docking Windows > Widget Gallery to open a collection of HMI objects.

The widget gallery is divided into several categories. Simply drag a widget on the page of your project.
Add two numeric fields:
1. Go to the Basic > Text/Numeric category in the widget gallery.
2. Drag the 99999 widget on the page.
3. Go to the Properties panel and select the + icon in the Value field to add a tag to the widget.
4. Select the RingCounter_2ms5 tag and click OK.
5. To add a label to your widget, drag the [Label] widget next to the 99999 widget and enter "FP0R RingCounter_2ms5" in the Text field of the Properties panel.
6. Repeat the procedure for the DataRegister_DT0 tag and add the label "FP0H DataRegister_DT0".
Add two lamps:
1. Go to the Symkeys > HM Symkeys real elements category in the widget gallery.
2. Drag a lamp widget on the page.
3. Go to the Properties panel and select the + icon in the Value field.
4. Select the Pulse1s tag and click OK.
5. Add the label "FP0R Pulse1s".
6. Repeat the procedure for the DigitalOutput_Y0 tag and add the label "FP0H DigitalOutput_Y0".
Select Run > Download to Target to transfer the page to the FP‑I4C unit.

HMWIN Studio searches for all units on the same subnet. Select your device and click Download.

The first time you perform a download, HMWIN Studio will ask you to install the HMI Runtime on your FP‑I4C unit. The installation takes approximately 2 minutes. Then the unit will automatically reboot.
Display the Web page by entering the IP address of your FP‑I4C unit (192.168.0.1) in your browser.