WebFund 2014W Lecture 17 - Revision history

Leah at 02:55, 4 April 2014

2014-04-04T02:55:19Z

← Older revision		Revision as of 02:55, 4 April 2014
Line 83:		Line 83:

	* We can use Javascript to draw on the canvas.		* We can use Javascript to draw on the canvas.
	*The following code draws a red box on the screen.		*The following code draws a red box and circle on the screen.

	<code>		<code>

Leah at 02:54, 4 April 2014

2014-04-04T02:54:33Z

← Older revision		Revision as of 02:54, 4 April 2014
Line 68:		Line 68:
	Drop down button tips:		Drop down button tips:
	* We could use a table, or just a simple button drop down using Bootstrap.		* We could use a table, or just a simple button drop down using Bootstrap.



	=== HTML Canvas Element ===		=== HTML Canvas Element ===

Leah at 02:53, 4 April 2014

2014-04-04T02:53:52Z

← Older revision		Revision as of 02:53, 4 April 2014
Line 63:		Line 63:
	* The current save button does a POST to /updateRooms.		* The current save button does a POST to /updateRooms.
	* It already works and sends everything. All we need to do is implement updateRoom on the server side.		* It already works and sends everything. All we need to do is implement updateRoom on the server side.
	* "Cannot POST /updateRoom" ~~mean~~ we don't have a route to updateRoom, so we would need to create one and write a function for updateRoom.		* "Cannot POST /updateRoom" means we don't have a route to updateRoom, so we would need to create one and write a function for updateRoom.
	* After the room is saved we should decide what happens after, such as having a page that says "Room saved" and takes you back to the editor.		* After the room is saved we should decide what happens after, such as having a page that says "Room saved" and takes you back to the editor.

Leah at 02:52, 4 April 2014

2014-04-04T02:52:21Z

← Older revision		Revision as of 02:52, 4 April 2014
Line 7:		Line 7:
	[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).		[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).


			=== Assignment 3 Tips ===
			"Load" button tips:
			* We need to create editor.js and update getContents.

			The following client-side code is created in editor.js. When the user click on the load button, the $.getJSON call specifies getContents as the url to send the request to:

			<code>
			$(function(){
			var updateRoom = function(room) {
			$('#roomTitle').html(room.title);
			$('#description').html(room.description);
			if (room.activity) {
			$('#activity').html(room.activity);
			} else {
			$('#activity').html("");
			}
			$('#exits').html(room.roomExits + "");
			}
			$("#loadRoom").on("click",function(){
			$.getJSON("/getContents",
			{ theRoom: $("#roomName").val()},
			updateRoom);
			});
			});
			</code>


			*In index.js, the function getContents handles the request find the room in the roomsCollection and loads the queried room

			var getContents = function(req, res) {
			var theRoom;
			if (req.session.player) {
			theRoom = req.session.player.room;
			} else if (req.session.editorName) {
			theRoom = req.query.theRoom;
			} else {
			console.log("Invalid getContents request.");
			res.send("Error: NotLoggedIn");
			return;
			}
			roomsCollection.findOne(
			{name: theRoom},
			function(err, room) {
			if (err \|\| !room) {
			room = defaultRoom;
			}
			res.send(room);
			}
			);
			}


			"Save" button tips:
			* The current save button does a POST to /updateRooms.
			* It already works and sends everything. All we need to do is implement updateRoom on the server side.
			* "Cannot POST /updateRoom" mean we don't have a route to updateRoom, so we would need to create one and write a function for updateRoom.
			* After the room is saved we should decide what happens after, such as having a page that says "Room saved" and takes you back to the editor.

			Drop down button tips:
			* We could use a table, or just a simple button drop down using Bootstrap.

	=== HTML Canvas Element ===		=== HTML Canvas Element ===

Leah at 01:40, 4 April 2014

2014-04-04T01:40:04Z

@@ Line 12: / Line 12: @@
 * Part of HTML5
 *  scriptable rendering of 2D shapes and bitmap images
    <canvas id="example" width="200" height="200">
    </canvas>
@@ Line 34: / Line 37: @@
 * Drawing a arc is similar in languages such as Processing.
 * Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).

Leah at 01:26, 4 April 2014

2014-04-04T01:26:45Z

