Share your advanced knowledge/code with the community.
User avatar
Danilo
 
Posts: 23
Joined: Wed Feb 26, 2014 7:11 am

Go Fullscreen

by Danilo Thu Feb 27, 2014 11:21 am

Code: Select all
;
; FullScreen.sb
;
; by Danilo
;
; http://forums.spiderbasic.com/viewtopic.php?f=9&t=55
;
; SpiderBasic 1.00 Alpha 4
;
Procedure Fullscreen()
    !function _RequestFullScreen() {
    ;!var elem = document.getElementById("SpiderBody");
    !var elem = document.documentElement;
    !if (elem.requestFullscreen) {
    !    elem.requestFullscreen();
    !} else if (elem.requestFullScreen) {
    !    elem.requestFullScreen();
    !} else if (elem.msRequestFullscreen) {
    !    elem.msRequestFullscreen();
    !} else if (elem.msRequestFullScreen) {
    !    elem.msRequestFullScreen();
    !} else if (elem.mozRequestFullScreen) {
    !    elem.mozRequestFullScreen();
    !} else if (elem.mozRequestFullscreen) {
    !    elem.mozRequestFullscreen();
    !} else if (elem.webkitRequestFullscreen) {
    !    elem.webkitRequestFullscreen();
    !} else if (elem.webkitRequestFullScreen) {
    !    elem.webkitRequestFullScreen();
    !} else if (elem.oRequestFullscreen) {
    !    elem.oRequestFullscreen();
    !} else if (elem.oRequestFullScreen) {
    !    elem.oRequestFullScreen();
    !}
    !}
    !_RequestFullScreen();
EndProcedure

Procedure GadgetEvents()
 
  Select EventGadget()
    Case 1
      Fullscreen()
  EndSelect
 
EndProcedure


