Tech Note 03k: Using PictureBox

Jan 2, 2007

© NSB Corporation. All rights reserved.
There is additional documentation on Microsoft's site.

The PictureBox control can be used for a lot more than just displaying pictures. Yes, it can be used to display a .bmp file. But it also supports drawing shapes such as lines and circles, can display text and can detect events such as taps. Picturebox is installed as part of your initial setup of NS Basic/CE. There is no need to install anything extra to use it.

The standard output from your program goes to an object called "Output". In the following examples, we'll demonstrate the various properties, methods and events using the Output Object.

You can also create your own PictureBox objects. These float above the Output Object. Use a command such as

addObject "picturebox.picturebox","pic",0,0,50,50

 

Notes and Quirks

1. If you want to set the fontsize, set the fontname first.

2. The cls function resets the properties - including things like your font.

3. You need to do a cls to clear the old value before calling DrawText.

4. The default scalemode for pictureboxes is Twips. To change it to pixels, do scalemode=3.

5. Always create your grid object first, including before the Visual Designer code. Otherwise, events coming from the grid object will be lost.

6. On Pocket PC devices, if you have trouble making a Picturebox larger than 100x100, set either the width or height explicitly, and it will be redrawn properly: 

AddObject "Picturebox.PictureBox", "PictureBox1", 0, 100, 240, 180
Set Form1(2) = PictureBox1
Form1(2).width=240
Form1(2).height=180

 

 

The PictureBox properties, methods, and events listed in the following tables are supported.

Properties

Properties either set or return values. The syntax is

msgbox pic.backcolor 'display the current backcolor

pic.fontsize=10 'set the fontsize to 10

 

Name

Description

BackColor

Color. Integer from 0 to 16,777,215. See color constants.

BorderStyle

0 none, 1 single line border

DrawWidth

Line width for draw methods

FillColor

Color, used to fill shapes, circles or boxes.

FillStyle

0 solid, 1 transparent

FontBold

True/False.

FontItalic

True/False.

FontName

String

FontSize

In points.

FontStrikethru

True/False.

FontTransparent

True/False. Do background graphics show through?

FontUnderline

True/False.

ForeColor

color

Height

Height of object

Left

Left edge of object

Picture

String with name of .bmp file

ScaleHeight

Units for height using custom scale

ScaleLeft

Left edge of object, to scale

ScaleMode

0 user defined
1 Twips (1440 dpi)
2 Points (72dpi)
3 Pixels
4 Characters. Horizontal 1=120 twips, vertical=240 twips)
5 inches
6 millimeters
7 centimeters

ScaleTop

returns top of current object

ScaleWidth

Units for width using custom scale

Tag

Use this for whatever you like

Top

Top of the object

Width

width of the object

 

Methods

 

Name

Arguments

Description

Cls

no args

clears text and graphics.

DrawCircle

x,y,radius[,color][,aspectRatio]

 

DrawLine

x1,y1,x2,y2[,color][,box],[,fill]

Box is true/false.

DrawPicture

picture,x1,y1[,width,height1,x2, y2,width,height2,rasterop]

 

DrawPoint

x,y[,color]

 

DrawText

text

Draws on next line on object. Cannot be positioned.

Move

x,y[,width,height]

Moves object to new x,y

Refresh

Redraws the object

ScaleX

width, fromScale, toScale

Converts scale of width.

ScaleY

height, fromScale, toScale

Converts scale of height.

SetScale

x1,y1,x2,y2

Use to change scale

TextHeight

text

returns height of text. Embedded CR's OK.

TextWidth

text.

returns width of widest line.

 

Events

 

Events cause subroutines in your program to be called, if they exist. You should name the subroutine <objectName>_eventName.

For example, to capture clicks in the Output Object, you will need

sub output_click
'your code to handle a click
end sub

Name

Arguments

Description

Change

 

Called when object changes.

Click

 

Called when object is tapped.

DblClick

 

Called when object is double tapped.

KeyDown

keyCode, shift

Shift=1, 2=CTRL, 4=ALT

KeyPress

keyCode

 

KeyUp

keyCode, shift.

Shift=1, 2=CTRL, 4=ALT

MouseDown

button, shift, x, y

 

MouseMove

button, shift, x, y

 

MouseUp

button, shift, x, y

 

Resize

height, widget.

Called when object minimized/max/resumed

 

 

Sample Code

 

rem Play around with some picturebox functions

output.backcolor=vbwhite
output.scalemode=3
output.drawpicture "\windows\startup.bmp",300,0
output.drawcircle 150,150,25
output.drawcircle 250,100,25
output.drawText "this is drawtext"
output.drawText "this is some more drawtext"
print
print

addObject "picturebox.picturebox","pic",200,0,50,50
pic.borderstyle=1

sub pic_click
  print "pic click"
  pic.move 1200,1200
end sub

sub output_click
  print "click in Output" 
end sub

sub output_mousedown(button, shift, x, y)
  print "mouse down: button:" & button & " Shift:" &  shift & " X:" & x & " Y:" & y
end sub