← Older revision		Revision as of 01:26, 4 April 2014
Line 8:		Line 8:


	HTML Canvas Element		=== HTML Canvas Element ===

	* Part of HTML5		* Part of HTML5
	* scriptable rendering of 2D shapes and bitmap images		* scriptable rendering of 2D shapes and bitmap images

	<canvas id="example" width="200" height="200">		<canvas id="example" width="200" height="200">
	</canvas>		</canvas>

	* We can use Javascript to draw on the canvas.		* We can use Javascript to draw on the canvas.
			*The following code draws a red box on the screen.

	<script>		<code>
	~~// The following code draws a red box on the screen.~~		<script>
	var example = document.getElementById('example');		var example = document.getElementById('example');
	var context = example.getContext('2d');		var context = example.getContext('2d');
	context.fillStyle = 'red';		context.fillStyle = 'red';
	context.fillRect(30, 30, 50, 50)		context.fillRect(30, 30, 50, 50)
			//The following code draws a circle.
	//The following code draws a circle.		context.beginPath();
	context.beginPath();		context.arc(100, 75, 50, 0, 2 *Math.PI);
	context.arc(100, 75, 50, 0, 2 *Math.PI);		context.stroke();
	context.stroke();		</script>
	</script>		</code>

	* Drawing a arc is similar in languages such as Processing.		* Drawing a arc is similar in languages such as Processing.
	* Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).		* Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).

Leah at 01:20, 4 April 2014

2014-04-04T01:20:49Z

← Older revision		Revision as of 01:20, 4 April 2014
Line 6:		Line 6:

	[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).		[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).


			HTML Canvas Element
			* Part of HTML5
			* scriptable rendering of 2D shapes and bitmap images

			<canvas id="example" width="200" height="200">
			</canvas>

			* We can use Javascript to draw on the canvas.

			<script>
			// The following code draws a red box on the screen.
			var example = document.getElementById('example');
			var context = example.getContext('2d');
			context.fillStyle = 'red';
			context.fillRect(30, 30, 50, 50)

			//The following code draws a circle.
			context.beginPath();
			context.arc(100, 75, 50, 0, 2 *Math.PI);
			context.stroke();
			</script>

			* Drawing a arc is similar in languages such as Processing.
			* Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise).

Soma at 17:10, 15 March 2014

2014-03-15T17:10:23Z

← Older revision		Revision as of 17:10, 15 March 2014
Line 5:		Line 5:
	* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_17_-_20140314_142511_27.mp4 Original from CUOL]		* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_17_-_20140314_142511_27.mp4 Original from CUOL]

	[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available.		[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available (without modules, you'll have to run "npm install" or copy node_modules from adventure-editor or similar application).

Soma at 17:09, 15 March 2014

2014-03-15T17:09:07Z

← Older revision		Revision as of 17:09, 15 March 2014
Line 4:		Line 4:
	* [http://www.screencast.com/t/cFqe9HmJc8t6 Large from screencast.com]		* [http://www.screencast.com/t/cFqe9HmJc8t6 Large from screencast.com]
	* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_17_-_20140314_142511_27.mp4 Original from CUOL]		* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_17_-_20140314_142511_27.mp4 Original from CUOL]

			[http://homeostasis.scs.carleton.ca/~soma/webfund-2014w/adventure-editor-class.zip adventure-editor-class] is also available.

Soma: Created page with "The video from the lecture given on March 14, 2014 is available: * [http://www.screencast.com/t/cSo3EOTe Small from screencast.com] * [http://www.screencast.com/t/cFqe9HmJc8t..."

2014-03-15T17:02:54Z

Created page with "The video from the lecture given on March 14, 2014 is available: * [http://www.screencast.com/t/cSo3EOTe Small from screencast.com] * [http://www.screencast.com/t/cFqe9HmJc8t..."

New page

The video from the lecture given on March 14, 2014 is available:

* [http://www.screencast.com/t/cSo3EOTe Small from screencast.com]
* [http://www.screencast.com/t/cFqe9HmJc8t6 Large from screencast.com]
* [http://dl.cuol.ca/capture/Anil.Somayaji/COMP_2406_2014W_Lecture_17_-_20140314_142511_27.mp4 Original from CUOL]