[solved] letterbox border color

[jihem Participant]

Hi,
How do you change the border color of the letterbox (in fullkscreen mode) ?
How can I activate fullscreen at startup ? (uncommenting Self.BeginFullscreen() in the new method doesn’t work)
Kind regards,
jihem

Monkey

#Import "<std>" #Import "<mojo>" #Import "assets/splash.png" Using std.. Using mojo.. Class Splash Extends Window Field image:Image Method New() Super.New("Splash",800,600,Null) image=Image.Load( "asset::splash.png" ) image.Handle=New Vec2f( .5,.5 ) Self.Layout="letterbox" Self.Style.BackgroundColor=New Color(52, 48, 39) Self.MinSize=New Vec2i(800,600) Self.MaxSize=New Vec2i(800,600) Self.ClearColor=Color.Black ' New Color(52, 48, 39,0) Mouse.PointerVisible=False 'Self.BeginFullscreen() End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.Clear(Color.Black) 'New Color(52, 48, 39,0) canvas.DrawImage(image,400,300) End Method OnKeyEvent( event:KeyEvent ) Override If event.Type=EventType.KeyDown Then If event.Key=Key.Enter And event.Modifiers & Modifier.Alt If Not Self.Fullscreen Then Self.BeginFullscreen() Else Self.EndFullscreen() End End If event.Key=Key.Escape App.Terminate() End End End End Function Main() New AppInstance New Splash App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

#Import "<std>" #Import "<mojo>"   #Import "assets/splash.png"   Using std.. Using mojo..   Class Splash Extends Window   Field image:Image   Method New() Super.New("Splash",800,600,Null) image=Image.Load( "asset::splash.png" ) image.Handle=New Vec2f( .5,.5 ) Self.Layout="letterbox" Self.Style.BackgroundColor=New Color(52, 48, 39) Self.MinSize=New Vec2i(800,600) Self.MaxSize=New Vec2i(800,600) Self.ClearColor=Color.Black ' New Color(52, 48, 39,0) Mouse.PointerVisible=False 'Self.BeginFullscreen() End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.Clear(Color.Black) 'New Color(52, 48, 39,0) canvas.DrawImage(image,400,300) End Method OnKeyEvent( event:KeyEvent ) Override If event.Type=EventType.KeyDown Then If event.Key=Key.Enter And event.Modifiers & Modifier.Alt If Not Self.Fullscreen Then Self.BeginFullscreen() Else Self.EndFullscreen() End End If event.Key=Key.Escape    App.Terminate() End   End End End     Function Main() New AppInstance New Splash App.Run() End

[peterigz Participant]

You need to use “WindowFlags.Fullscreen” when you create the window for fullscreen:

Monkey

Method New() Super.New("Splash",800,600,WindowFlags.Fullscreen) image=Image.Load( "asset::splash.png" ) image.Handle=New Vec2f( .5,.5 ) Self.Layout="letterbox" Self.Style.BackgroundColor=New Color(52, 48, 39) Self.MinSize=New Vec2i(800,600) Self.MaxSize=New Vec2i(800,600) Self.ClearColor=Color.Black ' New Color(52, 48, 39,0) Mouse.PointerVisible=False 'Self.BeginFullscreen() End

1 2 3 4 5 6 7 8 9 10 11 12

Method New() Super.New("Splash",800,600,WindowFlags.Fullscreen) image=Image.Load( "asset::splash.png" ) image.Handle=New Vec2f( .5,.5 ) Self.Layout="letterbox" Self.Style.BackgroundColor=New Color(52, 48, 39) Self.MinSize=New Vec2i(800,600) Self.MaxSize=New Vec2i(800,600) Self.ClearColor=Color.Black ' New Color(52, 48, 39,0) Mouse.PointerVisible=False 'Self.BeginFullscreen() End

I’m not sure about the border, it will be somewhere along these lines i think:

Monkey

Self.Style.BorderColor = New Color(1,1,1,1) Self.Style.Border = New Recti(5, 5, 5, 5)

1 2	Self.Style.BorderColor = New Color(1,1,1,1) Self.Style.Border = New Recti(5, 5, 5, 5)

Also, note that color ranges from 0-1 for example red would be: New Color(1, 0 , 0, 1)

[jihem Participant]

Thanks

The border color is set with ClearColor. I was using wrong args: 52, 48, 39 => 52/255, 48/255, 39/255.

Monkey

