How would I go about editing the polar clock counter clockwise?


Tags: javascript,html,css

Problem :

From here: http://raphaeljs.com/polar-clock.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Raphaël · Polar Clock</title>
        <link rel="stylesheet" href="demo.css" media="screen">
        <link rel="stylesheet" href="demo-print.css" media="print">
        <script src="raphael.js"></script>
        <script>
            window.onload = function () {
                var r = Raphael("holder", 600, 600),
                    R = 200,
                    init = true,
                    param = {stroke: "#fff", "stroke-width": 30},
                    hash = document.location.hash,
                    marksAttr = {fill: hash || "#444", stroke: "none"},
                    html = [
                        document.getElementById("h"),
                        document.getElementById("m"),
                        document.getElementById("s"),
                        document.getElementById("d"),
                        document.getElementById("mnth"),
                        document.getElementById("ampm")
                    ];
                // Custom Attribute
                r.customAttributes.arc = function (value, total, R) {
                    var alpha = 360 / total * value,
                        a = (90 - alpha) * Math.PI / 180,
                        x = 300 + R * Math.cos(a),
                        y = 300 - R * Math.sin(a),
                        color = "hsb(".concat(Math.round(R) / 200, ",", value / total, ", .75)"),
                        path;
                    if (total == value) {
                        path = [["M", 300, 300 - R], ["A", R, R, 0, 1, 1, 299.99, 300 - R]];
                    } else {
                        path = [["M", 300, 300 - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
                    }
                    return {path: path, stroke: color};
                };

                drawMarks(R, 60);
                var sec = r.path().attr(param).attr({arc: [0, 60, R]});
                R -= 40;
                drawMarks(R, 60);
                var min = r.path().attr(param).attr({arc: [0, 60, R]});
                R -= 40;
                drawMarks(R, 12);
                var hor = r.path().attr(param).attr({arc: [0, 12, R]});
                R -= 40;
                drawMarks(R, 31);
                var day = r.path().attr(param).attr({arc: [0, 31, R]});
                R -= 40;
                drawMarks(R, 12);
                var mon = r.path().attr(param).attr({arc: [0, 12, R]});
                var pm = r.circle(300, 300, 16).attr({stroke: "none", fill: Raphael.hsb2rgb(15 / 200, 1, .75).hex});
                html[5].style.color = Raphael.hsb2rgb(15 / 200, 1, .75).hex;

                function updateVal(value, total, R, hand, id) {
                    if (total == 31) { // month
                        var d = new Date;
                        d.setDate(1);
                        d.setMonth(d.getMonth() + 1);
                        d.setDate(-1);
                        total = d.getDate();
                    }
                    var color = "hsb(".concat(Math.round(R) / 200, ",", value / total, ", .75)");
                    if (init) {
                        hand.animate({arc: [value, total, R]}, 900, ">");
                    } else {
                        if (!value || value == total) {
                            value = total;
                            hand.animate({arc: [value, total, R]}, 750, "bounce", function () {
                                hand.attr({arc: [0, total, R]});
                            });
                        } else {
                            hand.animate({arc: [value, total, R]}, 750, "elastic");
                        }
                    }
                    html[id].innerHTML = (value < 10 ? "0" : "") + value;
                    html[id].style.color = Raphael.getRGB(color).hex;
                }

                function drawMarks(R, total) {
                    if (total == 31) { // month
                        var d = new Date;
                        d.setDate(1);
                        d.setMonth(d.getMonth() + 1);
                        d.setDate(-1);
                        total = d.getDate();
                    }
                    var color = "hsb(".concat(Math.round(R) / 200, ", 1, .75)"),
                        out = r.set();
                    for (var value = 0; value < total; value++) {
                        var alpha = 360 / total * value,
                            a = (90 - alpha) * Math.PI / 180,
                            x = 300 + R * Math.cos(a),
                            y = 300 - R * Math.sin(a);
                        out.push(r.circle(x, y, 2).attr(marksAttr));
                    }
                    return out;
                }

                (function () {
                    var d = new Date,
                        am = (d.getHours() < 12),
                        h = d.getHours() % 12 || 12;
                    updateVal(d.getSeconds(), 60, 200, sec, 2);
                    updateVal(d.getMinutes(), 60, 160, min, 1);
                    updateVal(h, 12, 120, hor, 0);
                    updateVal(d.getDate(), 31, 80, day, 3);
                    updateVal(d.getMonth() + 1, 12, 40, mon, 4);
                    pm[(am ? "hide" : "show")]();
                    html[5].innerHTML = am ? "AM" : "PM";
                    setTimeout(arguments.callee, 1000);
                    init = false;
                })();
            };
        </script>
        <style media="screen">
            #holder {
                height: 600px;
                margin: -300px 0 0 -300px;
                width: 600px;
            }
            #time {
                text-align: center;
                font: 100 3em "Helvetica Neue", Helvetica, Arial, sans-serif;
            }
        </style>
    </head>
    <body>
        <div id="holder"></div>
        <div id="time">
            <span id="h"></span>:<span id="m"></span>:<span id="s"></span> <span id="ampm"></span> · <span id="d"></span>/<span id="mnth"></span>
        </div>
        <p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
    </body>
