Year of the Groov [LONG POST]

Hello everyone,

I have been lurking these forums for some time now, popping into see if I can find any troubleshooting tips and tricks whenever I get into a sticky situation. You have all been very helpful and I appreciate the community that is here. However, I have been holding back this post until I felt that I have honestly wrapped my head around how this product works and what I was able to accomplish with it. If anyone has any advice, or shared the same experiences that I have had please respond and let me know what it is that you have done, it would be great to know that I am not alone in this and hopefully solve some of the concerns that I have come across. A lot of this may seem silly, with many work arounds for what should have simple solutions but after speaking with Reps, Engineers, and even attending the Opto22 course at their headquarters and showing the trainers in person what I am dealing with, I am left with bewilderment and not a whole lot of answers.

Last year the AR1 came across my desk with the instruction to see if it were a viable option to replace Qlarity Foundry that we were running on all of our systems. I was tasked with building a Groov project that was clear, responsive, and durable that closely replicated the Qlarity interface that the customers have been using for some time now.

Since this is a web-based interface there was no way to auto launch the project when the customer turned their computer on. To solve this I used Chrome as my browser, opened Groov view, added a shortcut to the desktop, opened up the shortcut properties then added " -kiosk" to the end of the target, then added this shortcut to the startup file in the registry for windows. Now when the customer turns on their computer the browser will launch into the project, in fullscreen, without the taskbar, with no right click properties and virtually blocks the user from exiting the project until they plug in a physical keyboard. Since we are using a touch screen this was a safe and secure method to keeping the end user out of the places we dont want them in as well as auto launching the project. However, this created another thing to consider, Groov view does not have an embedded keyboard, when Chrome is in kiosk mode it does not allow the Windows touch keyboard to run, and if I do not want to the customer to access anything other than the project I cannot give them a keyboard to use. My work around for this was to use a Chrome virtual keyboard extension. This works well but is not ideal as I do not want the dev or google to one day pull support for the extension, or worse yet entirely remove it from the store, but it will work in the mean-time.

Scaling: I started to build my first page and immediately noticed that the grid in the workspace was cut off on the bottom which made it difficult to find true center of my page. Regardless, I manually counted out where my center was and placed a Page Navigator and a few lines of text to act as a Welcome screen. I squared everything up and launched into Groov View where everything on my monitor was centered nicely but on the panel PC that the customer would be using all of my gadgets were way off to the right side of the screen. After all the research that I did on Groov, and all the conversations that I had with other users I was told explicitly that Groov scales itself to the devices aspect ratio. This has limitless possibilities and was a major selling point for us. Well, it was obvious that this feature does not work for all ratios. I am using a Teguar 2945-15 touchscreen PC with a resolution of 1024 x 768 (4:3). In order to center my project on this panel PC I had to open a blank page, show the grid, place a Vertical Line gadget and a Horizontal Line gadget on the page, then move it one increment at a time until I could no longer see it on the panel PC. Once my outer boundaries were set I did the same process with my center using a measuring tape to find the center of the panel PC. Now that I had my exterior boundaries and center point laid out I built my own workspace grid using Line gadgets. The result is all of my gadgets and images hanging over the Groov Build workspace on the right, which makes building my pages particularly finicky and time consuming to ensure that what is being displayed for the customer is neat and tidy. At this time I had an idea, that perhaps Groov acts similarly to Opto Display Configurator in that the display scales to the working environment and not necessarily the devices being used to display your project. So to test this I opened up Groov Build on the panel PC and built a new page centering everything the normal way. Launching Groov View from the panel PC and looking at the page built from that panel PC it is still pushing all of my gadgets to the right side of center. So for now it seems like I will have to work with my home made workspace in Build. I was fortunate to attend the Opto22 training course shortly after dealing with this scaling issue and brought a backup of the project with me so that I could show the engineers what I was dealing with. Everyone who saw it was as puzzled as I was and did not have an answer as to why this was happening.

Gadget Customization: I continued to build my pages using this unorthodox manner and was disappointed by the lack of gadget customization in comparison to Qlarity or Opto PAC Display. Specifically, I am unable to change the text based on the state of my variable. For example if I have a variable that == 1 I want the text to say "TO DRUM" and if the variable is == 0 I want the text to say "TO TANK". Another disappointment was not being able to make basic shapes. If I wanted to have a specific segments of my page visually separated from the rest of the information by using a differently colored background than the page background all I have available to do so is to separate it with Lines or to use the Group Header gadget, which does not allow me to change the gadget background color as it is set to whatever my background color is. The only option I am left with is to either give the customer a legend book that explains which color represents the state of each button that isn’t simply ON/OFF and have several Group Headers that are all the same color or I use Illustrator to design my own graphics and change my Button Display Mode to Image and add a simple colored square/rectangle to my image library. Which is exactly what I did and lead to a slew of different problems.

