East Docked Slide-Out - How to?

Ignition
1

Greetings…

I have a West docked nav slide-out working really well. Mouse enters a 25px ‘bar’ which expands it to reveal a tree nav of the entire system, and clicking a swap-link or mouse exiting the zone closes it back to 25px. This was relatively easy to do, but… I am wanting to also create this same effect on an East docked window. However, I am stuck on the scripting method I would use to slide the nav bar from it’s closed size (25px) to it’s open size (240px) on an East dock.

Although there are a few other gears turning in this box, the expansion / contraction is using a timer component to do the math iterations. This simple script works great on a West dock… not so much on an East dock.

EDIT: Code removed

My convoluted logic would have thought that a docked widow increasing in size would push itself out from the East docked position in a right-to-left direction, but, nope… doesn’t seem to. It just expands into the nether region (off-screen-right). So, how would one go about expanding an East docked window from right to left? Negative math?

Thanks for any insight…
Steve

Windows 7
Ignition 7.9.7

2

You have to move the window, as position always refers to the upper left.

3

Note that using system.gui.transform() makes it a lot easier to reposition and resize elements at the same time - no manual timer based logic required.

4

I use that for animating elements, but did not know it works for docked windows. Thanks!

5

So does this mean the window type has to be Floating (as opposed to docked East) to set position?

6
  1. Create a floating window, and “dock” it to wherever you want it
  2. Make it not opaque. Remove all mouse listeners from the window.
  3. Create your menu, either in a group or template, place on this non opaque window
  4. Use system.gui.transform to move in and out
7

Thank you for the stepped response but I don't believe this is the solution I am needing. I require a docked window that expands and retracts to maximize Main window real estate. I could be wrong or missing something, but in your scenario it seems the docked window size would have to be big enough to accommodate the group or template moving in, thus would cause the Main window elements to resize and create dead space (when the 'slide-in' menu is not visible) because the Main window will not overlap the docked window.

I have been an Ignition dev for a relatively short period, so please let me know if I do not understand your post. And please explain what I missed.

Thanks
Steve

8

I have not been able to make system.gui.transform() work with a docked window.

9

Looks like I didn’t do my research; system.gui.transform() requires that the component to be manipulated is an Ignition component, which prevents you from modifying more basic Java objects like the window/root container. You can call setSize explicitly - what you’d have to do is shrink the ‘main’ window, and ‘grow’ the docked window to compensate.

10

Sorry, I updated my response. You need a floating window, and you need to manually “dock” it. Remove the mouse listeners, then you have a transparent window essentially. Slide the components in and out.

1 Like
11

That sounds more workable. :thumbsup: Would this floating window show on every screen automatically like a docked window, or would I have to inject code on every screen (of about hundred so far) to open it?

12

You just open it on startup once, then trigger the transform on the component whenever.

13

Awesome… thank you all for your assistance and precious time.

Cheers to beers [clink]
Steve

14

Docking it manually involves entering the value of the x, y positions. but when you change the resolution of the screen should you change the x, y positions?