Home   Archive   Permalink



Changing button attributes

I am trying to create a user interface that I saw on a computer display at the Hotel Metropole in Cork, Ireland, on vacation. It was an informational display that had a column of white buttons down the left side of a portrait-oriented monitor. Each button represented a category of information, and when it was clicked, it turned red and another part of the display showed sub-categories of information. The sample script below is an attempt to get that column of white buttons.    
    
The sample below does not work, and I am not even sure if it CAN work no matter what I do. But, looking over the code for the "button" style, I get the impression that it MIGHT work if I only got the right things set. I am wondering if anyone has any thoughts on the matter.
    
Thank you.
    
R E B O L [
     Title: "Button changer"
]
    
;; Change all buttons back to the original state of
;; a white button with red text
RESET-ALL: does [
     B1/color: white
     B1/font/colors: [255.0.0 0.0.0]
     show B1
    
     B2/color: white
     B2/font/colors: [255.0.0 0.0.0]
     show B2
    
     B3/color: white
     B3/font/colors: [255.0.0 0.0.0]
     show B3
]
    
;; Debugging display
SHOW-ATTRIBUTES: does [
     print ["B1/color: " B1/color]
     print ["B2/color: " B2/color]
     print ["B3/color: " B3/color]
     print "-------------------------"
]
    
;; The window is a column of white buttons with red text.
;; When a button is clicked, it changes to a red button
;; with white text...AND...any previously-clicked button
;; goes BACK TO being a white button with red text.
;; In other words, only one button can be red at any time.
MAIN-WINDOW: layout [
     below
    
     B1: button white 300x60 "BUTTON 1" font [
         colors: [255.0.0 0.0.0]
         size: 24
     ] [
         RESET-ALL
         B1/color: red
         B1/font/colors: [255.255.255 0.0.0]
         show B1        
     ]
    
     B2: button white 300x60 "BUTTON 2" font [
         colors: [255.0.0 0.0.0]
         size: 24
     ] [
         RESET-ALL
         B2/color: red
         B2/font/colors: [255.255.255 0.0.0]
         show B2        
     ]
    
     B3: button white 300x60 "BUTTON 3" font [
         colors: [255.0.0 0.0.0]
         size: 24
     ] [
         RESET-ALL
         B3/color: 255.0.0
         B3/font/colors: [255.255.255 0.0.0]
         show B3        
     ]
    
     button 120 "Probe" [SHOW-ATTRIBUTES]
     button 120 "Quit" [quit]
     button 120 "Debug" [halt]
]
    
view center-face MAIN-WINDOW
    


posted by:   Steven White       12-Aug-2019/17:51:19-7:00



Would this be tab-like functionality? There's a few things to consider here, I'll break it down.
    
First off, I believe you are looking for TOGGLE:
    
     view layout [
         toggle "One" of 'main [output/text: face/text show output]
         toggle "Two" of 'main [output/text: face/text show output]
         toggle "Three" of 'main [output/text: face/text show output]
         return
         output: text 300 ""
     ]
    
With VID, the visual dimensions of a particular style is tied to its feel. Consider the TOGGLE:
    
     layout [
         my-tog: toggle "Toggle One"
         do [
             probe my-tog/feel
         ]
     ]
    
You can see here that there is only so much going being changed at the various points of interaction. We could make this a bit finer grained, but we're going to replace the REDRAW function to get the behaviour we're looking for:
    
     view layout [
         ; custom style: menu-button
         style menu-button toggle of 'main-menu
         300x60 ; size
         white red ; set face/colors
         shadow none ; turn off the font shadow
         edge none ; no beveling
    
         [set-face output face/text] ; our action
    
         ; here's our custom feel
         feel [
             redraw: func [face action position][
                 ; we'll keep this part that allows for different text states
                 if all [face/texts face/texts/2] [
                     face/text: either face/state [face/texts/2][face/texts/1]
                 ]
    
                 ; and set the colors
                 if face/colors [
                     face/color: pick face/colors not face/state
                     face/font/color: pick face/colors not not face/state
                 ]
             ]
         ]
    
         menu-button "One" "One Pressed"
         menu-button "Two" "Two Pressed"
         menu-button "Three" "Three Pressed"
    
         return
         output: text 200
     ]

posted by:   Chris       14-Aug-2019/11:05:37-7:00



That initial TOGGLE example simplified:
    
     view layout [
         toggle "One" of 'main [set-face output face/text]
         toggle "Two" of 'main [set-face output face/text]
         toggle "Three" of 'main [set-face output face/text]
    
         return
         output: text 300 ""
     ]

posted by:   Chris       14-Aug-2019/11:07:32-7:00



Regarding your example, could you tell me what the "of 'main" does? I don't recognize that from any other examples I have seen and the program seems to work without it.
    
Thank you.

posted by:   Steven White       15-Aug-2019/8:57:16-7:00



OF 'WORD groups multiple TOGGLE faces together:
    
     view layout [
         toggle "One" of 'main
         toggle "Two" of 'main
         toggle "Three" of 'main
    
         return
    
         toggle "One" of 'secondary
         toggle "Two" of 'secondary
         toggle "Three" of 'secondary
     ]

posted by:   Chris       15-Aug-2019/20:58:26-7:00



I should say that without OF, a TOGGLE acts in isolation with binary state (on/off). With an OF group, it works a little more like a radio button. OF can also be used with RADIO and CHECK.

posted by:   Chris       15-Aug-2019/21:06:04-7:00



Name:


Message:


Type the reverse of this captcha text: "g r a - o d"



Home