Daveb's New Wood Interface

[DaveB]

I have been developing this new interface in conjunction with Ellisr63. We first designed all new graphics and formed graphic packs, then I started the interface build out. I have several areas completed and wanted to share a very preliminary sample of what is to come. Check back as I plan to update this thread frequently. I will make a downloadable version of the interface available at the completion of the build, if anyone is interested.

http://i262.photobucket.com/albums/ii86/dbruner10/CQC%20Wood/Wood_NowPlaying.png

[gacevich]

Sweet! I am looking forward to updates. Nice woodgraining. How did u do it?

[DaveB]

Thanks; Actually Ron is responsible for the graphics. He located a burl background graphic someplace and then made all the custom buttons and the background accordingly from that artwork in photoshop. He also developed the aluminum button sets.

I went with a much different approach with the top menu, in that I always am showing the user where they are in the hiarchy. every command is not more that 3 clicks away. That is the basis for the design.

So far, we have over 700 graphics designed and working, mostly button sets. We are developing this interface for both 1024x768 and 800x600 interface sizes.

[DaveB]

This is the Wood Interface base template with no overlay selected......

http://i262.photobucket.com/albums/ii86/dbruner10/CQC%20Wood/Wood_Base.png

[ellisr63]

the led volume will be a nice addition

[robolo]

frick... just when I start serious work using the "Modern Series" you guys have to come up with this. Oh well, just have to delay deployment for another few months (Thats OK I actually don't have the touchscreens installed yet anyway)

[ellisr63]

frick... just when I start serious work using the "Modern Series" you guys have to come up with this. Oh well, just have to delay deployment for another few months (Thats OK I actually don't have the touchscreens installed yet anyway)
What I am going to be doing is converting all of my templates over to a new naming strategy that Dave and I came up with... this will make it easier to import other templates (hopefully we can get others to do the same).

[DaveB]

As Ron Said, We have come up with a naming structure for all of the components that make up the template, and a directory structure for storing all of that information. I will post an example shortly.

With this structure, it makes the build out easier and makes changes down the road easier. Also, if you have multiple interfaces as Ron and I do, then it is easy to locate the graphics that belog with there respective interfaces.

We also have introduced what we are calling button groups. We have developed buttons in groups of two up to 12 for many uses. These can be for selection groups, keypads and so on. They are all pre-allinged, and pre-named so that all you do is the programming. If you look at the Now_Playing sample above, the four button transport control is one of those groups.

[LesAuber]

As Ron Said, We have come up with a naming structure for all of the components that make up the template, and a directory structure for storing all of that information. ...

Dave, is this just for storage or did Dean slip a real directory structure into CQC for interfaces? If so I slept through it though last I knew it was on the list as something needed.

[DaveB]

No, this is our own structure in the USER area until Dean does his thing with the entire structure arrangement. The interface seriously needs attention concerning directory structure and manipulation of that structure from within the shell. I know it is on the list someplace.

What Ron and I did was come up with a method of naming as we knew that in the end, this interface build out would end up with about 1000 graphics. :shock:

[Squintz]

The interface and buttons look real good. The only thing that stick out to me is the text on the buttons does not look so good. Is there a way you could may the text appear as if it is burned into the wood?

[Dean Roddey]

You could use the alpha drop shadow thing to give that appearance probably. Set the text black and the drop shadow kind of a dark brown or something maybe.

[DaveB]

Dave and Dean - I agree that it does need work.

I originally wanted the appearance that the buttons were reverse illuninated and that they were engraved.

I need to play around with some solutions. I could do somthing real cool in photoshop, but I want the text and it's settings to stay inside the shell.

I will play around with some solutions and post for comments. Thanks for taking a look!

[IVB]

So...what's the naming convention & tree structure? It would be cool to come up with something that we all change our stuff to, and enhance sharing ability.

BTW, screens look cool, but you could do with a touch of art or cartoon characters :-)

[klindy]

So...what's the naming convention & tree structure? It would be cool to come up with something that we all change our stuff to, and enhance sharing ability.

BTW, screens look cool, but you could do with a touch of art or cartoon characters :-)

FWIW I've been naming mine similar to how would name MS Access tables/Querys/Forms/etc.

I use a three letter 'prefix' in front of the template name. For example, I have a couple different sizes to manage so they are 'sml', 'med' or 'lrg' for the various sizes - Example, my video CAB would be "smlVideoCAB" which would work for the TS on the HTPC and "lrgVideoCAB" would be for my primary PC monitor (which I would always use with a mouse). What's important is since the CAB above is an overlay (and in other cases popups) it works with the other same sized templates.

