Thu, 06 Apr 2017 15:41:04 +0200
added text info box
stlviewer.css | file | annotate | diff | comparison | revisions | |
stlviewer.html | file | annotate | diff | comparison | revisions | |
stlviewer.js | file | annotate | diff | comparison | revisions |
--- 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
--- 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>
--- 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); + } }); }