Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How did they do the clock time drag

Posted on 2013-12-03
6
754 Views
Last Modified: 2013-12-03
If you fire up this site here

http://24hoursofhappy.com/

How did they do the clock drag
0
Comment
Question by:stargateatlantis
  • 3
  • 2
6 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39692507
This is done with HTML5 Canvas.
With it you can basically draw whatever you want on top of a <canvas> surface.

Try it on IE and you'll see a very lame message :)
0
 

Author Comment

by:stargateatlantis
ID: 39692509
one thing where would u put together something like that the circle drag
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39692515
What do you mean?
How would I do it or where would I use it?
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

Author Comment

by:stargateatlantis
ID: 39692529
any sample code on how to do that
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39692610
Well that's pretty advanced drawing there mate.

Personally I don't know any player or plugin that does that and doing it from scratch it's not easy.

I tried to inspect the code but it's all minified.

If you like that kind of stuff and want to put you math skills to work I advise you to read about HTML canvas. Start by drawing simple shapes then try to move them around with the mouse.
After that play with movement constraints and by then you'll be close enough.
The consept if the same as a linear video time-line but circular.

Here's a good HTML Video player: http://www.videojs.com/
You can write your own time line with the Canvas... start simple and climb the way up.

Have fun!! :)
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39692772
Circle controls have been popular especially in android development.  That only means it could be waning...   But there are jquery controls to help you get up and running  http://anthonyterrien.com/knob/

The code is on github https://github.com/aterrien/jQuery-Knob
<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Knob demo</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
        <script src="js/jquery.knob.js"></script>
        <script>
            $(function($) {

                $(".knob").knob({
                    change : function (value) {
                        //console.log("change : " + value);
                    },
                    release : function (value) {
                        //console.log(this.$.attr('value'));
                        console.log("release : " + value);
                    },
                    cancel : function () {
                        console.log("cancel : ", this);
                    },
                    draw : function () {

                        // "tron" case
                        if(this.$.data('skin') == 'tron') {

                            var a = this.angle(this.cv)  // Angle
                                , sa = this.startAngle          // Previous start angle
                                , sat = this.startAngle         // Start angle
                                , ea                            // Previous end angle
                                , eat = sat + a                 // End angle
                                , r = 1;

                            this.g.lineWidth = this.lineWidth;

                            this.o.cursor
                                && (sat = eat - 0.3)
                                && (eat = eat + 0.3);

                            if (this.o.displayPrevious) {
                                ea = this.startAngle + this.angle(this.v);
                                this.o.cursor
                                    && (sa = ea - 0.3)
                                    && (ea = ea + 0.3);
                                this.g.beginPath();
                                this.g.strokeStyle = this.pColor;
                                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
                                this.g.stroke();
                            }

                            this.g.beginPath();
                            this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
                            this.g.stroke();

                            this.g.lineWidth = 2;
                            this.g.beginPath();
                            this.g.strokeStyle = this.o.fgColor;
                            this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                            this.g.stroke();

                            return false;
                        }
                    }
                });

                // Example of infinite knob, iPod click wheel
                var v, up=0,down=0,i=0
                    ,$idir = $("div.idir")
                    ,$ival = $("div.ival")
                    ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
                    ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
                $("input.infinite").knob(
                                    {
                                    min : 0
                                    , max : 20
                                    , stopper : false
                                    , change : function () {
                                                    if(v > this.cv){
                                                        if(up){
                                                            decr();
                                                            up=0;
                                                        }else{up=1;down=0;}
                                                    } else {
                                                        if(v < this.cv){
                                                            if(down){
                                                                incr();
                                                                down=0;
                                                            }else{down=1;up=0;}
                                                        }
                                                    }
                                                    v = this.cv;
                                                }
                                    });
            });
        </script>
        <style>
            body{
              padding: 0;
              margin: 0px 50px;
              font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
              font-weight: 300;
              text-rendering: optimizelegibility;
            }
            p{font-size: 30px; line-height: 30px}
            div.demo{text-align: center; width: 280px; float: left}
            div.demo > p{font-size: 20px}
        </style>
    </head>
    <body>
        <div style="width:100%;font-size:40px;letter-spacing:-8px;line-height:40px;">
            <h1>jQuery Knob</h1>
        </div>
        <div>
            <p>Nice, downward compatible, touchable, jQuery dial. <a href="http://flattr.com/thing/674900/jQuery-Knob" target="_blank"><img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></p>
            <p style="font-size: 20px">* implemented interactions : mouse click and wheel mouse, keyboard (on focus) and fingers (touch events)</p>
        </div>
        <div class="demo">
            <p>&#215; Disable display input</p>
            <pre>
