Page History

Hands-on exercises for navigating Designer interface and using productivity features.

Tutorials → Designer| Tutorial | How-to Guide | Reference

1. Open Designer and Set Preferences

Launch Designer

1. From Solution Center, open your solution
2. Designer launches automatically
3. Welcome page displays solution information

Configure Your Workspace

1. On Welcome page, find Designer User Preferences
2. Select your preferred Theme:
   • Try Sky (light mode → Navy at night)
   • Notice how UI changes with theme selection
3. Set Auto-save to Every 10 minutes

2. Explore Navigation

Quick Navigation Bar

Test each shortcut on the top left navigation bar:

1. Click Go to Designer Home Page icon - returns to Welcome page
2. Click Go to AssetTree icon - jumps to Unified Namespace
3. Click Go to Displays Draw icon - opens display editor
4. Click Go to Runtime Startup icon - shows startup configuration
5. Use Navigate Back arrows to navigate history

3. Create Quick Tags

Rapid Tag Creation

1. Go to Unified Namespace → Tags
2. Create placeholder tags quickly:
3. Click "New Item" or use the fast creation shortcut, by clicking on the "Name" cell, pressing "Space" then "Enter", create three tags using this procedure

Multiple Tags Edition

1. Select all three tags (Ctrl+Click or Shift+Click)
2. Right click the selection and click on "Edit Combined Rows"
3. Change the tag type to Double or Decimal

4. Test Drawing Environment

Create Simple Display

1. Go to Displays → List
2. Click on the "New Item" button, choose Basic → Page (Canvas) and name it "Test"
3. Click OK button and the draw environment will open automatically

Draw Basic Elements

1. From left toolbar, select Rectangle tool
2. Draw a rectangle on canvas
3. With rectangle selected, look at Properties Panel (right side)
4. Change Fill Color to element blue

Add Tags to Display

1. On the right side of the display, under "Drag Tags to Display", drag and drop the created tags to the canvas area
2. Choose "Insert Textbox"
3. Arrange them on the display, using the alignment buttons on the top menu

5. Explore Alarms Module

Copy-Paste Workflow

1. Return to Tags (use Quick Nav icon)
2. Select your three

Create Solution Structure (3 min)

Create New Solution

1. Open Solution Center
2. Click New
3. Configure:
   • Name: TankFarmMonitor
   • Template: HeaderLayout
   • Product: FactoryStudio (or your license)
4. Click Create
5. Designer opens automatically

Create Asset Folders

1. Go to Unified Namespace → AssetTree
2. Create structure:

   TankFarm/
   ??? Tank1
   ??? Tank2
   ??? Tank3

Step 2: Configure Tags (5 min)

Create Basic Tags

Using simple types (no templates yet):

1. Go to Unified Namespace → Tags
2. Create these tags:

Tank 1 Tags:

1. Copy-Paste for Tank 2 and 3:

• Select all Tank1 rows (Ctrl+Click)
• • Copy (Ctrl+C)
  • Paste (Ctrl+V)
  • Find/Replace: Tank1 → Tank2
  • Paste again and replace Tank2 → Tank3

Add Simulation

For testing without real devices:

1. Select Tank1_Level
2. In properties, set:
   • Min: 0
   • Max: 100
   • Simulation: Ramp
   • Period: 60 seconds
3. For temperatures:
   • Tank1_Temp: Random, 20-30°C
   • Tank2_Temp: Random, 20-30°C
   • Tank3_Temp: Random, 20-30°C

Step 3: Setup Alarms (3 min)

Copy Tags to Alarms

1. Go back to Tags table
2. Select level tags:
   • Tank1_Level
   • Tank2_Level
   • Tank3_Level
3. Copy (Ctrl+C)
4. Go to Alarms → Items
5. Paste (Ctrl+V)
6. Configure each row:

1. Copy first row, paste, modify for Tank2 and Tank3

Step 4: Configure Historian (3 min)

Copy Tags to Historian

1. Go to Tags table
2. Select all level and temperature tags
3. Copy (Ctrl+C)
4. Go to Historian → Tags
5. Paste (Ctrl+V)
6. Set intervals:
   • Level tags: 10 seconds
   • Temperature tags: 30 seconds

Storage Configuration

1. Go to Historian → Storage
2. Use default SQLite for testing
3. Set retention: 30 days

Step 5: Create Main Display (7 min)

Setup Display

1. Go to Displays → Draw
2. Create new display: Overview

Quick Tank Creation

For each tank:

1. Draw Rectangle (tank body)
   • Size: 200x300
   • Fill: Light gray
   • Border: Dark gray, 2px
2. Copy Tag to Display:
   • Go to Tags table
   • Select Tank1_Level
   • Copy (Ctrl+C)
   • Go back to display
   • Paste (Ctrl+V)
   • Text box appears with tag binding
