This is a fully functional VT-Proe project that emulates an iPod classic. All of the elements are multi-state and the body of the iPod can change between 12 different colors at runtime. It uses .png graphics so the iPod can be “floated” anywhere on the page. It also includes a separate “shadow” graphic to add to the floating effect. Click here to see screenshots.
For those of you who install Crestron HVAC and would like the icon on your touchpanels to accurately represent the equipment being controlled; here is a 512px x 512px Crestron thermostat icon in .png format.
The Apple TV is becoming more and more popular as a media server in high-end residential systems. With several two-way control solutions now available, it’s a pretty sweet option considering most people use iTunes to manage their music library. Perhaps the most distinctive feature of the Apple TV however, is its gorgeous, user-friendly on-screen interface which you navigate with the included i.r. remote control. Despite the simplicity of the remote, I’ve found that the multi-function commands don’t translate well onto a touchscreen controller. I created this Apple remote “emulation” to solve this issue. If the user is familiar with the stock remote, he will immediately know how to control the Apple TV from his touch panel when presented with this.
The file is entirely vector so it can be resized to fit any application. There are also several layer comps included that switch between the various colors. With a simple drop-shadow or reflection effect behind it, the emulator looks great no matter what touch panel template you place it into.
The Regency template was originally created for the Crestron ST-1700C. It features a very classy appearance that combines the look of burled, darkwood with brushed metal buttons and ruby-red indicators. After several recent requests for more of our trademark woodgrain textures, we decided to add it as a free download. There are a few sample screenshots posted on the NTDesigns Picasa page and you can download the template at the downloads area of NTDesignsonline.com. Enjoy!
This video is not directly related to the world of control system interface design, but I wanted to post it because it takes something very familiar and puts a very innovative and useful twist on it, which is a technique that can be directly applied to interface design (the poorly translated English dialog, reminiscent of “all your base are belong to us”, is entertaining too). This is one of the best examples of “thinking outside the box” that I’ve ever seen. Watch the video and pay attention around the 00:35 mark. That’s where it will throw you for a loop. There will be an advertisement before the video starts…sorry.
Click image to see Intellitint in action
NTDesigns’ has redesigned the popular Iconic template series to incorporate their exciting new IntelliTint technology. IntelliTint allows the color and look of the panel to be changed at runtime by the end user. By combining one of the included, high-quality background images or one of over 40 predefined background colors with an IntelliTint overlay image, the user has literally hundreds of design “motifs” that she can choose from. With minimal effort, the system programmer can add more background images and colors to the template which makes the number of possible appearances the panel can have virtually limitless. Additionally, the end-user can save their custom-made motifs as presets that can be easily recalled with the touch of a button. From the programmer’s perspective, each of the template’s background elements is controlled by a single analog signal. Using the included Intellitint Simpl Windows module, the appearance of the panel can be easily changed based on time of day, change of season, holidays or any scenario the programmer or user can come up with. The creative possibilities are truly endless.
Features:
We’ve added a handy item to the downloads area of the website. It’s a Lutron Designer style keypad created in Photoshop. The file includes “active” and “inactive” states for all buttons and it also includes emulated faceplates in all of Lutron’s Designer colors. The various states are stored as Layer Comps within the .psd file so you can easily switch between the different states and export what you need for use in other programs. Click here to see a demo showing all the states contained in the file.
The latest and hottest touchscreen devices, such as Crestron’s TPS-6L/X, RTI’s T3-V and the Apple iPhone, feature ultra-high-resolution screens. They look fantastic and they allow a level of detail on a small screen that wasn’t possible before. Along with greater color depth and translucent PNG support, these new screens allow programmers to really get creative with their designs. However, as Uncle Ben said, “with great power comes great responsibility”. The “responsibility” of the programmer in this case, is to take into account the size that objects will be once they are downloaded onto the touchscreen. After all, “high-resolution” is just a fancier way of saying “really small pixels”; much smaller than the pixels of most computer monitors and the touch panels that we’ve been used to in years past. So, a 40 x 40 pixel button that has always worked fine on a 15-inch, 800 x 600 px touch panel, will be really small and difficult to use on a 5.7-inch, 640 x 480 px device like the TPS-6X. Here are a few guidelines to follow when designing for these new, higher-resolution devices:
Avoid having any “pressable” objects on a panel that are smaller than 1/2-inch in diameter. Objects that are not interactive however, such as digital gauges and text fields, can be made smaller as long as they are still readable. Higher resolution screens allow the use of much smaller font sizes while still retaining clarity.
If you know the physical dimensions of the touchscreen you are designing for, you can create document presets in Photoshop after calculating the dpi (pixels per inch) of the panel. This will allow you to set your rulers to inches and see exactly how big your graphics will be once they’re on the panel.
While it may be possible to fit all of the controls for a device on one page, keep in mind how it will look on the panel itself. This is generally acceptable on 8-inch or larger panels, but on a smaller screen it can look confusing and overwhelming.
When using translucent objects, assure that they can be easily seen. Placing semi-transparent buttons over a busy background image can look cluttered and can make some objects hard to see. This can usually be remedied by creating a translucent “overlay” frame or border to go between the buttons and the background image. This technique also makes the interface appear more organized by “grouping” the controls together.
Keep in mind what fingers are most likely to be used when operating the panel. An in-wall panel might be operated primarily by the user’s index finger, while the wireless, hand-held version of the same panel could be operated with the thumbs which would require larger buttons.
In addition to the tips mentioned above, the most important step in the process of creating any interface design is downloading and testing on the device you are designing for. This may seem like common sense, but it is surprising how often this step is rushed or in some cases, completely ignored. I’m sure many of you can recall times when you’ve been troubleshooting someone else’s system and you say to yourself, “man, did they even test this thing at all?” Fonts may render incorrectly, colors may be too dark or too light, dithering may become too obvious, and objects that are off the screen by one pixel won’t even download to the panel. Every element of a touchscreen project can appear differently on the panel than it does on your computer screen; so keep the device handy while doing your designing and test extensively.
Whether you think it’s a good thing or not, glossy iPhone style buttons are all the rage right now. We created these for our own, in-house use awhile ago, but with Crestron’s release of their iPhone app, we figured there are probably quite a few of you who could use these shnazzy icons in your projects. There are three sets: black, white and amber which is intended to be used for the “active” or “pressed” state. Enjoy!
.jpg "NTDesigns Halo Template")
Of all the projects we have cooking at the shop right now, the Halo template series is likely the one we are most excted about. This unique template answers a number of requests we have received over the past several months including the need for enhanced “drop-down” list functionality and a wider variety of background options. The menu bar across the top of each page is one of Halo’s defining characteristics. Touching each section of the menu bar reveals a list of choices to allow ultra-quick and convenient access to commonly used functions. This allows the user to make a simple adjustment to the temperature or lights for example, without even leaving the page they are on. If the functionality the user is looking for is not included in the drop-down menu, simply press the “more” tab at the bottom to access extended controls.
Another unique feature of the Halo template is its contoured button regions. The keypad, transport and other button groups are designed to fit together. This suggests the relationship between the buttons better than simply placing multiple copies of the same rectangular graphic next to each other. It also gives the design a streamlined appearance.
The Halo template will also include a variety of images from our new background sets.
Halo is scheduled to be released in mid to late April.
Recent Comments