Blitz


You can never have too many gadgets, says John Kennedy. And if you want to know which one he used to re-draw his knob, you'll have to read on.


This month we're going to create some buttons for our Blitz Browser. The buttons we'll use are based on images, and unsurprisingly that requires some images to work with. So get out your favourite paint package and get drawing. We need a button for scrolling up, a button for scrolling down and a button for switching images on and off. 

Blitz lets us use two separate images for each button, and this allows us to create a little 3D effect by using shading around the button edges. The first image is shown as a default, and when the button is clicked, the second image is shown.

Perhaps the easiest way to start is to pinch some buttons from the Workbench, like these taken from a standard window:

(fri1.iff The best place to pinch potential gadget graphics is the Workbench. Use your paint package's ability to grab other open screens.)

After a bit of work, you should end up with images better than these. Notice how the pairs are exactly the same, except for the swapping of the white and black shades which make up the outline. You can use different colours if you wish to make them stand out a bit more, but don't go overboard. Remember, the point of the gadget is to make things easier for the user: not to make the screen display look more technical and important.

(fri2.iff Use the gadgets you grabbed as a basis for your own designs. Remember to keep them simple and as obvious as possible, otherwise they loose their point.)

Blitz requires that the images used with the gadgets are dealt with as Shapes, and this makes it quite straightforward to load them into your program. In fact, all you need to do is carefully cut out each button as a brush in your paint program, and then save them to the same directory as your Blitz program in normal IFF format. Try to use the same palette for each brush to avoid strange colour changes when you load them into your Blitz program.

Here is how you can include the Shapes into your Blitz program:


LoadShape 0,"up1.iff"
LoadShape 1,"up2.iff"
LoadShape 2,"down1.iff"
LoadShape 3,"down2.iff"
LoadShape 4,"image1.iff"
LoadShape 5,"image2.iff"



As we are now using Shapes 0 to 5, we need to change the reference in the Picture drawing routine to use Shape 6 instead of Shape 0. If you don't remember to do this, weird things will happen when you click on the UP button after loading a page with a graphic image. To create gadgets from the shapes, use the following code:


ShapeGadget 0,614,221,0,2,0,1 ; Scroll up
ShapeGadget 0,614,232,0,3,2,3 ; Scroll down
ShapeGadget 0,614,210,1,4,4,5 ; Images on/off



You can see that the Image gadget is slightly different in that it has an extra 1 where the other gadgets have a 0. This is the flag which stands for "toggle on/off". When you click on the Image gadget it's going to lock to an on position or to an off position, rather than simply click in for an instant like the up and down buttons. 

As we specified the same gadget list as the existing proportional gadget,  the buttons will automatically be attached to the same window. Make sure you remember to shorten  the scroll bar and its border a little to make room for the three new buttons. Each of these gadgets was 11 pixels high.


Detection

To detect which gadgets are clicked, we need to add some code to the main loop in our program. So far we have used this loop to watch out for menu usage, and also clicks on the scrolling gadget. Now we need to expand it to react to the other gadgets being pressed.

To start with, we'll need to filter the messages a little more finely. Up until now there was only one gadget, and so we didn't need to work out which gadget had been pressed. That's changed, and so we need to include a Select GadgetHit command, in the same way in which we detect individual menus with a Select MenuHit command.  Here is the changed listing:


Case $40

      Select GadgetHit

        Case 1 ; Scroll bar clicked
        y.w=VPropPot(0,1)*height
        PositionSuperBitMap 0,y.w

        Case 2 ; Click on up button
        Case 3 ; Click on down button
        Case 4 ; Click on Image button
      End Select



As you can see it's nothing too dramatic, merely another  Select/End Select statement and some Cases to check for each gadget. We can use the existing code for the Scroll bar, as it still works in the same was as it always did.


Action!

Now it's time to make the buttons do something. Let's start with the Images button. If this is switched on (which is the default) then any graphics are displayed. If it's switched off,  the graphic won't be displayed. First of all, let's create a global variable at the start of the program which remembers the state On or Off. Using Blitz's built in On and Off values helps us avoid having to use number which can get confusing.

; Global variable

images=On


Now here is the code you place after the Case statement which detects the Image button being pressed. As you can see, it toggles the value between On and Off.

If images=On Then images=Off Else images=On


Finally, we should alter the Picture drawing code to take note of the state of the "images" variable. I'm going to tie this in which the code for a broken image, that is, an image which cannot be loaded. You might want to create a new section which draws an outline of the correct size instead.  Here's the section of the program which is changed:

If n$="broken" OR images=Off
    y=WCursY
    x=WCursX
    WBox x,y,x+16,y+16,2
    WLine x,y,x+16,y+16,1
    WLine x,y+16,x+16,y,1
  Else   ; Load in image as a "shape"

  LoadShape 6,n$

  ; Place shape in main bitmap

  y=WCursY
  x=WCursX

  WBlit 6,x,y

  End If


You can see that this section also changes the LoadShape from 0 to 6, as mentioned previously.

Move it

Now it's the turn of the up and down gadgets. We need to make the window scroll up and down depending on which button was pressed. This shouldn't be very hard, as we've already been using the scroll bar to do much the same thing.

Here's how it's down. First of all we get the current value from the scroll bar's proportional gadget. This is always in the range 0 to 1 (don't get confused with the 0 and 1 in the r=VPropPot(0,1) command though - here the 0 and 1 refer to the gadget list and gadget number respectively).

