[SOLVED] Genmon plugin align ICON and TEXT vertically

N00body · 2023-10-15 16:31:51

I'm using genmon plugin to track CPU usage, MEM usage and Date Time, and I have a vertical menu bar in XFCE where I inserted this genmon.

Taking as example my genmon of CPU usage, it should shows a CPU small icon + the % of CPU usage. This is reached by the binary "genmon-cpu" called by genmon:

#!/usr/bin/env bash

readonly ICON="/usr/share/icons/assets/scalable/cpu.svg"

## Files and Data
PREV_TOTAL=0
PREV_IDLE=0
cpuFile="/tmp/.cpu_usage"

## Get CPU usage
get_cpu() {
    if [[ -f "${cpuFile}" ]]; then
        fileCont=$(cat "${cpuFile}")
        PREV_TOTAL=$(echo "${fileCont}" | head -n 1)
        PREV_IDLE=$(echo "${fileCont}" | tail -n 1)
    fi

    CPU=(`cat /proc/stat | grep '^cpu '`) # Get the total CPU statistics.
    unset CPU[0]                          # Discard the "cpu" prefix.
    IDLE=${CPU[4]}                        # Get the idle CPU time.

    # Calculate the total CPU time.
    TOTAL=0

    for VALUE in "${CPU[@]:0:4}"; do
        let "TOTAL=$TOTAL+$VALUE"
    done

    if [[ "${PREV_TOTAL}" != "" ]] && [[ "${PREV_IDLE}" != "" ]]; then
        # Calculate the CPU usage since we last checked.
        let "DIFF_IDLE=$IDLE-$PREV_IDLE"
        let "DIFF_TOTAL=$TOTAL-$PREV_TOTAL"
        let "DIFF_USAGE=(1000*($DIFF_TOTAL-$DIFF_IDLE)/$DIFF_TOTAL+5)/10"
        echo "${DIFF_USAGE}"
    else
        echo "?"
    fi

    # Remember the total and idle CPU times for the next check.
    echo "${TOTAL}" > "${cpuFile}"
    echo "${IDLE}" >> "${cpuFile}"
}

CPU=$(get_cpu)


# Panel
INFO="<img>${ICON}</img>"
INFO+="<txt>${CPU}%</txt>"

# Tooltip
MORE_INFO="<tool>"
MORE_INFO+="CPU Usage: ${CPU}%"
MORE_INFO+="</tool>"

# Panel Print
echo -e "${INFO}"

# Tooltip Print
echo -e "${MORE_INFO}"

The problem is that, when I run XFCE panel, the icon image and text are put horizontally in one row, and the % number goes out of the genmon box.

Is there a way to align vertically icon and text in order to have two separated lines, one for showing icon and the 2nd one for the % of CPU usage?

I tried to insert a \n or \r in <text> tag inside the binary code above, but it does not work well because the % string goes to the next line but it remains sided at right of the icon (so it does not return at the beginning of the 2nd line).

Not sure if it can be managed by "~/.config/gtk-3.0/gtk.css". This file contains some css definition of genmon plugin:

/*
	Buttload of CSS
	For beauty, probably!

	NOTE:
	Don't expect everything inside this thing to work out of the box. Why?
	If you look at the IDs (starting with `#`), you'll see that many of them
	end with a number (example: `#pager-4`). Well, that number is set by the
	system and you gotta figure out the number ID of the thing yourself,
	using gtk inspector:

	GTK_DEBUG=interactive <application_name>
*/


/**************** xfce4-panel stuffs **********************/

.xfce4-panel button,
.genmon_plugin,
#docklike-plugin .group {
	transition: 0.2s;
	border-radius: 3px;
	margin: 5px;
	box-shadow: none;
	background-color: rgba(255,255,255,0.04);
}

.xfce4-panel.background .tasklist button {
	font-size: 12px;
}

.xfce4-panel.background button:active, 
.xfce4-panel.background button:hover, 
.xfce4-panel.background button:active:hover, 
.xfce4-panel.background .tasklist button:active,
.xfce4-panel.background .tasklist button:hover, 
.xfce4-panel.background .tasklist button:active:hover,
#docklike-plugin .hover_group {
	background-color: rgba(255,255,255,0.07);
}

.xfce4-panel button:checked {
	background-color: rgba(255,255,255,0.1);
}

.genmon_plugin {
	padding: 5px;
}
.genmon_plugin image {
	margin-left: 5px;
}
.genmon_plugin label {
	padding: 5px;
}

/* Docklike plugin */
#docklike-plugin .group {
	margin: 5px 2.5px;
}
#docklike-plugin button:first-child {
	margin-left: 5px;
}
#docklike-plugin button:last-child {
	margin-right: 5px;
}

/* Workspace indicator... */
#pager-4 grid {
	background-color: rgba(255,255,255,0.05);
	margin: 4px;
	border-radius: 3px;
}

#pager-4 button {
	padding: 3px;
	margin: 5px;
	background-color: transparent;
}
#pager-4 button:hover {
	background-color: rgba(255,255,255,0.05);
}
#pager-4 button:checked {
	box-shadow: none;
	background-color: rgba(255,255,255,0.1);
	color: #FFF;
}

