add tare

index.html

@@ -30,6 +30,17 @@
       text-align: center;
       font-size: 24px;
     }
+    
+    #tare {
+      position: fixed;
+      top: 10px;
+      left: 10px;
+      display: none;
+    }
+    
+    #tare h1 {
+      margin: 5px;
+    }
   </style>
 </head>
 
@@ -37,9 +48,13 @@
   <div id="forcearea">
     0 grams
   </div>
+  <button id="tare">
+    <h1>Tare</h1>
+  </button>
   <script>
     // based on https://github.com/freinbichler/3d-touch
     var element = document.getElementById('forcearea');
+    var tareVal;
 
     function onTouchStartMove(e) {
       e.preventDefault();
@@ -74,8 +89,12 @@
       } else {
         forceValue = 0;
       }
+      document.getElementById("tare").style.display = "inline-block";
+      element.innerHTML = (Math.round(forceValue * 385) - tareVal) + " grams";
+    }
 
-      element.innerHTML = Math.round(forceValue * 385) + " grams";
+    function tare() {
+      tareVal = parseInt(element.innerHTML);
     }
 
     (function() {
@@ -84,6 +103,7 @@
       element.addEventListener('touchend', onTouchEnd, false);
       element.addEventListener('webkitmouseforcewillbegin', checkMacForce, false);
       element.addEventListener('webkitmouseforcechanged', checkMacForce, false);
+      document.getElementById("tare").addEventListener("click", tare, false);
     })();
   </script>
 </body>