├── README.md
├── draw.js
├── draw.php
├── global.php
├── index.js
├── index.php
└── save.py


/README.md:
--------------------------------------------------------------------------------
 1 | # Big Canvas Demo
 2 | Multiplayer drawing web app (similar to the "Million Dollar Homepage" or Reddit's "Place") in Javascript, Firebase, PHP, Python, and Linux/Apache.
 3 | 
 4 | YouTube video walkthrough: <a href=https://youtu.be/t1aXuJkmTg8>https://youtu.be/t1aXuJkmTg8</a><BR>
 5 | Demo: http://techleadpro.com/bigcanvas/
 6 | 
 7 | Looking for more coding tips?
 8 | Join ex-Google/ex-Facebook engineers at http://coderpro.com for 100+ coding video explanations for Google, Facebook, and FANG companies.
 9 | 
10 | # Installation
11 | If you wish to deploy your own instance, here are a few changes necessary:
12 | - Create a Firebase project and make a file `creds.json` for your credentials.
13 | - Bring in the color-picker https://github.com/Simonwep/pickr using `git clone`.
14 | - Comment out the validation check in `draw.php`.
15 | - Create a folder "tmp/" and run `chmod 777 tmp/`
16 | 


--------------------------------------------------------------------------------
/draw.js:
--------------------------------------------------------------------------------
  1 | $(document).ready(function () {
  2 |   let canvas = $("#mycanvas");
  3 |   let ctx = canvas.get(0).getContext("2d");
  4 |   let canvasWidth = canvas.width();
  5 |   let canvasHeight = canvas.height();
  6 |   let PIXELSIZE = canvasWidth / DIMENSION;
  7 |   let selectedColor = '#222244';
  8 |   let enabled = true;
  9 |   let filledPixels = {};
 10 | 
 11 |   ctx.strokeStyle = 'rgba(0,0,0,0.1)';
 12 |   for (let i = 0; i < DIMENSION; ++i) {
 13 |     x = Math.floor(i * canvasWidth / DIMENSION);
 14 |     ctx.beginPath();
 15 |     ctx.moveTo(x, 0);
 16 |     ctx.lineTo(x, canvasHeight);
 17 |     ctx.stroke();
 18 | 
 19 |     y = Math.floor(i * canvasHeight / DIMENSION);
 20 |     ctx.beginPath();
 21 |     ctx.moveTo(0, y);
 22 |     ctx.lineTo(canvasWidth, y);
 23 |     ctx.stroke();
 24 |   }
 25 | 
 26 |   // firefox canvas mousedown fix
 27 |   let firefoxmd = false;
 28 | 
 29 |   window.addEventListener('mousedown', e => {
 30 |       firefoxmd = true;
 31 |   });
 32 |     
 33 |   window.addEventListener('mouseup', e => {
 34 |       if (firefoxmd === true) {
 35 |           firefoxmd = false;
 36 |       }
 37 |   });
 38 | 
 39 |   canvas.on('mousemove touchmove touchstart mousedown', mouseFill);
 40 |   function mouseFill(e) {
 41 |     e.preventDefault(); // Disables scrolling for touch events.
 42 | 
 43 |     var touchstart = e.type === 'touchstart' || e.type === 'touchmove';
 44 |     e = touchstart ? e.originalEvent : e;
 45 |     var rect = $("#mycanvas");
 46 |     var offsetX = touchstart ? e.targetTouches[0].pageX - rect.offset().left : e.offsetX;
 47 |     var offsetY = touchstart ? e.targetTouches[0].pageY - rect.offset().top : e.offsetY;
 48 | 
 49 |     if (!enabled) return;
 50 |     if (!firefoxmd) return;
 51 |     if (e.which != 1 && !touchstart) return;
 52 | 
 53 |     pixel = [Math.floor(offsetX / PIXELSIZE), Math.floor(offsetY / PIXELSIZE)];
 54 |     fillPixel(pixel);
 55 |   }
 56 | 
 57 |   function fillPixel(pixel) {
 58 |     let key = pixel[0] + ',' + pixel[1];
 59 |     filledPixels[key] = selectedColor;
 60 | 
 61 |     ctx.fillStyle = selectedColor;
 62 |     ctx.fillRect(pixel[0] * PIXELSIZE, pixel[1] * PIXELSIZE, PIXELSIZE - 1, PIXELSIZE - 1);
 63 |   }
 64 | 
 65 |   const PICKR = Pickr.create({
 66 |     el: '#picker',
 67 |     comparison: false,
 68 |     components: {
 69 |       opacity: false,
 70 |       hue: true,
 71 |       palette: true,
 72 |       interaction: {
 73 |         input: true,
 74 |       }
 75 |     }
 76 |   });
 77 | 
 78 |   PICKR.on('init', function () {
 79 |     PICKR.setColor(selectedColor);
 80 |   });
 81 |   PICKR.on('show', function () {
 82 |     enabled = false;
 83 |   });
 84 |   PICKR.on('hide', function () {
 85 |     setTimeout(function () {
 86 |       enabled = true;
 87 |     }, 300);
 88 |   });
 89 |   PICKR.on('change', function () {
 90 |     selectedColor = PICKR.getColor().toHEXA().toString();
 91 |   });
 92 | 
 93 |   window.save = function (x, y) {
 94 |     var data = {};
 95 |     data['x'] = x;
 96 |     data['y'] = y;
 97 |     data['data'] = filledPixels;
 98 |     $("#saveButton").attr('disabled', 'true');
 99 |     $("#spinner").html("Saving...");
100 | 
101 |     $.post('draw.php?submit=1', data, function (rsp) {
102 |       $('body').append(rsp);
103 |       $("#saveButton").attr('disabled', false);
104 |     });
105 |   }
106 |   window.PICKR = PICKR;
107 | });
108 | 


--------------------------------------------------------------------------------
/draw.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | require_once 'global.php';
 3 | require_once 'validate.php';
 4 | 
 5 | $x = intval($_REQUEST['x']);
 6 | $y = intval($_REQUEST['y']);
 7 | 
 8 | if ($_REQUEST['submit']) {
 9 |   $data = $_POST['data'];
10 | 
11 |   # Validate data
12 |   list($data, $success) = validateData($x, $y, $data);
13 |   # list($data, $success) = array($data, 1);
14 | 
15 |   if (!$success) {
16 |     print "<script>$data</script>";
17 |     return;
18 |   }
19 | 
20 |   # Save to file.
21 |   $key = "$x,$y";
22 |   $filename = "tmp/" . $key . '-' . rand()%100;
23 |   file_put_contents($filename, json_encode($data));
24 | 
25 |   # Send to firestore.
26 |   $result = trim(shell_exec("python save.py '$x' '$y' '$filename' 2>&1"));
27 |   if ($result != 1) {
28 |     die("Error saving. $result<HR>");
29 |   }
30 | 
31 |   print "<script>window.location = 'index.php';</script>";
32 |   return;
33 | }
34 | 
35 | print <<<EOF
36 | <!doctype html>
37 | <html>
38 | <style>
39 |     body {
40 |         margin: 30px;
41 |         font-family: Arial, Helvetica, sans-serif;
42 |         background-color: #f0f0f0;
43 |     }
44 | 
45 |     #mycanvas {
46 |         margin-top: 8px;
47 |         border: 1px #000 solid;
48 |         background-color: #fff;
49 |     }
50 | </style>
51 | 
52 | <body>
53 |     <script>
54 |         let DIMENSION = $DIMENSION;
55 |     </script>
56 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
57 |     <link rel="stylesheet" href="pickr/dist/themes/classic.min.css" />
58 |     <!-- 'classic' theme -->
59 |     <script src="pickr/dist/pickr.min.js"></script>
60 |     <script src="draw.js?version=$VERSION"></script>
61 | 
62 |     <body>
63 |         <input onclick="window.location='index.php'" value="Back" type=button>
64 |         <BR>
65 |         <BR>
66 |         <table>
67 |             <tr>
68 |                 <Td>
69 |                     <div id=picker></div>
70 |                 </td>
71 |                 <td>
72 |                     <input type=button value="Choose Color" onclick="PICKR.show()" />
73 |                 </td>
74 |             </tr>
75 |         </table>
76 |         <div>
77 |             <canvas id=mycanvas width=500 height=500></canvas>
78 |         </div>
79 |         <input id=saveButton type=submit value=Save onclick="save($x, $y)">
80 |         <div id=spinner></div>
81 |     </body>
82 | </html>
83 | EOF;
84 | 


