Mobile UI Best Practices

Discussion about recent product features & solutions!
20 posts • Page 1 of 2
v3gard
Posts:9
Joined: Tue Aug 23, 2016 7:27 am

Mobile UI Best Practices

Post by v3gard »

I'm looking for best practices in terms of developing panels for the Mobile UI Client.

My current project is designed for desktop applications. Some of the features that are nice to have for desktop client (e.g. on mouse hover) does not work with tablets. For this reason we are thinking of moving all those symbols indicating "onMouseHover" to a separate layout (8) and disable that alltogether if a mobile UI is detected, but keep it enabled if a regular UI is accessing it.

I'm thinking that I'm not the only one here with these kind of issues, so I wanted to get a discussion going. Which CONTROL features are you using for detecing mobile UI / remote (normal) UI? What are you doing to improve the user experience for your mobile UI users while still keeping it nice and familar for normal UI users?

Are there any official documentation on this?

Practices found so far:


Built-in functions for detecting mobile clients in CTRL (3.15):
  • isMobileDevice(), which returns true only if you're on Android or iOS.
  • getApplicationProperty("deviceClass") to get the current device class used.
Built-in functions for accessing instruments on mobile device, such as the GPS sensor (see full list of functions here):

Code: Select all

#uses "CtrlMobile"
if (isMobileDevice() && geoOpen()==0)
{
  mapping mGeo = geoPosition();
  string latitude = mGeo["latitude"];
  string longitude = mGeo["longitude"];
  dpSet("MyGPSLocation", "latitude:" +latitude + " longitude:"+longitude);
  //Typically stores "latitude:-20.0931271532 longitude:57.7121795465"
  geoClose();
}
Practices for detecting mobile UIs without the built-in functionality of 3.15:
Using global variables. Touch panel UIs has defined global variables like so:
addGlobal("IsTouchPanel", BOOL_VAR);
and querying it like this
globalExists("IsTouchPanel")

mkoller
Posts:741
Joined: Fri Sep 17, 2010 9:03 am

Re: Mobile UI Best Practices

Post by mkoller »

First, you can design new panels explicitely for mobile devices, using the "Device Class" concept, where the UI searches different subdirectories depending on the current device you're using.
Check the online help qthelp://wincc_oa/doc/Mobile_UI/mob_ui_device_class.htm

If you'd rather go with CTRL scripting in existing panels, you can use the function isMobileDevice(), which returns true only if you're on Android or iOS.
Also, you can use the CTRL function getApplicationProperty("deviceClass") to get the current device class used.

RudiKreiner
Posts:198
Joined: Mon May 16, 2011 2:10 pm

Re: Mobile UI Best Practices

Post by RudiKreiner »

In our projects we have a similar configuration in that we have desktop PCs in a control room and small touch panels spread around the machine.
The respective UIs share many of the same panels but we also have different requirements for the different types.
We solved this by having the touch panel UIs create a UI global variable like this:
addGlobal("IsTouchPanel", BOOL_VAR);
and querying it like this
globalExists("IsTouchPanel")
in places where we want different behaviour,
a solution very similar to what Martin described in the previous note.

v3gard
Posts:9
Joined: Tue Aug 23, 2016 7:27 am

Re: Mobile UI Best Practices

Post by v3gard »

Thanks for your feedback! What about the panel topology? Are there any built-in features in WinCC OA 3.15 to show a specific panel topology for a certain group, or for a certain device class?

leoknipp
Posts:2928
Joined: Tue Aug 24, 2010 7:28 pm

Re: Mobile UI Best Practices

Post by leoknipp »

With the Device class concept described by Martin Koller specific panels are opened on a specific device, if such a panel is existing.
There is no need to define an own topology for every device class.

Best Regards
Leopold Knipp
Senior Support Specialist

v3gard
Posts:9
Joined: Tue Aug 23, 2016 7:27 am

Re: Mobile UI Best Practices

Post by v3gard »

There is no need to define an own topology for every device class.
I was thinking more in the lines of day to day operations. For example, consider that you have 5 panels, A, B, C, D and E. In a production facility, you might have operators in the production department who prefer easy access to the panels they use 95% of the time (panels A, B and C), while those who work in maintenance prefers a different choice of panels (C, D and E). Since a tablet has a limited display space, the users who are part of the "maintenance" group hardly never uses panels A and B, and therefore has no need to see those panels in the panel topology.

leoknipp
Posts:2928
Joined: Tue Aug 24, 2010 7:28 pm

Re: Mobile UI Best Practices

Post by leoknipp »

It is not possible to define a user dependent panel topology.

With the permissions settings for a node in the panel topology you can define which user permission is required to be allowed to open the panel.
Nevertheless all items in the panel topology tree are displayed, even if the current user is not allowed to open them.

Best Regards
Leopold Knipp
Senior Support Specialist

v3gard
Posts:9
Joined: Tue Aug 23, 2016 7:27 am

Re: Mobile UI Best Practices

Post by v3gard »

Is it (or will it in the future be) possible to access the local instrumentation on mobile devices like you can on native Android and IOS applications? For example the GPS position of the device (for display objects close to your current position) or camera (e.g. for scanning QR codes)?

mkoller
Posts:741
Joined: Fri Sep 17, 2010 9:03 am

Re: Mobile UI Best Practices

Post by mkoller »

You already can. All functions are in the CtrlMobile extension.
Docu attached https://www.winccoa.com/fileadmin/image ... s/docu.txt
Attachments
docu.txt
(11.56 KiB) Downloaded 260 times

kilianvp
Posts:443
Joined: Fri Jan 16, 2015 10:29 am

Re: Mobile UI Best Practices

Post by kilianvp »

its possible to use the fingerprint sensor and the new Auth features?

20 posts • Page 1 of 2