Page 1 of 2

Go Fullscreen

Posted: Thu Feb 27, 2014 11:21 am
by Danilo

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.

Re: Go Fullscreen

Posted: Fri Feb 28, 2014 7:45 pm
by Alex
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

Re: Go Fullscreen

Posted: Fri Feb 28, 2014 7:47 pm
by Danilo
Yep, '!' = DirectJavaScript in SB.

Re: Go Fullscreen

Posted: Fri Nov 18, 2016 11:12 am
by MrTAToad
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

Re: Go Fullscreen

Posted: Fri Nov 18, 2016 6:25 pm
by Fred
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();

Re: Go Fullscreen

Posted: Sat Nov 19, 2016 10:31 am
by MrTAToad
Good idea!

Re: Go Fullscreen

Posted: Thu Dec 15, 2016 8:08 pm
by poshu
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?

Re: Go Fullscreen

Posted: Mon Dec 19, 2016 5:30 pm
by MrTAToad
Looks like it only works with windows. If you want a screen, you could always create a window with no border...

Re: Go Fullscreen

Posted: Tue Jul 18, 2017 7:42 pm
by MrTAToad
By the way, full screen is only available now from a "user gesture" (ie button press).

Re: Go Fullscreen

Posted: Mon Aug 10, 2020 11:53 pm
by AMpos
It didnt work in any of my apple iDevices, using Chrome, Safari or Firefox.

(it works on my Android chrome)