Tuesday, August 20, 2013

PyQt Widgets - TagLabels and Canvas.Backdrop

As part of my research work, I'm currently spending quite a bit of time developing prototype interfaces/widgets. In my case, my current "weapon of choice" is Python2 + PyQt (with progress logged in Git), as it gives me fast turnarounds, nice and familiar API's, and a modern + industrial-grade base UI library.

Today, I'm going to release a few "support" widgets which I've developed for use as part of my toolkit/workflow:

1) TagLabels

https://bitbucket.org/Aligorith/pyqttooltipslib  (Currently in "TagLabels" branch)

2) Canvas.Backdrop

So, what are these for?

Tag Labels
Tag Labels are basically fancy tooltips which can be used as a container for some other widgets (usually just labels, but may also include things like dialogs, etc.)

Their main purpose is to be shown alongside some widget to indicate some features at a particular location (e.g. "Find [this-specific-named-item] in this vicinity" or "This is called the SCOFT bar. It ... [longer description of purpose/usage of widget] ...").


import tagLabels

# create a button to attach tags to
button = qgui.QPushButton("Click Me")

# ...

# create "spawner" - which creates and manages a group of tags which need to be shown/hidden at the same time (i.e. for one step in a tour sequence for example)
# - pass it a list of the widgets you want to display tags for
spawner = tagLabels.TagSpawner([button])

# add some simple text tags to the button
spawner.addTextToLeft("I'm a left-handed tag", priority=tagLabels.TAG_WARN)
spawner.addTextToRight("I'm a right-handed tag", priority=tagLabels.TAG_INFO)

# show tags
spawner.finalise()  # must do this once all tags are ready

spawner.showAll() # show all at once; can also do spawner.showSequentially() to have them show up in order that they were added, with a slight delay in between

There isn't really much to this widget (it's really just a full-screen window with a gradient on it (*)). However, I built this for one very specific purpose:
To act as a pretty-looking plain colour backdrop that I can put up on screen behind some interface(s) I'm trying to get nice screenshots of
That's it.

Some will be wondering whether there's any real need for this. Well..
1) I could have used PowerPoint to set up the same base-fullscreen colour+gradient backgrounds that I wanted (in fact, this practically just tries to emulate that look, with some slight tweaks). However, bringing up Powerpoint for this is cumbersome - it's a bit too heavyweight for this purpose, and I'd have to set it all up.

2) I could have used an image or just brought up MsPaint with a blank canvas/image. But, then again, that's also quite troublesome as it usually leaves all the toolbars in (which are again, fiddly to have to remove and then put back before/after taking each screenshot). Besides, that option just doesn't look that nice!

3) Why not use the desktop? Well, I usually have heaps of icons on that, as well as some or other photo wallpaper, all of which are just extra visual noise distracting from what I'm trying to show.


(*) Perhaps I lied a little bit there....

There is one other feature it has over being just a plain old gradient-coloured window: with a single keystroke (ZKEY), you can toggle between 2 colour schemes (and/or possibly more, if you so wanted). In the screenshot above, these are "Blue" (default - basically what I like using on my presentation slides) and "Dark/Night" (when that one doesn't work that well in some situations).

Seeing this in action, it got me thinking: Why don't I eventually start hacking this basic framework into that awesome diagramming/presentation-making/sketchpad/infinite-canvas-space app that I've always wanted?

Once I implement the ability to add text, lines, and images to this thing (with nice fuzzy drop shadows - a big timesink currently in Powerpoint for the current visual styling I like to use), it can practically be an optimal presentation tool (at least for my purposes). Really, I don't need much else! (Plus, the ZKEY to toggle light/dark mode would really be a kick-ass feature in this case!)...

If only I had the time to hack away on that... ;)

No comments:

Post a Comment