Differences

This shows you the differences between two versions of the page.

--- scrolling_20over_20a_20large_20canvas [2018/03/31 13:19] – external edit 127.0.0.1
+++ scrolling_20over_20a_20large_20canvas [2024/01/05 00:21] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
 =====Scrolling over a large canvas=====
-//by Richard Russell, September 2007//\\ \\ //**The code in this article requires BBC BASIC for Windows version 5.70a or later.**//\\ \\  Sometimes it may not be possible to display the entirety of your program's User Interface at once in a window of a sensible size, especially when you need the program to run on PCs with a relatively low display resolution. One solution to this is to give the user the ability to scroll the window so that the region of interest is in view.\\ \\  Although there are a number of ad-hoc ways in which this can be achieved, depending on precisely what needs to be displayed, each must be tailored to the particular circumstances and can be quite tricky to implement successfully. This article presents an alternative approach: a general-purpose method which should work for almost any situation.\\ \\  BBC BASIC for Windows' display bitmap is 1920 x 1440 pixels and the code listed in this article is directly applicable to a 'canvas' (over which the user can scroll the output window) up to this size. If this isn't big enough you may be able to increase it using the method described in the [[http://www.bbcbasic.co.uk/bbcwin/manual/bbcwini.html#hint2|Help documentation]] but beware of excessive memory usage.\\ \\  The method will be illustrated by means of a practical example. You should be able to adapt it to your particular requirements fairly easily. Firstly, your program must include (at or near the beginning) some necessary initialisation:\\ \\
+//by Richard Russell, September 2007//\\ \\ //**The code in this article requires BBC BASIC for Windows version 5.70a or later.**//\\ \\  Sometimes it may not be possible to display the entirety of your program's User Interface at once in a window of a sensible size, especially when you need the program to run on PCs with a relatively low display resolution. One solution to this is to give the user the ability to scroll the window so that the region of interest is in view.\\ \\  Although there are a number of ad-hoc ways in which this can be achieved, depending on precisely what needs to be displayed, each must be tailored to the particular circumstances and can be quite tricky to implement successfully. This article presents an alternative approach: a general-purpose method which should work for almost any situation.\\ \\  BBC BASIC for Windows' display bitmap is 1920 x 1440 pixels and the code listed in this article is directly applicable to a 'canvas' (over which the user can scroll the output window) up to this size. If this isn't big enough you may be able to increase it using the method described in the [[http://www.bbcbasic.co.uk/bbcwin/manual/bbcwini.html#hint2|Help documentation]] but beware of excessive memory usage.\\ \\  The method will be illustrated by means of a practical example. You should be able to adapt it to your particular requirements fairly easily. Firstly, your program must include (at or near the beginning) some necessary initialisation:
+<code bb4w>
         CanvasX% = 1920
         CanvasY% = 1440
@@ Line 24: / Line 26: @@
         VDU 24,0;0;CanvasX%*2-2;CanvasY%*2-2;
         VDU 28,0,CanvasY%/CharY%-1,CanvasX%/CharX%-1,0
-For the purposes of the example the 'canvas' has here been set to the normal maximum size, 1920 x 1440 pixels, and the output window has been set (initially) to 640 x 480 pixels. **CharX%** and **CharY%** are the width and height, in pixels, of the text characters. In practice you should set **CanvasX%** and **CanvasY%** to whatever dimensions are appropriate for your application. The user can scroll the output window over this range, and can resize the window in the usual ways (e.g. dragging an edge or corner).\\ \\  Once the initialisation is complete you can proceed to display whatever contents of the user interface you wish, up to the full size of the 'canvas'. In this example we will simply display a short piece of text, a BMP image and a pair of diagonal lines:\\ \\
+</code>
+For the purposes of the example the 'canvas' has here been set to the normal maximum size, 1920 x 1440 pixels, and the output window has been set (initially) to 640 x 480 pixels. **CharX%** and **CharY%** are the width and height, in pixels, of the text characters. In practice you should set **CanvasX%** and **CanvasY%** to whatever dimensions are appropriate for your application. The user can scroll the output window over this range, and can resize the window in the usual ways (e.g. dragging an edge or corner).\\ \\  Once the initialisation is complete you can proceed to display whatever contents of the user interface you wish, up to the full size of the 'canvas'. In this example we will simply display a short piece of text, a BMP image and a pair of diagonal lines:
+<code bb4w>
         *DISPLAY "C:\Windows\Web\Wallpaper\Bliss.BMP"
         PRINT "Scroll down to see the picture"
         LINE 0,0,CanvasX%*2-2,CanvasY%*2-2
         LINE 0,CanvasY%*2-2,CanvasX%*2-2,0
-Because you will be drawing outside the area occupied by the visible output window you should take note of the article [[/Drawing%20outside%20the%20window|Drawing outside the window]], in particular in respect of the graphics origin. The initialisation code above sets the graphics origin to the bottom-left corner of the canvas, and sets both the graphics viewport (VDU 24) and text viewport (VDU 28) to the full size of the canvas.\\ \\  Now we can enter an 'idle' loop during which the user can scroll the window:\\ \\
+</code>
+Because you will be drawing outside the area occupied by the visible output window you should take note of the article [[/Drawing%20outside%20the%20window|Drawing outside the window]], in particular in respect of the graphics origin. The initialisation code above sets the graphics origin to the bottom-left corner of the canvas, and sets both the graphics viewport (VDU 24) and text viewport (VDU 28) to the full size of the canvas.\\ \\  Now we can enter an 'idle' loop during which the user can scroll the window:
+<code bb4w>
         REPEAT
           WAIT 1
         UNTIL FALSE
         END
-Of course in a practical program it is likely you will want to do something more useful here!\\ \\  Finally, here is the procedure which contains the 'magic' to make all this work:\\ \\
+</code>
+Of course in a practical program it is likely you will want to do something more useful here!\\ \\  Finally, here is the procedure which contains the 'magic' to make all this work:
+<code bb4w>
         DEF PROCmove(msg%,wp%,lp%)
         PRIVATE sih{}, siv{}
@@ Line 77: / Line 91: @@
         *REFRESH
         ENDPROC
+</code>
 Note that the code in this article is not compatible with SPRITELIB.