We use a lot of mousedown/mouseup events on our old mobile module on Ignition v7.9. This allows us to set a OPC tag to 1 on mousedown, and then 0 on mouseup. (Moving equipment from iPad screen). I’m trying to recreate this on perspective.
I use the onTouchStart event and onTouchEnd event to accomplish this. I couldn’t get the onMousedown and onMouseUp events to work with Perspective properly. While it works, since now it’s HTML5 i guess, I can get a popup on the iPad when I hold down the button. This popup is prompting me to select the item/button and cut/copy/paste text. I read that there is a way to disable this popup on mobile version of safari using css, but I can’t find in perspective where you can inject custom css. Anybody have any ideas or solutions to this? Thanks in advance.
There are 3 ways to affect the CSS in Perspective. I’ll focus on two, since the third (theme css) is still a work in progress.
- Style Properties - these are the values that you add to a component’s
styleproperty - Named Styles - these are the Style resources you can create and add to a component’s
style.classesarray.
Which (if either) will work for you really depends on what CSS you’re specifically looking to add, as neither supports all possible CSS selectors/functions.
What CSS are you looking to add?
If neither of those work, we can talk about the theme css, but I’m a little hesitant to go there since that system is changing. Since it’s not technically a documented/supported feature yet, there’s a chance that changes there right now would be lost there on upgrade.
From searching the web, here is a way to disable the select feature (on mobile safari at least).
-webkit-user-select: none;
Not sure which place this CSS code would go?
Sorry about this. I just answered my last question. I added a new ‘value’ to the button called, ‘-webkit-user-select’, then set the actual value to ‘none’ and it worked! Thanks for your help!
Hey Micah,
Where exactly did you add this property? I can’t seem to get this solution to work.
Did you have to bind it to another property once you created it?
Hopefully this post isn’t too old to for a reply.
Thanks for any help.
Well I just went through all of my code, which to my knowledge has been working for years, and now I can’t find that piece of code anywhere lol. go figure. Where I think would be most logical is under the style props of the button. Add a custom ‘value’ and set it to ‘webkit-user-select’ and set the value to ‘none’. I’m still looking for where I put that code and if I find it I’ll write back.
Thanks for the reply! Was very surprised to see this today haha
Yup, that is the most logical spot I could think to put it as well. Weird that it doesn’t work for me.
Weirder still is that this is the only thread I can find on the whole of the Internets that pertains to this issue. I may submit a ticket today, I usually get a response within a day or so.
I’ll let you know what they say if you’re curious.
Yes I am definitely interested. I also agree that it is weird there are not more instances of this across the Internet. I found that answer on a web development forum a couple years ago and when I tested it , it did work, it was just a question of how to fit it into ignition.
For those who find this thread: Adding an Object Member value called “user-select” to the “textStyle” PROPS and setting the value to “none” should work.
I tried this and it didn’t work for me. The user still gets the popup to copy/paste on the iPad. I also tried webkit-user-select:none as well. Evidently whatever I did in the past didn’t carry over and the operators still experience this issue so I’d love to hear an answer for this.
The style properties you need to remove this annoying touch feature on an IOS device are:
-webkit-touch-callout: none;
and
-webkit-user-select:none;
Unfortunately, Ignition designer won’t allow you to add a style property that begins with a hyphen, so you have to manually add to an Ignition CSS file on your gateway.
For windows:
C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\
For RPI:
opt/Ignition/data/modules/com.inductiveautomation.perspective/themes/
For me, I’m using RPI and will only be using Ignition for my home automation app. Therefore, I just placed the following in the light theme entry point file light.css:
* {
-webkit-touch-callout: none;
-webkit-user-select:none;
}
The * means the styling will apply to every component in the DOM.
Thanks for the added comment Chris. Themes hadn’t yet stabilized when I originally replied, so I appreciate the addition for future users.
No worries Perry. Yes, I thought it was worth adding the fix since it would be happening to everyone running a perspective apps on a touch iOS device.
Thank you so much! This solved my issue.
* {
-webkit-touch-callout: none;
-webkit-user-select:none;
}
I'm unable to get this working by adding to my themes file. I'm trying to prevent these popups on numerical entry fields. I have successfully added other things, but the popups for Cut, Copy, etc.. still come up in my iOS, did something change?
*Update - this may be due this not working on iOS 16.
Make sure you are adding it to the right theme file. For example, in my case, I had to add it to
C:\program files\inductive automation\Ignition\data\modules\com.inductiveautomation.perspective\themes\light.css
Here is a screenshot of that file for me:
Thanks, I made sure it was in the correct one, even trying all others. We are using light-warm, so I put it there and confirmed in the Chrome browser developer that the css shows the entries I made. However, I wonder if it doesn't work on iOS 16+? Note that we all have iPhone's using the Perspective iOS app.
I’m using IOS16.1.2 with the iOS perspective app and it’s still working for me.
Is your gateway running on a different machine from your designer? If so, the CSS files will be located on both machines. You need to make the change on the gateway machine.