Mobile smartphones and tablets - such as an iPhone, iPad, Android, Blackberry and more - can now access HMI / SCADA client screens created by Ignition via the Ignition Mobile Module. Ignition 7.2, set to be released January 25, makes mobile clients possible using the Mobile Module.
With the mobile module, you can launch any existing Ignition project on a mobile device. However that project may not be optimized for a mobile project. For example, the aspect ratio, security and more may not be set up appropriately. This design guide will help you create a project that is optimized for mobile devices and keeps the look and feel consistent with those devices.
To create a mobile optimized project, follow the steps below. At the end of the guide you can download a sample project using the downoad link.
Note: To create a mobile project you need Ignition 7.2 or higher
Below is a sample of what we are going to create:
1) First create a new project in Ignition from the Ignition Gateway Configuration page or Ignition Designer.
2) Open the newly created project in the Ignition Designer.
Before we start creating any new windows we need to enable mobile launching on the project and fill in a few parameters such as the project width and height.
3) In the Ignition Designer, click on Project -> Properties from the menu bar.
4) Select Mobile -> General on the left hand side of the window.
5) Here we have some mobile specific settings. First we need to make sure mobile launching is enabled so let's check the Enable Mobile Launch checkbox.
Secondly, we want the size of our project to be the full size of the device. For example, an iPhone will report a different size than an iPad will. We want our project's size to fit to the device so select Fit to Device under the Viewport section. Lastly, when you open a mobile application you want to go straight to the application, so you can enable the auto-login feature. Check the Enable Auto-Login checkbox and fill in a username and password you want to use initially. In this example, we will use admin and password.
6) Now that we have set the project to fit to device, we want the project's minimum size to be extremely small to avoid any pesky scrollbars. Select Client -> User Interface from the Projects Properties window. Set the minimum size width and height to 0. By setting these values to 0 we are simply turning off any scrollbars.
7) Now we can start building some windows. From the file menu select File -> New -> Main Window to create the first window.
The reason to use Main Windows is because the Start Maximized flag is already set. We need this flag set since we have fit our project to the device. That way the windows will be maximized filling in the full space of the device.
8) Next, we need to specify an initial size of the window. We want to design for a specific aspect ratio. For this guide, we will design our windows to model an iPhone application. Select the window in the project browser and change the Size property to Width: 320 and Height: 460.
9) One thing you notice about iPhone applications is the consistent look and feel. Each application has the same header and textured background. We can do the same thing in Ignition. Select the Root Container of the window. You will notice a Texture property of the container in the Property Editor. You can set this property to any image stored in Ignition. You can download an example background below.
Next, we need to add a header to the window. The header is also a simple image so you can drag in an image component into the window and set it to the following image:
From there you can just add a label with a white foreground as the title.
10) Next, let's look at creating the menu items from the sample above. These are just simple rectangle components with rounded edges with the following foreground color:
168,171,174,255
and the following background colors:
white: 255,255,255,255
blue: 1,95,230,255
The arrows to the right are just simple images as well. You can download both images below.
If you want you can change the background color and arrow using the mousePressed and mouseReleased events of the rectangle component.
That is it! Basically, you can expand the project further by swapping windows in and out for navigation and changing the screens to your liking. To get an example of the project shown simply download it below:
Download Mobile Optimized Project Example (Right click and select 'Save As')