[REL] Draggable Picture in Picture

woah, nice, now what is your fps?
Also there is a slight problem, your activity bar is ALLLLLL the WAYYYYYY on the right

I never care about that bare.
It wont be hard to place it somewhere else though.
FPS in that setup at the start of the game on a size 4 planet with lots of trees around 15 on max graphics.
Around 30 on min graphics and 75% resolution.

On a size 3 lava planet I have ~50fps with those low settings.

Oh and PA uses 4GB Ram right after the game started.

EDIT:
My config:

auto it v3 script to get PA into a 3 screen filling size of 4496x1104

http://pastebin.com/suKG5Wkr

css live_game.css

Code:

holodeck.pip {
    position:absolute;
    right: 0px;
    top: 0px;
    width: 1280px;
    height: 1024px;
    z-index: -1;
}

holodeck.pip2{
    position:absolute;
    right: 3200px;
    top: 0px;
    width: 1280px;
    height: 1024px;
    z-index: -1;
}

html live_game.html

Code:

<holodeck class="primary"></holodeck>
<holodeck class="pip"></holodeck>
<holodeck class="pip2"></holodeck>
<holodeck class="pip2"></holodeck>

I can't believe how fast we've been at hacking this.

Amazing! I'll get that set up on my machine and start fixing Alerts Manager. the problem is I only assumed there was one PiP so I didn't do anything clever. I can make a new PiP just for notifications instead of using the existing one.

I need a much better graphics card.
What is the bets performing card for PA?

What card do you have now?

Radeon 7850/2G
Core i5 3550
16GB Ram

My math brain isn't working right now and I can't see what each number in your script does. How do I set it up for one monitor at a width of 1400 and another at 1680? They're different heights but I'll just deal with the window not filling one screen vertically.

the params are x,y,width,height, I added up my screen sizes + 8 or so, because the window actually has a border. I don't want to see that.
Mine are different height as well, I just do max(height) of all my screens. left and right dont show everything in this scenario.

I just bought a gtx 760 and it works flawlessly in PA I highly recommend it.

Glad to see you guys are having fun with the picture in picture support!

A few notes:

• I'm not sure why the 3rd/5th/etc holodecks aren't rendering the default scene. They're all treated identically internally, and there is direct support for having as many of them as your system can handle. I'll have to check that out a bit later. (I had to do some pretty deep work on both the rendering pipeline and the client entity update pipeline in order to get it working. I'm not sure what got missed. As an aside, I did both the HTML/CSS/JS & C++ side of this feature. And the icon. We really are a small shop.)
• Multi-window (and multi-monitor) is really hard to do right. We're planning on it, but other issues are more pressing for the moment. (We have to upgrade our infrastructure to support multiple windows, and then we have to upgrade everything else to support more than one renderer.) Also, we're probably going to implement it on top of some other framework changes we have planned. So it'll be a while. (It's cool that you guys found a way to do it via stretching across all monitors. That also works, but it's unfortunately not a solution that would be reliable enough for us to ship.)
• We're planning on having the pip(s) be draggable & resizable, much like in this mod. Until we can get to that feature, however, I will note that there is now a holodeck.beginAnimation() function that increases the rectangle tracking frequency. It returns a function that you can call to return the update frequency back to normal. Call it when you start dragging, and call the resulting function when you're done. (There are some comments about it and an example in holodeck.js) While the frequency boost is in effect, it can eat up quite a bit of CPU overhead on the coherent thread, so remember to turn it back off when you're done.
• Speaking of the holodeck API, they're set up to auto-focus based on the mouseenter event. (The "focused" holodeck is the one that gets used for engine calls for things like unit tracking, selection, fab commands, etc. Basically, anything that affects a holodeck, but doesn't require a holodeck id.) I'm planning on making that configurable so that mods can, for example, control focus by clicking instead. (Long term, I would like to make versions of the APIs that accept a holodeck id for the relevant commands.)
• Upgrades to the camera controls are also planned for the future. Right now you can't get the camera information (orientation, position, and zoom), and you can't manually set the camera information. We want to change that. First experiment we want to try is a mode that locks the PiP to the opposite side of whatever planet the main window is looking at. It's kind of dependent on a better system for pushing "current state" from C++ to JS, so there's some work to do before we can try that.
• Holodecks don't sort (or clip) in the z-stack of the HTML ui. They're always behind all the UI for now. Eventually we could make them sort before/after different panels, but that would be quite a bit of work, and we don't have a very good use case for it.
• In theory, we could add an option for controlling the alpha on the skybox. I don't think it's using blending right now for the final holodeck composite, but it could. (I'll have to add that to the "experiment" pile.) I'm not sure how playable it would be, however. It may get very cluttered, and I'm also not sure about the state of our destination alpha channel. (Adding a drop shadow to the render chain processing sounds like a fun idea. That might take some extra doing, though, since it would need to expand the render area. I'll have to think on that a bit more. Support for oddly shaped holodecks would probably come out of that kind of system if we implemented it.)
• I'm planning on trying out a split-screen type layout with one big holodeck and 2 or 3 smaller ones, probably on the left. Once you get to another planet, it's really handy to have the second planet in the pip so you can watch two things at once. And then you want another one to keep an eye on the solar system. And another one to watch your main base while you're focusing on an attack.

