WebFund 2014W Lecture 17: Difference between revisions

From Soma-notes
Leah (talk | contribs)
No edit summary
Leah (talk | contribs)
No edit summary
 
(3 intermediate revisions by the same user not shown)
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).
=== 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" 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.




Line 20: 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>

Latest revision as of 02:55, 4 April 2014

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.