Method New() Super.New("Splash",800,600,Null) ' Flags.Fullscreen image=Image.Load( "asset::splash.png" ) image.Handle=New Vec2f( .5,.5 ) Self.Layout="letterbox" Self.ClearColor=New Color(0.2039,0.1882,0.1529,1) ' 52 48 39 Self.Style.BackgroundColor=Color.Black Self.MinSize=New Vec2i(800,600) Self.MaxSize=New Vec2i(800,600) Mouse.PointerVisible=False End

1 2 3 4 5 6 7 8 9 10 11

Method New() Super.New("Splash",800,600,Null) ' Flags.Fullscreen image=Image.Load( "asset::splash.png" ) image.Handle=New Vec2f( .5,.5 ) Self.Layout="letterbox" Self.ClearColor=New Color(0.2039,0.1882,0.1529,1) ' 52 48 39 Self.Style.BackgroundColor=Color.Black Self.MinSize=New Vec2i(800,600) Self.MaxSize=New Vec2i(800,600) Mouse.PointerVisible=False End

WindowFlags.Fullscreen and Self.BeginFullscreen aren’t working in the New method. The Window is fullscreen but display nothing except the ClearColor everywhere… ?!

[Mark Sibly Keymaster]

If you use the ‘letterbox’ layout, you should also implement ‘OnMeasure’.

This returns the ‘virtual’ size of the letterbox, while the size passed to the window constructor is the actual physical size of the window (or fullscreen).

Have a look at the viewlayout.monkey2 banana. Also, I tweaked your code above:

Monkey

Namespace myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class MyWindow Extends Window Method New() Super.New( "Splash",800,600,WindowFlags.Fullscreen ) Self.Layout="letterbox" Self.ClearColor=New Color( 0.2039,0.1882,0.1529,1 ) ' 52 48 39 Mouse.PointerVisible=False End Method OnMeasure:Vec2i() Override Return New Vec2i( 512,283 ) End Method OnRender( canvas:Canvas ) Override RequestRender() canvas.DrawText( "Hello World!",Width/2,Height/2,.5,.5 ) End End Function Main() New AppInstance New MyWindow App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

Namespace myapp   #Import "<std>" #Import "<mojo>"   Using std.. Using mojo..   Class MyWindow Extends Window     Method New()   Super.New( "Splash",800,600,WindowFlags.Fullscreen ) Self.Layout="letterbox" Self.ClearColor=New Color( 0.2039,0.1882,0.1529,1 ) ' 52 48 39 Mouse.PointerVisible=False End Method OnMeasure:Vec2i() Override Return New Vec2i( 512,283 ) End   Method OnRender( canvas:Canvas ) Override RequestRender() canvas.DrawText( "Hello World!",Width/2,Height/2,.5,.5 ) End End   Function Main()   New AppInstance New MyWindow App.Run() End

[jihem Participant]

Thanks
OnMeasure helps. Now the app starts in fullscreen mode and shows the picture but… the border color of the letterbox is not set (always black). If you use [Alt]-[Enter] to switch in windowed mode, then again to switch back in fullscreen mode the border color is set properly (?!).

 

Monkey

#Import "<std>" #Import "<mojo>" #Import "assets/splash.png" Using std.. Using mojo.. Class Splash Extends Window Field image:Image Method New() Super.New("Splash",800,600,WindowFlags.Fullscreen) image=Image.Load( "asset::splash.png" ) image.Handle=New Vec2f( .5,.5 ) Self.Layout="letterbox" Self.ClearColor=New Color(0.2039,0.1882,0.1529,1) ' 52 48 39 Self.Style.BackgroundColor=Color.Black Mouse.PointerVisible=False End Method OnMeasure:Vec2i() Override Return New Vec2i( 800,600 ) End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawImage(image,Self.Width/2,Self.Height/2) End Method OnKeyEvent( event:KeyEvent ) Override If event.Type=EventType.KeyDown Then If event.Key=Key.Enter And event.Modifiers & Modifier.Alt If Not Self.Fullscreen Then Self.BeginFullscreen() Else Self.EndFullscreen() End End If event.Key=Key.Escape App.Terminate() End End End End Function Main() New AppInstance New Splash App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

