Built-in buttons or custom?

jjames

I'm just curious - what do you try to do with most of your panels' buttons. Do you put in custom graphics in place of buttons created by the touch panel? Or do you try to keep the "old school" look of the buttons?

I personally prefer to keep them custom. I'm really starting to get drawn to the new "glass" / aero / Vista look. (It's the new hip thing! Everyone's doing it . . . what an excuse eh? LOL)

I'm bringing up this topic because I noticed in an Autopatch posting a while back when Vining posted his interface to the device, it was a mixture of the two. I guess I'm basically asking, do you go buck-nutty in creating button graphics for the touch panel? Or do you let TPD4 determine how the buttons look?

If the latter, wouldn't you agree that it would be nice to see some new options from AMX?

Spire_Jeff

What are these touch panel generated buttons you speak of?

We normally create our own button graphics. The only exception that comes to mind is the occasional use of a single line bordered button used as a text box.

Jeff

jjames

Ahhh! Ya got me. I shoulda been more specific. See attachment.

Note: I do not claim to have made any, most, or all of the custom buttons. These were just graphics I pulled out of my graphic repository.

Spire_Jeff

I was attempting for a little sarcasm.... didn't work too well..... now I see I used a instead of

Well, regardless, I knew what you meant. Thanks for the clarification graphic tho.

Jeff

jjames

Spire_Jeff wrote:

I was attempting for a little sarcasm.... didn't work too well..... now I see I used a instead of

Well, regardless, I knew what you meant. Thanks for the clarification graphic tho.

Jeff

No no - I knew you were. I thought twice about it, and said to myself: "I better clarify so that nobody will be confused."

Cuz . . . ya know - a newbie, or someone who's not quite thinking clearly very well could be serious in asking "what are TP generated buttons?" Just a little CYA on my part - lol.

vining

Jay here's the TP page with the buttons I was looking for that were posted last year that initiated your PM. Most of the button are animated although they all didn't turn out as desired and they took way too long to make. If I was more familar with some of my graphic software it might have turned out better but nothing ventured nothing gained.

The transport slides out from the side of the big bar at the left, there are two text button that raise up from the bottom of the open window which is also where the search, now playing, keyboard and when not active Picture Frame pop up.

Yes, I got carried away with trying to do 3D but it was mostly for my own use at home with the SoundBridge & iTunes although it did eventually install it in one job so I can now say it wasn't a complete waste of time. Actually if I didn't install it in a job it wouldn't have been a wast of time because I did learn alot but if can make money from it, it will shut my wife up for not spending that time with her.

jjames

Slick - very freakin' slick. What did you use to create the animations?

Wives at times are so unforgiving aren't they? LOL!

That has gotta be one of the best 3D panels I've ever seen. Do you do custom work for all of your clients?

Jimweir192

Very nice 3D! What graphics packages do people use? I'm on Photoshop & PSP, but those type of animations would still be a ton of work...

vining

I'm using Xara Extreme & Xara 3D but then I usually take the individual layers to photoshop to combine. I use Xara Extreme to create the vector graphic images and then import to X3D to make them 3D. It's not really a fun process but when time permits I like to try different things which is sort what led me to AMX in the first place. If I stayed a normal Electrical Contractor I could probably have a life and some hobbies but AMX is now my drug of choice and believe me it is a drug or at least an addiction.

Xara Extreme has a tutorial for making those glass or plastic buttons which consist of about 4 layers and then combined. The AutoPatch GUI I made used the file progress level bars that are already in the TPs. I just shorten and combine them if I what rounded ends or as in the AP gui just leave it w/ sqaured edges.

I bought the complete Adobe Suite and a Wacom tablet last month for a write off but it it will be a long while before I figure out what to do with them.

DHawthorne

I have one or two set of buttons I use most regularly - mostly variants on PanelDesigner buttons. They qualify as custom, since they are bitmap based, but I didn't make them myself. I don't usually go beyond a custom start page logo or background image when it comes to making my own graphical elements. It's not my strong suit.

dbrady

I usually use a bit of both. i.e use the inbuilt border and fonts and apply a custom gradient image as the bitmap to give it some depth. With a couple of transparent gradient images you can easily make alot of different size buttons this way. I've attached a sample panel image i'm working on at the moment.(I've yet to make the custom background for it so i'm just using an Apple one for now, but it will be something similiar.)

Having said that i have made custom completely custom buttons in the past aswell as custom chameleon buttons. They are very time consuming to do however and aren't quite as flexible.

a_riot42

You must live in England if you have a button for towel rails They haven't figured that trick out here in the US yet.
Paul

jjames

dbrady wrote:

