Preface
Goal: A guide how to write Dzen2 in Bash.
Table of Content
Topics Covered
There are a few consideration in building an acceptable panel.
-
Make the panel show the shape, as you wish.
-
Make the panel, in a structured script, flexible enough to be themed.
-
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.
1: 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
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 You 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 dzentopYou can stop the process later using pkill command.
$ pkill dzen2Reading:
Further information about dzen parameters,
you can read in manual page in github.
I mean not in man dzen2, from the command line.
2: 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.
3: 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.
4: 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
}
5: 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
}
6: 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.
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:
7: Monitoring Panel
You can use Dzen2 as monitoring panel. Let’s make a more complete segment, than just a date.
Source:
8: 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.
Source:
After all, it depends on your imagination.
"Use the source Luke"
9: 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:
10: 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.
Conclusion
I think that’s all. Thank you for reading. Sorry for my english. I know how terrible it is.