/* 2 Separators before and after the genmon applets */
#separator-12, #separator-2 {
	color: rgba(255,255,255,0.2);
}

/* Whiskermenu */
#whiskermenu-8 button {
	background-color: #67b0e8;
}
window#whiskermenu-window>frame>border {
	border: 5px solid transparent;
}

window#whiskermenu-window scrolledwindow {
	margin: 2px;
	border: none;
}

#whiskermenu-window treeview {
	padding: 7px 0px 7px 10px;
}

#whiskermenu-window iconview {
	font-size: 12px;
	padding: 5px 0px;
	border-radius: 3px;
}

/*********** Power button on the panel **************/
#launcher-1 button {
	background-color: #8ccf7e;
}

/******************* Thunar *************************/

* {
	-ThunarAbstractIconView-row-spacing: 10px;
	-ThunarAbstractIconView-column-spacing: 10px;
}

.thunar .standard-view .view {
	padding: 5px 14px;
}

.thunar .sidebar .view {
	padding-left: 0px;
}
.thunar .sidebar .view:selected {
	background-color: rgba(255,255,255,0.1);
	border-left: 2px solid #6695a3;
}


/************* VTE Terminal (Padding) *******************/

VteTerminal, vte-terminal {
	padding: 15px;
}


/************* Xfsession logout dialog ******************/

.xfsm-logout-dialog {
	border: 2px solid #181f21;
}
.xfsm-logout-dialog * {
	margin: 3px;
}


/**************** Xfce notificaton **********************/

#XfceNotifyWindow {
	border: 0px;
	/* Let picom decide the border radius */
	border-radius: 0px;

}
#XfceNotifyWindow progressbar {
	border-radius: 5px;
}
#XfceNotifyWindow progressbar progress,
#XfceNotifyWindow progressbar trough {
	min-height: 4px;
}
#XfceNotifyWindow image {
	-gtk-icon-transform: scale(0.5);
	background-color: rgba(255,255,255,0.05);
	border-radius: 3px;
}


/********* Context menus / Right click menus ***************/

menu,
.context-menu {
	border: none;
}

menu menuitem,
.menu menuitem,
.context-menu menuitem {
	padding: 6px 16px;
}

menu menuitem:hover,
.menu menuitem:hover,
.context-menu menuitem:hover {
	background-color: rgba(255,255,255,0.07);
	color: white;
}

.csd.popup decoration {
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.45), 0px 0px 0px 0px #181f21;
}


/**************** Alt+Tab window **********************/

#xfwm-tabwin {
	border-radius: 5px;
	border: none;
}

#xfwm-tabwin button {
	padding: 6px 10px;
}


/********************* Misc ***************************/

headerbar label {
	color: inherit;
}

calendar {
	border: none;
	border-radius: 3px;
	font-size: 14px;
}

just look at genmon plugin elements.

How can I solve this issue?

Last edited by N00body (2023-10-15 21:18:40)

ToZ · 2023-10-15 20:47:55

Its not possible when you combine the img or icon tag with text. However, if you used a font representation of an image, you could span lines. For example, installing "ttf-nerd-fonts-symbol" and using the unicode for the cpu glyph (f4bc) and something like:

readonly FONTICON="f4bc"

echo -e "<txt>\U$FONTICON\nsampletext</txt>"

...will display a cpu glyph and text on 2 separate lines.

N00body · 2023-10-15 21:18:29

It works. Thank you very much.

N00body · 2023-10-20 11:11:54

@ToZ just one further info. When I apply the solution below, I can get ICON and TEXT in two separated rows but icons are disaligned like this:

Then, I think that despite there is a "\n" between icon symbol and percentage, they are treated as a single line, because when CPU shows more than two digits, the icon above moves a little to left.

Is there a way to align ICON and TEXT centrally in the correct manner according to the file contents shared above?

Last edited by N00body (2023-10-20 12:42:53)

ToZ · 2023-10-20 17:55:46

What version of the genmon plugin are you using? As of 4.1.1, I set the default label justification to centered (it was left justified prior).

N00body · 2023-10-20 18:46:02

