Linux Fu: Easy Widgets | Hackaday

0

Here is a scenario. You have a microcontroller that reads a number of things – temperatures, pressures, whatever – and you want to have a screen for your Linux desktop that sits on the panel and shows you the status. If you click on it, you get extended status and can even issue some commands. Most desktop computers support the notion of widgets, but developing them is a pain, isn’t it? And even if you’re developing one for KDE, what about people who use Gnome?

Turns out there’s an easy answer, and it was apparently inspired by a tool from the Mac world. This tool was called BitBar (now XBar). This program places a widget on your menu bar that can display anything you want. You can write any kind of program you like – shell script, C, whatever. The output printed from the program controls what appears on the widget using simple markup-like language.

That’s fine for the Mac, but what about Linux? If you use Gnome, there is a very similar project called Argos. It is largely compatible with XBar, although there are a few things specific to it. If you’re using KDE (like me), you’ll need Kargos, which is more or less a port of Argos and adds a few things of its own.

Good news, bad news

The good news is that in theory you could write a script that would work under all three systems. The bad news is that everyone has their own differences and quirks. Of course, too, if you’re using a compliant program it could cause a problem on the Mac unless you recompile it.

To compound this problem, the Kargos documentation appears to be flawed. This is partly because the version in the KDE repositories is outdated and even if you get the latest version from GitHub it is still out of date with the documentation. You really want to install from a clone from the GitHub, not from the release package or from the KDE repository for plasmoid. Part of the problem is also that the documentation is terse and you sometimes get things working, but not always. It is not clear if this is a design or an interaction with the KDE desktop which is constantly changing.

Since I’m using KDE, I’ll focus on Kargos, and I’ll highlight a few points about Argos as I go along. But you can expect to experiment anyway.

Basics

When you install the widget, you need to point it to a script. Typically, the script will run periodically. For Kargos, you can set this interval in two different ways which we will discuss later.

In the simplest case, the script would produce a line of text that will appear on the panel, a separator, and then one or more lines of text that will appear when you click on the widget. Consider this:

#!/bin/bash
echo Hello Hackaday
echo ---
echo Test
echo 1
echo 2
echo 3
echo 4

If you place the Kargos widget on a panel and configure it to read your script, you will end up with only the text Hello Hackaday on your panel. When you click, you see something like this:

Excitement

A little more chic

As it is, it’s not very exciting. However, each line of text can have a pipe character and some attributes to spruce things up and add function. Replace the line that says Hello Hackaday with this:

