Guidance for Creating Views for Touchscreen in Perspective

Ignition
1

Hi team,

We are planning to create some Views in Perspective, which will be accessed using a touchscreen. Before we begin, we have a couple of questions:

  1. Are there any specific guidelines or best practices we should follow when designing for touchscreens? (e.g., parameters, component properties, recommended button sizes, etc.)
  2. For text input fields, how can we automatically trigger an on-screen keyboard when the user taps the textbox?

Your assistance on this would be greatly appreciated.

Best regards,

2
  1. The best plan is just get idea from mobile apps. For example always use bottom dock menu instead of right dock menu.
  2. Don't use vertical slider in your application as this cause unwanted page refresh.
  3. Always consider card design instead of diagram if possible.
  4. Oriented your card to extend vertical not horizontally.
  5. If you have to use diagram use zoom and pan technique to make user experience better for large diagram. You can our module for that.
  6. Consider also US Ng touch events instead of mouse events.
  7. As I know any click on text input trigger your phone OS keyboard showup.
  8. When open popup set it's width by percent something like 90% is ideal. This prevent your popup get out of the device screen.
  9. Use dock instead of popup if possible.
  10. Always add a button to full screen your application on the browser.
  11. Forget table and use card design
2 Likes
3

Hi Nader,

First of all, thank you for your detailed and easy-to-understand guidance.

I would like to clarify that we will be using these new Perspective Views on an HMI touchscreen, not on mobile devices. So, it would be helpful if you could provide your advice specifically with that use case in mind—especially since features like a built-in keyboard are not available by default.

To recap, we have the following questions:

  1. Are there any specific guidelines or best practices we should follow when designing for touchscreen HMIs? (e.g., parameters, component properties, recommended button sizes, etc.)
  2. For text input fields, how can we trigger a small on-screen keyboard when the user taps the textbox?

Your continued support is much appreciated.

4

Ok got it. I was in the same scenario many years ago with raspberry pi 3 acts as HMI panel.

  1. For trigger keyboard based on your OS, you can call system.util.execute() whenever your text input touch by user to execute some kind of command or batch or script to bring the OS keyboard. The second method is just simply create your own Perspective version keyboard in bottom dock.
  2. The resolution and size of your touch screen is really important here. If it is low Res and small size just better to use mobile guidelines other wise not need to follow that.
  3. If your application is going to install your HMI panel in front of the your panel , use large size for every thing. For example use big SVG pushbutton graphic instead of normal button. And larger font size.
    Other than that I don't think there is any difference.
1 Like