Fullscreen mode for Geogebra Materials (GeoGebraTube)

I've deleted part of your post - please email support@geogebra.org if you want to discuss that

I found out that there is setWidth and setHeight, this allows much nicer scaling, but GeoGebra does not scale/move your coordinate system automatically (would be a great feature), so I wrote something myself that works quite nice. I'm using the function ggbApplet.getViewProperties() which returns a JSON string with current scaling, dimension and x/y min. I could not find any documentation, is it supposed to be a internal function only and not part of the public API? Is it going to disappear or change behavior in future?

Here is my fullscreen code, after calling fullscreenscale it will make the applet a fullscreen element and change dimension of the applet and scaling of the axis like before (it expects the origin in the middle of the window):

1. var height_ori, width_ori;
2. function FShandler() {
3. if (!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)) {
4. // Not fullscreen anymore
5. prop = JSON.parse(ggbApplet.getViewProperties(1));
6. iw = width_ori;
7. ih = height_ori;
8. ggbApplet.setWidth(iw);
9. ggbApplet.setHeight(ih);
10. /* keep aspect ratio, expecting xmin = xmax, ymin = ymax, show only less, not more */
11. if(ih/(prop.height*1.0) > iw/(prop.width*1.0)) { // screen is now more widescreen
12. ymax = prop.yMin * (-1.0);
13. xmax = (prop.invXscale/prop.invYscale)*(ymax/ih)*iw;
14. }
15. else {
16. xmax = prop.xMin * (-1.0);
17. ymax = (prop.invYscale/prop.invXscale)*(xmax/iw)*ih;
18. }
19. var ggb_coord_cnt = 0;
20. var ggb_coord_id = setInterval(ggb_coord_func,100);
21. function ggb_coord_func() {
22. var prop_b = JSON.parse(ggbApplet.getViewProperties(1));
23. if(prop_b.width == iw && prop_b.height == ih)
24. {
25. clearInterval(ggb_coord_id);
26. ggbApplet.setCoordSystem(-1.0*xmax,xmax,-1.0*ymax,ymax);
27. }
28. else {
29. ggb_coord_cnt++;
30. if(ggb_coord_cnt>10) clearInterval(ggb_coord_id);
31. }
32. }
33. }
34. }
35. function fullscreenscale() {
36. if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled)
37. {
38. if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
39. {
40. if (document.exitFullscreen) {
41. document.exitFullscreen();
42. } else if (document.webkitExitFullscreen) {
43. document.webkitExitFullscreen();
44. } else if (document.mozCancelFullScreen) {
45. document.mozCancelFullScreen();
46. } else if (document.msExitFullscreen) {
47. document.msExitFullscreen();
48. }
49. return;
50. }
51. var i = document.getElementsByClassName("ws-element-applet")[0];
52. if(i.requestFullscreen) { i.requestFullscreen(); }
53. else if(i.webkitRequestFullscreen) { i.webkitRequestFullscreen(); }
54. else if(i.mozRequestFullScreen) { i.mozRequestFullScreen(); }
55. else if(i.msRequestFullscreen) { i.msRequestFullscreen(); }
56. var scale_cnt = 0;
57. var scale_id = setInterval(scale_func, 100);
58. function scale_func() {
59. if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
60. {
61. document.addEventListener("fullscreenchange", FShandler);
62. document.addEventListener("webkitfullscreenchange", FShandler);
63. document.addEventListener("mozfullscreenchange", FShandler);
64. document.addEventListener("MSFullscreenChange", FShandler);
65. /* Lets scale */
66. var prop, xmax, ymax, iw, ih;
67. clearInterval(scale_id);
68. prop = JSON.parse(ggbApplet.getViewProperties(1));
69. height_ori = prop.height;
70. width_ori = prop.width;
71. xmin_ori = prop.xMin;
72. ymin_ori = prop.yMin;
73. iw = window.innerWidth;
74. ih = window.innerHeight;
75. ggbApplet.setWidth(iw);
76. ggbApplet.setHeight(ih);
77. /* keep aspect ratio, expecting xmin = xmax, ymin = ymax, show only more not less */
78. if(ih/(prop.height*1.0) < iw/(prop.width*1.0)) { // screen is now more widescreen
79. ymax = prop.yMin * (-1.0);
80. xmax = (prop.invXscale/prop.invYscale)*(ymax/ih)*iw;
81. }
82. else {
83. xmax = prop.xMin * (-1.0);
84. ymax = (prop.invYscale/prop.invXscale)*(xmax/iw)*ih;
85. }
86. var ggb_coord_cnt = 0;
87. var ggb_coord_id = setInterval(ggb_coord_func,100);
88. function ggb_coord_func() {
89. var prop_b = JSON.parse(ggbApplet.getViewProperties(1));
90. if(prop_b.width == iw && prop_b.height == ih)
91. {
92. clearInterval(ggb_coord_id);
93. ggbApplet.setCoordSystem(-1.0*xmax,xmax,-1.0*ymax,ymax);
94. }
95. else {
96. ggb_coord_cnt++;
97. if(ggb_coord_cnt>10) clearInterval(ggb_coord_id);
98. }
99. }
100. }
101. else {
102. scale_cnt++;
103. if(scale_cnt>10) clearInterval(scale_id);
104. }
105. }
106. }
107. else {
108. ggbApplet.setVisible("fullscreen",false);
109. }
110. }

Example: https://www.geogebra.org/m/rcB56mNf (just fullscreen demonstration, there are some other issues)