4.2.0-1 version (Arch Linux package: https://archlinux.org/packages/extra/x8 … on-plugin/. If I delete these lines from gtk.css file above

.genmon_plugin {
	padding: 5px;
}
.genmon_plugin image {
	margin-left: 5px;
}
.genmon_plugin label {
	padding: 5px;
}

I get this:

Still not aligned

Last edited by N00body (2023-10-20 18:46:33)

ToZ · 2023-10-20 23:07:19

That is odd. When I use your code, I get:

Can you try with a blank gtk.css file? (make sure you restart xfce4-panel after renaming the file).
Also, which GTK theme are you using?

N00body · 2023-10-20 23:57:37

With a blank.css, the 3 genmon are always a little misaligned as my last image above.

The GTK I'm using is this: https://github.com/Fausto-Korpsvart/Tok … -GTK-Theme

ToZ · 2023-10-21 00:34:34

I can't replicate the problem with that theme. Can you post back the current version of your script? Is it possible there is a space or something in the output?

N00body · 2023-10-21 00:47:44

Sure. The script is the following:

#!/usr/bin/env bash
readonly FONTICON="\Uf4bc"
#readonly ICON="/usr/share/icons/assets/scalable/cpu.svg"

## Files and Data
PREV_TOTAL=0
PREV_IDLE=0
cpuFile="/tmp/.cpu_usage"

## Get CPU usage
get_cpu() {
    if [[ -f "${cpuFile}" ]]; then
        fileCont=$(cat "${cpuFile}")
        PREV_TOTAL=$(echo "${fileCont}" | head -n 1)
        PREV_IDLE=$(echo "${fileCont}" | tail -n 1)
    fi

    CPU=(`cat /proc/stat | grep '^cpu '`) # Get the total CPU statistics.
    unset CPU[0]                          # Discard the "cpu" prefix.
    IDLE=${CPU[4]}                        # Get the idle CPU time.

    # Calculate the total CPU time.
    TOTAL=0

    for VALUE in "${CPU[@]:0:4}"; do
        let "TOTAL=$TOTAL+$VALUE"
    done

    if [[ "${PREV_TOTAL}" != "" ]] && [[ "${PREV_IDLE}" != "" ]]; then
        # Calculate the CPU usage since we last checked.
        let "DIFF_IDLE=$IDLE-$PREV_IDLE"
        let "DIFF_TOTAL=$TOTAL-$PREV_TOTAL"
        let "DIFF_USAGE=(1000*($DIFF_TOTAL-$DIFF_IDLE)/$DIFF_TOTAL+5)/10"
        echo "${DIFF_USAGE}"
    else
        echo "?"
    fi

    # Remember the total and idle CPU times for the next check.
    echo "${TOTAL}" > "${cpuFile}"
    echo "${IDLE}" >> "${cpuFile}"
}

CPU=$(get_cpu)


# Panel
#INFO="<img>${ICON}</img>"
#INFO+="<txt>${CPU}%</txt>"
INFO="<txt>${FONTICON}\n${CPU}%</txt>"

# Tooltip
MORE_INFO="<tool>"
MORE_INFO+="CPU Usage: ${CPU}%"
MORE_INFO+="</tool>"

# Panel Print
echo -e "${INFO}"

# Tooltip Print
echo -e "${MORE_INFO}"

Last edited by N00body (2023-10-21 00:48:42)

N00body · 2023-10-21 00:50:53

The system where it is implemented, in case you would like to check directly, can be retrieved here: https://sourceforge.net/projects/athena … o/download

If you can find it also in Live Env (so you don't need to install the entire system).

Ref: https://athenaos.org

ToZ · 2023-10-21 09:52:24

I will have a look. Can you also confirm which font you are using for the glyph? Is it ttf-nerd-fonts-symbols?

N00body · 2023-10-21 10:52:14

ToZ wrote:

I will have a look. Can you also confirm which font you are using for the glyph? Is it ttf-nerd-fonts-symbols?

Yes. I take them from https://www.nerdfonts.com/cheat-sheet

ToZ · 2023-10-21 17:07:20

Its really odd. I think it might be related to the font you are using (Roboto). If you change it to another font its less pronounced.

With the Roboto font, I find that if I add a bit of spacing, I can get it to line up a little better:

INFO="<txt>${FONTICON}\n<span font-size='6pt'> </span>${CPU}%</txt>"

N00body · 2023-10-21 18:44:43

Is it possible to specify inside those tags also a different font family that could fit better? In your opinion what is a good family font for these strings?

ToZ · 2023-10-21 19:17:02

Yes, genmon supports Pango markups - there is information at that link on how to specify a different font family. Since non-monospaced fonts have variable-width characters, I'm not sure exactly which font would be best. Maybe monospace, but its not as attractive. Roboto Light with the printf tweak below looks best in my experiments.

The other thing I notice is that the spacing gets thrown off when your CPU, for example, is less that 10% - less digits being used. You might want to force some padding there to add some consistency (and will help with centering as well):

INFO="<txt>${FONTICON}\n$(printf %2d ${CPU})%</txt>"

Xfce Forum

Sub domains

#1 2023-10-15 16:31:51

[SOLVED] Genmon plugin align ICON and TEXT vertically

#2 2023-10-15 20:47:55

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#3 2023-10-15 21:18:29

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#4 2023-10-20 11:11:54

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#5 2023-10-20 17:55:46

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#6 2023-10-20 18:46:02

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#7 2023-10-20 23:07:19

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#8 2023-10-20 23:57:37

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#9 2023-10-21 00:34:34

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#10 2023-10-21 00:47:44

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#11 2023-10-21 00:50:53

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#12 2023-10-21 09:52:24

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#13 2023-10-21 10:52:14

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#14 2023-10-21 17:07:20

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#15 2023-10-21 18:44:43

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

#16 2023-10-21 19:17:02

Re: [SOLVED] Genmon plugin align ICON and TEXT vertically

Board footer