Recent Widgets


Register for DashboardWidgets

Recent Forums Posts

Partners


iCompositions

MacDesktops.net

RSS Showcase
RSS Comments
RSS Forums

This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies. Posted in: Widget Development

Coder wanted

Author Message
twisted



Joined: 10 Jun 2005
Posts: 91

Posted: Mon Aug 01, 2005 - 6:56 pm    Post subject: Coder wanted Reply with quote

I know this idea has been thoght of before but I want to add a new twist. There are many count down widgets, but I would like to create one that has an area where the user could drop there own image, to personalize there countdown. if your interested please let me know.

to give you an example, here's a mock-up of the front.
and of the back
the area that someone could drop there image into is where the mlb logo is.

i'm looking for someone to do the scripting for the widget.
View user's profile Send private message Send e-mail Widgets
Da_Vinci



Joined: 26 Apr 2005
Posts: 100

Posted: Tue Aug 02, 2005 - 6:34 am    Post subject: Re: Designer wanted Reply with quote

twisted wrote:
i'm looking for someone to do the scripting for the widget.

So you are not searching for a designer but for a coder - right?
Your topic subject says something different!
View user's profile Send private message Send e-mail Widgets
twisted



Joined: 10 Jun 2005
Posts: 91

Posted: Tue Aug 02, 2005 - 8:30 am    Post subject: Reply with quote

yeah your correct, I just changed the title of the thread so there shouldn't be any mix-ups
View user's profile Send private message Send e-mail Widgets
jonlink



Joined: 27 May 2005
Posts: 172

Posted: Tue Aug 02, 2005 - 9:53 am    Post subject: Reply with quote

that's a really good idea, someone should take this one up.
View user's profile Send private message Send e-mail Widgets
qrcrazy56



Joined: 17 Jul 2005
Posts: 22

Posted: Tue Aug 02, 2005 - 11:32 am    Post subject: Picture Countdown Reply with quote

i think that the flickr widget can be used for this project. i can help. PM me.

flickr widget
_________________
--QR
Krispy Kreme
View user's profile Send private message Send e-mail AIM Address Yahoo Messenger Widgets
pm
Administrator


Joined: 24 Aug 2004
Posts: 398

Posted: Tue Aug 02, 2005 - 6:15 pm    Post subject: Reply with quote

Please don't create multiple threads on the same topic.

Great idea for a widget though Very Happy
View user's profile Send private message Send e-mail Widgets
twisted



Joined: 10 Jun 2005
Posts: 91

Posted: Tue Aug 02, 2005 - 6:52 pm    Post subject: Reply with quote

Does anyone know if you can mask an image using java, css or html. What I mean is that, since the drop area is circular, the image that the user drops in needs to be masked so that it becomes circular.
View user's profile Send private message Send e-mail Widgets
gck



Joined: 13 Jul 2005
Posts: 18
Location: Vienna/Austria

Posted: Wed Aug 03, 2005 - 2:36 am    Post subject: Reply with quote

you can easily mask it using the css "clip" property, so actually displaying the image in the circle is very easy. you can also make it "draggable" so that the user can select the area that is actually visible if the image is much larger than the circle... all you have to do is write javascript to catch onmousedown and then move the div containing the image around, following the mouse cursor (basically what a custom scrollbar does, only following the y direction as well...)
View user's profile Send private message Send e-mail Widgets
Chris



Joined: 27 Jan 2005
Posts: 344
Location: Durham, UK

Posted: Wed Aug 03, 2005 - 9:58 am    Post subject: Reply with quote

gck wrote:
you can easily mask it using the css "clip" property, so actually displaying the image in the circle is very easy.


You sure abut that? As far as I know, the only supported shape for clip is rect.

As to the question of clipping it in a circle, I was originally going to suggest just faking it by having the image the user dropped onto the widget under the circular border. So you'd have a square div with hidden overflow so the image could be moved round etc. However, you'd need to make the border thicker, otherwise you'd see the corners of the image underneath the overlay.

So, here's one way of clipping it into a circle, using the <canvas>:

Code:

HTML:

<canvas style="position: absolute; top: 0; left: 0" id="circle" height="100" width="100" />

JS:
var circle_canv = document.getElementById("circle");
var circle_context = circle_canv.getContext("2d");

var my_img = document.createElement("img");
my_img.setAttribute("src", "some_image.jpg"); //this would come from the dataTransfer

setTimeout(
   function() {
      circle_context.beginPath();
      circle_context.arc(50, 50, 50, 0, (2*Math.PI), 0); //change dimensions to suit
      circle_context.closePath();
      
      circle_context.fill();
      
      circle_context.globalCompositeOperation = "source-atop";
      
      circle_context.drawImage (my_img, 0, 0, 100, 100);   //change dimensions to suit
   }, 0);


Note, the drawing stuff is in a setTimeout with 0 timeout so that it executes when it's finished processing the image. I suppose you could also attach this stuff to the images onload event, but whatever.

So anyway, you'd probably want to put that canvas under an element which handles the ondrop event etc, and also has the glossy look. And you could still move it around etc.

Would be a nice wee project Smile
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
gck



Joined: 13 Jul 2005
Posts: 18
Location: Vienna/Austria

Posted: Wed Aug 03, 2005 - 10:44 am    Post subject: Reply with quote

Hmm, didn't I read somewhere that Safari could clip into a circle with css:clip? Maybe I got it confused with the dashboard-control-region property, sorry.
View user's profile Send private message Send e-mail Widgets
Chris



Joined: 27 Jan 2005
Posts: 344
Location: Durham, UK

Posted: Wed Aug 03, 2005 - 11:43 am    Post subject: Reply with quote

gck wrote:
Hmm, didn't I read somewhere that Safari could clip into a circle with css:clip? Maybe I got it confused with the dashboard-control-region property, sorry.


You could be right, for all I know; I haven't done anything with clip: in months and months. In fact, I'll go and have a look now Smile
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
twisted



Joined: 10 Jun 2005
Posts: 91

Posted: Wed Aug 03, 2005 - 5:43 pm    Post subject: Reply with quote

Alright I got the drop zone to work, but i'm not much in the way of javascript and have no idea how to script the counting part. Anyone want to pitch in?
View user's profile Send private message Send e-mail Widgets
jtbandes



Joined: 17 Jun 2005
Posts: 269
Location: Oregon

Posted: Wed Aug 03, 2005 - 5:52 pm    Post subject: Reply with quote

You could just adapt code from another counting widget to fit your needs for this widget.
View user's profile Send private message Send e-mail Widgets
twisted



Joined: 10 Jun 2005
Posts: 91

Posted: Wed Aug 03, 2005 - 7:02 pm    Post subject: Reply with quote

I started trying to do that, but I was completly lost.
View user's profile Send private message Send e-mail Widgets
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.

 
Powered by phpBB © 2001, 2002 phpBB Group