FvwmButtons is probably one of the most versatile modules that comes with FVWM. One can make about any type of 'Dock' or 'Panel' with it, plus they can all use Transparent colorsets. Taviso wrote a nice little intro to FvwmButtons that can be found here. The following is a collection of a few sample config to show you some of the neat stuff that one can do with FvwmButtons.

For the first example, I created a 'Dock' that has rounded corners, is transparent and contains an FvwmScript to create a simple clock.

#####
# DockButtons
###########
Style "DockButtons" !Title, !Handles, Sticky, WindowListSkip, \
        CirculateSkip, BorderWidth 0, HandleWidth 0
Colorset 15 RootTransparent, fg rgb:00/00/00, bg average, \
  Tint white 40, bgTint white 40, RootTransparent, \
  Shape dock-mask.xpm
Colorset 16 RootTransparent, fg rgb:00/00/00, bg average, \
  Tint white 40, bgTint white 40, RootTransparent

DestroyModuleConfig DockButtons: *
*DockButtons: Geometry 600x80
*DockButtons: Colorset 15
*DcokButtons: Rows 2
*DockButtons: Columns 30
*DockButtons: (1x2, Frame 0)
*DockButtons: (4x2, Frame 0, Icon 64x64/terminal.png, \
  Action(Mouse 1) "FvwmATerm", Action(Mouse 3) "FvwmXTerm")
*DockButtons: (4x2, Frame 0, Icon 64x64/firefox.png, \
  Action(Mouse 1) "FvwmFireFox")
*DockButtons: (4x2, Frame 0, Icon 64x64/xmms.png, \
  Action(Mouse 1) "FvwmXmms")
*DockButtons: (4x2, Frame 0, Icon 64x64/gimp.png, \
  Action(Mouse 1) "FvwmGimp")
*DockButtons: (4x2, Frame 0, Icon 64x64/editor.png, \
  Action(Mouse 1) "FvwmGVim")
*DockButtons: (8x1, Frame 0, \
  Swallow FvwmApplet-DigitalClock `FvwmScript $[fvwm_scrpt]/DigitalClock 16`)
*DockButtons: (2x1, Frame 0, Icon 32x32/cpumon.png)
*DockButtons: (2x1, Frame 0, Icon 32x32/memmon.png)
*DockButtons: (2x1, Frame 0, Icon 32x32/diskmon.png)
*DockButtons: (2x1, Frame 0, Icon 32x32/netmon.png)
*DockButtons: (1x2, Frame 0)

To start out with I set up the default styles for my DockButtons and then create two colorsets they will use. The one part that is different than any of the other colorsets I've used is the 'Shape' option. What this does is takes the 'shape' of an .xpm image and uses it to shape the button. How this works is I create a transparent .xpm file (as shown below), using the transparent part of the pixmap to describe the Shape of the window (Buttons). To read more on this, check out the FvwmThemes man page, and look for 'Shape', 'TitleShape' and 'AspectShape'.


The file dock-mask.xpm opened in the gimp.


DockButtons with rounded corners

The one thing you should notice in the DockButtons config is the 'DigitalClock' applet. How this works is it uses the module 'FvwmScript' which can be used to build graphical interfaces. All this simple DigitalClock script does is take the output from 'date "+%b %e, %R"', and prints it to a window. This script can take one argument which states what colorset to use. I then 'Swallow' the window into my DockButtons. This is a really nice feature because you can have FvwmButtons swallow many applications, including non dockable apps. In this case I swallow the output of the DigitalClock script, which is the date and time using the colorset sent to the script.

This next example is the FvwmButtons I use on my desktop. I have included the time, a few quick launch buttons for my favorite applications and then have swallowed the FvwmPager, xosview system monitors and an FvwmScript that takes the output from lm-sensors.

Style "UkkostaButtons" !Title, !Handles, Sticky, WindowListSkip, \
        CirculateSkip, BorderWidth 0, HandleWidth 0
Colorset 15 fg rgb:00/00/00, bg #e6e7d7, Shape ukkostabuttons-mask.xpm
Colorset 16 fg rgb:00/00/00, bg #e6e7d7

DestroyModuleConfig UkkostaButtons: *
*UkkostaButtons: Geometry 110x580-20+20@1
*UkkostaButtons: Colorset 15
*UkkostaButtons: Pixmap $[fvwm_img]/buttons-bg.png
*UkkostaButtons: Rows 40
*UkkostaButtons: Columns 4
*UkkostaButtons: Frame 0
*UkkostaButtons: Font "Shadow=2:xft:Winks:Medium:pixelsize=24:minspace=False:antialias=True"
*UkkostaButtons: (4x2, Frame 0, \
        Action(Mouse 1) 'All (Sticky Iconifiable) Iconify', \
        Title(Center) "ukkosta")
*UkkostaButtons: (4x1, Frame 0, \
        Swallow FvwmApplet-DigitalClock `FvwmScript $[fvwm_scrpt]/DigitalClock 16`)
*UkkostaButtons: (2x4, Frame 0, \
        Icon 48x48/firefox.png, \
        Action(Mouse 1) "FvwmFireFox")
