Fullscreen mode for Geogebra Materials (GeoGebraTube)

s_o shared this idea 4 years ago
Under Consideration

Hey,

I noticed that I miss a feature that shouldn't be to difficult to implement: Fullscreen mode for the GeoGebra-Applet on GeoGebra Materials (formerly GeoGebraTube).

Two reasons:

  • On small screens like notebooks/netbooks other elements of the GeoGebra Materials page and the browser take away a lot of space
  • On touch-enabled devices (like tablets or smartphones) you often move the entire page and not only a point for example. That would not happen if the applet is fixed size to the screen.


I was able to create a fullscreen button inside an applet and it works quite nice: https://www.geogebra.org/m/JHnf6FUG (is labeled in German: "Vollbild")

Code of the button:


    var i = document.getElementsByClassName("ws-element-applet")[0];

    if(i.requestFullscreen) { i.requestFullscreen(); }

    else if(i.webkitRequestFullscreen) { i.webkitRequestFullscreen(); }

    else if(i.mozRequestFullScreen) { i.mozRequestFullScreen(); }

    else if(i.msRequestFullscreen) { i.msRequestFullscreen(); }



The only problem: I have to set the initial scaling high (so resolution is higher than the screen resolution, because GeoGebra only scales down, not up). Is there a way to enable up-scaling using JavaScript, so the applet is only scaled after pressing Fullscreen?


The easiest option would still be if you could add an Fullscreen button somewhere on the page the applet is displayed on.

Comments (2)

photo
1

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

photo
2

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)

© 2021 International GeoGebra Institute