I usually use a bit of both. i.e use the inbuilt border and fonts and apply a custom gradient image as the bitmap to give it some depth. With a couple of transparent gradient images you can easily make alot of different size buttons this way. I've attached a sample panel image i'm working on at the moment.(I've yet to make the custom background for it so i'm just using an Apple one for now, but it will be something similiar.)

Having said that i have made custom completely custom buttons in the past aswell as custom chameleon buttons. They are very time consuming to do however and aren't quite as flexible.

LOVE IT!! (Especially the mention of The Fratellis and The Killers! Great music selections! )

I'll have to take a look at the Xara stuff. Heard of it, just haven't gotten it. I prefer to use Macromedia (now Adobe) Fireworks, since the native format of Fireworks is PNG (a big bloated file though.) I'm starting to dabble with Adobe Illustrator, but . . . . I still like my Fireworks.

Thanks for everyone's responses, it's great to hear and see what you're all doing as far as graphics go. I've seen quite a few people use the simple buttons from the TP editor, but - I dunno - that just doesn't do it for me any more. (Luckily we've got a graphics guy - whew!)

Keep your responses comin' everyone -

ericmedley

Spire_Jeff wrote:

I was attempting for a little sarcasm.... didn't work too well..... now I see I used a instead of

Well, regardless, I knew what you meant. Thanks for the clarification graphic tho.

Jeff

The interwebs does need to come up with some kind of 'sarcasm' emoticon...



We (who am I kidding... I) create all the graphics. I wish we had a graphics department... That'd be 20 kinds of cool.

the button/graphics scheme I'm using most right now and that seems to be a customer favorite is what I call the 'anti-button scheme'.

It's not your typical jelly or glass-bead looking, outward-sticking dimple. It's actually a sort of punch-out of the underlying background picture. The hole in the picture shows an imaginary wall or some kind of surface that is something like .5 inches below the plane of the picture and the button text is floating in the air space between the surface picture and the surface below. In the Off state the 3d text rests on the lower surface and when in the On state moves up to just below the plane of the surface picture.

The illumination of the button is from below and seems to come from the unseen side of the space between the back surface and picture. (sorta like soffitt indirect lighting in a home)

It took a while to make it but once I got the gist of it down, I have the whole process sorta automated in photoshop. So, If the customer want's that look, I try to steer them away from too much customization and ask them to just look more at a color scheme.

Spire_Jeff

ericmedley wrote:

It's not your typical jelly or glass-bead looking, outward-sticking dimple. It's actually a sort of punch-out of the underlying background picture. The hole in the picture shows an imaginary wall or some kind of surface that is something like .5 inches below the plane of the picture and the button text is floating in the air space between the surface picture and the surface below. In the Off state the 3d text rests on the lower surface and when in the On state moves up to just below the plane of the surface picture.

The illumination of the button is from below and seems to come from the unseen side of the space between the back surface and picture. (sorta like soffitt indirect lighting in a home)

Sounds like a cool button design. Does this mean that the button text is part of the button graphic? If so, do you have a button designed to house variable text? If not, did you design your own font?