*UkkostaButtons: (2x4, Frame 0, \
        Icon 48x48/terminal.png, \
        Action(Mouse 1) "FvwmXTerm", \
        Action(Mouse 2) "Exec exec pterm", \
        Action(Mouse 3) "FvwmATerm")
*UkkostaButtons: (2x4, Frame 0, \
        Icon 48x48/editor.png, \
        Action(Mouse 1) "FvwmGVim", \
        Action(Mouse 3) "FvwmXEmacs")
*UkkostaButtons: (2x4, Frame 0, \
        Icon 48x48/chat.png, \
        Action(Mouse 1) "FvwmTalkbox", \
        Action(Mouse 2) "FvwmIrssi", \
        Action(Mouse 3) "FvwmGaim")
*UkkostaButtons: (2x4, Frame 0, \
        Icon 48x48/xmms.png, \
        Action(Mouse 1) "FvwmXmms", \
        Action(Mouse 2) "FvwmMixer")
*UkkostaButtons: (2x4, Frame 0, \
        Icon 48x48/tux.png, \
        Action(Mouse 1) "FvwmRox")
*UkkostaButtons: (2x4, Frame 0, \
        Icon 48x48/gimp.png, \
        Action(Mouse 1) "FvwmGimp", \
        Action(Mouse 2) "FvwmXpaint", \
        Action(Mouse 3) "FvwmXfig")
*UkkostaButtons: (2x4, Frame 0, \
        Icon 48x48/x.png, \
        Action(Mouse 1) "FvwmXlock", \
        Action(Mouse 2) "Restart", \
        Action(Mouse 3) "Quit")
*UkkostaButtons: (4x8, Frame 0, \
        Swallow FvwmPager 'Module FvwmPager')
*UkkostaButtons: (1x2, Frame 0, \
        Icon menu/cpumon.png, \
        Action(Mouse 1) 'FvwmTop')
*UkkostaButtons: (3x2, Frame 0, \
        Swallow(UseOld) "cpumon" `Exec exec xosview -title cpumon +cpu`)
*UkkostaButtons: (1x2, Frame 0, \
        Icon menu/memmon.png)
*UkkostaButtons: (3x2, Frame 0, \
        Swallow(UseOld) "memmon" `Exec exec xosview -title memmon +mem`)
*UkkostaButtons: (1x2, Frame 0, \
        Icon menu/diskmon.png)
*UkkostaButtons: (3x2, Frame 0, \
        Swallow(UseOld) "diskmon" `Exec exec xosview -title diskmon +disk`)
*UkkostaButtons: (1x2, Frame 0, \
        Icon menu/netmon.png, \
        Action(Mouse 1) "Exec exec xterm -title iptraf -e 'sudo /usr/sbin/iptraf -i all'")
*UkkostaButtons: (3x2, Frame 0, \
        Swallow(UseOld) "netmon" `Exec exec xosview -title netmon +net`)
*UkkostaButtons: (4x4, Frame 0, \
        Swallow FvwmApplet-Sensors `FvwmScript $[fvwm_scrpt]/Sensors 11`)
*UkkostaButtons: (4x1, Frame 0)

These buttons have about everything I want to see on my desktop in there. On the top I have my computers name and the time, followed by a collection of 'quick launch' buttons. Next I swallow the FvwmPager so I can see what is opened on my desktop. After the pager are a collection of monitors using xosview. Xosview is a collection of system monitors that can display a graphical bar to show the current status. To set this up first I turn off all the monitors by default in .Xdefaults file. Then I swallow one for each monitor I want telling xosview what to display. For example my 'cpumon' is run by the line "Swallow(UseOld) "cpumon" `Exec exec xosview -title cpumon +cpu`". What this does is tell the FvwmButtons to swallow (and use the running app if it exists) an app by the name of cpumon. It then launches xosview, which it told to have the title of cpumon and to turn on the cpu monitor. With this I get four monitors, cpu, memory, disk and network. At the end of my buttons I swallow another FvwmScript by the name of 'Sensors', that takes the output from the sensors command (lm-sensors) and write it to the UkkostaButtons. Here is an image of what these buttons look like.

For the last example, I will share with you a collection of functions that got posted to the fvwm mailing list by Liusd that I have modified. These functions make a one button dock, that will 'Hover' the Icon above the dock when the mouse is moved over it. These functions work fairly well in 2.5.10 (though there is a little bit of choppiness in them). As a note since these functions were posted, a new patch to the CVS tree of FVWM has included HoverIcon and PressIcon support for FvwmButtons configuration. I like the visual look of this a little better than just changing the Icon on a mouse over or mouse click. Reason being is this will actually make a new transparent FvwmButton that can hover above the current button and isn't constrained to the original button's geometry. With that being said, lets look at the collection of functions.

#####
# FvwmDock Styles
###########
Style FvwmDock* Sticky, NoTitle, NoHandles, BorderWidth 0, WindowListSkip, \
        CirculateSkip
Style FvwmDock-* StaysOnBottom, FixedPosition, FixedSize
Style FvwmDockA* StaysOnTop, FixedSize

