added basic database functions

painter/database.pl

@@ -0,0 +1,71 @@
+#!/usr/bin/perl
+
+use strict;
+
+# this uses the same id as the hashtable %clients, stores a buffer of the current line seg
+our %buffer = ();
+
+# database used to store the line drawn
+our @seg_db = ();
+
+# set the user's buffer to the newest line seg
+sub set_buffer {
+  my ($user_id, $data) = @_;
+  $buffer{$user_id} = $data;
+}
+
+# append a string to the buffer, only for drawing with a pen
+sub append_to_buffer {
+  my ($user_id, $data) = @_;
+  # use a delimeter separate the strings
+  if ($buffer{$user_id}) { # the buffer is defined
+    $buffer{$user_id} .= "|".$data;
+  } else { # the buffer is empty
+    set_buffer($user_id, $data);
+  }
+  print "$buffer{$user_id}\n";
+}
+
+# push the data in the buffer into the database
+sub buffer2db {
+  my $user_id = $_[0];
+  push(@seg_db, $buffer{$user_id});
+}
+
+# discard the data in the buffer, used when the user click the mouse
+sub dump_buffer {
+  my $user_id = $_[0];
+  $buffer{$user_id} = 0;
+}
+
+# dump all the buffers
+sub dump_all_buffer {
+}
+
+# return the database
+sub get_db {
+  return @seg_db;
+}
+
+# return all the buffers
+sub get_all_buffer {
+}
+
+# print the info of the database, for debugging
+sub print_database {
+  foreach my $item (@seg_db) {
+    print "$item\n";
+  }
+}
+
+# print the info of a buffer, for debugging
+sub print_buffer {
+  my $user_id = $_[0];
+  print "$buffer{$user_id}\n";
+}
+
+# print all, for debugging
+sub print_all {
+}
+
+1;

painter/server.pl

@@ -3,15 +3,9 @@
 use Mojolicious::Lite;
 use Mojo::JSON;
 
-use UserData;
-use Workspace;
+require "database.pl";
 
-# our %workspaces = ();
 our %clients = ();
-# this uses the same id as the hashtable %clients, stores a buffer of the current line seg
-our %userbuffer = ();
-# database used to store the line drawn
-our @draw_db = ();
 
 # our $workspace_id = 0;
 our $client_cnt = 0;
