Glimmr Canvas-Based Drawing

version 2/101030 by Erik Temple

  • Home page
  • Beginning
  • Previous
  • Next



  • Example: * Simpler Buttons - This example is a simple refinement of the previous example (Simple Buttons). In Simple Buttons, we had to supply what really was redundant information: the text of the label was the same as the linked replacement-command of its button, while the origin coordinate of the label is easily deducible from the placement and size of the button outline (the label is centered on the button). This example lets us define the labels minimally and auto-generate their text-strings and origin coordinates from their associated buttons. (One could go even farther with this approach, really.)

    Simpler Buttons also uses a bitmap font for variety's sake. Note that if you make the window too narrow--unplayably narrow, really--the labels will not fit within the button outlines. This is because bitmaps can't be scaled below 1 pixel per bit, while the canvas itself is scaled to much less than this. This is something to be wary of whenever you are using bitmaps.

    The example starts out in essentially the same way as the previous:

        "Simpler Buttons"

        Include Glimmr Canvas-Based Drawing by Erik Temple.
        Include Glimmr Graphic Hyperlinks by Erik Temple.
        Include Glimmr Bitmap Font by Erik Temple.

        The graphics-window is a graphlink g-window spawned by the main-window. The position is g-placebelow. The scale method is g-fixed-size. The measurement is 35. The back-colour is g-White.

        The graphics-canvas is a g-canvas. The canvas-width is 248. The canvas-height is 35.
        The associated canvas of the graphics-window is the graphics-canvas.
        The associated canvas of a g-element is the graphics-canvas.

        The back-colour of the main-window is g-White.

        Hello is a room.

        
        Table of Common Color Values (continued)
      glulx color value  assigned number  
      g-LightGray  15066597  
      g-MidGray  12829635  


    Now we get to the new stuff. The short loop code that occurs before we open the graphics window sets origin coordinates of the labels by finding the center point of each button, then using that coordinate for the label's origin. We manually change the vertical coordinate for better fit (because the origin of the label is the top line rather than the center, we need to move it up, otherwise it will flow in from the center of the button down, filling up only the lower half of the button background).

    The text-string is replaced with the linked replacement-command of the button. Note that Inform is very picky about the conversion of text (the linked replacement-command of the button) into indexed text (the text-string of the label). We use a replacement routine to handle this task.

    Compare the Table of Button Labels here with the one for Simple Buttons--we've been able to reduce the work of label creation to simple naming. (We could avoid even this if we wanted to use Jesse McGrew's Dynamic Objects extension to actually create new label objects as needed to fit our buttons...)

        When play begins:
            repeat with item running through buttons:
                let the current-label be the associated label of item;
                now the origin of the current-label is the center-point of item;
                now entry 2 of the origin of the current-label is 12;
                replace the text "0" in text-string of the current-label with the linked replacement-command of item;
            open up the graphics-window.
        
        A button is a kind of stroked rectangle primitive. The associated canvas of a button is the graphics-canvas. The tint of a button is g-LightGray. The background tint of a button is g-MidGray. The graphlink status of a button is g-active.

        A label is a kind of bitmap-rendered string. The associated canvas of a label is the graphics-canvas. The scaling factor of a label is 0.2500. The display-layer of a label is 2. The alignment of a label is center-aligned. The tint is g-Dark-Grey. The text-string is "0".

        A button has a label called the associated label.

        Label_1, Label_2, Label_3, and Label_4 are labels.

        Some buttons are defined by the Table of Glimmr Buttons.

        Table of Glimmr Buttons
      button  origin  endpoint  associated label  linked replacement-command  
      Button_1  {10, 7}  {52, 28}  Label_1  "Undo"  
      Button_2  {61, 7}  {103, 28}  Label_2  "Save"  
      Button_3  {111, 7}  {165, 28}  Label_3  "Restore"  
      Button_4  {173, 7}  {238, 28}  Label_4  "Transcript"  

        [After printing the banner text:
            say "[line break]This is one of two very similar examples for the Glimmr Canvas-Based Drawing extension. It demonstrates a simple set of UI buttons. The buttons are not sprites. In other words, they are created without the need to make an external PNG or JPEG image for each one. Instead, we use Glimmr's functions for easily drawing rectangles and more complex elements. A bit-rendered string provides the button's text, and this is superimposed on a stroked rectangle primitive that creates the body of the button. No image files at all are used. A simple animation allows the button to change color briefly when pressed, to provide visual feedback.[paragraph break]".]

    And the (optional) button animations (see the previous example for explanation):

        To revert the/-- button/-- after (T - a number) millisecond/milliseconds:
            (- glk_request_timer_events({T}); -)
        
        To stop the/-- timer:
            (- glk_request_timer_events(0); -)

        A glulx timed activity rule (this is the redraw button from timer rule):
            stop the timer;
            now the tint of the current graphlink is g-LightGray;
            follow the window-drawing rules for the graphics-window.
        
        First graphlink processing rule for a button (called the depressed):
            change the tint of the depressed to g-MidGray;
            follow the window-drawing rules for the graphics-window;
            revert the button after 85 milliseconds.
        
        Include Undo Output Control by Erik Temple.

        After undoing an action:
            revert the button after 0 milliseconds.