Floating simulator panel in notebook

[psychemedia]

It would be useful if we could detach the simulator from a notebook output cell and display it either in something like the pager at the bottom of the notebook in an expandable/collapsible area, or have it in a floating panel, eg as discussed in https://github.com/innovationOUtside/nbev3devsim/issues/30#issuecomment-617585446

See also this example of a torn off output widget floating at the top of a notebook which uses the following setup in part:

display(Javascript("""$('div.job_widget')
        .detach()
        .appendTo($('#header'))
        .css({
            'z-index': 999,
             'position': 'fixed',
            'box-shadow': '5px 5px 5px -3px black',
            'opacity': 0.95,
            'float': 'left,'
        })
        """))

See also the ipyturtle widget, which has a draggable panel, as does the notebook variable inspector extension.

Related issue: https://github.com/AaronWatters/jp_proxy_widget/issues/8

[psychemedia]

As per https://github.com/AaronWatters/jp_proxy_widget/issues/8, we can display and detach the simulator as a floating panel using:

roboSim = eds.Ev3DevWidget()
display(roboSim)
roboSim.element.dialog()