data-width="100"
data-displayInput=false
            </pre>
            <input class="knob" data-width="100" data-displayInput=false value="35">
        </div>
        <div class="demo">
            <p>&#215; 'cursor' mode</p>
            <pre>
data-width="150"
data-cursor=true
data-thickness=.3
data-fgColor="#222222"
            </pre>
            <input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness=.3 value="29">
        </div>
        <div class="demo" >
            <p>&#215; Display previous value</p>
            <pre>
data-displayPrevious=true
data-min="-100"
            </pre>
            <input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">
        </div>
        <div style="clear:both"></div>
        <div class="demo">
            <p>&#215; Angle offset</p>
            <pre>
data-angleOffset=90
data-linecap=round
            </pre>
            <input class="knob" data-angleOffset=90 data-linecap=round value="35">
        </div>
        <div class="demo">
            <p>&#215; Angle offset and arc</p>
            <pre>
data-fgColor="#66CC66"
data-angleOffset=-125
data-angleArc=250
            </pre>
            <input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" value="35">
        </div>
        <div class="demo" >
            <p>&#215; 5-digit values, step 1000</p>
            <pre>
data-step="1000"
data-min="-15000"
data-max="15000"
data-displayPrevious=true
            </pre>
            <input class="knob" data-min="-15000" data-displayPrevious=true data-max="15000" data-step="1000" value="-11000">
        </div>
        <div style="clear:both"></div>
        <div style="text-align: center">
            <p style="font-size: 20px">&#215; Overloaded 'draw' method</p>
        </div>
        <div style="background-color: #222; height: 340px">
            <div class="demo" style="background-color:#222; color:#FFF;">
                <pre>
    data-width="75"
    data-fgColor="#ffec03"
    data-skin="tron"
    data-thickness=".2"
    data-displayPrevious=true
                </pre>
                <input class="knob" data-width="75" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-cursor=true value="75" data-thickness=".2">
            </div>
            <div class="demo" style="background-color:#222; color:#FFF;">
                <pre>
    data-width="150"
    data-fgColor="#ffec03"
    data-skin="tron"
    data-thickness=".2"
    data-displayPrevious=true
                </pre>
                <input class="knob" data-width="150" data-displayPrevious=true data-fgColor="#ffec03" data-skin="tron" data-thickness=".2" value="75">
            </div>
            <div class="demo" style="background-color:#222; color:#FFF;">
                <pre>
    data-width="150"
    data-fgColor="#C0ffff"
    data-skin="tron"
    data-thickness=".1"
    data-angleOffset="180"
                </pre>
                <input class="knob" data-width="150" data-angleOffset="180" data-fgColor="#C0ffff" data-skin="tron" data-thickness=".1" value="35">
            </div>
        </div>
        <div style="clear:both"></div>
        <div class="demo" style="width:100%">
            <p>&#215; Responsive</p>
            <pre>
