diff --git a/src/Madeleine.js b/src/Madeleine.js index ee2105f..5526637 100644 --- a/src/Madeleine.js +++ b/src/Madeleine.js @@ -2,15 +2,15 @@ * @author Junho Jin[junho.jin@kaist.ac.kr] | https://github.com/JinJunho * @version 1.0.0 * - * [Project] Madeleine.js, Pure JavaScript STL Parser & Renderer. + * [Project] Madeleine.js, Pure JavaScript STL Parser & Renderer. * - * [Description] Madeleine.js constists of three part: DataReader, Madeleine and Lily. + * [Description] Madeleine.js constists of three part: DataReader, Madeleine and Lily. * DataReader is a helper function to read binary data, which is a customized version - * of DataView. Lily is a helper Object that manages created Madeleines and logs + * of DataView. Lily is a helper Object that manages created Madeleines and logs * messages to console. Madeleine is the part that deals with actual parsing, rendering * and showing your stl files. Customize them however you want. This project is under * MIT License (see the LICENSE file for details). You are allowed to do anything with - * this code, as long as you leave the attribution (MUST!). It will be glad if you + * this code, as long as you leave the attribution (MUST!). It will be glad if you * contact me for any bug you found or interesting ideas to do with Madeleine.js. * I'm willing to co-work with you! */ @@ -27,8 +27,9 @@ var OBJECT_MATERIAL = "matt"; var OBJECT_STATUS = false; - var OBJECT_BACKGROUND = "DADADA"; - var OBJECT_COLOR = "FF9900"; + //var OBJECT_BACKGROUND = "DADADA"; + var OBJECT_BACKGROUND = "2E323E"; + var OBJECT_COLOR = "00A0E1"; var CAMERA_SIGHT = 45; var CAMERA_NEARFIELD = 1; @@ -37,14 +38,14 @@ var VIEWER_THEME = "default"; var VIEWER_PREFIX = "mad-"; var VIEWER_CREATE = true; - var VIEWER_HEIGHT = 400; - var VIEWER_WIDTH = 640; + var VIEWER_HEIGHT = 625; //400 + var VIEWER_WIDTH = 1000; //640 var USER_ROTATE_SENSITIVITY = 0.005; var USER_ZOOM_SENSITIVITY = 100; var SCROLL_FACTOR = 10; - - // Necessary option check + + // Necessary option check if (!document.getElementById(options.target)) { console.log("MADELEINE[ERR] Target must be a valid DOM Element."); return null; @@ -97,7 +98,7 @@ this.type = options.type ? options.type : 'file'; this.container = document.getElementById(this.__containerID); this.relPath = options.path ? options.path + (options.path[options.path.length-1] == "/" ? "" : "/") : "./"; - // User configuration + // User configuration this.options = Lily.extend(true, {}, { // Default option material : OBJECT_MATERIAL, showStatus : OBJECT_STATUS, @@ -148,7 +149,7 @@ // Top-left corner is (0, 0) // e.clientX grows as mouse goes down // e.clientY grows as mouse goes right - + //IMPROVED move object on wheel drag and rotate with left mouse drag if (e.which == 1) {//left button mouse scope.rotateObjectZ(scope.mouseX - e.clientX); @@ -220,19 +221,20 @@ // Initialize rendering Madeleine.prototype.init = function() { - + //IMPROVE callbackstart process i.e.: show another loader in other scope if (this.options.callbackstart) this.options.callbackstart(); - - // Get file name + + // Get file name this.__info.name = (typeof this.data == "string") ? this.data.split("/").slice(-1)[0] : this.data.name; // If create new viewer, set canvas size to the viewer. - if (this.options.viewer.create) { - this.__height = this.options.viewer.height; - this.__width = this.options.viewer.width; - // Get target width and height, otherwise. - } else if (document.defaultView && document.defaultView.getComputedStyle) { + if (this.options.viewer.create) { + this.__height = this.options.viewer.height; + this.__width = this.options.viewer.width; + // Get target width and height, otherwise. + } else + if (document.defaultView && document.defaultView.getComputedStyle) { this.__height = parseFloat(document.defaultView.getComputedStyle(this.container,null).getPropertyValue('height')); this.__width = parseFloat(document.defaultView.getComputedStyle(this.container,null).getPropertyValue('width')); } else { @@ -251,7 +253,7 @@ this.__sizeRatio, this.options.camera.near, this.options.camera.far - ); + ); // Set user's point-of-view and default camera position this.__camera.position.set(0, 0, 0); @@ -280,7 +282,7 @@ // Wait until data is fully loaded var queued = (function(scope) { return function() { - // When data ready, parse and render it. + // When data ready, parse and render it. scope.run(scope.relPath + "lib/MadeleineLoader.js", { arrbuf: scope.__arrayBuffer, rawtext: scope.__rawText @@ -327,12 +329,12 @@ //IMPROVED callback end i.e: hide loading of another scope if (scope.options.callbackend) scope.options.callbackend(); - + }); }; })(this); - // Check input type and get STL Binary data + // Check input type and get STL Binary data switch (this.type) { case "upload": this.getDataFromBlob(this.data, queued);break; @@ -376,7 +378,7 @@ } }; - // Get arrayBuffer from external file + // Get arrayBuffer from external file Madeleine.prototype.getDataFromUrl = function(url, queuedWork, type) { var scope = this; var getArrayBuffer = function() { @@ -495,7 +497,7 @@ new THREE.WebGLRenderer({ preserveDrawingBuffer: true, alpha: true - }) : new THREE.CanvasRenderer(); + }) : new THREE.CanvasRenderer(); // attach canvas to viewer this.__canvas = this.__renderer.domElement; this.__viewer.appendChild(this.__canvas); @@ -517,12 +519,14 @@ this.__viewer.id = this.options.viewer.prefix + this.__uniqueID; // Force viewer size - this.container.style["max-height"] = this.__height+"px"; - this.container.style["min-height"] = this.__height+"px"; - this.__viewer.style["max-height"] = this.__height+"px"; - this.__viewer.style["min-height"] = this.__height+"px"; - this.__viewer.style["max-width"] = this.__width+"px"; - this.__viewer.style["min-width"] = this.__width+"px"; + //this.container.style["max-height"] = this.__height+"px"; + //this.container.style["min-height"] = this.__height+"px"; + //this.__viewer.style["max-height"] = this.__height+"px"; + //this.__viewer.style["min-height"] = this.__height+"px"; + //this.__viewer.style["max-width"] = this.__width+"px"; + this.__viewer.style["max-width"] = "100%"; + //this.__viewer.style["min-width"] = this.__width+"px"; + this.__viewer.style["min-width"] = "50%"; this.__viewer.style.height = this.__height; this.__viewer.style.width = this.__width; @@ -550,7 +554,8 @@ // Viewer iconGrid var iconGrid = document.createElement("div"); iconGrid.style.cssText += "background:transparent;position:absolute;padding:15px 10px;"; - iconGrid.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;"; + //iconGrid.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;"; + iconGrid.style.cssText += "height:50px;width:100%;top:0;overflow:hidden;"; iconGrid.className += "box"; var logo = document.createElement("div"); @@ -579,7 +584,8 @@ var player = document.createElement("div"); rotator.style.cssText += "background:transparent;position:absolute;padding:15px 10px;right:0;"; - rotator.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;"; + //rotator.style.cssText += "height:50px;width:"+this.__width+"px;top:0;overflow:hidden;"; + rotator.style.cssText += "height:50px;width:100%;top:0;overflow:hidden;"; rotator.style.cssText += "margin-top:"+(this.__height-30)+"px;"; player.className += "icon-clickable pull-right icon-mad-stop"; @@ -596,7 +602,7 @@ var left = document.createElement("div"); var down = document.createElement("div"); var up = document.createElement("div"); - + iconGrid.appendChild(fullscreen); //iconGrid.appendChild(download); iconGrid.appendChild(capture); @@ -626,7 +632,7 @@ // Adapt theme switch (theme) { case "dark": - this.__viewer.style.background = "#000000"; + this.__viewer.style.background = "#000000"; this.options.objectColor = "FFD300"; break; case "lime": @@ -691,7 +697,7 @@ "background: -o-radial-gradient(center, ellipse cover, BRIGHT POS1%, DARK POS2%);" + "background: -ms-radial-gradient(center, ellipse cover, BRIGHT POS1%, DARK POS2%);" + "background: radial-gradient(ellipse at center, BRIGHT POS1%, DARK POS2%);" + - "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='BRIGHT', endColorstr='DARK',GradientType=1)"; + "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='BRIGHT', endColorstr='DARK',GradientType=1)"; if (colors.dark) { darker = this.getHexString(colors.dark); @@ -711,7 +717,7 @@ Madeleine.prototype.getHexColor = function() { var code = arguments.length == 3 ? [arguments[0], arguments[1], arguments[2]] : arguments[0]; var color = this.getHexString(code); - return parseInt(color.replace(/\#/g, ''), 16); + return parseInt(color.replace(/\#/g, ''), 16); }; // Get Hex-style string (#XXXXXX format) @@ -777,7 +783,7 @@ (adjustedB.toString(16)).substr(1); }; - // Add new background worker + // Add new background worker Madeleine.prototype.run = function(path, luggage, onload) { var progressBar = document.getElementById("progressBar-"+this.__uniqueID); var worker = new WorkerFacade(path); @@ -794,7 +800,8 @@ if (CONVERT_TO_BINARY) scope.run(scope.relPath + "lib/MadeleineConverter.js", result.data, function(result) { scope.__converted = result }); break; case "progress": - progressBar.style.width = (scope.__width * result.data / 100) + "px"; + //progressBar.style.width = (scope.__width * result.data / 100) + "px"; + progressBar.style.width = (result.data) + "%"; if (result.data == 100) { progressBar.style["-webkit-opacity"] = 0; progressBar.style["-moz-opacity"] = 0; @@ -862,7 +869,7 @@ this.__rotating && this.rotateObjectZ(-1); this.__renderer.render(this.__scene, this.__camera); }; - + // Move object in xy //IMPROVED let oldX = 0, oldY = 0; Madeleine.prototype.moveObject = function ($event, delta) { @@ -938,9 +945,9 @@ Lily.bind(this.container, "mousewheel", this.scrollHandler); Lily.bind(this.container, "DOMMouseScroll", this.scrollHandler); Lily.bind(this.container, "gesturechange", this.gestureHandler); - }; + }; - // Enable Madeline Viewer to be controlled by mouse movement + // Enable Madeline Viewer to be controlled by mouse movement Madeleine.prototype.enableUserInteraction = function() { // block right click action Lily.bind(this.container, "contextmenu", this.rightClickHandler); @@ -953,9 +960,9 @@ Lily.bind(this.container, "touchstart", this.touchStartHandler); Lily.bind(this.container, "touchmove", this.touchMoveHandler); Lily.bind(this.container, "touchend", this.touchEndHandler); - }; + }; - // Disable Madeline Viewer to be controlled by mouse movement + // Disable Madeline Viewer to be controlled by mouse movement Madeleine.prototype.disableUserInteraction = function() { if (!this.__movable) return; // attach event handler @@ -966,9 +973,9 @@ Lily.remove(this.container, "touchstart", this.touchStartHandler); Lily.remove(this.container, "touchmove", this.touchMoveHandler); Lily.remove(this.container, "touchend", this.touchEndHandler); - }; + }; - // Enable first-person viewer mode + // Enable first-person viewer mode Madeleine.prototype.enableFirstPersonViewerMode = function() { this.disableUserInteraction(); Lily.bind(document, "keypress", this.firstPersonHandler); @@ -977,18 +984,18 @@ this.__rotating = false; this.__zoomable = false; this.__movable = false; - }; + }; - // Disable first-person viewer mode + // Disable first-person viewer mode Madeleine.prototype.disableFirstPersonViewerMode = function() { this.enableUserInteraction(); this.__firstPerson = false; this.__rotating = true; this.__zoomable = true; this.__movable = true; - }; + }; - // Adjust camera zoom in/out + // Adjust camera zoom in/out Madeleine.prototype.cameraZoom = function() { if (!this.__zoomable) return; else { @@ -1026,7 +1033,7 @@ this.__status = null; }; - // Adjust material, camera settings and sensitivities to have proper values + // Adjust material, camera settings and sensitivities to have proper values Madeleine.prototype.adjustUserConfiguration = function() { this.adjustRotateSensitivity(); this.adjustZoomSensitivity(); @@ -1034,14 +1041,14 @@ this.checkMaterial(); }; - // Check material + // Check material Madeleine.prototype.checkMaterial = function() { if (this.options.material !== "skin" || this.options.material !== "wire") { this.options.material !== "skin"; } }; - // Adjust camera settings to fit into proper range + // Adjust camera settings to fit into proper range Madeleine.prototype.adjustFocalPoint = function() { var sight = this.options.camera.sight; var near = this.options.camera.near; @@ -1055,7 +1062,7 @@ else this.options.camera.far = CAMERA_FARFIELD; }; - // Adjust zoom sensitivity to fit into proper range + // Adjust zoom sensitivity to fit into proper range Madeleine.prototype.adjustZoomSensitivity = function() { var intensity = this.options.zoomSensitivity; var visibleField = this.options.camera.far - this.options.camera.near; @@ -1064,7 +1071,7 @@ else this.options.zoomSensitivity = visibleField/1000; }; - // Adjust rotate sensitivity to fit into proper range + // Adjust rotate sensitivity to fit into proper range Madeleine.prototype.adjustRotateSensitivity = function(intensity) { var intensity = this.options.rotateSensitivity; @@ -1096,7 +1103,7 @@ directionalLight.shadowBias = -0.005; directionalLight.shadowDarkness = 0.15; }; - + //Set position Madeleine.prototype.setXY = function (X, Y) {//IMPROVED this.__object.position.setY(Y); @@ -1188,7 +1195,7 @@ hasOwn = Object.prototype.hasOwnProperty, push = Array.prototype.push, slice = Array.prototype.slice, - trim = String.prototype.trim, + trim = String.prototype.trim, indexOf = Array.prototype.indexOf, class2type = {"[object Boolean]": "boolean","[object Number]": "number","[object String]": "string","[object Function]": "function", "[object Array]": "array","[object Date]": "date","[object RegExp]": "regexp","[object Object]": "object"}, @@ -1284,13 +1291,13 @@ return this.sisters[index]; }; - return new Lily(); + return new Lily(); })(); })(); -/* A facade for the Web Worker API that fakes it in case it's missing. +/* A facade for the Web Worker API that fakes it in case it's missing. * Good when web workers aren't supported in the browser, but it's still fast enough, * so execution doesn't hang too badly (e.g. Opera 10.5). * By Stefan Wehrmeyer, licensed under MIT @@ -1333,12 +1340,12 @@ if(!!window.Worker){ } }; document.body.appendChild(scr); - + var binaryscr = document.createElement("SCRIPT"); binaryscr.src = thingiurlbase + '/binaryReader.js'; binaryscr.type = "text/javascript"; document.body.appendChild(binaryscr); - + return theworker; }; that.fake = true;