--------------------------------------------------------------------------------
/global.php:
--------------------------------------------------------------------------------
1 | <?php
2 | 
3 | ob_start('ob_gzhandler');
4 | 
5 | $DIMENSION = 25;
6 | // $VERSION = time();
7 | $VERSION = 6;
8 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | $(document).ready(function () {
  2 |   let PIXELSIZE = 2;
  3 |   let REPEATSX = 20;
  4 |   let REPEATSY = 15;
  5 | 
  6 |   let canvas = $("#mycanvas");
  7 |   let ctx = canvas.get(0).getContext("2d");
  8 |   let canvasWidth = DIMENSION * REPEATSX * PIXELSIZE;
  9 |   let canvasHeight = DIMENSION * REPEATSY * PIXELSIZE;
 10 |   let selectedBox = null;
 11 | 
 12 |   canvas.attr('width', canvasWidth);
 13 |   canvas.attr('height', canvasHeight);
 14 | 
 15 |   // Initialize Firebase
 16 |   let firebaseConfig = {
 17 |     apiKey: "AIzaSyA8o_azigp1r55Kf4-ksJnffY7o3WT9ZhQ",
 18 |     authDomain: "bigcanvas-f7fef.firebaseapp.com",
 19 |     databaseURL: "https://bigcanvas-f7fef.firebaseio.com",
 20 |     projectId: "bigcanvas-f7fef",
 21 |     storageBucket: "bigcanvas-f7fef.appspot.com",
 22 |     messagingSenderId: "429765921665",
 23 |     appId: "1:429765921665:web:8d5199605dbda353383680"
 24 |   };
 25 |   firebase.initializeApp(firebaseConfig);
 26 |   let db = firebase.firestore();
 27 | 
 28 |   db.collection('app').onSnapshot(function (grid) {
 29 |     for(let change of grid.docChanges()) {
 30 |       if (!change.doc) continue;
 31 |       let key = change.doc.id;
 32 |       let data = change.doc.data().data;
 33 |       if (key == 'grid') continue;
 34 | 
 35 |       let coord = key.split(",");
 36 |       let json = data;
 37 |       let pixelData = JSON.parse(json);
 38 |       clearGrid(coord);
 39 |       for (let subkey in pixelData) {
 40 |         let subcoord = subkey.split(",");
 41 |         let color = pixelData[subkey];
 42 | 	if(color == '#2') color = '#222244'; // hack to save some space on encoding.
 43 | 
 44 |         fillPixel(coord, subcoord, color);
 45 |       }
 46 |     }
 47 |   });
 48 | 
 49 |   // Draw grid.
 50 |   ctx.strokeStyle = '#cccccc';
 51 |   for (let i = 0; i < DIMENSION * REPEATSX; ++i) {
 52 |     if (i % DIMENSION != 0) { continue; }
 53 |     x = i * PIXELSIZE;
 54 |     ctx.beginPath();
 55 |     ctx.moveTo(x, 0);
 56 |     ctx.lineTo(x, canvasHeight);
 57 |     ctx.stroke();
 58 | 
 59 |     y = i * PIXELSIZE;
 60 |     ctx.beginPath();
 61 |     ctx.moveTo(0, y);
 62 |     ctx.lineTo(canvasWidth, y);
 63 |     ctx.stroke();
 64 |   }
 65 | 
 66 |   // Canvas Behaviors.
 67 |   canvas.click(function (e) {
 68 |     selectBox(e);
 69 |   });
 70 |   canvas.mousemove(function (e) {
 71 |     let pixel = [Math.floor(e.offsetX / (PIXELSIZE * DIMENSION)), Math.floor(e.offsetY / (PIXELSIZE * DIMENSION))];
 72 |     if (pixel[0] < 0 || pixel[1] < 0 ||
 73 |       pixel[0] >= REPEATSX || pixel[1] >= REPEATSY) {
 74 |       return;
 75 |     }
 76 |     if (!selectedBox) {
 77 |       selectedBox = $("<div id=selectedBox></div");
 78 |       selectedBox.css({ width: DIMENSION * PIXELSIZE - 2, height: DIMENSION * PIXELSIZE - 2 });
 79 |       $("#mycanvasWrapper").prepend(selectedBox);
 80 |     }
 81 |     selectedBox.css({
 82 |       left: pixel[0] * PIXELSIZE * DIMENSION + 1,
 83 |       top: pixel[1] * PIXELSIZE * DIMENSION
 84 |     });
 85 |   });
 86 | 
 87 |   let SELECTED = 0;
 88 |   function selectBox(e) {
 89 |     if (SELECTED) return;
 90 |     SELECTED = 1;
 91 | 
 92 |     let pixel = [Math.floor(e.offsetX / (PIXELSIZE * DIMENSION)), Math.floor(e.offsetY / (PIXELSIZE * DIMENSION))];
 93 |     window.location = "draw.php?x=" + pixel[0] + "&y=" + pixel[1];
 94 |   }
 95 | 
 96 |   function clearGrid(coord) {
 97 |     let coordX = parseInt(coord[0]);
 98 |     let coordY = parseInt(coord[1]);
 99 |     ctx.fillStyle = '#ffffff';
100 |     ctx.fillRect(coordX * DIMENSION * PIXELSIZE, coordY * DIMENSION * PIXELSIZE,
101 |       PIXELSIZE * DIMENSION, PIXELSIZE * DIMENSION);
102 |     ctx.fillStyle = '#cccccc';
103 |     ctx.strokeRect(coordX * DIMENSION * PIXELSIZE, coordY * DIMENSION * PIXELSIZE,
104 |       PIXELSIZE * DIMENSION, PIXELSIZE * DIMENSION);
105 |   }
106 | 
107 |   function fillPixel(coord, subcoord, color) {
108 |     let coordX = parseInt(coord[0]);
109 |     let coordY = parseInt(coord[1]);
110 |     let subCoordX = parseInt(subcoord[0]);
111 |     let subCoordY = parseInt(subcoord[1]);
112 |     if (coordX < 0 || coordY < 0 ||
113 |       coordX >= REPEATSX || coordY >= REPEATSY ||
114 |       subCoordX < 0 || subCoordX >= DIMENSION ||
115 |       subCoordY < 0 || subCoordY >= DIMENSION) {
116 |       return;
117 |     }
118 | 
119 |     ctx.fillStyle = color;
120 |     let x = (coordX * DIMENSION + subCoordX) * PIXELSIZE;
121 |     let y = (coordY * DIMENSION + subCoordY) * PIXELSIZE;
122 |     ctx.fillRect(x, y, PIXELSIZE, PIXELSIZE);
123 |   }
124 | });
125 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | require_once 'global.php';
 3 | 
 4 | print <<<EOF
 5 | 
 6 | <!doctype html>
 7 | <html>
 8 | <!-- The core Firebase JS SDK is always required and must be listed first -->
 9 | <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-app.js"></script>