ICON=$( curl -s "https://hackaday.com/favicon.ico | base64 -w 0 )
echo "Hello Hackaday | image="$ICON" href=http://www.hackaday.com"

Now the panel will look a little more elegant and if you click on the little chain link icon you will visit your favorite website. Of course, the real interesting thing is when you can make objects change. If you set a refresh interval on the configuration screen, the script will run often. You can also name the script with a repeat interval. For example, a script of haddemo.10s.sh will run every 10 seconds but haddemo.2m.sh will run every two minutes.

You can also add arefresh=true attribute to a line of text so that clicking it runs the script again. Suppose you want to ping Google on demand. You can set the timer to 0 and do this:

#!/bin/bash
OUTPUT=$( ping -c 1 -q google.com | grep ^rtt | cut -d ' ' -f 4 | cut -d '/' -f 1 )
if [ -z "$OUTPUT" ]
then
   echo "Error click to refresh | refresh=true color=orange" bash="'/usr/bin/systemsettings kcm_networkmanagement'" terminal=false
fi
# get an integer to compare (bash doesn't like floats)
IOUT=$( echo $OUTPUT | sed s/.// )
COLOR=green
if [ $IOUT -gt 90000 ] # 900000 is 90 ms
then
   COLOR=red
fi 
echo "Google.com: $OUTPUT ms | refresh=true color=$COLOR" bash="'/usr/bin/systemsettings kcm_networkmanagement'" terminal=false
echo ---

Now you will get a ping time from Google on your bar. It will change color if it is slow or unable to ping. A small button will allow you to open the network management.

However…

Colors don’t seem to work in drop down menus, which may be the desktop manager forcing theme colors, so your mileage may vary. There are also some differences from Argos. For example, Argos has an environment variable that tells you if the widget is open or not. This allows you to avoid running unnecessary parts of your script for better performance.

There are other differences as well, but if you stick to the basics, you should be fine. Even where things are different, it’s still easier than writing two completely different widgets for the different systems.

There also seems to be some strange behavior. For example, the onclick attribute also doesn’t work in dropdowns. Of course, it’s open source, so if you hate it that much, feel free to go fix it!

great example

Since I like to follow the headlines on Hackday, I decided to take advantage of a feature of Kargos. In the previous examples, I only had one line before the drop-down separator (“—”). But if you have more than one line, the widget will cycle through them with a delay that you can set in the widget settings.

Using awk it is easy to read the Hackaday RSS feed and extract titles and links. A few images and you end up with a nice RSS display. The parsing might not work for an arbitrary RSS feed because it’s fairly simple-minded, but – in theory – you should be able to adapt it to other feeds.

Here is the code:


#!/bin/bash
curl "https://hackaday.com/feed/" 2>/dev/null |
  awk '
   BEGIN { n=-1; }  # skip first item
// {
# read titles
    if (n==-1) next;
    gsub("[[:space:]]*</?title>[[:space:]]*",""); item[n]=$0; next;
   }
/<link>/ {
# read links
   if (n==-1) { n=0; next; }
   gsub("[[:space:]]*</?link>[[:space:]]*", ""); link[n++]=$0; next
   }
END {
# output widget text
   for (i=0;i<n;i++) {
   printf("%s | href="%s" imageURL=https://hackaday.com/wp-content/themes/hackaday-2/img/logo.pngn",item[i],link[i]);
   }

print "---"
# output dropdown lines
for (i=0;i<n;i++) {
   printf("%s | href="%s"n",item[i],link[i]);
   }
}
'
<pre></pre>
<p>That’s not a lot of code for a full RSS reader.  You can see the stories in the panel and click on them or open the widget to see a list at the same time.</p>
<h2>Next steps</h2>
<p>Since the data is just text, it’s simple to create small widgets using this system.  For example, here’s a handy memory status widget:</p>
<pre class="brush: bash; title: ; notranslate" title="">
#!/bin/bash
cat /proc/meminfo
echo ---
echo "<b>Tools</b>"
echo "--System status | bash=/usr/bin/ksysguard onclick=bash"
echo "--Htop | bash=/usr/bin/htop" terminal=true
cat /proc/meminfo
</pre>
<p>Obviously, having a script that reads data from an ESP32 or an Arduino would be trivial.  Since a lot of what you want to do with something like this is OS independent, browsing through some of the plugins for xbar might give you an idea.</p>
<p>If you want something fancier for KDE, check out Scriptinator.  You can customize it more, but it’s a bit more complex to manage.</p>
<p>For some reason, I’m obsessed with the Hackaday feed.  I turned it into a filesystem.  It also greets me when I log in.  Some of the plugins you will find are in bash and some are in Python.  Don’t forget that you can also mix them.</p>
</div>
<div class="yarpp yarpp-related yarpp-related-website yarpp-template-list">

<h3>Related posts:</h3><ol>
<li><a href="/linux-create-snap-packages-for-your-own-applications/" rel="bookmark" title="Linux: create snap packages for your own applications">Linux: create snap packages for your own applications </a></li>
<li><a href="/how-to-manually-add-software-repositories-in-linux/" rel="bookmark" title="How to manually add software repositories in Linux">How to manually add software repositories in Linux </a></li>
<li><a href="/slimbook-executive-is-a-14-inch-lightweight-laptop-with-windows-or-linux-or-both/" rel="bookmark" title="Slimbook Executive is a 14 inch lightweight laptop with Windows or Linux (or both)">Slimbook Executive is a 14 inch lightweight laptop with Windows or Linux (or both) </a></li>
<li><a href="/how-to-get-the-universal-control-feature-of-macos-monterey-on-windows-and-linux/" rel="bookmark" title="How to get the universal control feature of macOS Monterey on Windows and Linux">How to get the universal control feature of macOS Monterey on Windows and Linux </a></li>
</ol>
</div>
		
		
		
				
					<div class="tagcloud"></div>
				
			</div>
		</div>
		
	</div>
	
	
	
	
	<div class="post-share">
		<span class="text">Share.</span>
		
		<span class="share-links">

			<a href="https://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.webfilebrowser.org%2Flinux-fu-easy-widgets-hackaday%2F&text=Linux%20Fu%3A%20Easy%20Widgets%20%7C%20%20Hackaday" class="fa fa-twitter" title="Tweet It" target="_blank">
					<span class="visuallyhidden">Twitter</span></a>
				
			<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fwww.webfilebrowser.org%2Flinux-fu-easy-widgets-hackaday%2F" class="fa fa-facebook" title="Share on Facebook" target="_blank">
				<span class="visuallyhidden">Facebook</span></a>
				
			<a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.webfilebrowser.org%2Flinux-fu-easy-widgets-hackaday%2F&media=https%3A%2F%2Fhackaday.com%2Fwp-content%2Fuploads%2F2020%2F05%2FLinuxFu.jpg" class="fa fa-pinterest" title="Share on Pinterest" target="_blank">
				<span class="visuallyhidden">Pinterest</span></a>
				
			<a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fwww.webfilebrowser.org%2Flinux-fu-easy-widgets-hackaday%2F" class="fa fa-linkedin" title="Share on LinkedIn" target="_blank">
				<span class="visuallyhidden">LinkedIn</span></a>
				
			<a href="http://www.tumblr.com/share/link?url=http%3A%2F%2Fwww.webfilebrowser.org%2Flinux-fu-easy-widgets-hackaday%2F&name=Linux+Fu%3A+Easy+Widgets+%7C++Hackaday" class="fa fa-tumblr" title="Share on Tumblr" target="_blank">
				<span class="visuallyhidden">Tumblr</span></a>
				
			<a href="mailto:?subject=Linux%20Fu%3A%20Easy%20Widgets%20%7C%20%20Hackaday&body=http%3A%2F%2Fwww.webfilebrowser.org%2Flinux-fu-easy-widgets-hackaday%2F" class="fa fa-envelope-o" title="Share via Email">
				<span class="visuallyhidden">Email</span></a>
			
		</span>
	</div>
	
		
</article>




	<div class="author-box">
		<h3 class="section-head">About Author</h3>

				<section class="author-info">
		
			<img alt="" src="http://1.gravatar.com/avatar/ae630aa8114d691d1b90ab428e398d6a?s=100&d=mm&r=g" srcset="http://1.gravatar.com/avatar/ae630aa8114d691d1b90ab428e398d6a?s=200&d=mm&r=g 2x" class="avatar avatar-100 photo" height="100" width="100" loading="lazy">			
			<div class="description">
				<a href="/author/admin/" title="Posts by Tameka I. White" rel="author">Tameka I. White</a>				
				<ul class="social-icons">
									
					<li>
						<a href="http://www.webfilebrowser.org" class="icon fa fa-home" title="Website"> 
							<span class="visuallyhidden">Website</span></a>				
					</li>
					
					
								</ul>
				
				<p class="bio"></p>
			</div>
			
		</section>	</div>


	
				<div class="comments">
				
	
	<div id="comments">

			<p class="nocomments">Comments are closed.</p>
		
	
	
	</div>
				</div>
	
				
		</div>
		
		
			
		
		
		<aside class="col-4 sidebar">
		
					<div class="">
			
				<ul>
				
				<li id="categories-1" class="widget widget_categories"><h3 class="widgettitle">Categories</h3>
			<ul>
					<li class="cat-item cat-item-2"><a href="/category/file-manager-tools/">File manager tools</a>
</li>
	<li class="cat-item cat-item-4"><a href="/category/linux/">Linux</a>
</li>
	<li class="cat-item cat-item-5"><a href="/category/phyton/">Phyton</a>
</li>
	<li class="cat-item cat-item-1"><a href="/category/web-cash-online/">Web Cash online</a>
</li>
	<li class="cat-item cat-item-3"><a href="/category/work-remotely/">Work remotely</a>
</li>
			</ul>

			</li>
<li id="block-1" class="widget widget_block widget_tag_cloud"><p class="wp-block-tag-cloud"><a href="/tag/asia-pacific/" class="tag-cloud-link tag-link-10 tag-link-position-1" style="font-size: 13.444444444444pt;" aria-label="asia pacific (93 items)">asia pacific</a>
<a href="/tag/competitive-landscape/" class="tag-cloud-link tag-link-17 tag-link-position-2" style="font-size: 11.111111111111pt;" aria-label="competitive landscape (81 items)">competitive landscape</a>
<a href="/tag/covid-pandemic/" class="tag-cloud-link tag-link-21 tag-link-position-3" style="font-size: 9.1666666666667pt;" aria-label="covid pandemic (72 items)">covid pandemic</a>
<a href="/tag/east-africa/" class="tag-cloud-link tag-link-15 tag-link-position-4" style="font-size: 12.666666666667pt;" aria-label="east africa (89 items)">east africa</a>
<a href="/tag/europe-asia/" class="tag-cloud-link tag-link-22 tag-link-position-5" style="font-size: 8pt;" aria-label="europe asia (67 items)">europe asia</a>
<a href="/tag/market-report/" class="tag-cloud-link tag-link-14 tag-link-position-6" style="font-size: 12.666666666667pt;" aria-label="market report (89 items)">market report</a>
<a href="/tag/market-research/" class="tag-cloud-link tag-link-16 tag-link-position-7" style="font-size: 12.277777777778pt;" aria-label="market research (86 items)">market research</a>
<a href="/tag/market-share/" class="tag-cloud-link tag-link-18 tag-link-position-8" style="font-size: 10.722222222222pt;" aria-label="market share (79 items)">market share</a>
<a href="/tag/market-size/" class="tag-cloud-link tag-link-19 tag-link-position-9" style="font-size: 10.333333333333pt;" aria-label="market size (76 items)">market size</a>
<a href="/tag/middle-east/" class="tag-cloud-link tag-link-11 tag-link-position-10" style="font-size: 13.444444444444pt;" aria-label="middle east (93 items)">middle east</a>
<a href="/tag/north-america/" class="tag-cloud-link tag-link-9 tag-link-position-11" style="font-size: 15.388888888889pt;" aria-label="north america (103 items)">north america</a>
<a href="/tag/operating-system/" class="tag-cloud-link tag-link-12 tag-link-position-12" style="font-size: 14.611111111111pt;" aria-label="operating system (98 items)">operating system</a>
<a href="/tag/remote-working/" class="tag-cloud-link tag-link-20 tag-link-position-13" style="font-size: 9.9444444444444pt;" aria-label="remote working (75 items)">remote working</a>
<a href="/tag/united-states/" class="tag-cloud-link tag-link-8 tag-link-position-14" style="font-size: 22pt;" aria-label="united states (154 items)">united states</a>
<a href="/tag/work-remotely/" class="tag-cloud-link tag-link-13 tag-link-position-15" style="font-size: 14.222222222222pt;" aria-label="work remotely (96 items)">work remotely</a></p></li>
<li id="acf-recent-posts-widget-1" class="widget widget_acf-recent-posts-widget"><h3 class="widgettitle">Recent Posts</h3><div class="acf-rpw-block  acf-rpw-default">
		<ul class="acf-rpw-ul"><li class="acf-rpw-li acf-rpw-clearfix">
	
	<h3 class="acf-rpw-title"><a href="/puerto-ricans-rebuild-community-capital-as-the-bankruptcy-lifts/" rel="bookmark">Puerto Ricans Rebuild Community Capital as the Bankruptcy Lifts</a></h3>

	</li><li class="acf-rpw-li acf-rpw-clearfix">
	
	<h3 class="acf-rpw-title"><a href="/the-use-after-free-vulnerability-in-the-linux-kernel-allows-privilege-escalation-patch-your-kernel/" rel="bookmark">The Use After Free vulnerability in the Linux kernel allows privilege escalation.  Patch your kernel</a></h3>

	</li><li class="acf-rpw-li acf-rpw-clearfix">
	
	<h3 class="acf-rpw-title"><a href="/the-allen-beverages-scratch-kitchen-contest/" rel="bookmark">The Allen Beverages Scratch Kitchen Contest</a></h3>

	</li><li class="acf-rpw-li acf-rpw-clearfix">
	
	<h3 class="acf-rpw-title"><a href="/how-to-fix-dev-error-6066-in-call-of-duty-mw-warzone/" rel="bookmark">How to fix DEV ERROR 6066 in Call of Duty MW/Warzone?</a></h3>

	</li><li class="acf-rpw-li acf-rpw-clearfix">
	
	<h3 class="acf-rpw-title"><a href="/hot-desking-vs-hoteling-whats-the-difference/" rel="bookmark">Hot desking vs. hoteling: what’s the difference?</a></h3>

	</li><li class="acf-rpw-li acf-rpw-clearfix">
	
	<h3 class="acf-rpw-title"><a href="/5-htop-alternatives-to-monitor-your-linux-system/" rel="bookmark">5 htop alternatives to monitor your Linux system</a></h3>

	</li></ul>
</div>
</li>
<li id="archives-1" class="widget widget_archive"><h3 class="widgettitle">Archives</h3>
			<ul>
					<li><a href="/2022/11/">November 2022</a></li>
	<li><a href="/2022/10/">October 2022</a></li>
	<li><a href="/2022/09/">September 2022</a></li>
	<li><a href="/2022/08/">August 2022</a></li>
	<li><a href="/2022/07/">July 2022</a></li>
	<li><a href="/2022/06/">June 2022</a></li>
	<li><a href="/2022/05/">May 2022</a></li>
	<li><a href="/2022/04/">April 2022</a></li>
	<li><a href="/2022/03/">March 2022</a></li>
	<li><a href="/2022/02/">February 2022</a></li>
	<li><a href="/2022/01/">January 2022</a></li>
	<li><a href="/2021/12/">December 2021</a></li>
	<li><a href="/2021/11/">November 2021</a></li>
	<li><a href="/2021/10/">October 2021</a></li>
	<li><a href="/2021/09/">September 2021</a></li>
	<li><a href="/2021/08/">August 2021</a></li>
	<li><a href="/2021/07/">July 2021</a></li>
	<li><a href="/2021/06/">June 2021</a></li>
	<li><a href="/2021/04/">April 2021</a></li>
	<li><a href="/2021/03/">March 2021</a></li>
	<li><a href="/2021/01/">January 2021</a></li>
	<li><a href="/2020/12/">December 2020</a></li>
	<li><a href="/2020/10/">October 2020</a></li>
	<li><a href="/2020/09/">September 2020</a></li>
	<li><a href="/2019/10/">October 2019</a></li>
	<li><a href="/2019/06/">June 2019</a></li>
	<li><a href="/2019/04/">April 2019</a></li>
	<li><a href="/2019/02/">February 2019</a></li>
	<li><a href="/2019/01/">January 2019</a></li>
	<li><a href="/2018/03/">March 2018</a></li>
	<li><a href="/2017/01/">January 2017</a></li>
	<li><a href="/2011/10/">October 2011</a></li>
			</ul>

			</li>
		
				</ul>
		
			</div>
		
		</aside>
		
		
	</div> 
		
	
</div> 


		
	<footer class="main-footer">
	
			<div class="wrap">
		
					<ul class="widgets row cf">
				<li class="widget col-4 widget_nav_menu"><div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-30"><a href="/privacy-policy/">Privacy Policy</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="/terms-and-conditions/">Terms and Conditions</a></li>
</ul></div></li>			</ul>
				
		</div>
	
		
	
			<div class="lower-foot">
			<div class="wrap">
		
					
			</div>
		</div>		
		
	</footer>
	
</div> 

<script type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"Article","headline":"Linux Fu: Easy Widgets |  Hackaday","url":"http:\/\/www.webfilebrowser.org\/linux-fu-easy-widgets-hackaday\/","image":{"@type":"ImageObject","url":"https:\/\/hackaday.com\/wp-content\/uploads\/2020\/05\/LinuxFu.jpg","width":1920,"height":0},"datePublished":"2022-06-02T17:00:00+00:00","dateModified":"2022-06-02T17:00:00+00:00","author":{"@type":"Person","name":"Tameka I. White"},"publisher":{"@type":"Organization","name":"Web File Browser","sameAs":"http:\/\/PLACEHOLDER.wpsho","logo":{"@type":"ImageObject","url":"http:\/\/www.webfilebrowser.org\/wp-content\/uploads\/2021\/06\/cover1-e1623996937363.png"}},"mainEntityOfPage":{"@type":"WebPage","@id":"http:\/\/www.webfilebrowser.org\/linux-fu-easy-widgets-hackaday\/"}}</script>
<link rel="stylesheet" id="yarppRelatedCss-css" href="/wp-content/plugins/yet-another-related-posts-plugin/style/related.css" type="text/css" media="all">


<script type="text/javascript" id="bunyad-theme-js-extra">
/* <![CDATA[ */
var Bunyad = {"ajaxurl":"http:\/\/www.webfilebrowser.org\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type="text/javascript" src="/wp-content/themes/smart-mag/js/bunyad-theme.js" id="bunyad-theme-js"></script>
<script type="text/javascript" src="/wp-content/themes/smart-mag/js/jquery.flexslider-min.js" id="flex-slider-js"></script>
<script type="text/javascript" src="/wp-content/themes/smart-mag/js/jquery.sticky-sidebar.min.js" id="sticky-sidebar-js"></script>
<script type="text/javascript" id="fifu-image-js-js-extra">
/* <![CDATA[ */
var fifuImageVars = {"fifu_lazy":"","fifu_woo_lbox_enabled":"1","fifu_woo_zoom":"inline","fifu_is_product":"","fifu_is_flatsome_active":"","fifu_rest_url":"http:\/\/www.webfilebrowser.org\/wp-json\/","fifu_nonce":"6dd85d762e"};
/* ]]> */
</script>
<script type="text/javascript" src="/wp-content/plugins/featured-image-from-url/includes/html/js/image.js" id="fifu-image-js-js"></script>

</body>
</html>