Pimp My GUI
13 Jan 2009 Quan Quach 12 comments 2,798 views
The idea for Pimp my GUI is taken from the popular MTV show Pimp My Ride.
Blinkdagger proudly presents Pimp My Gui, a series that will provide our readers with tips and tricks on how they can make their GUIs beautiful on both the inside and outside. In this series, we start with a freshly created GUI from our newest prodigy, Zane Montgomery! This will be an ongoing project so don’t think the final result at the end of this post is the end. In the future, we are planning on opening up this series to include GUIs from our reader base, so stay tuned!
Contents
Zane’s Commuter GUI
About Zane’s GUI:
As a tutor, I have to work at one of three offices during the week (Federal Way, Issaquah, Lynnwood). One of my worries working for this company was the price of gas because driving would take up a good part of my pay. I heard that gas for work could be deducted from taxes so I decided to keep track of all of my miles. I had recently completed some of the blinkdagger tutorials and thought a GUI would be a great project to practice my new skills. I could have just made a simple Excel sheet, but then I would have to eventually come back and add everything up manually, why not have it all completed for me!
Adding in Panels
The panel icon on the GUIDE editor looks like this: 
.
You can find it here:
As can be seen, the panels immediately give the GUI a better structure and organization. Panels are an effective way to group together common elements and are simple to use. They provide lines and boundaries and makes it easier for the end user to navigate the GUI easily.
Labeling Panels
In this part of the revamping, we have simply given the panels a title name to identify that particular panel. In addition, we removed the redundant headers. This helps clean up the GUI even more and removes extraneous information. Also, the panel sizes are reduced to a size that adequately frames the content as to not waste space.
Reorganization
After some reorganization of the GUI, there is extra space that is no longer needed. This reduces the GUI size yet again and makes it more compact. In addition, the “Input Data” panel was extended to include the rest of the buttons so that there wouldn’t be any elements that are orphaned and just dangling alone.
Final Thoughts
Panels are an effective way to separate your GUI into manageable sections, giving the GUI definition. Join us next time as we continue to transform Zane’s GUI from the ugly duckling to the beautiful swan.
12 Responses to “Pimp My GUI”
Leave a Reply
Include MATLAB code in your comment by doing the following:
<pre lang="MATLAB">
%insert code here
</pre>
1. I question any GUI advice based on guide. In my experience, except for simple GUI’s, GUIDE is more of an impediment than a help.
2. I question the assertion “I could have just made a simple Excel sheet, but then I would have to eventually come back and add everything up manually”. I have had to do similar tasks in the past, and Excel works very well. If you don’t think so, then the issue is that you don’t understand Excel very well. Heard of the AutoSum button? If you want to have an example where you look at an alternative to doing this in Excel, that’s fine — but don’t claim that it’s better than Excel. This is exactly the kind of thing for which Excel was designed and performs admirably.
Hello Gary,
I will admit that GUIDE is targeted towards those people with minimal GUI experience within MATLAB. But the alternative is to NOT use GUIDE, which is an extreme detriment to the majority of people who want to create a GUI within MATLAB. The learning curve without GUIDE is rather steep.
Could excel have done a better job here? Potentially. And you do bring up some good points. But the focus of the post is to take Zane’s GUI and make it look more appealing!
Quan
[...] Pimp My Gui Part 2: Making the Most out of the Menu Bar [...]
i am using a function within a callback of a push button. Then i need to use the parameters of this function in another function within another push button.
how can i do this?
Hey guys,
I was wondering if there was any way to see the source for this GUI, or at least the code for the push button add a new day.
Chris
Perhaps our friend Zane can arrange that!
I’ll have to brush off the cobwebs, but I can send it to you no problem. I’ll try to make sure any referenced functions in the callback are included or at least commented sufficiently.
Perhaps you can provide contact info through http://blinkdagger.com/contact
Or Quan and I could work on posting the source to this page as well.
The basic idea is this:
It reads in the edit text boxes and the drop-down menu for day/location, converts to a pretty date format, adds it to my master array of date/locations. Then sorts the array by date to be displayed under ‘recent activity’.
Thanks for the help guys, I don’t know if this is possible, and if so I wouldn’t know if the answer would be better as a response or another tutorial say PIMP MY GUI 4 but,
Is there a way that I can make the recent activity Panel able to go through all your activity by either making the size of the GUI resize or somehow putting a scroll bar on the side.
This is just a can you do it kinda think so if the answer is No it’s not possible that’s fine
Interesting question Chris. Even if you could (which I’m not sure), I would not want to resize the GUI in this situation because the recent activity could have hundreds of entries. As far as for a different application with guaranteed fewer entries, or a more useful time to resize it, I personally don’t know how to do it but I suspect there would be a way (although not likely easy).
As far as the scroll bar idea, I don’t think GUIs auto create a scroll bar for static text boxes and I don’t know if there’s an option, but I can think of a way you could use the slider bar option and manually create your own scroll bar. If you’d like to work on this, let me know.
Zane,
It was more of an interesting idea than something I really need to work or spend time on. It was me wondering is this possible, if you have a demo or how to handy to show me how to use the sliderbar as a scroll bar I would love to read it, but it is nothing I would waste your time on since I figure whatever your next MATLab post is about would be more interesting and help more people than this idea.
Chris
Zane,
Not that you probably care, but I just found this magical thing called a listbox that I had no knowledge about. That solves my idea just a simple listbox it’s really amazing what a little reading can do to your knowledge.
Chris
I’ll check it out too. Thanks Chris!