That's all for now. It's been a long week, so I might go drink some scotch and watch some House of Cards. That is such a good show.

Wow, thanks for all that information!

• I'll definitely look into beginAnimation() for moving the pip around. This seems like it would make the dragging a lot smoother and lead in to resizes that don't kill the ui. I'm not sure I'll bother with resizable pips though because the frame around them is a problem. I could hack a solution, but it's already a hack on top of a hack. Adding another layer of hackery would just be real-life Inception.
• I know you guys can do a better job with draggable and resizable pips than me, but I'm going to maintain this mod for now anyway. I see mods as the best way to visualize a concept and make UI suggestions that we would like to see in the game. Even if none of our code lasts through beta, we are still making a subtle impact on your decisions. At the very least, our constant stream of new mods constantly reminds you guys how awesome and important modding is in PA.
• Have you seen my update to the Alert Manager? It doesn't work with dual screen yet, but I was able to do some basic pip camera control by calling swapPips(), moving the camera, and then swapping back right away. I have it so you can mouse over a notification and look at it in the pip without clicking.
• What do you think about adding camera anchor buttons to a frame around a pip? (and my swap button, for that matter) I think it would let you keep track of more locations with the limited screen space you get.

You guys have delivered some amazing work this week. I am really in awe at how much attention you pay to modding at the same time as you're making a game. And scotch is great, have fun! I'm too poor so I'm stuck with my jack daniels while I hack PA.

Just set up a 3x3 table (either with a table or with divs); Fix the outer 8 cells so that there's a consistent border size, and split the border image into the appropriate parts, using background-repeat for the top, bottom, left & right borders. and place the holodeck in the central cell.

Have a look at ui\alpha\shared\js\browser.js for an example (border images are in ui\alpha\shared\img\browser\)

I know, but I just don't know how important it is. Every hour spent on this is an hour not spent wasting my time some other way.

Between episodes..

No doubt! I think what you've done so far is great. It's a good example implementation, and will probably be a basis for what we end up doing.

Some time last year, I got interrupted from the work of re-organizing how our UI is set up internally. Unfortunately, I had to stop in the middle of that work to focus on other issues. Recently, I've been getting some opportunities to continue that work as a foundation for feature implementation. The PiP work and the recent introduction of panels are examples of that. The general vision is to empower the JS layer with more information about and more control over the game state, both on the client and the server. It's very common for us to talk excitedly about mod ideas over lunch. It's really important to us, too.

I haven't seen it yet, but it sounds like you've done something we've been talking about investigating. You should be able to call model.pips[0].focus() before, and model.holodeck.focus() after and avoid the swaps. (I just wrote myself a note to keep track of which holodeck is currently focused, so you can save it off for those purposes. It will probably be stored in a variable named Holodeck.focused or something.)

I was hoping to add inset buttons for swap & copy to the border of the PiP, but didn't get a chance. Camera anchors are a good idea for that, too. Those and the selection groups have been bugging me for a while now, since they don't have a visible UI presence.

Thanks! We're working hard to make sure this is the best game it can be.

I'm drinking The Glenlivet 12 tonight, which is actually pretty close to JD in price. (It's sort of my "house scotch".)

OH MY GOD that works so smoothly! Pushing to PAMM in a few minutes with a bunch of other performance and compatibility fixes. I got the alerts manager working with dual screen, too!

*Edit*
Why don't you just include raevn's Floating Framework right into the official game? We've been using it for a while and it it the main reason why this mod uses so little code.

*Edit 2*
Mockup of the PiP frame showing 8 available anchors. The first 3 have locations saved.


*Edit 9000*
Pushed to PAMM

Your mouse over to have it in the pip is close to one of our planned features. We want to set a pip in "notification mode" so it will just follow them automatically.

I think that seems a little distracting. I really just want a pip that shows up as a tooltip on mouseover instead of one that constantly uses precious screen space. I'm also dreaming of the notification pip starting the replay at 2 seconds before the event, but currently we don't have independent chronocam control over each holodeck.

Updated to v1.1.1
Adds camera anchor recall buttons and fixes compatibility with the No Blackscreen mod.

*Edit*

And....

Updated to v1.1.2

Fixed a bug that broke EVERYTHING. How embarrassing.

WOW that would be AWESOME