[REL] Floating Framework v1.2.1 [58197]

This mod allows other UI mods to appear within a configurable floating frame that can be dragged to any position on the screen.

Features

• Create dragable frames that can act as a container for UI elements
  
• Snap to edges of other floating frame & edges of screen
• Frames can be created directly on demand, or an option added to the settings screen for it to be toggled on/off.
• Frames keep their relative position if the PA window is resized.
• Frames can be set to remember their positions.

Usage

Create a Frame (global)
createFloatingFrame(id, width, height, options);

• id - a unique ID for the frame.
  
• width - the width of the frame
  
• height - the height of the frame
  
• options - a map containing additional options. Defaults shown in brackets are used if the particular option is not specified.
  • containment - selector string for containing element ("body")
    
  • snap - whether to snap to other frames (true)
    
  • rememberPosition - whether the frame remembers it's last position (true)
    
  • offset - where the top left of the frame will be positioned relative to. Defaults to top left. Can be one of:
    • topRight
    • bottomRight
    • bottomLeft
    • topCenter
    • bottomCenter
    • rightCenter
    • leftCenter
    • center
  • left - left offset from specified position
    
  • top - top offset from specified position
  • delayResize - adds a small delay (110ms) before the frame repositions after a screen resize. Needed on the start screen, as the container (starmap) only updates it's size 100ms after the window is resized (false).

Note that if offsetting from a center, you'll typically want to have left/top equal to negative half width/height of the frame.

Example: Commander HP frame:
createFloatingFrame('commander_info_frame', 320, 58, {'offset': 'topRight', 'left': -320})

Add content to a Frame
$('#id_content').append("<p>Your Content Goes Here</p>");

Note the '_content' suffix in the selector.

Add a UI settings toggle to show/hide the Frame (settings)
model.registerFrameSetting(id, displayName, showByDefault)

• id - the unique id of the frame
  
• displayName - the name to show in the settings screen. Will appear as "Frame: <display name>"
  
• showByDefault - specifies whether the frame is initially visible

This must be called frome within the settings screen.

Forget the last position of a Frame (global)
forgetFramePosition(id)

Installation
Current build: 58197 (version 1.2.1)
Requires the Settings Manager mod.

Step 1:
Install the PA Mod Manager: https://forums.uberent.com/threads/rel-ui-mod-manager-v1-2.50726/

Step 2:
Launch the Mod Manager and click Install next to "Floating Framework" on the "Available Mods" page.
Alternatively, download the rFloatFrame_v1.2.1.zip attachment on this post, and extract it to <PA Install directory>/PA/media/ui/mods/

Step 3:
Tick the box for "Floating Framework" in the Installed Mods list to enable to mod.

This is going to be immensely helpful as a base for some of the stuff we have planned

It's global too, so it even works in the front-end menus

You probably hear this a lot, but I think I love you

Nice, this will help a lot !

Great work raeven. My money is on cola for the first mod that is floating window friendly.

There's quite a few that can benefit:

• Anchor Buttons
• Customizable In-Game timers
• Commander Health Display
• In Game Timer
• In Game Reminders Timer
• Installed Mods list
• Unit Info
• Mex Counter

Plus some under development.

This makes me wonder how long it will be until we can fill those windows with extra views of the game world.

Will this make it possible to move the ui stuff we have now?

Awesome! I'll be adding this to my timers mod as soon as you're done.

Coming along!



Now implemented:

• Floating frames remember their position
• Can be set to toggle via options

I've successfully got the Installed Mods List, Commander HP and some native UI elements to work with the system so far.

Still to add:

• Default positions
• Window resize logic (currently the X & Y position stays the same, need to think about what is desirable)

Alright, this is mostly done now, although I can't release until the settings manager mod is done also.
Default positions and window resize logic have been added, it's now based of the relative position (percent wise) from the top & left. So if your window is 75% from the left and 25% down the screen, on resize it will adjust it's position to maintain that percentage.

I can't wait to put this in my timers mod! Thanks for all you do. Quick question, will this remember the last position of windows so the user's window configuration stay across sessions?

Correct, if you set 'rememberPosition': true. This persists when moving between screens in PA and between launches of the game.

Sweet! Thanks.

Wow. oh. Wow.

I didn't think this would happen until Uber did a bit more on their end!!!

I'm really excited.
I wonder if we could collectively map out where we want the mods to go.


Ideally, we can figure out a skeleton or framework, and the mods can just fit in like puzzle pieces.
I really wish I knew some coding now

This is really amazing. I'm wondering if some sort of 'snap to edge' feature would be useful. It will definitely make this all a lot more complicated, but it might be nice to have ui elements which are pinned to the side not be moved around by a window resize. I'm sure right now they don't move much, since it uses a percentage, but i expect that they will move a little. I guess it's just a minor issue for only the people that use windowed mode though, so it probably isn't worth implementing.

It's already implemented
(If something is on an edge, it's at 100%, so will always be at the edge after a resize)

True, but are things near the edge guaranteed to be attached to it? I probably just have to try it out to see if this is really an issue. I guess it can also be avoided by just not letting elements be dragged partially out of the screen, which should make it easier to get them at 100%.

I'm not sure what you mean - the edges of the screen (or whatever container you specify) act as a wall that you can't drag the frame out of, so it's very easy to make it hit the very edge.