Cesium Widget full screen does not behave properly in Jupyter about czml3

[TJKoury]

Try C137.js.

It's open source now, Apache 2.0 licensed:

Github - c137.js

[iMurfyD]

Ran in breakpoint on click in Opera debugger found the following when I stepped through clicking the full screen button in the Cesium widget:

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. Uncaught (in promise) TypeError: fullscreen error

Uncaught (in promise) TypeError: fullscreen error
    at Object.Fullscreen.requestFullscreen (Cesium.js?v=20200412131125:formatted:8346)
    at Cesium.js?v=20200412131125:formatted:113525
    at FullscreenButtonViewModel.t [as _command] (Cesium.js?v=20200412131125:formatted:110778)
    at HTMLButtonElement.<anonymous> (Cesium.js?v=20200412131125:formatted:109417)
    at HTMLButtonElement.dispatch (jquery.min.js:5237)
    at HTMLButtonElement.elemData.handle (jquery.min.js:5044)

Excerpt from Cesium.js starting at line 8345:

    Fullscreen.requestFullscreen = function(e, t) {
        Fullscreen.supportsFullscreen() && e[_names.requestFullscreen]({
            vrDisplay: t
        })
    }

[astrojuanlu]

Addressing the issue part first:

The missing Earth map in the screenshot is fixed by changing to a different map skin. I think this is due to some subscription access or something.

czml3/src/czml3/widget.py

Line 68 in 328608f

cesium_version = attr.ib(default="1.64")

The latest version has to be specified manually. Can you try CZMLWidget(d, cesium_version="1.68")?

It seems that it makes the entire Jupyter notebook full screen and sets the background outside of the notebook to be the same as a the widget.

Confirmed in my computer.

In the Cesium sandcastle, this works normally:

https://sandcastle.cesium.com/

Googling the error throws things like this Stack Overflow answer:

Imagine the security concerns if that were possible. Malicious websites could "Hijack" a less computer literate person's desktop for all kinds of dubious business.

Which is reasonable, but there was a user event: we clicked the button!

Therefore, perhaps something is intercepting the click event. I see two possibilities:

• We are not embedding Cesium correctly
• There is some fault with Jupyter notebook and Cesium can't be embedded correctly

I would start by looking at the first option, perhaps outside of a notebook environment (see for example #53).

[niharsalunke]

Hi @astrojuanlu , I have worked on this issue. I was able to solve the missing earth problem. We need to generate a Cesium ion token before can proceed to display plots. To generate a free token, I followed this link . And after that, I also made a few modifications to the widgets.py file. Everything seems to be working now.

However, with the fullscreen issue, I have worked up to a point where if you perform "cesium_widget_object.fullscreen()" in a python code, you will be able to trigger the fullscreen mode of the canvas.

I was not satisfied here so I tried to write a bit of javascript event listener code in the CESIUM_TPL string of widgets.py and tried to bind the event listeners on the fullscreen button. Now the functions are being triggered correctly. Meaning, if you click on the "fullscreen" button of the CZMLWidget, a JavaScript code responsible to "FULLSCREEN-ize" the canvas gets triggered. But after all this, I got this error: "Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture."

This is not easily solvable since it will require external permissions. More here.

To summarize, we have 1 success, 1 partial success, 1 partial failure. So apart from the 1 partial failure, may I create a pull request?

Oh, and BTW I was able to make czml work for more than just the "simple.py" example given in the czml3 file. So I believe this will also cover Poliastro's issue #706.

Thanks a lot for following through. Would love to elaborate more. 😄

Fix for the CZML3 package:

Code Responsilbe for switching to fullscreen

This code piece can be included with the object itself as I mentioned earlier.

Fullscreen Output

[astrojuanlu]

Copy pasting a comment I left in #92:

I know it might be a challenging problem, but I think adding a method just for this is not the right thing to do.

I have no idea about front-end, so I am really not in a position to give a clear path. But I think we should make the fullscreen button just work.

If the button works on Cesium Sandcastle but it doesn't work on Jupyter notebook, then either:

• We are not embedding Cesium correctly (which is very likely - we should be making an extension instead of spitting a blob of HTML, see #61)
• Jupyter notebook has some special layout or behavior that blocks this event
• ?

We should build a minimum reproducible example and ask in https://community.cesium.com/ about this issue.