Image Library Problems: I called the Opto22 hotline to find out what the pixel density of the Build grid was, and the rep that I spoke to could not find out what it was. So I started from 1px upward, creating a 1x1px SVG and bringing it in to the project and increasing the size by 1 pixel at a time until I had a rough idea of how big a single box of the grid was. I settled on 8x8px and started there. Once I had designed an image that closely resembled the Button gadget (with customized text based on variable state) I brought it back into the project and started tagging. I also made a simple rectangle and square of a different color to act as my “group” background. This worked for a considerable amount of time until I needed to add another “group” background, instead of copying and pasting the previous background I added it again from the image library into the workspace and enlarged it to match another one on the page. However, I could not get the second image to match the same size of the first image, the second one kept snapping just smaller than the first even though it was the same image from the library, a bizarre but not important observation. Fast forward to introducing the project to the customer; on two occasions now in the middle of testing, and in the middle of operation, certain images are not being displayed and instead a ‘corrupt image’ icon is shown. When this happens (on page 1) some images are shown as corrupt and others are not, if I navigate to page 2 the same thing is occurring where some of the images are corrupt, then I go back to page 1 and now some of the ones that were corrupted are now being shown but others are not. After moving through pages several times I cannot find a pattern to this occurring, it is completely random. I opened the project on my laptop and looked at the Image Library and all of the images are there, then going into Groov View and the same thing is occurring on my laptop as it is on the panel PC. I called the Opto22 hotline again and the best answer that they could give was that it was probably a browser error and Chrome was not handling the request for the image properly. To reboot the screen and the problem should go away. However, this is not an acceptable solution. The customer should not have to exit the browser in the middle of operation just to be able to see what button they are pressing. My image library is not large, for the entire project it is only 22Kb of SVG images. When looking at the System Information in Groov Admin, there were no signs of failure, nothing in the error logs, nothing to raise suspicion. After trying different browsers I noticed that the same problem would occur in Chrome, Firefox, and Edge. One of the difficulties with this was that it would happen randomly making it difficult to troubleshoot exactly what was causing this to happen. Here are the image links

Finally, and worst of all is this inexplicable run away: There are a few items that run away on the customer. If they want to increase the speed of a pump, or change the position of a damper they hold the Groov gadget assigned to that output and let go when they have reached the desired position, however, on several occasions, once they have removed their finger from the icon the output stays engaged and continues to drive whatever it is assigned to until the operator presses in an empty space on the screen. At first I assumed it was an issue with the touch panel in the screen, however using a coordinate tool to log the location and input values of the users ‘clicking’ I can confidently say that the panel is acting as it should, with no sticky keys. Next I looked at the strategy, with my watch windows opened and manipulating the value of my variable from within the watch window itself and not the Groov, I was unable to make the value “bind”. Every time I changed the IVAL state, the XVAL would follow suit nearly immediately. Once again, after numerous tests with the variable in question, and others for safe measure, I can rule out the Control Strategy as the cause for this problem. Next was to look at the AR1, we recreated the problem and opened our watch windows. Sure enough after pressing the Button gadget and removing our finger from the screen the variable remained ON until we clicked in empty space within the page. We decided to open up the Groov project on a desktop PC to try and recreate it with a mouse, to eliminate the touch input. What we saw was something I could only call input binding, when the icon is pressed and dragged around even slightly you can see the cursor change from a pointing finger to a circle with a line through it. Once the cursor image has changed and you let go of the mouse the output value returns to its OFF state as it should, however, when the mouse is simply dragged across that icon without clicking the mouse the output value then changes to ON as if it were engaged. Furthermore, as you can see in the video, after the input is ‘bound’, if I press the gadget next to it (Burner Close) I am still engaging with the Burner Open gadget, after that single press it seems that the “binding” breaks and the mouse is able to hover over any button without engaging it. We then decided to try it on yet another device, my laptop, and used the other browsers that I had to see if the problem was isolated to Chrome or to the AR1. When the project was launched in Firefox the project did not load whatsoever. I was greeted with the usual ‘Not a Secure Site’, clicked proceed anyway, logged into my project, then nothing loaded except the black item bar at the top of the page without my page navigation menu, without my events icon, and without the menu icon. Moved on to Edge, where the project partially loaded and only some gadgets and images were displayed, while others were not (similar to our corrupt image problem). Regardless, we were able to recreate the issue in Edge. This leaves me to believe that our problem lies on the AR1 as we have eliminated the Strategy, the touch panel, the panel PC, the touch input, the mouse input, and the browsers. I understand that this may seem like a non-issue given that no operator in their right mind would act so aggressively as I did in the video, nor would they be attempting to drag icons around the screen. Except two concerns arise from this. Firstly, you do not need to be so deliberate in trying to “bind” the input. My coworker, the operator and I have caused this to happen simply by holding the button with our thumb and just by the weight of our arm being extended causes our hand to move slightly and causes this ‘binding’. Secondly, our screens use a PenMount driver, where your finger acts as the mouse, this leads to the operator pressing the gadget then removing his finger and the cursor stays hovering over whatever was last pressed, and as you can see from the video this hovering action engages the gadget without needing it to be pressed. This is a serious concern for us, especially given the nature of what it is they are controlling with this button as it could create life threatening circumstances if not closely monitored. Here is a Dropbox link to the video (please use sound to hear when the mouse is being clicked). The semi circle on the bottom left of each Button gadget is tagged the same as the button so that we can clearly see when the button is being pressed. The value in the light blue box just above these buttons is the input coming back from the burner itself and you can clearly see when the Burner Open or Burner Close button is pressed that the burner is moving and “running away”. https://www.dropbox.com/s/zg0mrr86mtpi5ka/AR1%20Input%20Binding.mp4?dl=0