@@ -28,22 +22,16 @@ sub on_connect {
 
 # initialize the canvas
 sub on_enter_wksp {
-  # add a canvas to each clients' page
+  # add a canvas to each client's page
 }
 
 # when the user leaves
 sub on_finish {
 }
 
-# map the fields of the message to the indices of the parsed array
-sub map_field_to_idx {
-  # create a hashtable here for mapping
-}
-
 # deal with adding new users
 sub exec_new_user_req {
   my ($username, $client_id) = @_;
-  print "$username $client_id\n";
   my $json = Mojo::JSON->new;
   my $data = $json->encode( {
     action => "new_canvas",
@@ -61,6 +49,11 @@ sub exec_draw_req {
     userid => $userid,
     shape => $shape,
   });
+  if ($shape eq "pen") {
+    append_to_buffer($userid, $data);
+  } else {
+    set_buffer($userid, $data);
+  }
   return $data;
 }
 
@@ -69,6 +62,11 @@ sub exec_beginseg_req {
   # Here we should also put the data in the client's buffer into the shared database, 
   # if just performed undo, do not push it in, merely replace it with a new line seg,
   # and we also need to rearrange the order of the canvases here.
+  my ($userid, $undoed) = @_;
+  if (!$undoed) { # not undo performed
+    buffer2db($userid);
+  }
+  dump_buffer($userid);
 }
 
 sub exec_endseg_req {
@@ -115,6 +113,11 @@ sub exec_msg {
         $data->{"width"}, 
         $data->{"fill"}
     );
+  } elsif ($action eq "begin_seg") { # starting a new seg at mouseclick
+    exec_beginseg_req(
+        $data->{"userid"},
+        $data->{"undoed"}
+    );
   }
 }
 

painter/templates/index.html.ep

@@ -6,19 +6,30 @@
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
     <script type="text/javascript">
+      var ws; // global websocket
+
+      // Following are the global variables describing the user's current state,
+      // when changing the properties using the toolbar or others, just update
+      // these variables
+      var username_g; // name of the user
+      var userid_g; // id of the user
+      var currtool_g; // the tool (shape) the user is using
+      var currfg_g; // the current foreground color
+      var currbg_g; // the current background color
+      var currfill_g; // whether to fill or not
+      var currwidth_g; // the current width of line
+
       if ( WebSocket.__initialize ) {
         WebSocket.__swfLocation = 'web-socket-js/WebSocketMain.swf';
       }
 
-      var ws;
-
       function init_socket() {
         ws = new WebSocket('ws://143.89.218.59:3389/server');
 
         ws.onopen = function() {
           var action = {
             action: "new_user",
-            username: $("#name_input").val()
+            username: username_g
           };
           ws.send(JSON.stringify(action));
           init_canvas();
@@ -28,7 +39,8 @@
           var data = jQuery.parseJSON(e.data);
           var action = data.action;
           if (action == "new_canvas") { // add new canvas
-            add_canvas(data.userid);
+            userid_g = data.userid;
+            add_canvas(userid_g);
           } else if (action == "draw" ) { // draw
             draw_canvas(data);
           }
@@ -49,9 +61,11 @@
       }
 
       function init_canvas() {
+        /*
         $("#canvas").mousedown(canvas_mousedown);
         $("#canvas").mouseup(canvas_mouseup);
         $("#canvas").mousemove(canvas_mousemove);
+        */
       }
 
       /**
@@ -68,26 +82,16 @@
       }
 
       function canvas_mousedown(e) {
-        /*
-        dummy code just for testing:
-        var action = {
-          action: "draw",
-          userid: 1,
-          shape: "rect",
-          start: [100, 100],
-          end: [200, 200],
-          fg: [255, 0, 0],
-          bg: [0, 255, 0],
-          width: 3,
-          fill: 0
-        };
-        ws.send(JSON.stringify(action));
-        */
-
       // TODO 
         // Here we should send a message start_msg to notify the server the do the following:
         // 1. push the buffer into the database or delete the buffer (if just undoed)
         // 2. put the user's canvas at the top of all the canvases
+        var action = {
+          action: "begin_seg",
+          userid: 1,
+          undoed: 0
+        };
+        ws.send(JSON.stringify(action));
       }
 
       function canvas_mouseup(e) {
@@ -109,7 +113,8 @@
           var name = $("#name_input").val();
           if (name != '') {
             $("#name_dialog").dialog("close");
-            $("#top_bar").html("<p>" + $("#name_input").val() + "</p>");
+            username_g = name;
+            $("#top_bar").html("<p>" + name + "</p>");
             init_socket();
           } else {
             // do nothing
@@ -138,6 +143,22 @@
       $(document).ready(function() {
         login();
       });
+
+      // for debugging only
+      function send_req() {
+        var action = {
+          action: "draw",
+          userid: 1,
+          shape: "pen",
+          start: [100, 100],
+          end: [200, 200],
+          fg: [255, 0, 0],
+          bg: [0, 255, 0],
+          width: 3,
+          fill: 0
+        };
+        ws.send(JSON.stringify(action));
+      }
     </script>
     <style type="text/css">
       #top_bar {

testing/aux.pl

@@ -0,0 +1,5 @@
+sub print_sth {
+  print "something\n";
+}
+
+1;

testing/test.pl

@@ -0,0 +1,19 @@
+#!/usr/bin/perl
+
+require "aux.pl";
+
+print_sth();
+
+my @array = (1, 2, 3, 5);
+
+$hash{0} = 1;
+
+@hash{1} = @array;
+
+print "$hash{0}\n";
+print "@hash{1}\n";
+
+$string = "aa";
+if (!$string) {
+  print "empty\n";
+}