?
Solved

How did they do the clock time drag

Posted on 2013-12-03
6
Medium Priority
?
795 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
[X]
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
  • 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
Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

 

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 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

762 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