diff --git a/README.md b/README.md index fcd9363..2e144e7 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Our program is an extension of the three.js development evironment modified to a ### For Users -If you're interested in trying out Vis yourself, please visit http://vis.ipwnage.com. From there, you'll be able to upload models, add antennas, and modify wireframe status easily. +If you're interested in trying out Vis yourself, please visit our landing page at https://thevindicators.github.io/Vis/ for information regarding our project. You can also head directly over to the application at http://vis.ipwnage.com. From there, you'll be able to upload models, add antennas, and modify wireframe status easily. ### For Developers diff --git a/app/static/css/dark.css b/app/static/css/dark.css index 117390e..3721ef6 100644 --- a/app/static/css/dark.css +++ b/app/static/css/dark.css @@ -109,46 +109,116 @@ select { padding: 8px; } - #menubar .menu .options { - position: fixed; - display: none; - padding: 5px 0; - background: #111; - width: 150px; - max-height: calc(100% - 80px); - overflow: auto; - } - - #menubar .menu:hover .options { - display: block; - } - - #menubar .menu .options hr { - border-color: #222; - } - - #menubar .menu .options .option { - color: #888; - background-color: transparent; - padding: 5px 10px; - margin: 0 !important; - } - - #menubar .menu .options .option:hover { - color: #fff; - background-color: #08f; - } - - #menubar .menu .options .option:active { - background: transparent; - } - - #menubar .menu .options .inactive { - color: #444; - background-color: transparent; - padding: 5px 10px; - margin: 0 !important; - } + #menubar .menu .options { + position: absolute; + display: none; + padding: 5px 0; + background: #eee; + width: 150px; + } + + #menubar .menu:hover .options { + display: block; + } + + #menubar .menu .options hr { + border-color: #ddd; + } + + #menubar .menu .options .option { + color: #666; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options .option:hover { + color: #fff; + background-color: #08f; + } + + #menubar .menu .options .option:active { + color: #666; + background: transparent; + } + + #menubar .menu .options .inactive { + color: #bbb; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options2 { + position: absolute; + display: block; + padding: 5px 0; + background: #eee; + width: 150px; + } + + #menubar .menu:hover .options2 { + display: block; + } + + #menubar .menu .options2 hr { + border-color: #ddd; + } + + #menubar .menu .options2 .option { + color: #666; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options2 .option:hover { + color: #fff; + background-color: #08f; + } + + #menubar .menu .options2 .option:active { + color: #666; + background: transparent; + } + + #menubar .menu .options2 .inactive { + color: #bbb; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options3 { + position: absolute; + display: none; + padding: 5px 0; + background: #eee; + width: 150px; + } + + #menubar .menu .options3 hr { + border-color: #ddd; + } + + #menubar .menu .options3 .option { + color: #666; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options3 .option:active { + color: #666; + background: transparent; + } + + #menubar .menu .options3 .inactive { + color: #bbb; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } #sidebar { position: absolute; diff --git a/app/static/css/light.css b/app/static/css/light.css index ac7b73b..34acb29 100644 --- a/app/static/css/light.css +++ b/app/static/css/light.css @@ -105,47 +105,116 @@ select { padding: 8px; } - #menubar .menu .options { - position: fixed; - display: none; - padding: 5px 0; - background: #eee; - width: 150px; - max-height: calc(100% - 80px); - overflow: auto; - } - - #menubar .menu:hover .options { - display: block; - } - - #menubar .menu .options hr { - border-color: #ddd; - } - - #menubar .menu .options .option { - color: #666; - background-color: transparent; - padding: 5px 10px; - margin: 0 !important; - } - - #menubar .menu .options .option:hover { - color: #fff; - background-color: #08f; - } - - #menubar .menu .options .option:active { - color: #666; - background: transparent; - } - - #menubar .menu .options .inactive { - color: #bbb; - background-color: transparent; - padding: 5px 10px; - margin: 0 !important; - } + #menubar .menu .options { + position: absolute; + display: none; + padding: 5px 0; + background: #eee; + width: 150px; + } + + #menubar .menu:hover .options { + display: block; + } + + #menubar .menu .options hr { + border-color: #ddd; + } + + #menubar .menu .options .option { + color: #666; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options .option:hover { + color: #fff; + background-color: #08f; + } + + #menubar .menu .options .option:active { + color: #666; + background: transparent; + } + + #menubar .menu .options .inactive { + color: #bbb; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options2 { + position: absolute; + display: block; + padding: 5px 0; + background: #eee; + width: 150px; + } + + #menubar .menu:hover .options2 { + display: block; + } + + #menubar .menu .options2 hr { + border-color: #ddd; + } + + #menubar .menu .options2 .option { + color: #666; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options2 .option:hover { + color: #fff; + background-color: #08f; + } + + #menubar .menu .options2 .option:active { + color: #666; + background: transparent; + } + + #menubar .menu .options2 .inactive { + color: #bbb; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options3 { + position: absolute; + display: none; + padding: 5px 0; + background: #eee; + width: 150px; + } + + #menubar .menu .options3 hr { + border-color: #ddd; + } + + #menubar .menu .options3 .option { + color: #666; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } + + #menubar .menu .options3 .option:active { + color: #666; + background: transparent; + } + + #menubar .menu .options3 .inactive { + color: #bbb; + background-color: transparent; + padding: 5px 10px; + margin: 0 !important; + } #sidebar { position: absolute; diff --git a/app/static/js/Editor.js b/app/static/js/Editor.js index 0d0da68..6a15498 100644 --- a/app/static/js/Editor.js +++ b/app/static/js/Editor.js @@ -85,21 +85,25 @@ var Editor = function () { this.scene.name = 'Scene'; this.scene.background = new THREE.Color( 0xaaaaaa ); - this.scene.length = 0; - this.scene.wingspan = 0; - this.scene.height = 0; - this.scene.x_max = 0; - this.scene.x_min = 0; - this.scene.y_max = 0; - this.scene.y_min = 0; - this.scene.z_max = 0; - this.scene.z_min = 0; - this.scene.z_short = 0; - this.scene.y_short = 0; - this.scene.antennaSnapping = false; - this.scene.x_short = [0, 0, 0, 0]; - this.scene.y_short = [0, 0, 0, 0]; - this.scene.z_short = [0, 0, 0, 0]; + this.scene.length = 0; + this.scene.wingspan = 0; + this.scene.height = 0; + this.scene.x_max = 0; + this.scene.x_min = 0; + this.scene.y_max = 0; + this.scene.y_min = 0; + this.scene.z_max = 0; + this.scene.z_min = 0; + this.scene.z_short = 0; + this.scene.y_short = 0; + this.scene.antennaSnapping = false; + this.scene.x_short = [0, 0, 0, 0]; + this.scene.y_short = [0, 0, 0, 0]; + this.scene.z_short = [0, 0, 0, 0]; + this.scene.menu = [null, null, null, null]; + this.scene.posi = [0, 0, 0, 0]; + this.scene.rota = [0, 0, 0 ,0]; + this.scene.scal = [0, 0, 0, 0]; this.sceneHelpers = new THREE.Scene(); @@ -505,6 +509,10 @@ Editor.prototype = { this.scene.x_short = [0, 0, 0, 0]; this.scene.y_short = [0, 0, 0, 0]; this.scene.z_short = [0, 0, 0, 0]; + this.scene.menu = [null, null, null, null]; + this.scene.posi = [0, 0, 0, 0]; + this.scene.rota = [0, 0, 0 ,0]; + this.scene.scal = [0, 0, 0, 0]; while ( objects.length > 0 ) { @@ -1407,6 +1415,16 @@ Editor.prototype = { this.scene.z_max = geo.scale.z * this.scene.z_max; this.scene.z_min = geo.scale.z * this.scene.z_min; + this.scene.posi[0] = geo.position.x; + this.scene.posi[1] = geo.position.y; + this.scene.posi[2] = geo.position.z; + this.scene.rota[0] = geo.rotation.x; + this.scene.rota[1] = geo.rotation.y; + this.scene.rota[2] = geo.rotation.z; + this.scene.scal[0] = geo.scale.x; + this.scene.scal[1] = geo.scale.y; + this.scene.scal[2] = geo.scale.z; + var scale = Math.abs(this.scene.z_max) + Math.abs(this.scene.z_min); // camera scale adjusted and camera view changed in relation to new model var newPos = new THREE.Vector3( scale , scale/2, scale ); this.execute( new SetPositionCommand( this.camera, newPos ) ); @@ -1423,6 +1441,40 @@ Editor.prototype = { array[5] = this.scene.z_min; return array; + }, + + getModelPosition: function (){ // return the initial model position + + return this.scene.posi; + + }, + + getModelRotation: function (){ // return the initial model rotation + + return this.scene.rota; + + }, + + getModelScale: function (){ // return the initial model scale + + return this.scene.scal; + + }, + + setMenubar: function ( file ){ // set reference to the menubar + + var i = 0; + while (this.scene.menu[i] !== null){ + i++; + } + this.scene.menu[i] = file; + + }, + + getMenubar: function (){ // return reference to the menubar + + return this.scene.menu; + } diff --git a/app/static/js/Menubar.Add.js b/app/static/js/Menubar.Add.js index 9977fdf..fd1d5e4 100644 --- a/app/static/js/Menubar.Add.js +++ b/app/static/js/Menubar.Add.js @@ -69,7 +69,14 @@ Menubar.Add = function ( editor ) { option.setTextContent( 'Antenna' ); option.onClick( function () { - if (check === true){ // check if prior button state already displayed + for ( var i = 0; i < 4; i ++ ){ // lock menubar + if ( i !== 2 ){ + editor.getMenubar()[i].setClass( 'options3' ); + } + } + options.setClass( 'options2' ); + + if (check === true){ // check if prior button state already displayed options.newInput(); // if so, remove the display input_pane.remove(input); } @@ -81,6 +88,13 @@ Menubar.Add = function ( editor ) { input.setTextContent("Enter"); input.onClick( function () { + options.setClass( 'options' ); // restore menubar functionality + for ( var i = 0; i < 4; i ++ ){ + if ( i !== 2 ){ + editor.getMenubar()[i].setClass( 'options' ); + } + } + x = input_x.getValue(); // store entered values y = input_y.getValue(); z = input_z.getValue(); @@ -151,6 +165,8 @@ Menubar.Add = function ( editor ) { options.remove(filler); }; - return container; + editor.setMenubar(options); // store menubar configuration + + return container; }; diff --git a/app/static/js/Menubar.Edit.js b/app/static/js/Menubar.Edit.js index 17b7b73..8195b53 100644 --- a/app/static/js/Menubar.Edit.js +++ b/app/static/js/Menubar.Edit.js @@ -78,30 +78,7 @@ Menubar.Edit = function ( editor ) { } ); - // --- - options.add( new UI.HorizontalRule() ); - - // Clone - - /* - var option = new UI.Row(); - option.setClass( 'option' ); - option.setTextContent( 'Clone' ); - option.onClick( function () { - - var object = editor.selected; - - if ( object.parent === null ) return; // avoid cloning the camera or scene - - object = object.clone(); - - editor.execute( new AddObjectCommand( object ) ); - - } ); - options.add( option ); - - */ // Delete @@ -122,89 +99,8 @@ Menubar.Edit = function ( editor ) { } ); options.add( option ); - // Minify shaders - - /* - var option = new UI.Row(); - option.setClass( 'option' ); - option.setTextContent( 'Minify Shaders' ); - option.onClick( function() { - - var root = editor.selected || editor.scene; - - var errors = []; - var nMaterialsChanged = 0; - - var path = []; - - function getPath ( object ) { - - path.length = 0; - - var parent = object.parent; - if ( parent !== undefined ) getPath( parent ); - - path.push( object.name || object.uuid ); - - return path; - - } + editor.setMenubar(options); // store menubar configuration - var cmds = []; - root.traverse( function ( object ) { - - var material = object.material; - - if ( material instanceof THREE.ShaderMaterial ) { - - try { - - var shader = glslprep.minifyGlsl( [ - material.vertexShader, material.fragmentShader ] ); - - cmds.push( new SetMaterialValueCommand( object, 'vertexShader', shader[ 0 ] ) ); - cmds.push( new SetMaterialValueCommand( object, 'fragmentShader', shader[ 1 ] ) ); - - ++nMaterialsChanged; - - } catch ( e ) { - - var path = getPath( object ).join( "/" ); - - if ( e instanceof glslprep.SyntaxError ) - - errors.push( path + ":" + - e.line + ":" + e.column + ": " + e.message ); - - else { - - errors.push( path + - ": Unexpected error (see console for details)." ); - - console.error( e.stack || e ); - - } - - } - - } - - } ); - - if ( nMaterialsChanged > 0 ) { - - editor.execute( new MultiCmdsCommand( cmds ), 'Minify Shaders' ); - - } - - window.alert( nMaterialsChanged + - " material(s) were changed.\n" + errors.join( "\n" ) ); - - } ); - options.add( option ); - - */ - return container; }; diff --git a/app/static/js/Menubar.File.js b/app/static/js/Menubar.File.js index cf78458..177c75c 100644 --- a/app/static/js/Menubar.File.js +++ b/app/static/js/Menubar.File.js @@ -140,6 +140,11 @@ Menubar.File = function ( editor ) { option.setTextContent( 'Import' ); option.onClick( function () { + for ( var i = 1; i < 4; i ++ ){ // lock menubar + editor.getMenubar()[i].setClass( 'options3' ); + } + options.setClass( 'options2' ); + if (check === true){ // check if prior button state already displayed options.newInput(); // if so, remove the display input_pane.remove(input); @@ -152,6 +157,11 @@ Menubar.File = function ( editor ) { input.setTextContent("Enter"); input.onClick( function () { + options.setClass( 'options' ); // restore menubar functionality + for ( var i = 1; i < 4; i ++ ){ + editor.getMenubar()[i].setClass( 'options' ); + } + l = input_l.getValue(); // store entered values and set internal model dimensions w = input_w.getValue(); h = input_h.getValue(); @@ -168,8 +178,8 @@ Menubar.File = function ( editor ) { options.remove(opt1); options.remove(opt2); options.remove(opt3); + options.remove(line) options.remove(opt4); - options.remove(opt5); options.add(input_pane); } ); @@ -488,46 +498,15 @@ Menubar.File = function ( editor ) { } ); options.add( opt3 ); + // Export + var line = new UI.HorizontalRule(); + options.add( line ); var opt4 = new UI.Row(); opt4.setClass( 'option' ); - opt4.setTextContent( 'Export Object' ); + opt4.setTextContent( 'Export Scene' ); opt4.onClick( function () { - var object = editor.selected; - - if ( object === null ) { - - alert( 'No object selected' ); - return; - - } - - var output = object.toJSON(); - - try { - - output = JSON.stringify( output, parseNumber, '\t' ); - output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' ); - - } catch ( e ) { - - output = JSON.stringify( output ); - - } - - saveString( output, 'model.json' ); - - } ); - options.add( opt4 ); - - // Export - - var opt5 = new UI.Row(); - opt5.setClass( 'option' ); - opt5.setTextContent( 'Export Scene' ); - opt5.onClick( function () { - var output = editor.scene.toJSON(); try { @@ -544,163 +523,7 @@ Menubar.File = function ( editor ) { saveString( output, 'scene.json' ); } ); - options.add( opt5 ); - - // - - /* - options.add( new UI.HorizontalRule() ); - - // Export GLTF - - var option = new UI.Row(); - option.setClass( 'option' ); - option.setTextContent( 'Export GLTF' ); - option.onClick( function () { - - var exporter = new THREE.GLTFExporter(); - - exporter.parse( editor.scene, function ( result ) { - - saveString( JSON.stringify( result, null, 2 ), 'scene.gltf' ); - - } ); - - - } ); - options.add( option ); - - // Export OBJ - - var option = new UI.Row(); - option.setClass( 'option' ); - option.setTextContent( 'Export OBJ' ); - option.onClick( function () { - - var object = editor.selected; - - if ( object === null ) { - - alert( 'No object selected.' ); - return; - - } - - var exporter = new THREE.OBJExporter(); - - saveString( exporter.parse( object ), 'model.obj' ); - - } ); - options.add( option ); - - // Export STL - - var option = new UI.Row(); - option.setClass( 'option' ); - option.setTextContent( 'Export STL' ); - option.onClick( function () { - - var exporter = new THREE.STLExporter(); - - saveString( exporter.parse( editor.scene ), 'model.stl' ); - - } ); - options.add( option ); - - // - - options.add( new UI.HorizontalRule() ); - - // Publish - - var option = new UI.Row(); - option.setClass( 'option' ); - option.setTextContent( 'Publish' ); - option.onClick( function () { - - var zip = new JSZip(); - - // - - var output = editor.toJSON(); - output.metadata.type = 'App'; - delete output.history; - - var vr = output.project.vr; - - output = JSON.stringify( output, parseNumber, '\t' ); - output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' ); - - zip.file( 'app.json', output ); - - // - - var manager = new THREE.LoadingManager( function () { - - save( zip.generate( { type: 'blob' } ), 'download.zip' ); - - } ); - - var loader = new THREE.FileLoader( manager ); - loader.load( 'js/libs/app/index.html', function ( content ) { - - var includes = []; - - if ( vr ) { - - includes.push( '' ); - - } - - content = content.replace( '', includes.join( '\n\t\t' ) ); - - zip.file( 'index.html', content ); - - } ); - loader.load( 'js/libs/app.js', function ( content ) { - - zip.file( 'js/app.js', content ); - - } ); - loader.load( '../build/three.min.js', function ( content ) { - - zip.file( 'js/three.min.js', content ); - - } ); - - if ( vr ) { - - loader.load( '../examples/js/vr/WebVR.js', function ( content ) { - - zip.file( 'js/WebVR.js', content ); - - } ); - - } - - } ); - options.add( option ); - - /* - // Publish (Dropbox) - - var option = new UI.Row(); - option.setClass( 'option' ); - option.setTextContent( 'Publish (Dropbox)' ); - option.onClick( function () { - - var parameters = { - files: [ - { 'url': 'data:text/plain;base64,' + window.btoa( "Hello, World" ), 'filename': 'app/test.txt' } - ] - }; - - Dropbox.save( parameters ); - - } ); - options.add( option ); - */ - + options.add( opt4 ); // @@ -732,10 +555,12 @@ Menubar.File = function ( editor ) { options.add(opt1); options.add(opt2); options.add(opt3); + options.add( line ); options.add(opt4); - options.add(opt5); }; + editor.setMenubar(options); // store menubar configuration + return container; }; diff --git a/app/static/js/Menubar.Help.js b/app/static/js/Menubar.Help.js index dda06e6..b2dbf99 100644 --- a/app/static/js/Menubar.Help.js +++ b/app/static/js/Menubar.Help.js @@ -44,6 +44,8 @@ Menubar.Help = function ( editor ) { } ); options.add( option ); + editor.setMenubar(options); // store menubar configuration + return container; }; diff --git a/app/static/js/Sidebar.Object.js b/app/static/js/Sidebar.Object.js index 2bda42d..ecc5352 100644 --- a/app/static/js/Sidebar.Object.js +++ b/app/static/js/Sidebar.Object.js @@ -268,15 +268,6 @@ Sidebar.Object = function ( editor ) { container.add( materialWireframeRow ); - //snap button - var snapButtonRow = new UI.Row(); - var snapButton = new UI.Button( 'Snap' ).setMarginLeft( '7px' ).onClick( function(){} ); - - snapButtonRow.add( new UI.Text( 'Snapping' ).setWidth( '90px ') ); - snapButtonRow.add( snapButton ); - - container.add( snapButtonRow ); - // user data var timeout; diff --git a/app/static/js/Sidebar.Scene.js b/app/static/js/Sidebar.Scene.js index f62013b..cfd4a9f 100644 --- a/app/static/js/Sidebar.Scene.js +++ b/app/static/js/Sidebar.Scene.js @@ -139,7 +139,33 @@ Sidebar.Scene = function ( editor ) { container.add( wingspanRow ); container.add( heightRow ); - // snapping + // Model Reset + + var resetRow = new UI.Row(); + var resetButton = new UI.Button('RESET').onClick( function(){ + + if ( editor.scene.children[1] !== null ) { + var model = editor.scene.children[1]; + model.position.x = editor.getModelPosition()[0]; + model.position.y = editor.getModelPosition()[1]; + model.position.z = editor.getModelPosition()[2]; + model.rotation.x = editor.getModelRotation()[0]; + model.rotation.y = editor.getModelRotation()[1]; + model.rotation.z = editor.getModelRotation()[2]; + model.scale.x = editor.getModelScale()[0]; + model.scale.y = editor.getModelScale()[1]; + model.scale.z = editor.getModelScale()[2]; + signals.objectSelected.dispatch( model ); + } + }); + + resetRow.add( new UI.Text( 'Model Position/Size' ).setWidth( '150px' ) ); + resetRow.add( resetButton ); + + container.add( resetRow ); + + // Antenna Snapping + container.add( new UI.HorizontalRule() ); var isSnapOn = false; var snapRow = new UI.Row(); @@ -153,6 +179,7 @@ Sidebar.Scene = function ( editor ) { snapRow.add( snapBox ); container.add( snapRow ); + // fog function onFogChanged() { diff --git a/app/templates/editor.html b/app/templates/editor.html index 4892840..38946d9 100644 --- a/app/templates/editor.html +++ b/app/templates/editor.html @@ -501,8 +501,11 @@