Lastly, how about a low res picture of a button? (something that can't be copied and reused, but gets the look across)

Jeff

jjames

Spire_Jeff wrote:

Sounds like a cool button design. Does this mean that the button text is part of the button graphic? If so, do you have a button designed to house variable text? If not, did you design your own font?

Lastly, how about a low res picture of a button? (something that can't be copied and reused, but gets the look across)

Jeff

I agree - heck, low-res, watermarked - anything, this sounds super sexy!

glr-fti

Unfortunately I don't have the time to create what I would like nor do I have the graphic design skill that would meet my ideas. I do have Digital Juice and I bought my son Adobe Studio CS3 for Christmas so the tools to do cool stuff are here but.....

I usually start with something from Designer. I show them several themes to choose from and try to semi customize it for the client. Things like a family crest, if they have one, a favorite team logo, or something like that.

ericmedley

Spire_Jeff wrote:

Sounds like a cool button design. Does this mean that the button text is part of the button graphic? If so, do you have a button designed to house variable text? If not, did you design your own font?

Lastly, how about a low res picture of a button? (something that can't be copied and reused, but gets the look across)

Jeff

Oh, no problem. It's not that big a deal look-wise.

here's a sort of lite verion of it. This is just the background page. All the other buttons fly or fade in as popups depending upon what's going on. The page never goes away. The popups are either totally transparent or are smoked glass looking panes.

The color scheme is usually dependent upon what photo is in the background. (I use the eye dropper tool a lot.) Most panels have differnet backgrounds that I make from client photos. They also change from time to time to keep things interesting. A favorite is to shoot a picture from the window of the room the panel is in. (assuming they have a good view.)

Sometimes, I'll go ahead and use the Touch Panels text. If it's a big job, it's too much work trying to manage all that. Also, this particular client had rather poor eyesight, so the touch panel text was easier to read from a distance. For the same reasons I went ahead and put a TPD4 border on the buttons. It helped him see better. The normal version has no border per se and just looks like someone took an exacto knife and cut a rounded rectange out of the picture. Also the distance to the imaginary back is much shorter here and also the icon doesn't move so far. (here again the blur required to make the depth seem farther made it hard for him to see it well.)



the background picture in this one is kinda fun too. the sea floor you see is actually white sand. If you look closely, the dark colored stuff that looks like some kind of sea plants or coral is actually a lobster march. I wonder if the guy who took this realized that all he had to do is snap the picture and reach down and grab a delicious dinner...

Spire_Jeff

Nice panel, I like the simple look and feel of it... very easy for a new user to start without being overwhelmed.

Jeff

ericmedley

Spire_Jeff wrote:

Nice panel, I like the simple look and feel of it... very easy for a new user to start without being overwhelmed.

Jeff

Thanks! that's kind of you. Simplicity was the goal. It's becoming a more and more difficult goal as devices are requiring many more buttons that the usual play/stop/pause nowadays. We do ReQuest and Kaleidescape for example. I struggled but managed to get both of their entire interfaces within a single square in the center of the remaining portion of that page while keeping the source selects and volume/mute/presets on the left and right respectively. If things continue to get more involved I may start having to break my rule of 'never any more deep than one menu from the top'

I like the other panel/button ideas I'm seeing here too. I know it's all intellectual property and all that, but I do learn a lot by seeing other people's work. I'd appreciate anyone who is willing to show what they're doing.

I think as a programming community we stand to benefit as a whole by sharing ideas. (and all that other warm-fuzzy junk...)

a_riot42

It's interesting that you have a 'Panel Sleep' button. I usually tell the client to hit the external buttons to put it to sleep. I have used them before but clients seem to accidentally touch them and would put the panel to sleep when they didn't want to. Maybe yours is a touch and hold button so that doesn't happen.
Do clients ask you for that feature?
Thanks,
Paul

ericmedley

a_riot42 wrote:

It's interesting that you have a 'Panel Sleep' button. I usually tell the client to hit the external buttons to put it to sleep. I have used them before but clients seem to accidentally touch them and would put the panel to sleep when they didn't want to. Maybe yours is a touch and hold button so that doesn't happen.
Do clients ask you for that feature?
Thanks,
Paul

The graphic you see (and by proxy the sleep button) are somewhat misleading. that button actually only shows up when the panel is in TV mode. The idea being that most times the client will be watching TV in the dark. They'll reach over to change a channel or something. Then put the TP back down on the couch or whatever. However, if it's still awake the light coming from it bothers them.

So, the way that button works is when they're done messing around they can hit the button to put the panel back to sleep so the light goes off. It beeps at them and waits about 5 seconds to to go to sleep.

And, yes it was a customer request at first. Now, it's just standard issue.

As to the accidentally hitting the button issue. Since it is only present when in TV mode and also the fact that all the control buttons are much lower on the screen, accidental hits don't seem to be a problem. In addition, I do put a 'kill the screen sleep routine' in the program if they hit another button. So, perhaps that too keeps accidents to a minimum.

That's at least how I see it. You, however, make a good point that I'll have to consider.

e

Thomas Hayes

I was just browsing the forums, (first free time in months) and noticed this thread. I usually use a combination of premade and custom icons. I'd post a sample but my USB stick is down stairs and I'm too tired to go and get it. I would like to know if any of you use graphical designers?

jjames

Thomas Hayes wrote:

I was just browsing the forums, (first free time in months) and noticed this thread. I usually use a combination of premade and custom icons. I'd post a sample but my USB stick is down stairs and I'm too tired to go and get it. I would like to know if any of you use graphical designers?

We do to an extent. I enjoy making buttons, but leave most of the backgrounds, icons, etc. to our graphics guy. He has a full time job, so he does it on the side. Sometimes not the quickest, but it works out great!

Greg

Here's my current design. I usually change it annually at which point I'm sick of the last one and can't stand to look at it. My rules of thumb are:
1. It needs to work for residential or commercial
2. It needs to be scalable to a multi-zone/display/whatever down to a tv with a PC input
3. High contrast because of god awful fluorescent lights and large windows (can be problematic due to the horrible contrast/streaking of an MVP7500)
4. Particularly with residential you always have lots of buttons because clients want so much functionality so things have to maximize button size vs. real estate
5. I like the panel to have a "theme" this panel is my Web2.0 my last was Art Deco another was Art Nouveau (though I didn't really know the term till later) - this helps in picking fonts and choosing a color palette

jjames

Greg, I like it! Looks nice and simple. Something I also try to do, and it appears you do too, is group the buttons with color. Transport = blue, numbers = green, etc.

Feel free to post any other samples. I like it a lot!