Sample Drawing on Firebase Code

Posted on by 
<!DOCTYPE html>
<head>
  <title>Firebase Counter Demo</title>

  <!-- inline style (could be replaced with a linked .css file -->
  <style>
    button { 
        border:1px solid gray;
        width:40px; 
        padding:10px 10px;
          margin-bottom:5px;
    }

    body {
        font-size:180%;
        font-family:"Open Sans";
    }

    .dot {
      position:absolute;
      height:6px;
      width:6px;
      background-color:black;
      border-radius:50%;
    }
  </style>

  <!-- load firebase and jquery code -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<!-- firebase interaction code -->
<script>
  var j = jQuery.noConflict();

  var randomColor = Math.floor(Math.random() * 128);
  
  // PUT YOUR CONFIG HERE

  firebase.initializeApp(config);

  var db = firebase.database();
  var dot = db.ref("dot");
  var erase = db.ref("erase");

  dot.on('value',function(dataSnapshot) {
    var rawData = dataSnapshot.val(); // "300,100"
    var xyData = rawData.split(',');
    var x = xyData[0];
    var y = xyData[1];

    var newDot = j("<div class='dot'></div>");
    newDot.css("left", x+"px");
    newDot.css("top", y+"px");
    //newDot.css("background-color",100);
    j('#container').append(newDot);
  });

  erase.on('value',function() {
    j('.dot').remove();
  });


  // runs when the page is fully loaded
  j(document).ready(function() {
    j(document).keypress(function() {
      erase.set(Math.random());
    });



    j(document).mousemove(function(e) {
      var position = e.pageX+","+e.pageY;

      dot.transaction(function() {
        return position;
      });

    });
  });


</script>

  <!-- finally, our HTML -->
  <div id="container">
    <div id="log"></div>
  </div>

</body>
</html>

Comments are closed.