UI:Offline mobiiliapp - Redigeerimiste ajalugu

Roger: /* Ülesanne */

2014-03-31T17:42:39Z

Ülesanne

←Vanem redaktsioon		Redaktsioon: 31. märts 2014, kell 19:42
9. rida:		9. rida:


	Ü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 ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].		Ü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 ([http://jsfiddle.net/sangdol/RsxtG/49/ link]) ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].

Roger: /* Joonistusosa koodinäide */

2014-03-31T17:10:42Z

Joonistusosa koodinäide

←Vanem redaktsioon		Redaktsioon: 31. märts 2014, kell 19:10
19. rida:		19. rida:
	== Joonistusosa koodinäide ==		== Joonistusosa koodinäide ==

	Näitekoodi on vaja kindlasti kohandada.		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		// shim layer with setTimeout fallback

Roger: /* Joonistusosa koodinäide */

2014-03-31T17:08:58Z

Joonistusosa koodinäide

←Vanem redaktsioon		Redaktsioon: 31. märts 2014, kell 19:08
20. rida:		20. rida:

	Näitekoodi on vaja kindlasti kohandada.		Näitekoodi on vaja kindlasti kohandada.


	// shim layer with setTimeout fallback		// shim layer with setTimeout fallback

Roger: /* Joonistusosa koodinäide */

2014-03-31T17:08:44Z

Joonistusosa koodinäide

←Vanem redaktsioon		Redaktsioon: 31. märts 2014, kell 19:08
18. rida:		18. rida:

	== Joonistusosa koodinäide ==		== Joonistusosa koodinäide ==

			Näitekoodi on vaja kindlasti kohandada.


	// shim layer with setTimeout fallback		// shim layer with setTimeout fallback

Roger: /* Ülesanne */

2014-03-31T17:07:35Z

Ülesanne

←Vanem redaktsioon		Redaktsioon: 31. märts 2014, kell 19:07
4. rida:		4. rida:

	[[Pilt:Drawing-app.png\|x240px]]		[[Pilt:Drawing-app.png\|x240px]]


			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 ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html 'pointer-evente'].		Ü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 ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html '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.		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/….”>		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 ==		== Joonistusosa koodinäide ==

Roger: /* Joonistusosa koodinäide */

2014-03-31T17:04:44Z

Joonistusosa koodinäide

←Vanem redaktsioon		Redaktsioon: 31. märts 2014, kell 19:04
59. rida:		59. rida:
	stroke.draw();		stroke.draw();
	}		}

	requestAnimFrame(drawPointers);		requestAnimFrame(drawPointers);
	}		}

Roger: /* Joonistusosa koodinäide */

2014-03-31T17:04:32Z

Joonistusosa koodinäide

←Vanem redaktsioon		Redaktsioon: 31. märts 2014, kell 19:04
22. rida:		22. rida:
	};		};
	})();		})();

	window.addEventListener('load', init);		window.addEventListener('load', init);

	var canvas = null;		var canvas = null;
	var ctx = null;		var ctx = null;

	// currently active stroke		// currently active stroke
	var stroke = null;		var stroke = null;

	function init() {		function init() {
	canvas = document.querySelector('canvas');		canvas = document.querySelector('canvas');
	ctx = canvas.getContext("2d");		ctx = canvas.getContext("2d");

	// Set the default line style.		// Set the default line style.
	ctx.lineWidth = 3;		ctx.lineWidth = 3;
41. rida:		36. rida:
	ctx.fillRect(0, 0, canvas.width, canvas.height);		ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.strokeStyle = "black";		ctx.strokeStyle = "black";

	canvas.addEventListener('mousedown', onMouseDown);		canvas.addEventListener('mousedown', onMouseDown);
	canvas.addEventListener('mousemove', onMouseMove);		canvas.addEventListener('mousemove', onMouseMove);
	canvas.addEventListener('mouseup', onMouseUp);		canvas.addEventListener('mouseup', onMouseUp);
	canvas.addEventListener('mouseleave', onMouseUp);		canvas.addEventListener('mouseleave', onMouseUp);

	requestAnimFrame(drawPointers);		requestAnimFrame(drawPointers);
	}		}

	function onMouseDown(event) {		function onMouseDown(event) {
	stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);		stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
	}		}

	function onMouseMove(event) {		function onMouseMove(event) {
	// Are we currently drawing this pointer?		// Are we currently drawing this pointer?
59. rida:		50. rida:
	stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);		stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
	}		}
	};		}

	function onMouseUp(event) {		function onMouseUp(event) {
	stroke = null;		stroke = null;
	};		}

	function drawPointers() {		function drawPointers() {
	// If we have an active stroke, draw any undrawn segments.		// If we have an active stroke, draw any undrawn segments.
72. rida:		61. rida:

	requestAnimFrame(drawPointers);		requestAnimFrame(drawPointers);
	};		}

	function Point(x, y) {		function Point(x, y) {
	this.x = x;		this.x = x;
	this.y = y;		this.y = y;
	}		}

	function Stroke(x, y) {		function Stroke(x, y) {
	this.points = [new Point(x, y)];		this.points = [new Point(x, y)];
	}		}

	Stroke.prototype.addPoint = function (x, y) {		Stroke.prototype.addPoint = function (x, y) {
	this.points.push(new Point(x, y));		this.points.push(new Point(x, y));
	};		}

	Stroke.prototype.draw = function () {		Stroke.prototype.draw = function () {
	if (this.points.length < 2) {		if (this.points.length < 2) {
	return;		return;
	}		}

	ctx.beginPath();		ctx.beginPath();
	ctx.moveTo(this.points[0].x, this.points[0].y);		ctx.moveTo(this.points[0].x, this.points[0].y);
100. rida:		84. rida:
	ctx.closePath();		ctx.closePath();
	this.points = this.points.slice(-1);		this.points = this.points.slice(-1);
	};		}