Hello, and Welcome to Vis: Web Visualizer!

  • To load a previous session, click on File -> Load, then select from the popup box
  • To import a model, go to File -> Import
  • Once imported, adjust the aircraft dimensions on the right to match that of your selected model
    • -
  • To add an antenna, click on Add -> Antenna and then enter in the desired starting coordinates
    • +
  • To import preset antenna positions, press File -> Import Antennas
    • +
  • To add an antenna, click on Add -> Antenna and then enter in the desired starting coordinates - or - check 'Antenna Snapping' to the right and click on the model to add antennas
  • To start a new visualization, press File -> New
    • +
  • You may export antenna patterns to either XML or CSV files using the appropriate buttons under 'File'
    • +
  • Likewise, to export an entire scene (model and antennas) use the 'Export Scene' button
  • When an object is selected, you can adjust various characteristics from 'Object' menu on the sidebar
  • You may also move an antenna along any axis by moving the axis arrows once it's selected
    • diff --git a/misc/models/FA-18 Hornet.txt b/misc/models/FA-18 Hornet.txt index 06acc86..ab75344 100644 --- a/misc/models/FA-18 Hornet.txt +++ b/misc/models/FA-18 Hornet.txt @@ -5,7 +5,7 @@ Wingspan: 11.4 m Height (from nose up): 3.2 m Nose: 0, 0, 0 -L. wing tip: -15.3, 6.5, 0 +L. wing tip: -11.8, 6.5, 0 R. wing tip: -11.8, -5.7, 0 L. Horizontal Tail: -17.1, 3.3, -0.36 R. Horizontal Tail: -17.1, -3.3, -0.36