jsPanel4

jsPanel4 copied to clipboard

Hi

I'm looking for a way to show an overview of all active open panels... A bit like Windows Alt + Tab or Mac Mission Control.

This could be done by a button/icon on screen or a key combination.

When the user triggers this the screen darkens and images of the active panels are shown.

Is there anyway to do this with jspanel and if it can be done have the ability to click a panel and have that become the active panel.

Thanks

@MadTomT Sorry, something like this is currently not implemented. However, it's a nice idea. The best way to implement such a feature would be an extension I guess. Currently I don't have that much time to work on jsPanel, so don't expect such a feature like this to be available any time soon. But I'll put it on the list of things to remember ... Regards, Stefan

I've been thinking if it's possible to loop through each panel using htm2canvas to create an image of each, then show those images in a div on a modal.

Yep ... that would be my approach as well. html2canvas should be quite easy to use and the jsPanel.modal extension could be used for the modal backdrop I think. Some more work is probably to nicely arrange a bunch of "panel clones" including some interactivity. Maybe youu can try to put something together ... as I said already, I won't have that much time for this in the near future.

html2panel doesn't work well with iframes, so I can either get the panel or the content. It won't create an image of both.

Having said that doing a loop around each panel and passing that to html2canvas I've managed to get my panels content to show in a div which looks quite nice. Code is a bit messy so I'll try to get some time to tidy it up and then share it.

This doesn't work very well if the iframe loads a page with relative paths. It renders the page with out css, images etc. Time to think of another approach.

Just my 2 cents why use html2canvas, you have the panels all there. rendered by the beautiful thing called js lol.

psudo code

save panels state(size position minimized etc)

move and resize panels into grid highlighting the selected one.
//consideration: ensure all content is not laggy when resized and responds correctly to resize events

resort all panels and focus selected one.

todo: figure out the event flow maby make a state flow chart.

somthing like

keypress alt -> keypress tab  (showMissionControl)-> keypress tab (nextMissionControle)
  \_____________ \_>keyup alt (finishMissionControle) <_/                /
                  \_________> mouse click (checkMouseMissinonControl) <_/                               

consideration solution/ compromise use some sort of icon with the title text rather then the panel content or moving the panels