Go Fullscreen

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

Go Fullscreen

Post 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.
cya,
...Danilo
Alex
Posts: 8
Joined: Fri Feb 28, 2014 7:32 pm

Re: Go Fullscreen

Post 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
User avatar
Danilo
Posts: 51
Joined: Wed Feb 26, 2014 7:11 am

Re: Go Fullscreen

Post by Danilo »

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

Re: Go Fullscreen

Post 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
Fred
Site Admin
Posts: 1506
Joined: Mon Feb 24, 2014 10:51 am

Re: Go Fullscreen

Post 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();
User avatar
MrTAToad
Posts: 291
Joined: Sun Apr 20, 2014 11:43 am
Location: Chichester, England
Contact:

Re: Go Fullscreen

Post by MrTAToad »

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

Re: Go Fullscreen

Post 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?
User avatar
MrTAToad
Posts: 291
Joined: Sun Apr 20, 2014 11:43 am
Location: Chichester, England
Contact:

Re: Go Fullscreen

Post by MrTAToad »

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
Contact:

Re: Go Fullscreen

Post by MrTAToad »

By the way, full screen is only available now from a "user gesture" (ie button press).
AMpos
Posts: 42
Joined: Mon Aug 03, 2020 5:15 pm

Re: Go Fullscreen

Post by AMpos »

It didnt work in any of my apple iDevices, using Chrome, Safari or Firefox.

(it works on my Android chrome)
Post Reply