UI:Offline mobiiliapp

Leht kuulub aine Kasutajaliidesed juurde.

Ülesanne

NB! Enamus ülesandest saab teha Chromega desktopis. Mobiili on vaja vaid Take picture koha jaoks.

Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemise ülesselaadimise nupule, siis canvase pilt asendatakse selle fotoga (link) ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada 'pointer-evente'.

All peaks saama lisada kuupäeva, mis töötab ilma javascriptita. Selle peale võib failinimele (mida pärast saab downloadida) lisada kuupäeva javascriptiga.

Lehe lõpus paikneb Download nupp, mille href attribuut on base64 kodeeringus pilt, mis on üleval joonistatud. Download attribuudiga võiks anda fail normaalse nime, mis sisaldab sõna "image_" + geokoordinaate + kuupäeva. Näiteks <a id=“downloadLink” download=“image_56.64645_23.545454_01.02.2003.png” href=“data:image/….”>

Joonistusosa koodinäide

Näitekoodi on vaja kindlasti kohandada. Tore oleks ka mitme sõrme tugi, kuid pole kohustuslik (sellele aitab kaasa pointer-eventide attribuut 'pointerId'.)

   // shim layer with setTimeout fallback
   window.requestAnimFrame = (function () {
       return window.requestAnimationFrame ||
           window.webkitRequestAnimationFrame ||
           function (callback) {
               window.setTimeout(callback, 1000 / 60);
       };
   })();
   window.addEventListener('load', init);
   var canvas = null;
   var ctx = null;
   // currently active stroke
   var stroke = null;
   function init() {
       canvas = document.querySelector('canvas');
       ctx = canvas.getContext("2d");
       // Set the default line style.
       ctx.lineWidth = 3;
       ctx.lineCap = "round";
       ctx.fillStyle = "cyan";
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       ctx.strokeStyle = "black";
       canvas.addEventListener('mousedown', onMouseDown);
       canvas.addEventListener('mousemove', onMouseMove);
       canvas.addEventListener('mouseup', onMouseUp);
       canvas.addEventListener('mouseleave', onMouseUp);
       requestAnimFrame(drawPointers);
   }
   function onMouseDown(event) {
       stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
   }
   function onMouseMove(event) {
       // Are we currently drawing this pointer?
       if (stroke) {
           stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
       }
   }
   function onMouseUp(event) {
       stroke = null;
   }
   function drawPointers() {
       // If we have an active stroke, draw any undrawn segments.
       if (stroke) {
           stroke.draw();
       }
       requestAnimFrame(drawPointers);
   }
   function Point(x, y) {
       this.x = x;
       this.y = y;
   }
   function Stroke(x, y) {
       this.points = [new Point(x, y)];
   }
   Stroke.prototype.addPoint = function (x, y) {
       this.points.push(new Point(x, y));
   }
   Stroke.prototype.draw = function () {
       if (this.points.length < 2) {
           return;
       }
       ctx.beginPath();
       ctx.moveTo(this.points[0].x, this.points[0].y);
       for (var i = 1; i < this.points.length; i++) {
           ctx.lineTo(this.points[i].x, this.points[i].y);
       }
       ctx.stroke();
       ctx.closePath();
       this.points = this.points.slice(-1);
   }