data-width="80%"
            </pre>
            <div style="width: 30%; border: 3px dashed; margin-bottom: 20px">
                <i>
                    Current div width is 30% of window width.<br>
                    Knob width is 80% of current div.<br>
                    Knob width is 80% of 30% of window width.<br>
                    Test resizing window.
                </i>
                <br>
                <br>
                <input class="knob" data-width="80%" value="35">
            </div>
        </div>
        <div style="clear:both"></div>
        <script>
        function clock() {
            var $s = $(".second"),
                $m = $(".minute"),
                $h = $(".hour");
                d = new Date(),
                s = d.getSeconds(),
                m = d.getMinutes(),
                h = d.getHours();
            $s.val(s).trigger("change");
            $m.val(m).trigger("change");
            $h.val(h).trigger("change");
            setTimeout("clock()", 1000);
        }
        clock();
        </script>
        <div class="demo" style="color:#EEE;background:#222;height:420px;width:100%">
            <p>&#215; Superpose (clock)</p>
            <div style="position:relative;width:350px;margin:auto">
                <div style="position:absolute;left:10px;top:10px">
                    <input class="knob hour" data-min="0" data-max="24" data-bgColor="#333" data-fgColor="#ffec03" data-displayInput=false data-width="300" data-height="300" data-thickness=".3">
                </div>
                <div style="position:absolute;left:60px;top:60px">
                    <input class="knob minute" data-min="0" data-max="60" data-bgColor="#333" data-displayInput=false data-width="200" data-height="200" data-thickness=".45">
                </div>
                <div style="position:absolute;left:110px;top:110px">
                    <input class="knob second" data-min="0" data-max="60" data-bgColor="#333" data-fgColor="rgb(127, 255, 0)" data-displayInput=false data-width="100" data-height="100" data-thickness=".3">
                </div>
            </div>
        </div>
        <div style="clear:both"></div>
        <div class="demo">
            <p>&#215; Readonly</p>
            <pre>
readonly (or data-readOnly=true)
data-thickness=".4"
data-fgColor="chartreuse"
            </pre>
            <input class="knob" data-fgColor="chartreuse" data-thickness=".4" readonly value="22">
        </div>
        <div class="demo">
            <p>&#215; Dynamic</p>
            <pre>
data-width="200"
            </pre>
            <input type="button" onclick="$('.knob-dyn').knob();" value="knobify!">
            <input type="text" class="knob-dyn" data-width="200" data-cursor=true value="56">
            <pre>
data-width="50"
data-cursor=true
            </pre>
            <input type="button" onclick="$('.knob-dyn2').knob();" value="knobify!">
            <input type="text" class="knob-dyn2" data-width="50" data-thickness=".4" value="56">
        </div>
        <div class="demo" style="height:440px;width:300px">
            <p>&#215; Infinite || iPod click wheel</p>
            <div style="float:left;width:180px;height:320px;padding:20px;background-color:#EEEEEE;text-align:center;">
                <pre>
data-width="150"
data-cursor=true
data-thickness=".5"
data-fgColor="#AAAAAA"
data-bgColor="#FFFFFF"
data-displayInput="false"
+ some code
                </pre>
                <input class="infinite" data-width="150" data-thickness=".5" data-fgColor="#AAAAAA" data-bgColor="#FFFFFF" data-displayInput="false" data-cursor=true>
            </div>
            <div style="float:left;margin-top:200px;">
                <div class="ival" style="width:80px;text-align:center;font-size:50px;color:#AAA">0</div>
                <div class="idir" style="width:80px;text-align:center;font-size:50px;"></div>
            </div>
        </div>
        <div style="clear:both"></div>
        <div id="big" class="demo" style="height:800px;width:100%">
            <p>&#215; Big !</p>
            <pre>
data-width="700"
            </pre>
            <input class="knob" data-min="-100" data-max="100" data-width="700" data-height="700" data-thickness=".3" data-cursor=true>
        </div>
        <div style="clear:both"></div>
        <div style="padding:30px; margin-top:30px;">
            <p style="font-size:20px;">jQuery Knob is &copy; 2012 Anthony Terrien and dual licensed under the MIT or GPL licenses.</p>
        </div>
    </body>
</html>

Open in new window

The key is to use something like this because it fills a need rather than the other way around.

Cool site though!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question