Roger: /* Joonistusosa koodinäide */

2014-03-31T17:03:52Z

Joonistusosa koodinäide

←Vanem redaktsioon		Redaktsioon: 31. märts 2014, kell 19:03
14. rida:		14. rida:
	== Joonistusosa koodinäide ==		== Joonistusosa koodinäide ==

	// shim layer with setTimeout fallback		// shim layer with setTimeout fallback
	window.requestAnimFrame = (function () {		window.requestAnimFrame = (function () {
	return window.requestAnimationFrame \|\|		return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|		window.webkitRequestAnimationFrame \|\|
	function (callback) {		function (callback) {
	window.setTimeout(callback, 1000 / 60);		window.setTimeout(callback, 1000 / 60);
	};		};
	})();		})();

	window.addEventListener('load', init);		window.addEventListener('load', init);

	var canvas = null;		var canvas = null;
	var ctx = null;		var ctx = null;

	// currently active stroke		// currently active stroke
	var stroke = null;		var stroke = null;

	function init() {		function init() {
	canvas = document.querySelector('canvas');		canvas = document.querySelector('canvas');
	ctx = canvas.getContext("2d");		ctx = canvas.getContext("2d");

	// Set the default line style.		// Set the default line style.
	ctx.lineWidth = 3;		ctx.lineWidth = 3;
	ctx.lineCap = "round";		ctx.lineCap = "round";
	ctx.fillStyle = "cyan";		ctx.fillStyle = "cyan";
	ctx.fillRect(0, 0, canvas.width, canvas.height);		ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.strokeStyle = "black";		ctx.strokeStyle = "black";

	canvas.addEventListener('mousedown', onMouseDown);		canvas.addEventListener('mousedown', onMouseDown);
	canvas.addEventListener('mousemove', onMouseMove);		canvas.addEventListener('mousemove', onMouseMove);
	canvas.addEventListener('mouseup', onMouseUp);		canvas.addEventListener('mouseup', onMouseUp);
	canvas.addEventListener('mouseleave', onMouseUp);		canvas.addEventListener('mouseleave', onMouseUp);

	requestAnimFrame(drawPointers);		requestAnimFrame(drawPointers);
	}		}

	function onMouseDown(event) {		function onMouseDown(event) {
	stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);		stroke = new Stroke(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
	}		}

	function onMouseMove(event) {		function onMouseMove(event) {
	// Are we currently drawing this pointer?		// Are we currently drawing this pointer?
	if (stroke) {		if (stroke) {
	stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);		stroke.addPoint(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
	}		}
	};		};

	function onMouseUp(event) {		function onMouseUp(event) {
	stroke = null;		stroke = null;
	};		};

	function drawPointers() {		function drawPointers() {
	// If we have an active stroke, draw any undrawn segments.		// If we have an active stroke, draw any undrawn segments.
	if (stroke) {		if (stroke) {
	stroke.draw();		stroke.draw();
	}		}

	requestAnimFrame(drawPointers);		requestAnimFrame(drawPointers);
	};		};

	function Point(x, y) {		function Point(x, y) {
	this.x = x;		this.x = x;
	this.y = y;		this.y = y;
	}		}

	function Stroke(x, y) {		function Stroke(x, y) {
	this.points = [new Point(x, y)];		this.points = [new Point(x, y)];
	}		}

	Stroke.prototype.addPoint = function (x, y) {		Stroke.prototype.addPoint = function (x, y) {
	this.points.push(new Point(x, y));		this.points.push(new Point(x, y));
	};		};

	Stroke.prototype.draw = function () {		Stroke.prototype.draw = function () {
	if (this.points.length < 2) {		if (this.points.length < 2) {
	return;		return;
	}		}

	ctx.beginPath();		ctx.beginPath();
	ctx.moveTo(this.points[0].x, this.points[0].y);		ctx.moveTo(this.points[0].x, this.points[0].y);
	for (var i = 1; i < this.points.length; i++) {		for (var i = 1; i < this.points.length; i++) {
	ctx.lineTo(this.points[i].x, this.points[i].y);		ctx.lineTo(this.points[i].x, this.points[i].y);
	}		}
	ctx.stroke();		ctx.stroke();
	ctx.closePath();		ctx.closePath();
	this.points = this.points.slice(-1);		this.points = this.points.slice(-1);
	};		};

Roger – 31. märts 2014, kell 17:03

2014-03-31T17:03:00Z

←Vanem redaktsioon		Redaktsioon: 31. märts 2014, kell 19:03
10. rida:		10. rida:

	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/….”>		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 ==

			// 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);
			};

Roger: Uus lehekülg: '{{UI}} == Ülesanne == x240px Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemi...'

2014-03-31T17:00:39Z

Uus lehekülg: '{{UI}} == Ülesanne == x240px Ülesande mõte on, et oleks offline rakendus, milles saab joonistada ja pintsli värvi valida. Kui vajutad pildi tegemi...'

Uus lehekülg

{{UI}}

== Ülesanne ==

[[Pilt:Drawing-app.png|x240px]]

Ü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 ja nüüd saab selle peale joonistada. Joonistamine peab töötama nii hiire kui sõrmega. Kasutada [http://www.polymer-project.org/platform/pointer-events.html '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/….”>