We then alter the value returned by a smidgen, and re-adjust the scroll gadget so it's knob moves to the right location. Then we scale up the value and use it to adjust the SuperBitmap, which effectively scrolls the display for us. We must remember to use Redraw to update the appearance of the scroll gadget.

Here's the listing for the Up button. This is placed after the relevant Case statement in the main loop.


        p=VPropPot(0,1)
        If p>0.02 Then p=p-0.02
        y.w=p*height
        SetVProp 0,1,p,(10/height)
        Redraw 0,1
        PositionSuperBitMap 0,y.w


Here's what the program looks like so far:

(fri3.iff Hey, looking good. Are there enough buttons? Naw, let's add some more...)

Call me buttons...

Of course, you should feel free to add more buttons to the program  -- as long as they make it easier to use. For example, you might want to create some buttons which move immediate to the top and bottom of the document, and also return to the previously loaded HTML page. Design and save the buttons as before. Here is the source code for loading and making them into gadgets. Again, the scroll bar needs to be shrunk to accommodate them.

LoadShape 0,"up1.iff"
LoadShape 1,"up2.iff"
LoadShape 2,"down1.iff"
LoadShape 3,"down2.iff"
LoadShape 4,"image1.iff"
LoadShape 5,"image2.iff"
LoadShape 6,"top1.iff"
LoadShape 7,"top2.iff"
LoadShape 8,"bottom1.iff"
LoadShape 9,"bottom2.iff"
LoadShape 10,"back1.iff"
LoadShape 11,"back2.iff"



ShapeGadget 0,614,199,0,2,0,1 ; Scroll up
ShapeGadget 0,614,210,0,3,2,3 ; Scroll down
ShapeGadget 0,614,177,1,4,4,5 ; Images on/off
ShapeGadget 0,614,188,0,5,6,7 ; Top of page
ShapeGadget 0,614,221,0,6,8,9 ; Bottom of page
ShapeGadget 0,614,232,0,7,10,11 ; Previous page


The code for moving to the beginning and end of the document is quite easy. Here it is, including the extra Case statements you need to include in the main loop:

  Case 5 ; Top of document

        SetVProp 0,1,0,(10/height)
        Redraw 0,1
        PositionSuperBitMap 0,0


        Case 6 ; Bottom of document

        SetVProp 0,1,1,(10/height)
        Redraw 0,1
        PositionSuperBitMap 0,height


As for the "move to previous document" button, well that's slightly more tricky. Technically you should create a linked list of pages, and add a new link every time a new page is loaded. I'll leave that for you to do yourself. Here I'm only going to store the previous page, that's all. So if you load page 1, move to page 2, then clicking on the previous page button brings back page 1. Clicking on it again brings back page 2, and so on.

One change I've made is to include a search for a default page called "home.html". If this document exists, it's loaded by the Browser when it first starts. This makes it easy to create an index of often used pages. OK, so here are a few more global variables:

; Global variable

images=On
previous$="NULL"
current$="home.html"


Now here is the altered lines in the Load{} function:

  
  SHARED previous$
  SHARED current$
  previous$=current$
  current$=p$

Nothing too clever here: the variables are SHARED (if not, the Load{} function would make up it's own variables of the same name) and then the previous page address updated.

Finally here is the GadgetHit code which occurs when you click on the Back button. 

Case 7 ; Previous document
      If load{previous$}=True Then Gosub process

Here's what the new Browser look like, complete with half a dozen buttons:

(fri4.iff: Six buttons are probably enough. Try re-positioning them at the top of the screen if you don't like them arranged vertically.)

That's probably enough buttons to be going on with! By next month we should have the brand new Blitz Support Suite in, and we might even be able to start taking advantage of its many features. For the complete source code developed this month, check the coverdisk CDROM.

-- end --