As it grows, I name any graphics the same way to easily relate them to the appropriate template size. Since I use several overlays in various areas of the templates, I can mix and match somewhat but still keep some kind of structure in place.

It's not perfect but it helps keep it straight without the names getting to unwieldy.

The other thing I've done is use 'tst' (or even test) in front of the name of the templates if I'm trying something new or if I throw something together to test a new piece of equipment.

Not sure any of this helps except that it helps keep a long list of templates and graphics a bit more organized.

I'd like to see what Ron and Dave have developed too.

[LesAuber]

Not to highjack Dave's thread but the other bit needed is a way to keep all of a style together. Otherwise all the lrg wood templates gets mixed with the lrg metal making it a pain to sort. Something like wdlrgxxxx perhaps to separate all the woods from mtllrgxxxx metals etc. Something I've regretted not doing.

[DaveB]

That is exactly whay we have done in the naming convention. We also made seperate directories for each major catagory then sub directories under that major catagory. We kept the interface sizes seperated ie 1024x768 and 800x600. There are some items that are needed in both, and they are in a general directory.

So it is like this;

Wood_01
1024
Background
Buttons
Single
Metal
Wood
2 Group
Metal
Wood
3 Group
Metal
Square
Rect.
Round
Wood...............

You get the idea. Grouping/Finish/Shape/Button_Name

[IVB]

Hmmm. Could you put that into a [ code ] group so the spaces are retained, and we can see the cascade?

[ellisr63]

http://i22.photobucket.com/albums/b344/rsxer63/TreeStructure.jpg
Does this help?

[klindy]

1024
Background
Buttons
Single
Metal
Wood
2 Group
Metal
Wood
1off
1pr
2off
2pr


800
Background

Does this help?

He wanted it wrapped in the tags so it stayed indented

[code]

Mainnext sectionnext sub section kind of thing

[ellisr63]

I caught and corrected it with an image but you were too fast.;-)

the other thing we are doing is numbering the buttons instead of calling them a name... Ie if thee are 12 buttons in a group they are called 1pr, 2pr.. etc (pr being pressed) and in a group I have one image of the group that is off....

[klindy]

I caught and corrected it with an image but you were too fast.;-)

Thanks but I'd still like to see the whole directory structure

[ellisr63]

Thanks but I'd still like to see the whole directory structure
for 700 graphics?

[DaveB]

Maybe when we are all finished, we will post the complete structure. Remember that we are only 80% complete. :shock:

I am building preliminary interfaces to see what else we need, then we will finish.

[klindy]

Maybe when we are all finished, we will post the complete structure. Remember that we are only 80% complete. :shock:

I am building preliminary interfaces to see what else we need, then we will finish.

That works for me. Thanks Dave and Ron.

[DaveB]

Keith; Check back soon to see the completed screen shots using many of the graphics. :cool

[DaveB]

You could use the alpha drop shadow thing to give that appearance probably. Set the text black and the drop shadow kind of a dark brown or something maybe.

Now I know why it looks like it does - I am using the Toolbar Widget. The font setting for the wodget are locked. I am fairly stuck with what I have if I can not get the widget modified. With the method we are using to keep buttons depressed once selected, it would be impossible to overlay the widget with text.

Dean - any insight? :-)

[DaveB]

OK; another sample; This is the main weather page. Look at the top row of buttons and please comment on the new look. Thanks.

http://i262.photobucket.com/albums/ii86/dbruner10/CQC%20Wood/Wood_Weather_Main.png

[IVB]

i'm pretty non-standard when it comes to preferences, but that gives me a headache looking at it due to the odd contrast.

My token idea is to pick a dark brown color, with a black offset, so it looks like it's burned into the wood.

[DaveB]

I agree and will keep trying....Thanks!!

[Dean Roddey]

Instead of blue, try a medium grey, or light gray maybe.

[Squintz]

Your on the right track but as Dean said you still need to play with the colors. It's already 100% better than it was though.

[robolo]

I'm really liking the look. I agree with the plans to change the text on the wood buttons as well. The other style question I had was if it is appropriate to have the wood buttons continued onto the metal surface. IMHO it seems like the wood buttons should be limited to only the area of wood background. Would you consider using metal buttons on the metal surface? Kind of like you already are doing with the metal power button on the bottom.

[ellisr63]