#Import "<std>" #Import "<mojo>"   #Import "assets/splash.png"   Using std.. Using mojo..   Class Splash Extends Window   Field image:Image   Method New() Super.New("Splash",800,600,WindowFlags.Fullscreen) image=Image.Load( "asset::splash.png" ) image.Handle=New Vec2f( .5,.5 ) Self.Layout="letterbox" Self.ClearColor=New Color(0.2039,0.1882,0.1529,1) ' 52 48 39 Self.Style.BackgroundColor=Color.Black Mouse.PointerVisible=False End Method OnMeasure:Vec2i() Override Return New Vec2i( 800,600 ) End Method OnRender( canvas:Canvas ) Override App.RequestRender() canvas.DrawImage(image,Self.Width/2,Self.Height/2) End Method OnKeyEvent( event:KeyEvent ) Override If event.Type=EventType.KeyDown Then If event.Key=Key.Enter And event.Modifiers & Modifier.Alt If Not Self.Fullscreen Then Self.BeginFullscreen() Else Self.EndFullscreen() End End If event.Key=Key.Escape    App.Terminate() End   End End End     Function Main() New AppInstance New Splash App.Run() End

[Mark Sibly Keymaster]

Well, there is no border as both the window and virtual res are 800,600, so the virtual display fits’ perfectly’. There will in fact be no border for any virtual res with the same aspect ratio as the window res.

Your window’s Style.BackgroundColor is also overwriting the window clear color. Style.BackgroundColor defaults to Color.None (ie: fully transparent) so normally you only ever see Window.ClearColor. This implies Style.BackgroundColor is drawn *after* ClearColor – in fact, ClearColor is drawn *before* everything else, as it’s a window property.

My advice would be to skip Style.BackgroundColor altogether for now and stick with canvas.Clear(), eg:

Monkey

#Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class Splash Extends Window Method New() Super.New("Splash",800,600,WindowFlags.Fullscreen) Self.Layout="letterbox" Self.ClearColor=Color.Green ' Self.Style.BackgroundColor=Color.Red 'One way to clear virtual area, but let's use canvas.Clear in OnRender(). Mouse.PointerVisible=False End Method OnMeasure:Vec2i() Override Return New Vec2i( 800,400 ) 'Note: Different aspect ratio to window size or no border! End Method OnRender( canvas:Canvas ) Override RequestRender() canvas.Clear( Color.Red ) 'Another way to clear virtual area. End Method OnKeyEvent( event:KeyEvent ) Override If event.Type=EventType.KeyDown Then If event.Key=Key.Enter And event.Modifiers & Modifier.Alt If Not Self.Fullscreen Then Self.BeginFullscreen() Else Self.EndFullscreen() End End If event.Key=Key.Escape App.Terminate() End End End End Function Main() New AppInstance New Splash App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

#Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class Splash Extends Window Method New() Super.New("Splash",800,600,WindowFlags.Fullscreen) Self.Layout="letterbox" Self.ClearColor=Color.Green ' Self.Style.BackgroundColor=Color.Red    'One way to clear virtual area, but let's use canvas.Clear in OnRender(). Mouse.PointerVisible=False End Method OnMeasure:Vec2i() Override Return New Vec2i( 800,400 )   'Note: Different aspect ratio to window size or no border! End Method OnRender( canvas:Canvas ) Override RequestRender() canvas.Clear( Color.Red )    'Another way to clear virtual area. End Method OnKeyEvent( event:KeyEvent ) Override If event.Type=EventType.KeyDown Then If event.Key=Key.Enter And event.Modifiers & Modifier.Alt If Not Self.Fullscreen Then Self.BeginFullscreen() Else Self.EndFullscreen() End End If event.Key=Key.Escape    App.Terminate() End   End End End Function Main() New AppInstance New Splash App.Run() End

[jihem Participant]

Thanks for spending time with me

With your sample, there is a black border (left and right) at startup. If you press [alt][enter] to switch in windowed mode and another time to return in fullscreen it disappears (and the red rectangle is bigger).

Attachments:

1. 

   Capture-1.png
   

[Mark Sibly Keymaster]

Thanks for spending time with me

No problem at all – I want people to  hammer this stuff and ask questions so I can make sure it works (and makes some sort of sense!) and so far it seems to be, so thank you!

With your sample, there is a black border (left and right) at startup.

Not doing quite the same thing here, but I think this is the difference between ‘real’ fullscreen and ‘fake’ fullscreen.

When you use WindowFlags.Fullscreen to create the window, it actually causes the display resolution to change. However, BeginFullScreen() with no parameters (as in the Alt-Tab handler) instead takes you into fake fullscreen, where the window is really just resized to the size of the desktop.

Try using BeginFullScreen( 800,600,60 ) instead in the Alt-Tab handler – this should also cause a display mode change.

This highlights a bit of a limitation with using WindowFlags.Fullscreen to go into fullscreen mode – you can’t select refresh rate this way.

[jihem Participant]

Thanks
I understand the difference between the real/fake fullscreen modes. Now, with BeginFullScreen( 800,600,60 ) I can use the same fullscreen mode.

[Author]

Posts