Posts Tagged ‘BlinkDagger’

BlinkDagger – the end?

Wednesday, July 8th, 2009

In his latest post on BlinkDagger, Quan Quach announced that the BlinkDagger blog will be frozen following co-author Daniel Sutoyo’s hiring by The MathWorks and the continuous strain of maintaining the blog single-handedly.

This is sad news indeed for the Matlab user community. Over the past few years, BlinkDagger has become the largest independent Matlab-related blog (at least that I know of), with some 150 well-written tutorials on a very wide variety of Matlab-related topics. In fact, I believe that only the official Matlab blogs and the Matlab CSSM forum contain more Matlab content. Although there are reportedly over a million Matlab users worldwide, there is precious little independent online Matlab content. Perhaps the need is answered by CSSM and the official blogs, and perhaps the reason is other. In any case, BlinkDagger’s retirement will be well-felt.

As a novice (4-month) blogger I can well appreciate the effort it took Quan and Daniel to write so much well-crafted content, follow-up on numerous comments and continuously think of interesting article ideas. The fact they have succeeded in doing so consistently for so long, without noticeable quality degradation, is remarkable. So, while regretting their action, I can certainly understand it. I truly wish both Quan and Daniel the best of luck in their new adventures, and send them an enormous hug of gratitude for their services to the Matlab community.

Don’t be lazy – be a sport – visit the BlinkDagger link and tell Quan and Daniel that you too appreciate their efforts. Let them leave the stage with a standing ovation rather than a whimper. They deserve it.

Yair Altman

Spicing up Matlab uicontrol tooltips

Wednesday, May 27th, 2009

Outside the official Matlab blogs, perhaps the most widely known Matlab-related active blog is BlinkDagger. This blog is certainly worth following, especially for novice Matlab users who could gain fresh angles on regular programming tasks that have a simple solution in Matlab.

In one of their latest posts, BlinkDagger described how to use tooltips in Matlab GUI. In one of this blog’s very first posts, I described how HTML can easily be used with Matlab uicontrols. Let’s now combine these ideas to show how HTML support can easily be used to spice-up the tooltips.

Let’s start with a simple styled multi-line tooltip:

str = '<html><b>line #1</b><br><i><font color="red">line#2';
set(hControl,'tooltipString',str);

Multi-line HTML'ed tooltip

Multi-line HTML'ed tooltip

This technique was used to display the informative tooltip for my Java-based data table utility on the Matlab file Exchange:

Multi-line HTML-styled tooltip

Multi-line HTML-styled tooltip

Tooltips can also be used to present images, using the HTML <img> tag. However, the image src (filename) needs to be formatted in a URL-compliant format such as ‘http://undocumentedmatlab.com/images/table.png‘ or ‘file:/C:\Yair\Undocumented Matlab\Images\table.png’.

If you try to use a non-URL-format filename, the image will not be displayed. Instead, a placeholder box will appear. For example, let’s take the table screenshot above and try to place its filename directly in the tooltip HTML:

filePath = 'C:\Yair\Undocumented Matlab\Images\table.png';
str = ['<html><center><img src="' filePath '"><br>' filePath];
set(hButton,'tooltipString',str);

Tooltip with invalid HTML img source URL

Tooltip with invalid HTML img source URL

If we fix filePath to be a valid URL, it now looks as intended:

filePath = 'C:\Yair\Undocumented Matlab\Images\table.png';
filePath = strrep(['file:/' filePath],'\','/');
str = ['<html><center><img src="' filePath '"><br>' ...
       '<b><font color="blue">' filePath];
set(hButton,'tooltipString',str);

Tooltip with HTML image and caption


Tooltip with HTML image and caption

Note that the tooltip looks enormous (it’s actually even downsized to fit this post…). This is because our HTML <img> was not limited in size and so the tooltip was created to display the screenshot in its original large size. In order to limit the tooltip size, simply add the height and width attributes to the HTML <img> tag, remembering to preserve the original image aspect ratio.

Now that we know the basics, we can really go wild with HTML and CSS formatting. Have you configured any kick-butt tooltip in your application? If so, please share it here.