Statusbar Tutorial

This tutorial/ guidance/ article is one of some parts.

Statusbar

Conky

Complementary


Topics Covered

There are a few consideration in building an acceptable panel.

  1. Make the panel show the shape, as you wish.

  2. Make the panel, in a structured script, flexible enough to be themed.

  3. Make the panel, not resource hungry. Not hogging the CPU proccess.

Here we are going to cover the first and second part using BASH.

In order to make the shape we need to know a few tags.

  • Foreground Color: ^fg()

  • Background Color: ^bg()

  • Font: ^fn() We are going to use AwesomeFont to show Icons. And PowerlineSymbols to make a Powerline like statusbar.

  • Decoration: ^i() This tag is used to show Icon from Image Glyph. But we are going to use it to make a better Powerline like statusbar.


Hello World in Command Line

In order to keep dzen2 running, we need to echo output in endless loop, and pipe it to dzen2. Otherwise, dzen2 will dissappear, as the script stop.

This command will show you ‘Hello World’ at the top of your desktop.

$ while sleep 1; do echo "Hello World"; done | dzen2 -w 640

Dzen2 Command Line Example

Let’s do it for a more dynamic input using date that changed every second. Dzen will be shown at bottom right corner.

$ while sleep 1; do date +'%a %b %d %H:%M:%S'; done | \
  dzen2 -ta r -h 25 -y -30 -w 200 -x -200 

Yu can use Transparency with either transset-df or transset (from xorg-transset), by using -title-name. Use & to detach process from the console.

$ while sleep 1; do echo "Hello World"; done | dzen2 -w 640  -title-name dzentop &

$ transset .8 -n dzentop

You can stop the process later using pkill command.

$ pkill dzen2

Reading:

Further information about dzen parameters, you can read in manual page in github. I mean not in man dzen2, from the command line.


Simple dzen2 in Script

Let’s put this dzen in a script bash-example/01.sh.

Source:

#!/usr/bin/env bash

generated_output() {
    # endless loop
    while true; do 
      date +'%a %b %d %H:%M:%S'
      sleep 1
    done
}

xpos=0
ypos=0
width=640
height=24
fgcolor="#000000"
bgcolor="#ffffff"
font="-*-fixed-medium-*-*-*-12-*-*-*-*-*-*-*"

parameters="  -x $xpos -y $ypos -w $width -h $height" 
parameters+=" -fn $font"
parameters+=" -ta c -bg $bgcolor -fg $fgcolor"
parameters+=" -title-name dzentop"

generated_output | dzen2 $parameters 

And examine the output.

Dzen2 BASH Script Example

Coloring dzen2

Again, let’s give some color in generated output, using ^bg() and ^fg(). And let’s also refactor between the panel and output, bash-example/02-main.sh and bash-example/02-output.sh.

Source:

#!/usr/bin/env bash

# include
DIR=$(dirname "$0")
. ${DIR}/02-output.sh

# dzen2

xpos=0
ypos=0
width=640
height=24
fgcolor=$colBlack
bgcolor=$colWhite
font="-*-fixed-medium-*-*-*-12-*-*-*-*-*-*-*"

parameters="  -x $xpos -y $ypos -w $width -h $height" 
parameters+=" -fn $font"
parameters+=" -ta c -bg $bgcolor -fg $fgcolor"
parameters+=" -title-name dzentop"

generated_output | dzen2 $parameters &

sleep 1 && exec `(transset-df .8 -n dzentop >/dev/null 2>&1 &)` &

Source:

#!/usr/bin/env bash

# color, 
colWhite='#ffffff'
colBlack='#000000'

# also using google material
colRed500='#f44336'
colYellow500='#ffeb3b'
colBlue500='#2196f3'

generated_output() {
    # endless loop
    while :; do      
        local date=$(date +'%a %b %d')
        local time=$(date +'%H:%M:%S')

        local text=""
        text+="^bg($colBlue500)^fg($colYellow500)  $date  "
        text+="^bg()^fg()  "
        text+="^bg($colRed500)  $time  ^bg()"
      
        echo $text 
      
      sleep 1
    done
}

And again examine the output, with color and transparency.

Dzen2 Coloring Example


Font in dzen2

Font ^fn() can be used to show

  • Unicode Character, e.g. Japanese Number with Takao Font

  • Eye Candy Icons, e.g. AwesomeIcon Font

  • Powerline Style Arrow, e.g. PowerlineSymbols

You need to get these font installed properly in your system. Or maybe or just put proper font in your .font directory.

Here is a working example: bash-example/03-main.sh and bash-example/03-output.sh.

Source:

#!/usr/bin/env bash

# color, 
colWhite='#ffffff'
colBlack='#000000'

# also using google material
colRed500='#f44336'
colYellow500='#ffeb3b'
colBlue500='#2196f3'
colGrey500='#9e9e9e'

# http://fontawesome.io/
FontAwesome="^fn(FontAwesome-9)"

# icon 
preIcon="^fg($colYellow500)$FontAwesome"
postIcon="^fn()^fg()"

# Powerline Symbol
arrow="^fn(powerlinesymbols-14)^fn()"


