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 Design

Need Help With RoundRects

Author Message
cerberus



Joined: 20 Jun 2005
Posts: 118

Posted: Thu Jul 21, 2005 - 5:24 am    Post subject: Need Help With RoundRects Reply with quote

RoundRects...

Well here is a fascinating and famous story.

http://www.folklore.org/StoryView.py?story=Round_Rects_Are_Everywhere.txt

Really touches the heart... anyway I am not really good with graphics, of course I can -generate- one just fine.. if it's just a plain old line.. I am talking about solid objects where we want to make the edges real nice.. shading, gradients.. reflectons, lighting...Like on like Apple's Weather Widget.. or any widget except the one I am working on.... Now of course I could go out and buy some software.. take a look at the Birthstone Widget.. no way that was done by hand.. but anyway I need a re-touch artist now, not an algorithm, next time I'll use one.. actually it's not too late I suppose... This widget would have been released already but the corners look ratty and I have a few other compositing issues...

When I am writing code.. I think I can do anything..(of course I can't.. but I always solve my programming issues... ) Not so with graphics. I need help because I don't have a strategy to solve this now... Every experiment I try looks worse than before, the last one I did was smooooooth but then it looked like the edges were bent back some... hhhhhhhhhhhhh. So I give up.. I can't control it one pixel at a time. What to do ?

cerberus
View user's profile Send private message Send e-mail Visit poster's website Widgets
andrethegiant



Joined: 08 May 2005
Posts: 78

Posted: Thu Jul 21, 2005 - 5:34 am    Post subject: Reply with quote

if you have photoshop, you just select the shape tool and click on the rectangle with rounded corners. then you drag it to how big you want.
View user's profile Send private message Send e-mail Widgets
cerberus



Joined: 20 Jun 2005
Posts: 118

Posted: Thu Jul 21, 2005 - 3:16 pm    Post subject: Reply with quote

andrethegiant wrote:
if you have photoshop, you just select the shape tool and click on the rectangle with rounded corners. then you drag it to how big you want.


As I said I can make one that looks as flat as a piece of paper. I use Graphic Converter.. It cost $40. not 5 or 6 hundred dollars... It can only make a radius of 100 pixels for the corners.. Too small for the elements I was given by the artist. Anyway I did not decide to fix this until my widget was nearly complete.. So making a simple RoundRect might be trivial, but changing a nearly competled design (that I did not make properly to begin with) is not the same as drawing the simple object in one color. At least Graphic Converter gives me the Quartz algorithms for reductions which are very clean, but I am new to layered graphics, my understanding of bit depths and resolution and the alpha channel and compositing in general is vague at best.

I was hoping to find an retouch artist who is looking for some minor publicity.. I think my widget under development will be popular with musicians, but I am not able to control lighting, shading, 3D effects...Are these all filters included with PS ? What I am afraid of is that PS is like ProTools, which is practically useless without any plug-ins.. So that 500. for PS could easily "balloon" if that is the case.

cerberus
View user's profile Send private message Send e-mail Visit poster's website Widgets
funkdaddy



Joined: 25 Apr 2005
Posts: 35

Posted: Thu Jul 21, 2005 - 3:29 pm    Post subject: Reply with quote

Here's how I get dynamic rounded corders. Create a single gif that's a circle, 20px square, called "corners.gif", then use my code below as a basis.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

   <head>
      <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
      <title>Untitled Page</title>
      <style type="text/css" media="screen"><!--
body  { padding: 10px }
#main      { color: #fff; font-size: 12pt; font-family: "Lucida Grande", Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; background-color: #bf0630; text-align: center; visibility: visible; margin-right: 10px; padding: 10px; position: absolute; z-index: 0; top: 25px; left: 25px; width: auto; height: auto }
#topright  {  background-position: -10px 0; top: 0; right: 0 }
#botright   {background-position: -10px -10px; right: 0; bottom: 0 }
#topleft   { background-position: 0 0; top: 0; left: 0 }
#botleft  { background-position: 0 10px; bottom: 0; left: 0 }
.corner { background-image: url("corners.gif"); visibility: visible; position: absolute; width: 10px; height: 10px; overflow: hidden }
--></style>
   </head>

   <body bgcolor="#ffffff">
   <div id="main">
         <div id="topright" class="corner"></div>
         <div id="topleft" class="corner"></div>
         <div id="botright" class="corner"></div>
         <div id="botleft" class="corner"></div>
         Word Up Suckaz! Word Up Suckaz! Word Up Suckaz! Word Up Suckaz! Word Up Suckaz! Word Up Suckaz! Word Up Suckaz!
      </div>
   </body>

</html>
View user's profile Send private message Send e-mail Widgets
gnome
Administrator


Joined: 26 Sep 2004
Posts: 145

Posted: Thu Jul 21, 2005 - 4:27 pm    Post subject: Reply with quote

You're presenting your problem entirely backwards, mate. Your problem is you don't know how to shade a widget, not that you need help generating the rounded rect. I suggest you look up tutorials on making aqua-esque buttons, but if that doesn't help try just being creative with gradients until you achieve the look you want.
View user's profile Send private message Widgets
cerberus



Joined: 20 Jun 2005
Posts: 118

Posted: Thu Jul 21, 2005 - 4:30 pm    Post subject: Reply with quote

Thanks funkdaddy...

I will try it when I get home from work... This looks like some really useful code. And wow, it will make me consider what can be done with only HTML and styles.. no script.
Code:
media="screen"><!--
...That is an interesting snippet of code here. Does this change the "context" from "window" (which can move) to "screen", which is anchored ?

cerberus
View user's profile Send private message Send e-mail Visit poster's website Widgets
gnome
Administrator


Joined: 26 Sep 2004
Posts: 145

Posted: Thu Jul 21, 2005 - 4:34 pm    Post subject: Reply with quote

An image doesn't take user input. It can handle events i.e. onClick, but that's different than handling keyboard and mouse events that, say, <input> can handle. Therefore, <input> requires a <form> parent. So does <button>. No other elements require/should use a <form> parents. <div> defaults to block display, meaning that line breaks will be added before and after if neccessary:

Line 1<div>Line 2</div>Line 3

<span> can be used inside lines:

This is <span>a single</span> line of text.

As for your other question, media="screen" indicates that the style sheet is for the user to view on a monitor only (when printed, the style sheet will not be active.) <!-- indicates the beginning of an HTML comment. The old practice of putting HTML comments around CSS code is for backwards compatibility with older browsers which don't understand <style> and will just ignore the tag entirely, so disasterously the entire contents of the <style> tag would be printed instead of rendered as CSS.
View user's profile Send private message Widgets
cerberus



Joined: 20 Jun 2005
Posts: 118

Posted: Thu Jul 21, 2005 - 4:37 pm    Post subject: Reply with quote

Oh thanks gnome.. I edited those questions out when I realized they were appropriate for another thread.. Thanks for the fast response !

I didn't know CSS was also commented out, I knew it was done with JS.
but not at first.. I wasted a few hours putting comments on embedded JS while I was debugging and now I see why also I [thought] I needed to put CSS in my Oblique Strategies Widget's HTML for table divisions.. I commented out some lines and no wonder it worked different in a separate style sheet.. Wow, mystery solved !


cerberus
View user's profile Send private message Send e-mail Visit poster's website Widgets
gnome
Administrator


Joined: 26 Sep 2004
Posts: 145

Posted: Thu Jul 21, 2005 - 4:43 pm    Post subject: Reply with quote

Don't give up based on the tools that you have. Take a look at this, done in MS Paint!

http://www.deviantart.com/view/17908194/

Play with gradients, they are exactly what you're looking for shading-wise and how Weather simulates lighting/depth.
View user's profile Send private message Widgets
cerberus



Joined: 20 Jun 2005
Posts: 118

Posted: Thu Jul 21, 2005 - 4:51 pm    Post subject: Reply with quote

gnome wrote:
Don't give up based on the tools that you have. Take a look at this, done in MS Paint!

http://www.deviantart.com/view/17908194/

Play with gradients, they are exactly what you're looking for shading-wise and how Weather simulates lighting/depth.


500 hours work ! I guess it's OK my new widget is 10 days late... To quote musician Robert Fripp: "Discipline is never an end in itself, only a means to an end."

cerberus
View user's profile Send private message Send e-mail Visit poster's website 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