AwesomeWm status bar theme generator

AwesomeWm is an incredible extensible window manager. You can literally programming your WM in every aspect. The programming language is lua and the API is okay.

You have also the possibility to programming your status bar in look and feel.
My current status bar looks like this:

On the left side I have my tags. This icons are Unicode chars from the font-awesome project.

On the right part I have my time tracker (based on watson), current date, memory usage, cpu usage, hard drive usage and my battery status.

So far, so common.

If you defined a background color for a widget, you can define a alpha Chanel as well. To get this smooth color flow between the widget I used images (reminds me on the good ol' html programming time).
But to use spacer images has the drawback, if I want to use pywal to change my themes, this spacer images will look ugly.

To avoid this ugliness, I generate the divider with the right alpha channel to get a smooth background transition. I am using imagemagick to generate my images.


# get the current colors from the pywal cache
input="/home/maren/.cache/wal/colors.yml"

wallpaper=$(cat ~/.cache/wal/wal | head -n1)
background=$(yq r ~/.cache/wal/colors.yml special.background )
foreground=$(yq r ~/.cache/wal/colors.yml special.foreground )

#define the alpha channel
alpha=bb

color0=$(yq r ~/.cache/wal/colors.yml colors.color0 )$alpha
color1=$(yq r ~/.cache/wal/colors.yml colors.color1 )$alpha
color2=$(yq r ~/.cache/wal/colors.yml colors.color2 )$alpha
color3=$(yq r ~/.cache/wal/colors.yml colors.color3 )$alpha
color4=$(yq r ~/.cache/wal/colors.yml colors.color4 )$alpha
color5=$(yq r ~/.cache/wal/colors.yml colors.color5 )$alpha
color6=$(yq r ~/.cache/wal/colors.yml colors.color6 )$alpha
color7=$(yq r ~/.cache/wal/colors.yml colors.color7 )$alpha
color8=$(yq r ~/.cache/wal/colors.yml colors.color8 )$alpha
color9=$(yq r ~/.cache/wal/colors.yml colors.color9 )$alpha
color10=$(yq r ~/.cache/wal/colors.yml colors.color10 )$alpha
color11=$(yq r ~/.cache/wal/colors.yml colors.color11 )$alpha
color12=$(yq r ~/.cache/wal/colors.yml colors.color12 )$alpha
color13=$(yq r ~/.cache/wal/colors.yml colors.color13 )$alpha
color14=$(yq r ~/.cache/wal/colors.yml colors.color14 )$alpha
color15=$(yq r ~/.cache/wal/colors.yml colors.color15 )$alpha

# replace placeholder in the theme.template.lua
sed -e "s/BGCOLOR/$background/g" \
    -e "s/FGCOLOR/$foreground/g" \
    -e "s/COLOR1/$color1/g" \
    -e "s/COLOR2/$color2/g" \
    -e "s/COLOR3/$color3/g" \
    -e "s/COLOR4/$color4/g" \
    -e "s/COLOR5/$color5/g" \
    -e "s/COLOR6/$color6/g" \
    -e "s/COLOR7/$color7/g" \
    -e "s/COLOR8/$color8/g" \
    -e "s/COLOR9/$color9/g" \
    -e "s/COLOR10/$color10/g" \
    -e "s/COLOR11/$color11/g" \
    -e "s/COLOR12/$color12/g" \
    -e "s/COLOR13/$color13/g" \
    -e "s/COLOR14/$color14/g" \
    -e "s/COLOR15/$color15/g" \
    -e "s#WALLPAPER#$wallpaper#g" \
    /home/maren/dotfiles/awesome/theme.template.lua > /home/maren/dotfiles/awesome/theme.lua

spacer1=$color1.$alpha
spacer2=$color2.$alpha
spacer3=$color3.$alpha
spacer4=$color4.$alpha
spacer5=$color5.$alpha
spacer6=$color6.$alpha
spacer7=$color7.$alpha
spacer8=$color8.$alpha

#Generate images with a gradient

#magick -size 50x50 -colorspace RGB -define gradient:angle=80 gradient:#00000000-$spacer1 /home/maren/dotfiles/awesome/icons/display/1.png
#magick -size 50x50 -colorspace RGB -define gradient:angle=80 gradient:$spacer1-$spacer2 /home/maren/dotfiles/awesome/icons/display/2.png
#magick -size 50x50 -colorspace RGB -define gradient:angle=80 gradient:$spacer2-$spacer3 /home/maren/dotfiles/awesome/icons/display/3.png
#magick -size 50x50 -colorspace RGB -define gradient:angle=80 gradient:$spacer3-$spacer4 /home/maren/dotfiles/awesome/icons/display/4.png
#magick -size 50x50 -colorspace RGB -define gradient:angle=80 gradient:$spacer4-$spacer5 /home/maren/dotfiles/awesome/icons/display/5.png
#magick -size 50x50 -colorspace RGB -define gradient:angle=80 gradient:$spacer5-#00000000 /home/maren/dotfiles/awesome/icons/display/6.png

# generate images with 2 triangles
magick convert -size 100x100 xc:transparent  \
   -draw "fill #00000000 path 'M 0,0 L 0,100 L 100,100 Z' " \
   -draw "fill $spacer1 path 'M 0,0 L 100,0 L 100,100 Z' " /home/maren/dotfiles/awesome/icons/display/1.png
magick convert -size 100x100 xc:transparent  \
   -draw "fill $spacer1 path 'M 0,0 L 0,100 L 100,100 Z' " \
   -draw "fill $spacer2 path 'M 0,0 L 100,0 L 100,100 Z' " /home/maren/dotfiles/awesome/icons/display/2.png
magick convert -size 100x100 xc:transparent  \
   -draw "fill $spacer2 path 'M 0,0 L 0,100 L 100,100 Z' " \
   -draw "fill $spacer3 path 'M 0,0 L 100,0 L 100,100 Z' " /home/maren/dotfiles/awesome/icons/display/3.png
magick convert -size 100x100 xc:transparent  \
   -draw "fill $spacer3 path 'M 0,0 L 0,100 L 100,100 Z' " \
   -draw "fill $spacer4 path 'M 0,0 L 100,0 L 100,100 Z' " /home/maren/dotfiles/awesome/icons/display/4.png
magick convert -size 100x100 xc:transparent  \
   -draw "fill $spacer4 path 'M 0,0 L 0,100 L 100,100 Z' " \
   -draw "fill $spacer5 path 'M 0,0 L 100,0 L 100,100 Z' " /home/maren/dotfiles/awesome/icons/display/5.png
magick convert -size 100x100 xc:transparent  \
   -draw "fill $spacer5 path 'M 0,0 L 0,100 L 100,100 Z' " \
   -draw "fill #00000000 path 'M 0,0 L 100,0 L 100,100 Z' " /home/maren/dotfiles/awesome/icons/display/6.png

# restart awesome 
echo 'awesome.restart()' | awesome-client

So, here we have a comparison between alpha equals 44 and alpha equals 255:

And here without image generation:


awful.screen.connect_for_each_screen(function(s)
    -- Create the wibox
    s.mywibox = awful.wibar({ position = "top", screen = s })
    -- Add widgets to the wibox
    s.mywibox:setup {
        layout = wibox.layout.align.horizontal,
        { -- Left widgets
            layout = wibox.layout.fixed.horizontal,
            s.mytaglist,
        },
        { -- Middle
            layout  = wibox.layout.flex.horizontal
        },
        { -- Right widgets
            layout = wibox.layout.fixed.horizontal,
            awful.widget.watch('bash -c "/home/maren/dotfiles/scripts/sysInfo.sh -watson"', 15),
            wibox.widget.imagebox("/home/maren/dotfiles/awesome/icons/display/1.png"),
            clock_widget,
            wibox.widget.imagebox("/home/maren/dotfiles/awesome/icons/display/2.png"),
            mem_widget,
            wibox.widget.imagebox("/home/maren/dotfiles/awesome/icons/display/3.png"),
            cpu_widget,
            wibox.widget.imagebox("/home/maren/dotfiles/awesome/icons/display/4.png"),
            fs_widget,
            wibox.widget.imagebox("/home/maren/dotfiles/awesome/icons/display/5.png"),
            bat_widget,
            wibox.widget.imagebox("/home/maren/dotfiles/awesome/icons/display/6.png"),

            -- s.mylayoutbox,
            -- wibox.widget.systray(),
        },
    }
end)

Blog

AwesomeWm status bar theme generator

mafflerbach

Join Our Newsletter. No Spam, Only the good stuff.

Related