Again, if anyone has encountered the same situations or has any advice on how to fix some of these thing we would greatly appreciate a response.

Thanks for taking the time to read this novel of a post, and I hope you have a good day,

Thom

Ok, for the grid/rendering stuff: groov View doesn’t pay attention to the aspect ratio of your screen at all. All it cares about is the width of the browser viewport. There’s a longish explanation of how it works here: Resizing Gadgets in Groov Build, but quickly:

  • Gadgets are placed and sized on a fixed grid, not by pixels.
  • In desktop layouts, a page is 96 grid units wide.
  • In handheld layouts, a page is 32 grid units wide.
  • At rendering time, we scale the gadgets up and down to stretch that grid out to fit your browser viewport, keeping grid units on integer pixel boundaries.

Launching Groov View from the panel PC and looking at the page built from that panel PC it is still pushing all of my gadgets to the right side of center. So for now it seems like I will have to work with my home made workspace in Build. I was fortunate to attend the Opto22 training course shortly after dealing with this scaling issue and brought a backup of the project with me so that I could show the engineers what I was dealing with. Everyone who saw it was as puzzled as I was and did not have an answer as to why this was happening.

I wish someone had grabbed me when you were here so I could have seen that. :-/

You should try running Windows in kiosk mode with edge as the browser. It lets the user use the built-in virtual keyboard, but still locks out every other function except the browser.

1 Like

Those are Indicator Buttons, right? The place to look when this happens is usually your web browser’s console logs: we can’t always catch errors from there and forward them to the server logs. Those errors definitely look like the web browser wasn’t able to load the image from the server.

Also: you mentioned looking in groov Admin, but I’m not clear on whether you looked in groov View’s logs. They aren’t the same thing.

This I haven’t seen. We do our own event handling on button type stuff for various reasons that aren’t really relevant anymore, so I could see it getting stuck when the browser’s built-in button handling wouldn’t, but I haven’t seen it happen myself or heard any other reports.

EDIT: Thinking about this a bit more, those are Momentary Buttons, right? They in particular have interesting event handling code, so we could tell the difference between a user letting off the button vs. the browser failing to talk back to the server.

I have seen this happen with sliders when using a touchscreen device. Whether it was a phone, tablet, or Surface pro.

Based on Thom’s description, this sounds like typical javascript image behavior, if the user drags (even within the image), the mouse up event will never fire.
Quick and dirty fix is to attach a listener to dragend and treat it like mouse up. This also allows the user to drag outside the image and and the dragend still fires. Buttons and images behave slightly differently as buttons don’t have the draggable attribute true by default.
Setting draggable to false on the image will allow the mouse up to fire when the user drags within the image, but not when they drag off the image (Basically it will have the same behavior as a default button).

Saying that, I haven’t looked how groov view is handling mouse events, so I may be way off.

Something to play with.

http://jsfiddle.net/qp7wmjLx/1/

Thanks for that info, that would have been great to find at the beginning of this project, I should have dug a bit deeper into the matter. Why didnt the tech that I was speaking to when I called direct me to you or your post on resizing? Yeah I wish that you would have seen it too, it was right at the beginning of all this and would have satisfied my employer to come back with better answers than “this is weird”.

Sorry, it was a long day Friday. I meant to say that I looked at the System Information in Groov Admin and the View logs. I was speaking to a friend about it and we were both grasping at straws trying to find answers. Im going to be doing some testing today to try and force another image failure and hopefully the console picks it up. Thanks for that info, didnt even cross my mind to look there.