################
# 
# ButtonDock Functions. These collection of functions create
#   single icon buttons that cause the button to hover above
#   everything when the mouse is moved atop of it.  To get these
#   to work it should only take copying all the five functions
#   CreateDock, EnterHandler, LeaveHandler, RestoreButton
#   and CreateActiveButton.  Then call the function 'CreateDock'
#   for each button on the dock bar. The function works as follows:
#
# CreateDock '$0' '$1' '$2' '$3' '$4' '$5' '$6' '$7' '$8' '$9'
#   $0 -> ButtonId
#   $1 -> Geometry
#   $2 -> Icon
#   $3 -> LargeIcon
#   $4 -> X offset (from upper left hand corner)
#   $5 -> Y offset (from upper left hand corner)
#   $6 -> action for Mouse 1
#   $7 -> action for Mouse 2
#   $8 -> action for Mouse 3
#   $9 -> Size of LargeIcon
#
###################################
DestroyFunc CreateDock
AddToFunc CreateDock
+ I DestroyModuleConfig FvwmDock-$0: *
+ I *FvwmDock-$0: Geometry $1
+ I *FvwmDock-$0: Font none
+ I *FvwmDock-$0: Colorset 9
+ I *FvwmDock-$0: Frame 0
+ I *FvwmDock-$0: Padding 0 0
+ I *FvwmDock-$0: (Id D$0, Icon $2)
+ I Module FvwmButtons FvwmDock-$0
+ I AddToFunc StartFunction I Module FvwmAuto 100 -menter 'EnterHandler $0 "$2" $3 $4 $5 $6 $7 $8 $9' 'LeaveHandler $0 $2'

DestroyFunc EnterHandler
AddToFunc EnterHandler
+ I ThisWindow (FvwmDock-$0) ThisWindow (!FvwmDock-*) Deschedule 35
+ I ThisWindow (FvwmDock-$0) WindowId $[last_winid] (FvwmDockA$0) Deschedule 35
+ I ThisWindow (FvwmDockA$0) Deschedule 45
+ I ThisWindow (FvwmDock-$0) SendToModule FvwmDock-$0 ChangeButton D$0 Icon "shadow.png"
+ I ThisWindow (FvwmDock-$0) CreateActiveButton $0 '$1' $2 $3 $4 $5 $6 $7 $8

# Delay ms should be longer than delay in FvwmAuto
DestroyFunc LeaveHandler
AddToFunc LeaveHandler
+ I ThisWindow SetEnv last_winid $[w.id]
+ I ThisWindow (FvwmDockA$0) Schedule 110 35 RestoreButton $0 $1
+ I ThisWindow (FvwmDock-$0) Schedule 110 45 RestoreButton $0 $1

DestroyFunc RestoreButton
AddToFunc RestoreButton
+ I SendToModule FvwmDock-$0 ChangeButton D$0 Icon $1
+ I KillModule FvwmButtons FvwmDockA$0

DestroyFunc CreateActiveButton
AddToFunc CreateActiveButton
+ I DestroyModuleConfig FvwmDockA$0: *
+ I *FvwmDockA$0: Pixmap none
+ I *FvwmDockA$0: BoxSize fixed
+ I *FvwmDockA$0: Frame 0
+ I *FvwmDockA$0: Font none
+ I *FvwmDockA$0: Padding 0 0
+ I *FvwmDockA$0: Rows 1
+ I *FvwmDockA$0: Columns 1
+ I ThisWindow PipeRead `echo *FvwmDockA$0: Geometry $8+$(($[w.x]$3))+$(($[w.y]$4))`
+ I *FvwmDockA$0: (Icon $2, Action(Mouse 1) '$5', Action(Mouse 2) '$6', Action(Mouse 3) '$7')
+ I Module FvwmButtons FvwmDockA$0

How these functions work is all you need to do is call the CreateDock function from your StartFunction (or fvwm2rc file) for each icon you want in your dock. As seen above the CreateDock function takes 10 arguments, that tell it what size, icons, and actions you want to bind to the button. For example say you wanted to create a two icon dock with one icon above the other. What you would do is call the CreateDock function twice for both docks, and then use the geometry option to stack the two icons right next to each other. For example I added the two lines to my StartFunction;

+ I CreateDock '10' '56x56-74+62@1' '48x48/firefox.png' '64x64/firefox.png' '-20' '-30' 'FvwmFireFox' 'Nop' 'Nop' '64x64'
+ I CreateDock '11' '56x56-74+116@1' '48x48/xmms.png' '64x64/xmms.png' '+20' '-30' 'FvwmXmms' 'Nop' 'FvwmMixer' '64x64'

This creates two Docks, number 10 and number 11. Then when I move my mouse over one of the Docks, it will replace the current icon with shadow.png and then make a temporary Dock which has the large icon in it. The following three pictures should show how this effect works. Depending on your cpu this may be a little choppy, but all in all I still think it looks good.

              

One final note, is all the event handling to make all this effect happen is all setup to run via the StartFunction, so if you don't load these up by the time the StartFunction is run, you'll have to rerun the StartFunction to get it to work.


Advanced Menu index Other Resources