Author |
Message |
exg5
Joined: 01 May 2005 Posts: 47
|
Posted: Sat Sep 17, 2005 - 3:09 am Post subject: Tag Heuer World Clock Watch |
|
|
I was told to move my post to this forum...
I need some help with the scripting of my widget.
If you have seen my widget, you will know that in the 3 o'clock position, ther is a date field. I would like this field to update itself without having to 'reset' the widget.
Also, I would like to animate the dial surrounding the face of the watch as an extra bonus that would look pretty cool.
Finally, I want the little knob on the side to remain visible all the time, and when the cursor hovers over the widget, the pin pulls out…
If anybody thinks that they can help me with any of these topics, I would be very grateful.
Thanks,
e
PM me for a link to the widget script, as well as for further information. |
|
|
|
|
cerberus
Joined: 20 Jun 2005 Posts: 118
|
Posted: Sat Sep 17, 2005 - 5:46 pm Post subject: |
|
|
I will look into it in the next day and message you with recommended changes.
In the meantime; you need to prepare the bezel as a separate image if you want it to move separately.
You need make a "pin" with a longer stem that will be used when it is pulled out... It would be cool to animate this by showing one or two intermediate position images briefly. However it might be more elegant to use one image and to hide part of the stem when it is not is pulled out... This could be animated also.
For the date field numbers, I think a text font might be the best way to go... The date window looks tiny... Is it that small (proportionally) on the real watch ?
cerberus |
|
|
|
|
cerberus
Joined: 20 Jun 2005 Posts: 118
|
Posted: Sat Sep 17, 2005 - 6:23 pm Post subject: |
|
|
I see that there is a gradient on the clock face and bezel... In order for it to look proper when the bezel is turned, the gradient needs to be stationary; so the gradient also needs to be in a separate image. I suggest that perhaps the bezel gradient can be combined with the clock face/watch body (so there would be a ring in this image that is mostly transparent).
cerberus |
|
|
|
|
exg5
Joined: 01 May 2005 Posts: 47
|
Posted: Sun Sep 18, 2005 - 1:46 pm Post subject: |
|
|
ok…, I'm a little bit confused.. |
|
|
|
|
cerberus
Joined: 20 Jun 2005 Posts: 118
|
Posted: Sun Sep 18, 2005 - 3:23 pm Post subject: |
|
|
The gradient is where the image gets lighter towards the top to simulate light reflecting off a curved surface. Without it, your widget would look flat, and not as realistic. The gradient and the drop shadow together infer an external light source,(e.g. the sun). So the components of the image which create this effect must remain in place when the bezel is rotated or the entire 3d illusion will be totally spoiled.
I assume that you have a good grasp of graphic arts and the tools of that trade since your widget looks so realistic. If you want parts of the image to move, these must be graphically separate from the stationary elements, including the simulated light source effects.
cerberus |
|
|
|
|
exg5
Joined: 01 May 2005 Posts: 47
|
Posted: Sun Sep 18, 2005 - 5:10 pm Post subject: |
|
|
Thanks for the compliment..
Now I understand what you mean. I actually designed the watch in photoshop, and I have the bezel designed in 4 different layers. The text is one layer with the little notches. Then the 'gradient' is actually a whole bunch of the main image repeated with different opacities and effects to produce the illusion. I can send you the .psd file and since you know more-or-less which layers you'll need to turn the bezel, you can decide?
Thanks again,
e |
|
|
|
|
cerberus
Joined: 20 Jun 2005 Posts: 118
|
Posted: Sun Sep 18, 2005 - 8:10 pm Post subject: |
|
|
I need to borrow another Mac to use PhotoShop and I really don't know what I am doing. You need to cut these parts out of the bezel out as a donut shape :
1. Numbers and Tick Marks
2. Background color of bezel (this does not need to rotate, but it may help that it is there to receive mouse clicks ... or not ! See below for more on that issue..)
and make a separate image out of them...
This new image should have the general shape of a donut.. The "donut hole" and the area outside the "donut" need to be transparent.
This will leave the gradient parts remaining in the main image.
Did you see the simpleWorldClock that is in the Showcase today ? It is a good example we can follow.. However when you click on the inner ring of this clock, the bezel jumps around unnaturally. I am sure it is solvable, but such bugs prove that this function is harder to code than it looks. It will take some work from both of us to make it look good.
Another issue that might come up is needing to click -through- the gradient layer... I anticipate this problem may occur. There are a few solutions for it. If you are willing to put in the effort, I will help make sure the code runs smoothly.
Anyway, I can work on the winder stem and date problems without any new images. The date is already displaying properly; so getting it to update under all circumstances is a relatively easy thing to fix. I will work on that first, then the stem winder, and finally the bezel.
cerberus |
|
|
|
|
exg5
Joined: 01 May 2005 Posts: 47
|
Posted: Sun Sep 18, 2005 - 9:29 pm Post subject: |
|
|
Thank you very much. So basically, if I understand
1. My main image excluding the digits around the bezel
2. The digits on the bezel (without a backdrop?)
3. The backdrop from behind the 'gradient' layers
If that is correct, I will do that right now..
I'm assuming you want it in (.png) format like the rest? |
|
|
|
|
cerberus
Joined: 20 Jun 2005 Posts: 118
|
Posted: Sun Sep 18, 2005 - 10:20 pm Post subject: |
|
|
exg5 wrote: | Thank you very much. So basically, if I understand
1. My main image excluding the digits around the bezel
2. The digits on the bezel (without a backdrop?)
|
Let's start with the backdrop included in the bezel and see if it can receive mouse clicks behind the gradient layer.. I think it does not hurt to have this included.
Quote: | 3. The backdrop from behind the 'gradient' layers{/quote}
This one should be everything else except the parts you want to move, including all the gradient layers.
If that is correct, I will do that right now..
{quote]I'm assuming you want it in (.png) format like the rest? |
Yes, .pngs are easiest for me to handle...I am slow at programming, so please be patient with me. Also in this time, I think you should change the clock hands to be more authentic. I tried substituting .pngs for the clock hands in World Clock and it works great and did not seem to affect CPU; so I don't know why Apple uses .pdfs.
cerberus |
|
|
|
|
exg5
Joined: 01 May 2005 Posts: 47
|
Posted: Mon Sep 19, 2005 - 12:35 am Post subject: |
|
|
I actually designed the proper hands, and they looked great…
but when I tried adding them in, a.k.a. replacing the apple ones, I got bad results.
The second hand was no longer centred, and instead wandered in circles around the edge of the watch.
One quick question, completely off the topic, do you know anything abotu Quartz composer, and if so, do you know how to add audio to it? |
|
|
|
|
cerberus
Joined: 20 Jun 2005 Posts: 118
|
Posted: Mon Sep 19, 2005 - 12:51 am Post subject: |
|
|
OK I did the stem winder first because it didn't involve mathematics...
The hands wandering about.. Yes, I have seen that, the angles used by canvas are in radians so the math there is tricky.. but it can be made to work.
About Quartz composer.. Can it do audio ? That would be interesting since I can't seem to find a way to learn Objective C to write my own widget plug-in... I did not play around with Quartz Composer yet because I haven't a clue what it's native programming language is.
The easiest way to make a widget play an audio file, I think might be to embed a QuickTime player in the widget and have it refer to an audio file that is inside the widget.. If you take a look at the MusiCalc widget's metronome.. i -think- it works this way.
That widget that PM99 wrote about in the news...(looks like a CD jacket, I forget the name.,..) that is an mp3 player also might be an avenue to explore.. I did not look to see how it streams mp3s from a website, but it probably also works with QuickTime. (or perhaps Flash or the RealPlayer plug-in).
cerberus |
|
|
|
|
exg5
Joined: 01 May 2005 Posts: 47
|
Posted: Mon Sep 19, 2005 - 1:10 am Post subject: |
|
|
Haha, no I wasn't planning on using it in a widget. I was trying to create a screensaver, but I got it to work... thanks anyways.
as for the pictures, I can give you a link to them if you would like, I compressed them for storage  |
|
|
|
|
cerberus
Joined: 20 Jun 2005 Posts: 118
|
Posted: Mon Sep 19, 2005 - 1:01 pm Post subject: |
|
|
Send 'em.. I think the hands need to be changed. If you resize the images so that the bottom left corners and the center/pivot points line up with Apple's images then it should work without changing the code. Otherwise we can change the co-ordinates to suit whatever dimensions you want to use.
cerberus |
|
|
|
|
exg5
Joined: 01 May 2005 Posts: 47
|
Posted: Tue Sep 20, 2005 - 12:13 am Post subject: |
|
|
Ok.
I'm not entirely sure how to deal with the hands. I can line them up in the graphics provided by apple, and then delete their images, but I already tried that... to no success.
I'll try and send you the files A.S.A.P
The only problem is that i drew the images very large, and then scaled them down to fit the proportions designed by apple. I can't remember what percentage I scaled the images, so it's going to take a while for me to figure that out.
e |
|
|
|
|
exg5
Joined: 01 May 2005 Posts: 47
|
Posted: Thu Oct 06, 2005 - 1:29 am Post subject: |
|
|
Update:
I have found the correct sizing for the graphics, I decided to update them a little bit so that they will look better when rotated. I have been very busy with school work, therefore the lack of response in this post.
Thanks again fro all the help cerberus.
ex |
|
|
|
|