Small Basic Known Issue: 22108 - Viewport of GraphicsWindow is Narrower and Sometimes Resized in Remote

Introduction

Series of know issues articles are showing known issue itself about Small Basic and it's workaround.  In this article, local means Small Basic IDE environment and remote means smallbasic.com/program/?<program ID> shown by internet browser environment with Silverlight add-in.

Phenomenon 1

GraphicsWindow is displayed in remote as picture 1.  Whole display area has 640 px (pixel) width and 480 px height.  But at least 26 px padding on top and bottom, at least 21 px padding on left and right.  So maximum GraphicsWindow size is 598 px width and 428 px height.  If the width or the height of GraphicsWindow is greater than the size above, GraphicsWindows will be shrunk (resized) to fit in the maximum size above.

Resizing itself must be specification of smallbasic.com program listing system.  But there are some issues around this spec.  One is described as Phenomenon 2 below.  Others are under investigation but behavior of font size and image size are little bit different between local and remote. 

Picture 1 - GraphicsWindow in Remote

When you embed the Small Basic program on your website, display size 640 x 480 px may be changed as you like. 

Phenomenon 2

Sample program PMT747-5 (Ruler 0.61) put pixel markers as like Picture 2.  In local blue points (0,0) and (597, 427) are visible.  Also black point (594, 424), red point (595, 425) and green point (596, 426) are visible.  But in remote, four right bottom points are invisible.  Black point and red point are under gray frame.  Green and Blue points are out of the frame.  In addition in remote, fill or draw operation of GraphicsWindow are drawn under the gray frame but Shapes are drawn over the gray frame.

Picture 2 - Viewport Difference between Local and Remote

What Happens by Default

By default, GraphicsWindow.Width and GraphicsWindow.Height are 624, 443 in local but 640, 480 in remote.  So viewport in local is (0, 0)-(623, 442).  But viewport in remote is (0, 0)-(633.6, 474.9).  And this viewport is resized to (0, 0)-(565, 423).

Workaround

To avoid resize, set GraphicsWindow width and height as follows. 

GraphicsWindow.Width = 598
GraphicsWindow.Height = 428

To avoid the issue of difference of GraphicsWindow viewport, don't put important information in right and bottom 4-pixel padding area. 

Sample Program

http://smallbasic.com/program/?PMT747-5

See Also

Small Basic: Difference Between Local and Remote