If OpenWindow(0, 20, 20, 400, 100, "Fullscreen Demonstration")
   
  ButtonGadget(1, 10, 10, 380, 25, "Request FullScreen (ESC to exit fullscreen mode)")
 
  BindEvent(#PB_Event_Gadget, @GadgetEvents())
 
EndIf

Tested with IE 11, Chrome 33, FireFox 26+27, Opera 19

Please note:
Browsers have a check nowadays to prevent this fullscreen requests right after
the page is loaded. It would be annoying for the user when websites go
fullscreen randomly/automatically, without asking the user first.
So most browsers have a built-in check to prevent this. Make a button for
the user to switch to fullscreen, and it should work after this user action.
cya,
...Danilo
Alex
 
Posts: 8
Joined: Fri Feb 28, 2014 7:32 pm

Re: Go Fullscreen

by Alex Fri Feb 28, 2014 7:45 pm

Hallo Danilo,
da das mit PM hier irgendwie nicht funktioniert und auch kein deutsches Forum existiert, muss ich jetzt einfach mal hier dirket antworten.

Sehe ich das richtig, dass man mit "!" direkt JS- Funktionen erstellen kann? Und geht das nur mit JS?

Gruß
Alex
User avatar
Danilo
 
Posts: 23
Joined: Wed Feb 26, 2014 7:11 am

Re: Go Fullscreen

by Danilo Fri Feb 28, 2014 7:47 pm

Yep, '!' = DirectJavaScript in SB.
cya,
...Danilo
User avatar
MrTAToad
 
Posts: 291
Joined: Sun Apr 20, 2014 11:43 am
Location: Chichester, England

Re: Go Fullscreen

by MrTAToad Fri Nov 18, 2016 11:12 am

I've extended it a bit so that fullscreen or window mode can be detected, and the ability to go back to window mode from fullscreen :

Code: Select all
    ;
; FullScreen.sb
;
; by Danilo
;
; http://forums.spiderbasic.com/viewtopic.php?f=9&t=55
;
; SpiderBasic 1.00 Alpha 4
;
Procedure Fullscreen()
  !function _RequestFullScreen() {
  !var elem = document.documentElement;
  !if (elem.requestFullscreen) {
  !    elem.requestFullscreen();
  !} else if (elem.requestFullScreen) {
  !    elem.requestFullScreen();
  !} else if (elem.msRequestFullscreen) {
  !    elem.msRequestFullscreen();
  !} else if (elem.msRequestFullScreen) {
  !    elem.msRequestFullScreen();
  !} else if (elem.mozRequestFullScreen) {
  !    elem.mozRequestFullScreen();
  !} else if (elem.mozRequestFullscreen) {
  !    elem.mozRequestFullscreen();
  !} else if (elem.webkitRequestFullscreen) {
  !    elem.webkitRequestFullscreen();
  !} else if (elem.webkitRequestFullScreen) {
  !    elem.webkitRequestFullScreen();
  !} else if (elem.oRequestFullscreen) {
  !    elem.oRequestFullscreen();
  !} else if (elem.oRequestFullScreen) {
  !    elem.oRequestFullScreen();
  !}
  !}
  !_RequestFullScreen();
EndProcedure

Procedure.b IsFullScreen()
  Define v
  !function _IsFullScreen() {
  ;!var elem = document.documentElement;
  ! if (document.fullScreen) {
  !   v_v=document.fullScreen;
  ! } else if (document.webkitIsFullScreen) {
  !   v_v=document.webkitIsFullScreen;
  ! } else if (document.mozFullScreen) {
  !   v_v=document.mozFullScreen;
  ! } else if (document.msFullscreenEnabled) {
  !   v_v=document.msFullscreenEnabled;
  ! } else if (document.fullscreenEnabled) {
  !   v_v=document.fullscreenEnabled;
  !}
  !}
  ! _IsFullScreen();
  ProcedureReturn v
EndProcedure

Procedure ExitFullScreen()
 !function _ExitFullScreen() {
  ;!var elem = document.documentElement;
  ! if (document.exitFullscreen) {
  !   document.exitFullscreen();
  ! } else if (document.webkitExitFullscreen) {
  !   document.webkitExitFullscreen();
  ! } else if (document.mozCancelFullScreen) {
  !   document.mozCancelFullScreen();
  ! } else if (document.msExitFullscreen) {
  !   document.msExitFullscreen();
  !}
  !}
  ! _ExitFullScreen();
EndProcedure

Procedure GadgetEvents()
  Define temp
 
Select EventGadget()
Case 1
  Fullscreen()
 
Case  2
  Debug IsFullScreen()
 
Case 3
  ExitFullScreen()


Case  4
  temp=IsFullScreen()
  If temp
    ExitFullScreen()
  Else
    Fullscreen()
  EndIf
 
  EndSelect
EndProcedure


If OpenWindow(0, 20, 20, 400, 130, "Fullscreen Demonstration")
  ButtonGadget(1, 10, 10, 380, 25, "Request FullScreen (ESC to exit fullscreen mode)")
  ButtonGadget(2, 10, 40, 380, 25, "Status")
  ButtonGadget(3, 10, 70, 380, 25, "Exit fullscreen mode")
  ButtonGadget(4, 10, 100, 380, 25, "Toggle fullscreen mode")
BindEvent(#PB_Event_Gadget, @GadgetEvents())
EndIf
Fred
Site Admin
 
Posts: 1011
Joined: Mon Feb 24, 2014 10:51 am

Re: Go Fullscreen

by Fred Fri Nov 18, 2016 6:25 pm

NIce code !

btw, there is a trick in JS to avoid all these if:

Code: Select all
var reqFullScreen = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen;
if (reqFullScreen)
  reqFullSreen();
User avatar
MrTAToad
 
Posts: 291
Joined: Sun Apr 20, 2014 11:43 am
Location: Chichester, England

Re: Go Fullscreen

by MrTAToad Sat Nov 19, 2016 10:31 am

Good idea!
poshu
 
Posts: 37
Joined: Mon Feb 24, 2014 11:46 pm

Re: Go Fullscreen

by poshu Thu Dec 15, 2016 8:08 pm

While this code works perfectly with a button, I can't get it to work with a canvas :
Code: Select all
Procedure Fullscreen()
   !function _RequestFullScreen() {
   !var elem = document.documentElement;
   !if (elem.requestFullscreen) {
   !    elem.requestFullscreen();
   !} else if (elem.requestFullScreen) {
   !    elem.requestFullScreen();
   !} else if (elem.msRequestFullscreen) {
   !    elem.msRequestFullscreen();
   !} else if (elem.msRequestFullScreen) {
   !    elem.msRequestFullScreen();
   !} else if (elem.mozRequestFullScreen) {
   !    elem.mozRequestFullScreen();
   !} else if (elem.mozRequestFullscreen) {
   !    elem.mozRequestFullscreen();
   !} else if (elem.webkitRequestFullscreen) {
   !    elem.webkitRequestFullscreen();
   !} else if (elem.webkitRequestFullScreen) {
   !    elem.webkitRequestFullScreen();
   !} else if (elem.oRequestFullscreen) {
   !    elem.oRequestFullscreen();
   !} else if (elem.oRequestFullScreen) {
   !    elem.oRequestFullScreen();
   !}
   !}
   !_RequestFullScreen();
EndProcedure

Procedure.b IsFullScreen()
   Define v
   !function _IsFullScreen() {
   ;!var elem = document.documentElement;
   ! if (document.fullScreen) {
   !   v_v=document.fullScreen;
   ! } else if (document.webkitIsFullScreen) {
   !   v_v=document.webkitIsFullScreen;
   ! } else if (document.mozFullScreen) {
   !   v_v=document.mozFullScreen;
   ! } else if (document.msFullscreenEnabled) {
   !   v_v=document.msFullscreenEnabled;
   ! } else if (document.fullscreenEnabled) {
   !   v_v=document.fullscreenEnabled;
   !}
   !}
   ! _IsFullScreen();
   ProcedureReturn v
EndProcedure

Procedure ExitFullScreen()
   !function _ExitFullScreen() {
   ;!var elem = document.documentElement;
   ! if (document.exitFullscreen) {
   !   document.exitFullscreen();
   ! } else if (document.webkitExitFullscreen) {
   !   document.webkitExitFullscreen();
   ! } else if (document.mozCancelFullScreen) {
   !   document.mozCancelFullScreen();
   ! } else if (document.msExitFullscreen) {
   !   document.msExitFullscreen();
   !}
   !}
   ! _ExitFullScreen();
EndProcedure

Procedure Loop()
   Static button
   ClearScreen($00AA00)
   ExamineMouse()
   If MouseButton(#PB_MouseButton_Left) And button = 0
      Fullscreen()
   EndIf
   button = MouseButton(#PB_MouseButton_Left)
   FlipBuffers()
EndProcedure

OpenScreen(400,400,32,"Fullscreen")
BindEvent(#PB_Event_RenderFrame,@Loop())
FlipBuffers()


Chrome returns "Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.", so I guess a click into a screen isn't a gesture? Any help?
User avatar
MrTAToad
 
Posts: 291
Joined: Sun Apr 20, 2014 11:43 am
Location: Chichester, England

Re: Go Fullscreen

by MrTAToad Mon Dec 19, 2016 5:30 pm

Looks like it only works with windows. If you want a screen, you could always create a window with no border...
User avatar
MrTAToad
 
Posts: 291
Joined: Sun Apr 20, 2014 11:43 am
Location: Chichester, England

Re: Go Fullscreen

by MrTAToad Tue Jul 18, 2017 7:42 pm

By the way, full screen is only available now from a "user gesture" (ie button press).
Return to Tricks 'n' Tips

Who is online

Users browsing this forum: No registered users and 1 guest