AwesomeWm status bar theme generator
Tags: awesome, automation, themes
Published: 2020-12-09 09:14:06

---
title: AwesomeWm status bar theme generator
published: true
tags: awesome, automation, themes
---

AwesomeWm is an incredible extensible window manager. You can literally programming your WM in every aspect. The programming language is lua and the [API](https://awesomewm.org/doc/api/) is okay.

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

![awesome-bar.png](https://www.dropbox.com/s/ijvcxhd23jqxjty/awesome-bar.png?raw=1)

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.

![awesome-bar-ugly.png](https://www.dropbox.com/s/kxy1d6g08nsscf8/awesome-bar-ugly.png?raw=1)

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.

```bash

# 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:

![awesome-bar-alpha44.png](https://www.dropbox.com/s/0a3tkj5d41f7tdc/awesome-bar-alpha44.png?raw=1)

![awesome-bar-alphaff.png](https://www.dropbox.com/s/vrssp67lcl1j6r7/awesome-bar-alphaff.png?raw=1)

And here without image generation:

![awesome-bar-alpha44-2.png](https://www.dropbox.com/s/taoxictlkr8n44k/awesome-bar-alpha44-2.png?raw=1)

![awesome-bar-alphaff-2.png](https://www.dropbox.com/s/o7e7a4g37cotvwe/awesome-bar-alphaff-2.png?raw=1)

```lua

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)
```