</html>

How would I go about getting only the minutes and turn it counter clockwise?

Here is a little image of what I'm taking about: http://i.imgur.com/Pvmkvs7.png

Would there also be a way to edit he color easily or edit the size with CSS?



Solution :

To begin with, download everything so that you can edit it. You'll need the html source, the stylesheets, and the script file (raphael.js). Then we can get to work.

Let's take each issue one by one.

To flip the clock, we could either edit the polar math in the onload function (which makes us have to think), or, we could use the css3 transform property (and it's browser specific aliases) with a scaleX. I find the latter to be much more approachable and intuitive.

#holder svg  //apply to any elements of type svg within the element with the id 'holder'
{
    transform:scaleX(-1);
    -webkit-transform:scaleX(-1);//for chrome and safari
    -ms-transform:scaleX(-1);//IE 9
    -ms-filter: "FlipH";//IE 8 (not sure if it also applies to 7)
}

Next, you want to display only the minutes. For this, we need to delete the code that draws the other arcs. There are two places that reference these arcs; once each in the onload (i.e. "var sec = r.path().blahblahblah") and once during the update (the calls to updateval()). Comment out all of these lines except for the ones referring to min, since that's the minutes arc that you want to keep. Then test and see if it works.

If you want to get rid of the little dots around the circle, you can also comment out every call to drawmarks. Your choice; while you're testing, it might make sense to not generate those little dots. They make scrolling through the svg source a PITA.

Hope that helps!


    CSS Howto..

    How to style a link which wrote with echo? [closed]

    how to put text on the middle of an image

    How to use css3 transition on hover for td?

    How to make a table-cell have the same width as its height?

    How to add circle shape to CSS button

    How to change style to a class from a rel attribute CSS

    How to change the Home icon in Primefaces Breadcrumb?

    How to give outer glow effect to column in HTML/CSS?

    How to auto adjust parent DIV height according to the contents in child DIV?

    how to set size of canvas to its background image?

    How to make a tetrahedron?

    Modernizr: IE10 & Flexbox: How to get IE10 flexbox detected

    How to check conditional in CSS?

    CSS/HTML - How do I get text to go behind an image inside a div

    How to use psd elements in an upload form? [closed]

    How do you modify wordpress css for posts?

    How to override parent containers width property in CSS [duplicate]

    How to transition overlay menu on clicking button

    How add “cover”/“shadow” on div?

    jquery how to make an element comeback to initial position after animation

    How to add a space between paragraphs when using css reset? [closed]

    CSS - How to display dropdown text in one row?

    How to position an element just off the top of the browser viewport using only css?

    How to put a footer in the bottom (but not fixed or stick!) with css [duplicate]

    How to prevent a closing tag from being removed?

    how to use input[type=range] CSS Pseudo-elements with firefox and IE

    What's causing my hover image not to show it's transparency? [closed]

    how to make div background image responsive

    jQuery UI how to avoid submit button getting css classes?

    jquery width toggle animation is showing vertical cells during animation takes place