From 78806ef95338552ab43c0b0c1c47ff6092a58eca Mon Sep 17 00:00:00 2001 From: nojhan Date: Thu, 6 Dec 2012 23:27:43 +0100 Subject: [PATCH] add two hands for sunset/sunrise, with automatic computation according to the navigator's lat/lon --- www/img/themes/default.svg | 451 +++++++++++++++++++++++++++---------- www/js/app.js | 52 ++++- 2 files changed, 371 insertions(+), 132 deletions(-) diff --git a/www/img/themes/default.svg b/www/img/themes/default.svg index 2c0f3b9..dfbf956 100644 --- a/www/img/themes/default.svg +++ b/www/img/themes/default.svg @@ -204,15 +204,6 @@ x2="50.5" y2="14.548192" gradientUnits="userSpaceOnUse" /> - - - + + + + + + + + inkscape:snap-grids="false" + inkscape:snap-nodes="true" + inkscape:snap-page="false" + inkscape:snap-object-midpoints="true"> - - - - + + inkscape:transform-center-y="-17.057877"> + + + + + + + + + + + id="hand_minutes"> + d="m -0.80812669,-5.5336351 a 2.0500283,2.0500283 0 1 1 -4.10005661,0 2.0500283,2.0500283 0 1 1 4.10005661,0 z" + transform="matrix(0.52556325,0,0,0.52556325,1.5021412,2.9096323)" /> + style="display:inline"> + d="M -5.2549304,0 19.491632,0" + id="path4014" + inkscape:transform-center-y="-6.9641494" /> + inkscape:transform-center-y="-7.3791464" + inkscape:transform-center-x="-7.3862143" + style="stroke:#f1f8ff;stroke-opacity:1;stroke-width:0.20000000000000001;stroke-miterlimit:4;stroke-dasharray:none;opacity:1" + id="hand_sunset"> - - - + style="fill:none;stroke:#f1f8ff;stroke-width:0.20000000000000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" + d="m 22.426998,0.542467 c 0,0.345715 0.131886,0.69143 0.395658,0.955202 0.527543,0.527542 1.382859,0.527542 1.910402,0 0.263772,-0.263772 0.395658,-0.609487 0.395657,-0.955203 -0.900572,0.747797 -1.801145,0.607661 -2.701717,1e-6 z" + id="path4197" /> + sodipodi:nodetypes="cccsccc" + id="path4199" + d="m 24.866259,-0.63655501 c 1e-6,-0.279205 -0.106512,-0.55840999 -0.319538,-0.77143599 l 0,0 c -0.426052,-0.426052 -1.11682,-0.426052 -1.542873,0 -0.213026,0.213027 -0.319538,0.49223099 -0.319539,0.77143599 l 1.090975,0 z" + style="fill:#dceeff;stroke:#f1f8ff;stroke-width:0.20000000000000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;fill-opacity:0.70588236999999998" + inkscape:connector-curvature="0" /> + inkscape:transform-center-y="1.718062" + inkscape:connector-curvature="0" + id="path4201" + d="m 23.775284,-2.073004 0,-0.605104" + style="fill:none;stroke:#f1f8ff;stroke-width:0.20000000000000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" /> + + + + + + + + + + inkscape:connector-curvature="0" + id="path3316" + d="m 26.889819,7.0583283e-7 -5.963962,0 m -19.2309645,0 -1.68931702,0" + style="fill:#3c5268;fill-opacity:1;stroke:#f1f8ff;stroke-width:0.20000000000000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" + sodipodi:nodetypes="cccc" + inkscape:transform-center-x="-10.447124" /> + + + + + + + + + + style="display:none"> = 0 && angle <= 360 ); + console.assert( -90 <= angle && angle <= 270 ); // [0,369]-(a0==90) console.assert( width > 0 ); console.assert( scale > 0 ); - // FIXME use the rotation center - var offset = width * scale / 2; - - console.debug( "Update", id, "to", angle, "°+", offset, "*", scale ); - var layer = getLayer( id ); + // use the rotation center + var tcy = parseFloat( layer.getAttribute("inkscape:transform-center-y") ); + if( tcy == null ) { tcy = 0; } + //console.debug( "Transform center y:", tcy ); + + var offset = width * scale / 2; + var offset_cy = offset+tcy*scale; + + console.debug( "Update", id, "@", angle, "° +", offset, " *", scale ); + // NOTE: the order of the transformations is important! + /* layer.setAttribute('transform', 'translate('+ offset +','+ offset +') ' - + 'rotate('+ angle +')' + 'scale('+ scale +') ' + + 'rotate('+ angle +')' ); + */ + layer.setAttribute('transform', + "" + + 'translate('+ offset +','+ offset +') ' + + 'scale('+ scale +') ' + + 'rotate('+ angle +') ' + ); + } // Apply a scale transformation on all given layers (defaults to the known ones). @@ -107,7 +122,22 @@ define(function(require) { $(document).ready( function() { var _width = 100; - var _scale = 4; + var _scale = 3; + + // compute sunset and sunrise times when the geoloc is available + var _has_sun = false; + var _sunrise = 0; + var _sunset = 0; + navigator.geolocation.getCurrentPosition(function(position) { + var lat = position.coords.latitude; + var lon = position.coords.longitude; + var times = SunCalc.getTimes(new Date(), lat, lon ); + _sunrise = times.sunrise.getHours() + times.sunrise.getMinutes()/60; + _sunset = times.sunset.getHours() + times.sunrise.getMinutes()/60; + _has_sun = true; + console.info( "At location:", lat, lon); + console.info( "Sun times:", _sunrise, _sunset ); + }); function tick() { @@ -131,6 +161,11 @@ define(function(require) { updateHand("hand_minutes", minutes * 6 - a0, _width, _scale ); updateHand("hand_hours", hours * 360/tn - a0, _width, _scale ); + if( _has_sun ) { + updateHand("hand_sunset", _sunset * 360/tn - a0, _width, _scale ); + updateHand("hand_sunrise", _sunrise * 360/tn - a0, _width, _scale ); + } + scaleAll( _scale ); // we need to scale every second (not sure to know why) } @@ -139,6 +174,7 @@ define(function(require) { setInterval( tick, 1000 ); // every second //setInterval( tick, 60000 ); // every minute + }); // document ready })(jQuery); });