Yes we are using momentary buttons. But based off of what Nickvnlr said, if its happening on a Slider gadget as well I cant see it being the way Groov handles momentary events. Im starting to lean towards it having something to do with a JS drag feature as Philip pointed out but I am rather inexperienced when it comes to the language so that was a shot in the dark. If you could email me at thom@optiprime.ca so that we can keep this conversation going off the forums and then I can CC my Operations Manager and keep him in the loop that would be great. We need to address this ASAP and Im not sure how to bandaid the solution until its properly dealt with.

Hey Nick,

Thanks for the suggestion. I tried that out and unfortunately that wont work either for our screens. With this screens resolution the windows keyboard takes up nearly half the screen and covers the Groov popup window. I could change the resolution but that would distort the appearance of the project.

Well this just adds to my suspicion that it is something do with JS and not the project.

Philip,

Thank you very much for that tidbit. I am still rather new to the Opto platform and in my limited experience with JS I didnt want to start talking out of ignorance. I was suspecting it had something to do with a drag-able object but could not think of how to prove so. I will look at the link you posted.

Thank you again.

EDIT: This is exactly what I needed to show the higherups, thanks a lot this is perfect.

Sorry for the bombardment, I hope you guys down south have a good holiday but for us its a work day and this just popped up on me.

I was getting ready to try recreating the scenario where the image would not load and it happened before I finished building the page. The console is picking up the error, which is good, but how am I supposed to fix this and keep it from happening again?

Thom

EDIT: Wanted to eliminate some devices from my network to look at possible request collisions. It happened again. This time the only thing on the network was an R1, AR1, and my desktop.

Any ideas guys? If this cant be addressed and dealt with Im not really sure how to proceed. I cannot in good faith sell a product that continues to do this.

Going through the errors shown in that browser log, the first 3 lines:

[WARN] Update check request failed.
Failed to load resource: net::ERR_NAME_NOT_RESOLVED - groov.com/groov_media_responder.php
Uncaught error <snipped for brevity>

That indicates that you’re on a private network with no access to the outside internet, which is fine and likely expected. groov’s trying to check for updates and can’t find the update check server.

The rest of the errors just look like either an overloaded AR1, or a flaky network. The browser’s having trouble talking back to the AR1. Two unreachables:

  • 372_1537471365003.svg - This is the failed image load
  • /api/v0/updates?since=blah - Regular heartbeat check back to the server, watching for things like page changes and whatnot.

And then two timeouts, both for the heartbeat check.

If you look back in groov Admin, what does the CPU load look like? It’ll be in the System Information link on the left side of the page, and should give you a display that looks like this:

I’d be interesting in hearing what your network looks like too. Switch vs hub, etc.

If you haven’t yet, it’d probably be a good time to contact Product Support to get a proper trail on the issues you’re running into.

Thanks for the quick response, hope you had a good holiday.

Yes, we are on a private network, our system dev is very particular about security and at this point does not want it public.

Here is the System information

The network is an interesting one.
For the first image failure posted above we had two Weidmuller (model 124084000000 10/100) switches (1 managed, 4 un-managed). The first switch had the AR1, R1, and a jumper from managed1 to managed2. The second switch has the desktop on it. This was to simulate the customers set up.

The second image failure posted above I used only a single switch, with everything on the unmanaged.
On both set ups I ran a broadcast to ensure I could see everything and I could.

I have contacted product support about this when it originally happened and they told me it was most likely a browser error and there was nothing they could do about it but advised to reload the browser to clear the issue. Reloading the browser obviously does help but its not a viable solution for the customer who is in the middle of operation.

The AR1’s idle. If you just leave a ping running on the desktop machine do you see anything drop or time out?

Yeah the idle was a little confusing. When it happened in the field the operator was still controlling another system from a different screen when I took the screen shot below.

The first screen shot I posted is from today in the office.

Only running the continuous ping for about 2 minutes, I am not getting drop out or time out with good response time.

Quick question about the images… How were they made?
What size (in kb) are the problematic images?
Some SVG image tools include a lot of extra cruft that is not needed and tends to make the images bigger than they need to be.
The extra stuff in the images can also cause loading issues. Perhaps this is more the core issue?

Hey Ben,

As per the advice of John G I used Adobe Illustrator to draw out the images. There is no problem image per se as they all end up doing the same thing. If you look at the second picture in the original post, you can navigate back 1 page and then come back to the Motor Control & Silo page and some of the images that were displayed the first time around are now not displayed and others that were there are now not. I can navigate through the entire project and all the images in my library are intermittently displayed when the error occurs.

The images used in that second picture are 9.11KB a piece.

Ok, that sounds good then…
Anything in the groov Log when an image fails load?

This is what is shown in the Groov Log when the image fails to load.

EDIT: I found this while continuing through the log:

That exception is harmless for SVG images. Can’t generate a thumbnail because it’s a vector image, not a raster one.