# HG changeset patch
# User mdd
# Date 1491486064 -7200
# Node ID dee15870206a70f779512ef3ba7b30d29eaa23ae
# Parent  800e8da193a77abff07f37183d68b241fed8938c
added text info box

diff -r 800e8da193a7 -r dee15870206a stlviewer.css
--- a/stlviewer.css	Thu Apr 06 15:03:40 2017 +0200
+++ b/stlviewer.css	Thu Apr 06 15:41:04 2017 +0200
@@ -1,50 +1,55 @@
-      body {
-        font-family: Monospace;
-        background-color: #000000;
-        margin: 0px;
-        overflow: hidden;
-      }
+body {
+  font-family: Monospace;
+  background-color: #000000;
+  margin: 0px;
+  overflow: hidden;
+  font-size: 10pt;
+}
+
+h2 {
+  font-size: 12pt;
+}
 
-      #info {
-        color: #fff;
-        position: absolute;
-        top: 10px;
-        width: 100%;
-        text-align: center;
-        z-index: 100;
-        display:block;
+#info {
+  color: #fff;
+  position: absolute;
+  top: 10px;
+  width: 100%;
+  text-align: center;
+  z-index: 100;
+  display:block;
 
-      }
+}
 
-      a { color: skyblue }
-      .button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
-      .highlight { background:orange; color:#fff; }
+a { color: skyblue }
+.button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
+.highlight { background:orange; color:#fff; }
 
-      span {
-        display: inline-block;
-        width: 60px;
-        float: left;
-        text-align: center;
-      }
+span {
+  display: inline-block;
+  width: 60px;
+  float: left;
+  text-align: center;
+}
 
       
-  #sortable1, #sortable2 {
-    border: 1px solid #eee;
-    width: 142px;
-    /*min-height: 20px;*/
-    list-style-type: none;
-    margin: 0;
-    padding: 5px 0 0 0;
-    float: left;
-    margin-right: 10px;
-  }
-  #sortable1 li, #sortable2 li {
-    margin: 0 5px 5px 5px;
-    padding: 5px;
-    font-size: 1.2em;
-    width: 120px;
-    background: rgba(0,0,0,0.5);
-  }
+#sortable1, #sortable2 {
+  border: 1px solid #eee;
+  width: 142px;
+  /*min-height: 20px;*/
+  list-style-type: none;
+  margin: 0;
+  padding: 5px 0 0 0;
+  float: left;
+  margin-right: 10px;
+}
+#sortable1 li, #sortable2 li {
+  margin: 0 5px 5px 5px;
+  padding: 5px;
+  font-size: 1.2em;
+  width: 120px;
+  background: rgba(0,0,0,0.5);
+}
 
 .listcontainer {
   width: 157px;
@@ -61,4 +66,22 @@
 }
 .listcontainer span {
 
+}
+
+#infocontainer {
+  width: 300px;
+  padding-left: 10px;
+  padding-bottom: 10px;
+  overflow-y: auto;
+  overflow-x: auto;
+  float: right;
+  border: 1px solid #eee;
+  color: #fff;
+  background: rgba(0,0,0,0.5);
+  text-align: left;
+}
+#infocontainer ul {
+  margin-left: 0;
+  padding: 0;
+  list-style-position: inside;
 }
\ No newline at end of file
diff -r 800e8da193a7 -r dee15870206a stlviewer.html
--- a/stlviewer.html	Thu Apr 06 15:03:40 2017 +0200
+++ b/stlviewer.html	Thu Apr 06 15:41:04 2017 +0200
@@ -33,12 +33,16 @@
 				</ul>
 			</div>
 
-            <a href="https://neo-soft.org" target="_blank">NeoSoft</a> ScubaTools -  
-			<a href="https://threejs.org/" target="_blank">three.js</a> -
-			STL loader by <a href="https://github.com/aleeper" target="_blank">aleeper</a>.
-            <br/>
-            Left mouse: rotate camera, right mouse: move camera, middle mouse or wheel: zoom
+			<div id="infocontainer">
+			</div>
 
+			<div>
+				<a href="https://neo-soft.org" target="_blank">NeoSoft</a> ScubaTools -  
+				<a href="https://threejs.org/" target="_blank">three.js</a> -
+				STL loader by <a href="https://github.com/aleeper" target="_blank">aleeper</a>.
+				<br/>
+				Left mouse: rotate camera, right mouse: move camera, middle mouse or wheel: zoom
+			</div>
 
 		</div>
 
diff -r 800e8da193a7 -r dee15870206a stlviewer.js
--- a/stlviewer.js	Thu Apr 06 15:03:40 2017 +0200
+++ b/stlviewer.js	Thu Apr 06 15:41:04 2017 +0200
@@ -65,22 +65,39 @@
             //console.log(data);
             // remove all meshes
             clear_scene();
+            var content = "<h2>Material:</h2><ul>";
+            var weight = 0.0;
+            var length = 0;
+            var volume = 0;
             // append the objects with positioning
             for (i = 0; i<data.objects.length; i++) {
                 var obj = data.objects[i];
+                content += "<li>";
                 if (obj[5] == "") {
                     // spacer
                     filename = "stl/spacer_" + obj[4][0] + '.stl';
                     material = 'm_spacer';
+                    content += "Spacer: " + obj[4][0] + " (" + obj[4][1] + "mm)"
                 } else {
                     // cylinder
                     filename = "stl/cylinder_" + obj[5] + '.stl';
                     material = 'm_cylinder';
+                    content += "Cylinder: " + obj[4][4] + " (" + obj[4][0] + "mm)"
+                    weight += obj[4][3];
+                    volume += obj[4][2];
+                    if (obj[4][1] > length) length = obj[4][1];
                 }
                 position = [data.scale3d * 0.01 * obj[0], 0, 0];
                 loadSTL(filename, material + "", position);
+                content += "</li>"
             }
 
+            content += "</ul><br/>Total cylinder weight: " + Math.ceil(weight) + " kg<br/>";
+            content += "Total cylinder volume: " + Math.floor(volume) + " ℓ<br/>";
+            content += "Max cylinder length: " + Math.ceil(length / 10) + " cm<br/>" 
+
+            $("#infocontainer").html(content);
+
         }
     });
 }