Touch panel wireframes
9 October 2008, 07:39 by Chad Reynoldson
When developing a new touch panel file, I like to start out with a page template that breaks down a screen into individual blocks. Website designers call this a wireframe.
The wireframe page should be pixel-perfect with each button having the exact position and size, so they do not over-lap. Each of these blocks (Source Selects, Controls, Volume, Environment) will define a popup group area of the page.
When you select one of the blocks first and then “Add Popup Page”, then TPD4 will assign the defaults of that popup to the parameters of the button selected. So you will get a popup that will match the button properties for: position, size, border, colors-background/border/text, and font-name/size.
I always assign this new popup a group with a header that is easily identified in the workspace, such as [srcNav], [srcCtrl], [vol], [env] and I include the square braces. This helps by alphabetizing the list of popups as groups when assigning pageflip actions.
I name this new popup as [srcNav]_Template, this way it is always first in the list under the group and is easily located and identified.
Finally, I customize this new popup even further with a background image, popup title, and sub-navigation (still within the group).
It is this template that I will copy and paste for each additional popup that I need for this group. After all of the new popups are created, I re-visit each and add the necessary buttons for transport, control, etc.
I’d like to point out that the background bitmap image of the popup is set to the same image as the page. The trick is to set the popup bitmap image’s position to absolute and offset it with negative values that match the popup’s position. For example, if the popup is at location 166,0 then you’d assign the popup’s background bitmap image to an absolute position of -166,0. This way the popup’s background will align on top of the page’s background image. Some prefer to use a transparent background so the page’s image shows through, but I find this to be problematic because when working on popups with transparent backgrounds, it is difficult to see.
Based upon the above description, it is pretty obvious that I prefer many popups that come up over a few pages (Logo, Main Page, Tech Page). Some subscribe to the opposite approach with many pages and fewer popups. I’ve decided that my approach is much easier to maintain, support, and extend.
If you subscribe to the DRY philosophy, and I do, then you will start to see this method works very well.
Comments
Comments are turned off for this article.