10 | <script src="https://www.gstatic.com/firebasejs/7.11.0/firebase-firestore.js"></script>
11 | 
12 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
13 | <script src="index.js?version=$VERSION"></script>
14 | 
15 | <style>
16 |     body {
17 |         background-color: #f0f0f0;
18 |         margin: 16px;
19 |         font-family: Arial, Helvetica, sans-serif;
20 |     }
21 | 
22 |     #mycanvas {
23 |         border: 1px #000 solid;
24 |         background-color: #fff;
25 |         cursor: pointer;
26 |     }
27 | 
28 |     #mycanvasWrapper {
29 |         position: relative;
30 |     }
31 | 
32 |     #selectedBox {
33 |         border: 1px rgba(0, 50, 100, 0.5) solid;
34 |         background-color: rgba(0, 50, 100, 0.25);
35 |         position: absolute;
36 |         pointer-events: none;
37 |     }
38 | </style>
39 | <script>
40 |     let DIMENSION = $DIMENSION;
41 | </script>
42 | 
43 | <body>
44 |     <h2>Big Canvas Demo</h2>
45 | 
46 |     <div style='padding:8px;color:#222'>
47 |     YouTube video walkthrough: <a href=https://youtu.be/t1aXuJkmTg8>https://youtu.be/t1aXuJkmTg8</a><BR>
48 |     Source code: <a href=https://github.com/techleadhd/bigcanvasdemo>https://github.com/techleadhd/bigcanvasdemo/</a><BR>
49 | <BR>
50 | Looking for more coding tips? <BR>
51 | Join ex-Google/ex-Facebook engineers at
52 |     <a href=http://techinterviewpro.com>http://techinterviewpro.com</a> for interview prep to FANG companies.
53 |     </div>
54 | 
55 |     <div id=mycanvasWrapper>
56 |         <canvas id=mycanvas></canvas>
57 |     </div>
58 | 
59 | </body>
60 | 
61 | </html>
62 | EOF;
63 | 


--------------------------------------------------------------------------------
/save.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/python
 2 | 
 3 | import firebase_admin
 4 | from firebase_admin import credentials
 5 | from firebase_admin import firestore
 6 | import sys
 7 | 
 8 | # Use the application default credentials
 9 | cred = credentials.Certificate("creds.json")
10 | firebase_admin.initialize_app(cred)
11 | 
12 | db = firestore.client()
13 | 
14 | key = sys.argv[1] + ',' + sys.argv[2]
15 | filename = sys.argv[3]
16 | 
17 | f = open(filename, 'r')
18 | value = "\n".join(f.readlines())
19 | data = {
20 |   unicode('data') : unicode(value)
21 | }
22 | 
23 | db.collection(u'app').document(unicode(key)).set(data)
24 | 
25 | print 1
26 | 


--------------------------------------------------------------------------------