I'm really liking the look. I agree with the plans to change the text on the wood buttons as well. The other style question I had was if it is appropriate to have the wood buttons continued onto the metal surface. IMHO it seems like the wood buttons should be limited to only the area of wood background. Would you consider using metal buttons on the metal surface? Kind of like you already are doing with the metal power button on the bottom.
we have designed the templates to where you can use wood or metal buttons throughout the templates (we made groups of each size and number).

[DaveB]

I'm really liking the look. I agree with the plans to change the text on the wood buttons as well. The other style question I had was if it is appropriate to have the wood buttons continued onto the metal surface. IMHO it seems like the wood buttons should be limited to only the area of wood background. Would you consider using metal buttons on the metal surface? Kind of like you already are doing with the metal power button on the bottom.

As Ron said above (or below depending on you settings), we have nearly designed a duplicate set of buttons in both wood and aluminum, including all the button sets. I have been oscelating back and forth on the button issue; wood on wood only and metal on metal only, or a mix. I am going to stay with the top menu, as it was about 100 hours of work to get it where it is, so for that area, it wood on metal. The rest is up for debate. I will do a shot or two with different combinations.

[DaveB]

Please take a look at the clip below. I changed the font colors to appear more engraved into the buttons. I am getting family complaints that they can not any longer read the buttons on my touchcsreens. I may need to go a different direction. THanks!!

http://i262.photobucket.com/albums/ii86/dbruner10/CQC%20Wood/FONTS.png

[LesAuber]

I have to agree with them. It is harder to read. Maybe if you went with a solid black font it would increase the contrast a bit.

[DaveB]

Any better??

http://i262.photobucket.com/albums/ii86/dbruner10/CQC%20Wood/Small_Fonts.png

[Dean Roddey]

You may be able to get a nice effect with the gaussian type blur thing, at the cost of a good bit more overhead because of so many buttons. You could make them more readable as is, but it would require using something closer to white for the drop shadow, to get more contrast. But that might not look great in terms of an etched effect. Another possibility is to flip it around and use white for the text and a black drop shadow perhaps. It's worth a try.

[DaveB]

Thanks! I will try it. I am going to make up a button template and change each button accordingly and I will post it for comments.

What is amaizing, is all the work on the design and graphics along with all the technical side stuff to get it all to work...and I am spending more time on the stupid font colors than anything else. :shock: The toolbar widget does not allow font effects so I can not use the blur.

[DaveB]

Better?? What stinks is that my touchscreens have a different color depth then my laptop, so what looks good in the screen clips, looks different on the touch screens. The combination below is so far the winner on the screens.

http://i262.photobucket.com/albums/ii86/dbruner10/CQC%20Wood/Fonts3.png

[DaveB]

Just so everyone understands what work has gone into this interface build, we have designed button groups as previously mentioned. This is an example of the Round Button Groups. Button Groups feature a click and stick methodology. You press it, and it stays that way until you press another button in the group, or issue a command to release the first. You wil see in the sample that I pressed several buttons when taking the shot.

http://i262.photobucket.com/albums/ii86/dbruner10/CQC%20Wood/RoundGroups.png

[kblagron]

I like the new font colors -- I would probably go a shade or two darker to get the contrast between the wood/fonts, but its all in a person's preference as to how dark it should be.

For me, my entire house is in an alder wood finish, if you ever update this interface to alder wood (which is a very dark color), I would be all over your new wood setup.

[gacevich]

dave, great work on the interfaces. i too like the higher contrast on button fonts. maybe, like u say, screenshots are different than touchscreens.

[DaveB]

I like the new font colors -- I would probably go a shade or two darker to get the contrast between the wood/fonts, but its all in a person's preference as to how dark it should be.

For me, my entire house is in an alder wood finish, if you ever update this interface to alder wood (which is a very dark color), I would be all over your new wood setup.

Yea - I tried darker, but on my touchscreens, the color shown is about 2 shades darker already. If I makeit darker, it turns black.

Adding a darker color wood is an easy thing to do with the background, but very hard with the wood buttons. You could make the backgrond darker, then use the metal style buttons. I was even thinking that a change on the fly methodology may be on the list for this interface once it is completed.

Take a look what Ron is doing with his Nokia interface and wood. More great work!!

[Trioxide]

Dave,
Love the look of the wood interface. When do you plan on making that available for everyone to borrow?

[ellisr63]

Dave,
Love the look of the wood interface. When do you plan on making that available for everyone to borrow?
Still awaiting payment from Dave for all the graphics:-(

[IVB]

Sounds like someone didn't sign a Net 10 days contract :-)

[ellisr63]

Next set of Graphics for $$$ will def be done in pay as we go.