3. Add Bargraph:
   • Draw rectangle inside tank
   • Double-click for properties
   • Dynamics → Bargraph
   • Expression: Tag.Tank1_Level
   • Direction: Bottom to Top
4. Add Values Display:
   • Add TextBox
   • Type: Level: #Tag.Tank1_Level# %
   • Copy, paste, change to: Temp: #Tag.Tank1_Temp# °C
5. Status Indicator:
   • Draw circle
   • Dynamics → FillColor
   • Expression: Tag.Tank1_Status
   • Limits: 0=Gray, 1=Yellow, 2=Green
6. Duplicate for Other Tanks:
   • Select all Tank1 graphics
   • Copy and paste twice
   • Use Replace (Ctrl+H): Tank1 → Tank2, Tank3

Step 6: Create Trend Display (3 min)

Add Trend from Historian

1. tags
2. Copy (Ctrl+C)

1. Navigate to Alarms → Items
2. Paste (Ctrl+V)

1. Notice tags automatically create alarm rows
2. Set simple limits (e.g., Hi: 80, Lo: 20)

6. Review Track Changes

See Your Modifications

1. Click Track Changes
2. View list of all changes you've made:
   • Tag creations
   • Display modifications
   • Alarm configurations
3. Notice "RowState", "ChangedObject" and  "Date Created/Modified" (you can right click the grid header and enable the columns visibility)

7. Build and Test

Build Solution

1. Go to Runtime → Build and Publish
2. Click Build button
3. Check Output panel at bottom for any errors
4. Green checkmark = successful build

Quick Test

Configure Chart

1. Set time range: Last hour
2. Add navigation buttons to return to Overview

Step 7: Create Simple Report (3 min)

Production Report

1. Go to Reports → Text
2. Create new: DailyReport
3. Add content:

   DAILY TANK REPORT
   Date: @Info.Date@
   
   Tank 1: @Tag.Tank1_Level@ %
   Tank 2: @Tag.Tank2_Level@ %
   Tank 3: @Tag.Tank3_Level@ %
   
   Average: @Tag.Average@

4. Go to Scripts → Tasks
5. Create task to calculate average:

   csharp

   @Tag.Average = (@Tag.Tank1_Level + 
                   @Tag.Tank2_Level + 
                   @Tag.Tank3_Level) / 3;

Step 8: Test Solution (2 min)

Start Test Mode

1. Press F5 or click Run Test
2. Verify:
   • Levels changing (simulation)
   • Alarms triggering
   • Trends updating
   • Navigation working

Test Checklist

• All tags showing values
• Bargraphs animating
• Alarms at 90% and 10%
• Trend showing history
• Report generating

Step 9: Run Solution (2 min)

1. Go to Runtime → Startup
2. Select Development profile
3. Click Run Startup

Open Clients

1. Web Browser: http://localhost
2. Mobile: Use tablet browser
3. Navigate through displays

Productivity Tips

Copy-Paste Workflow

The power of copy-paste:

1. Create once in Tags
2. Copy to Alarms, Historian, Points
3. Automatic binding when pasted to displays
4. Bulk operations with Find/Replace

Quick Duplication

For similar equipment:

1. Configure one completely
2. Copy all related items
3. Paste and Find/Replace names
4. Saves 70% configuration time

Direct Tag Dropping

Alternative to copy-paste:

1. Select tags in tree
2. Drag directly to display
3. Auto-creates appropriate control

Next Steps

Add Complexity Gradually

Now that basics work, add:

1. Device Connection (10 min)
   • Replace simulation with real PLCs
   • Map points to tags
2. User Security (10 min)
   • Add login screen
   • Configure permissions
3. Advanced Graphics (15 min)
   • Import P&ID backgrounds
   • Add animations
   • Create popups
4. Business Logic (15 min)
   • Calculate KPIs
   • Add recipes
   • Create schedules

Learning Resources

• Tutorial: Connecting to Devices
• Tutorial: Adding Scripts
• Tutorial: Security Configuration
• Video: Advanced Graphics

Troubleshooting

Tags not updating:

• Check simulation enabled
• Verify runtime started
• Look for typos in names

Copy-paste not working:

• Ensure compatible types
• Check column mapping
• Verify destination table

Alarms not triggering:

• Check limits are correct
• Verify tag values reaching limits
• Ensure alarm group enabled

2. The solution will start the runtime
3. Click Stop when done (it forces the application to stop running)

8. Explore Output Panels 

Bottom Workspace Area

1. Look at bottom of Designer window
2. Click different tabs:
   • Output - build messages
   • Find Results - cross-reference searches
   • Error List - validation issues

In this section...