generated_output() {
    local iconDate="$preIcon$postIcon"
    local iconTime="$preIcon$postIcon"

    # endless loop
    while :; do   
        local date=$(date +'%a %b %d')
        local time=$(date +'%H:%M:%S')
        
        local text=""
        text+="^bg($colBlue500)^fg($colWhite)$arrow "
        text+="^bg($colBlue500) $iconDate ^fg()  $date  "
        text+="^bg($colWhite)^fg($colBlue500)$arrow "
        text+="^bg()^fg()  "
        text+="^bg($colRed500)^fg($colWhite)$arrow "
        text+="^bg($colRed500) $iconTime ^fg() $time  ^bg()"
        text+="^bg($colWhite)^fg($colRed500)$arrow "
             
        echo -n $text 
        echo
      
      sleep 1
    done
}

Dzen2 Font and Arrow Example


Graphic Decoration in dzen2

Icon ^i() can be used to show

  • Graphic Decoration, more than Powerline Style Arrow

  • Eye Candy Glyph Icons

There are many limitation, on using PowerlineSymbol as decoration. And it is not portable enough, when the font is not always installed. If you need a more precise decoration, you might consider icon feature in Dzen2, using ^i() tag.

Here is a working example: bash-example/04-main.sh and bash-example/04-output.sh.

Source:

Dzen2 can read .xbm image format. For your convenience, I have made some eight glyph icons. For each has height of 24px, the same height as dzen panel.

#!/usr/bin/env bash

# color, 
colWhite='#ffffff'
colBlack='#000000'

# also using google material
colRed500='#f44336'
colYellow500='#ffeb3b'
colBlue500='#2196f3'
colGrey500='#9e9e9e'

# http://fontawesome.io/
FontAwesome="^fn(FontAwesome-9)"

# icon 
preIcon="^fg($colYellow500)$FontAwesome"
postIcon="^fn()^fg()"

# Glyph Icon Decoration
decopath="Documents/standalone/dzen2/assets/xbm"

# diagonal corner
deco_dc_tl="^i($decopath/dc-024-tl.xbm)"
deco_dc_tr="^i($decopath/dc-024-tr.xbm)"
deco_dc_bl="^i($decopath/dc-024-bl.xbm)"
deco_dc_br="^i($decopath/dc-024-br.xbm)"

# single arrow and double arrow
deco_sa_l="^i($decopath/sa-024-l.xbm)"
deco_sa_r="^i($decopath/sa-024-r.xbm)"
deco_da_l="^i($decopath/da-024-l.xbm)"
deco_da_r="^i($decopath/da-024-r.xbm)"

generated_output() {
    local iconDate="$preIcon$postIcon"
    local iconTime="$preIcon$postIcon"

    # endless loop
    while :; do   
        local date=$(date +'%a %b %d')
        local time=$(date +'%H:%M:%S')
        
        local text=""
        text+="^bg($colBlue500)^fg($colWhite)$deco_dc_tl "
        text+="^bg($colBlue500) $iconDate ^fg()  $date  "
        text+="^bg($colWhite)^fg($colBlue500)$deco_da_r"
        text+="^bg()^fg() "
        text+="^bg($colWhite)^fg($colRed500)$deco_da_l"
        text+="^bg($colRed500) $iconTime ^fg() $time  ^bg()"
        text+="^bg($colWhite)^fg($colRed500)$deco_dc_bl "
             
        echo -n $text 
        echo
      
      sleep 1
    done
}

Dzen2 Graphics Decoration Icon Example


Create Decoration for Your own Suite.

Everybody has different requirement, taste and style. Instead of giving .xbm files, I’d better give the Source Image. And explain the creation process.

Image Source: Diagonal and Arrow

Article:

The creation process has been explained in previous chapter. I only use use Inkscape and GIMP with very few steps. And yeah, very simple process.

XBM:


Monitoring Panel

You can use Dzen2 as monitoring panel. Let’s make a more complete segment, than just a date.

Source:


Theming

For convenience you can make your script themable. I just made a quick and dirty after midnight script, that maybe useful for dzen2 theming. I do not claim that my script here is a good script, just because it is just works. But you should get my point, that with a little tweak, theming is possible. In fact, I desire to find a better script, and I wait for you to write it. I’m sure you can do better than me.

Let’s see how the variation goes.

Dzen2 Theme: Dark Colorful

Dzen2 Theme: Bright Colorful

Dzen2 Theme: Bright Arrow

Dzen2 Theme: Dark Arrow

Dzen2 Theme: Dark Arrow

Dzen2 Theme: Bright Arrow

Dzen2 Theme: Dark Arrow

Source:

After all, it depends on your imagination.

"Use the source Luke"

Combine Dzen with Tiling Window Manager

This is outside of the basic scope of configuring Dzen. But you can see my unfinished code here for my HerbstluftWM.

Source:


Using Dzen2 with Conky Lua

This is a very interesting topic. Conky is less complicated, and Lua can help you more. But since we need to leave BASH for Lua. This deserve an article of its own.


I think that’s all. Thank you for reading. Sorry for my english. I know how terrible it is.