WebFund 2014W Lecture 17
Jump to navigation
Jump to search
The video from the lecture given on March 14, 2014 is available:
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:
$(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);
});
});
- 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" 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.
Drop down button tips:
- We could use a table, or just a simple button drop down using Bootstrap.
HTML Canvas Element
- Part of HTML5
- scriptable rendering of 2D shapes and bitmap images
- We first set up a HTML canvas widget
- Give it a name (ID), and dimensions
<canvas id="example" width="200" height="200"> We put some text here to display if browser does not support HTML5 canvas. </canvas>
- We can use Javascript to draw on the canvas.
- The following code draws a red box and circle on the screen.
<script>
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).
- To use JQuery, we need to add it in the <head>
<script src="http://code.jquery.com/jquery-1.11.0.min,js"></script>
- We can now use JQuery and write
var example = $('example');
var context = example[0].getContext('2d');
- To use javascript we need to get the canvas object.
- We have to get the standard object out of the JQuery object (what the [0] is).
- Must use getContext(). In this case the parameter is "2d", we could also use 3d (WebGL) and others.
- Then we can use context.arc, context.fillStyle etc. for example to drawing things.