Glimmr Form Fields

version 1/101201 by Erik Temple

  • Home page
  • Beginning
  • Previous



  • Example: ** Color Picker - Inform 6/Glulx requires colors to be specified in hex format (e.g., FEFE01). However, Inform 7 does not accept hex values as numbers, so it is necessary to provide such values as a decimal; for example FEFE01 must be given as 16711169 at the I7 level. This is inconvenient, especially when we're beginning with an RGB triad, since we must first convert the RGB to hex, and then convert the hex value to a decimal. This example ameliorates this problem by creating a tool that converts instantly between RGB, hex, and decimal.

    As an example of the extension's functionality, the color picker demonstrates the use of the field focusing and defocusing rules, one possible implementation of tab order, and shows how to signal errors using the field input error-handling rules. Much of the code is also taken up with code to convert between RGB, hex (presented as an indexed text), and packed decimal.

    You may prefer to do a release build and run this in a standalone interpreter for better performance. If you choose not to release to a standalone file, you may need to type slowly into the fields.

        "Color Picker" by Erik Temple
        
        Include Glimmr Form Fields by Erik Temple.
        Include Glimmr Image Font by Erik Temple.
        Include Extended Debugging by Erik Temple.
        
        Use no status line.
        
        [Use Glimmr debugging.]
        [Use input loop debugging.]
        
        Section - Graphics window
        
        The graphics-window is a graphics g-window spawned by the main-window. The position of the graphics-window is g-placeright. The measurement of the graphics-window is 200. The back-colour of the graphics-window is g-light-grey. The graphics-window is g-graphlinked.
        
        The graphics-canvas is a g-canvas. The canvas-width is 200. The canvas-height is 250. The associated canvas of the graphics-window is graphics-canvas. The associated canvas of a g-element is the graphics-canvas.
            
         After offset calculation of a graphics g-window (called the window) (this is the place canvas at top rule):
            now y-offset of window is 0.
            
        When play begins:
            if glulx graphics is supported:
                open up the graphics-window;
                write "RGB Hex Decimal Color-Picker[paragraph break]" to the file of tickertape;
            otherwise:
                say "This interpreter does not support graphics. Exiting...";
                abide by the immediately quit rule.
            
        
        Section - Input strings
        [Note that the parenthetical definition of the text-string column is NECESSARY in 6E72.]
        
        The tint of an image-rendered string is usually g-Black.
        
        Some image-rendered strings are defined by the Table of Image-Rendered String Elements.
        
        Table of Image-Rendered String Elements
      image-rendered string  origin  text-string (indexed text)  display-layer  scaling factor  
      red_label  {45, 22}  "Red"  2  0.2500  
      green_label  {45, 53}  "Green"  2  0.2500  
      blue_label  {46, 84}  "Blue"  2  0.2500  
      ornament_left  {127, 30}  "{"  1  1.0000  
      ornament_right  {176, 28}  "}"  1  1.0000  
      dec_label  {25, 193}  "Decimal"  1  0.2500  
      hex_label  {25, 139}  "Hexadecimal"  1  0.2500  
      red_string  {57, 22}  ""  2  0.2500  
      green_string  {57, 54}  ""  2  0.2500  
      blue_string  {57, 85}  ""  2  0.2500  
      hex_string  {29, 162}  ""  2  0.2500  
      dec_string  {29, 216}  ""  2  0.2500  
        
        Red_label, green_label, blue_label, and ornament_left are right-aligned.
        
        
        Section - Input Fields
        
        An input field is a kind of stroked rectangle primitive. The background tint of an input field is usually g-medium-grey. The tint of an input field is g-white. The display-layer of an input field is usually 1. The line-weight of an input field is usually 2. The display status is usually g-active. An input field is usually numerical.
        
        Some input fields are defined by the Table of Input field Elements.
        
        Table of Input Field Elements
      input field  origin  endpoint  maximum length  input-stream  next-field  
      red_input  {52, 19}  {87, 39}  3  red_string  green_input  
      green_input  {52, 51}  {87, 71}  3  green_string  blue_input  
      blue_input  {52, 82}  {87, 102}  3  blue_string  g-null-element  
      dec_input  {23, 212}  {177, 234}  8  dec_string  g-null-element  
      hex_input  {23, 158}  {177, 180}  7  hex_string  g-null-element  
        
        
        Hex_input is not numerical.
        
        When play begins (this is the apply numeric filter rule):
            disallow negative values in numerical filter;
            repeat with item running through numerical input fields:
                now the accepted standard input of item is the numerical filter.
                
        [When play begins (this is the status line setup rule):
            now the left hand status line is "Packed decimal: [associated value of dec_input]";
            now the right hand status line is "hex: [text-string of hex_string]".]
        
        
        Section - Previews
        
        A preview is a kind of stroked rectangle primitive. The graphlink status of a preview is g-inactive. The line-weight of a preview is 5. The tint of a preview is usually g-black.
        
        Some previews are defined by the Table of Preview Elements.
        
        Table of Preview Elements
      preview  origin  endpoint  background tint  
      preview_2  {131, 67}  {168, 100}  g-black  
      preview_1  {131, 19}  {168, 52}  g-white  
        
        
        [We want to display an arbitrary RGB color, not a preexisting color term. Canvas-Based Drawing currently follows Glulx Text Effects and works only with pre-defined color terms (numbers being quite unwieldy), so we need to write a new element display rule that uses the decimal value (from the dec_input element to determine the color of the preview.]
        
        An element display rule for a preview (called the stroked rectangle):
            strectdraw (associated value of dec_input) in (current window) from (win-x) by (win-y) to (end-x) by (end-y) with (stroke) stroke of (color background tint);
        
        
        Section - Field calculations
        
        A field focusing rule for an input field (called the field):
            now the background tint of the field is g-black.
            
        A field defocusing rule for an input field (called the field):
            now the background tint of the field is g-medium-grey;
            if the field is numerical and the associated value of the field is less than 0, now the associated value of the field is 0;
            if the field is red_input or the field is green_input or the field is blue_input:
                if the associated value of the field > 255, now the associated value of the field is 255;
                change the text-string of the (input-stream of the field) to "[associated value of the field]";
                update the decimal using RGB;
                update the hex using decimal;
            if the field is hex_input:
                update the decimal using hex;
                update the hex using decimal;
                update the RGB using decimal;
            if the field is dec_input:
                if the associated value of the field > 16777215, now the associated value of the field is 16777215;
                change the text-string of the (input-stream of the field) to "[associated value of the field]";
                update the hex using decimal;
                update the RGB using decimal;
            say "[first time]Tickertape record of operations:[paragraph break][only]RGB ([associated value of red_input], [associated value of green_input], [associated value of blue_input]) :: #[text-string of hex_string] :: [associated value of dec_input].[line break][run paragraph on]";
            append "[first time]Tickertape record of operations:[paragraph break][only]RGB ([associated value of red_input], [associated value of green_input], [associated value of blue_input]) :: #[text-string of hex_string] :: [associated value of dec_input][line break]" to the file of tickertape.
            
        The file of tickertape is called "conversions".
        
        
        To update the decimal using RGB:
            now the associated value of dec_input is r = (associated value of red_input) g = (associated value of green_input) b = (associated value of blue_input);
            now the text-string of dec_string is "[associated value of dec_input]".
            
        To update the decimal using hex:
            now the associated value of dec_input is hex (text-string of hex_string);
            now the text-string of dec_string is "[associated value of dec_input]".
        
        To update the hex using decimal:
            now the text-string of hex_string is "[hex equivalent of the associated value of dec_input]".
            
        To update the RGB using decimal:
            now the associated value of red_input is the R component of the associated value of dec_input;
            now the text-string of red_string is "[the associated value of red_input]";
            now the associated value of green_input is the G component of the associated value of dec_input;
            now the text-string of green_string is "[the associated value of green_input]";
            now the associated value of blue_input is the B component of the associated value of dec_input;
            now the text-string of blue_string is "[the associated value of blue_input]";
            
        To decide which indexed text is hexadecimal/hex equivalent of (N - a number):
            let hex be indexed text;
            let hex be "";
            let target be N;
            while target > 0:
                let digit be the remainder after dividing the target by 16;
                if digit > 9:
                    let digit be digit plus 55;
                otherwise:
                    let digit be digit plus 48;
                let hex be "[char-code (digit)][hex]";
                let target be the target divided by 16;
            while the number of characters in hex is less than 6:
                let hex be "0[hex]";
            decide on hex.
            
        To decide which number is the R component of (N - a number):
            decide on N divided by 65536.
        
        To decide which number is the G component of (N - a number):
            decide on (the remainder after dividing N by 65536) divided by 256.
            
        To decide which number is the B component of (N - a number):
            decide on the remainder after dividing (the remainder after dividing N by 65536) by 256.
            
        
        Section - Scenario
        
        The story headline is "Interactive Color Selection".
        
        Convert is a room. "Use fields to the right to convert between RGB values, the hexadecimal representation of a color, and the packed decimal form that I7 Glulx uses. Press Return or Enter to move to the next field, and press Escape to finish.[paragraph break]Press Q to quit (escape from field input first).[paragraph break]A tickertape record of each new color will be output in this window, and also to an external file called 'conversions'."
        
        Instead of jumping:
            initiate field input in red_input.
            
        
        Section - Input loop
        
        When play begins:
            now the command prompt is "".
        
        The focal event type of main input is char-event.
        
        Last input loop setup rule for a char-event when the current input loop is main input:
            rule succeeds.
            
        An input loop event-handling rule for a char-event when the current input loop is main input (this is the Q to quit rule):
            if keystroke is "q" or keystroke is "Q":
                say "Exiting...";
                abide by the immediately quit rule;
            rule succeeds.
                
        
        Section - Sounds
        
        Sound of error is the file "Funk.aiff".
        
        A field input error-handling rule:
            play sound of error.