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
|