Skip to content

Commit

Permalink
Merge pull request #17 from shiplab/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@EliasHasle
EliasHasle authored Nov 10, 2017
2 parents 4e2c5d6 + 52521bb commit a3d9a1b
Show file tree
Hide file tree
Showing 18 changed files with 7,625 additions and 602 deletions.
577 changes: 344 additions & 233 deletions build/Vessel.js
View file

Large diffs are not rendered by default.

1,653 changes: 1,653 additions & 0 deletions build/archive/Vessel_201710180913.98f5c.js
View file

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion build/makeBuild.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
loadShip: loadShip,
downloadShip: downloadShip,
f: {
linearFromArrays: linearFromArrays
linearFromArrays: linearFromArrays,
bilinear: bilinear
}
});
})();
Expand Down
317 changes: 317 additions & 0 deletions examples/Hull_hydrostatics.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,317 @@
<!-- @MrEranwe @EliasHasle -->

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Hull Hydrostatics</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery Version 1.11.1 -->
<script src="js/libs/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/libs/bootstrap.min.js"></script>

<!-- D3JavaScript -->
<script src="js/libs/d3_v4.9.1.js"></script>

<!-- Graphical user interface -->
<script src="js/libs/dat.gui.min.js"></script>

<!-- Three script -->
<script src="js/libs/three.js"></script>
<script src="js/libs/STLLoader.js"></script>
<script src='js/libs/OrbitControls.js'></script>

<!--Import library-->
<script src="../build/Vessel.js"></script>

<!-- Prettyprinting of JSON data -->
<script type="text/javascript" src="js/libs/renderjson.js"></script>

<!--Ship3D class for three.js-->
<script src="js/Ship3D.js"></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/js/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/js/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-inverse">
<div class="container">
<!-- Add the <div>[Something]</div> structure for each header in the navbar-->
<div class="navbar-header">
<a class="navbar-brand" href="https://github.com/shiplab/vesseljs">Github project page</a>
</div>
<!-- This is for the right part of the navbar. Reserved for Shiplab logo-->
<div class="nav navbar-nav navbar-right">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.shiplab.hials.org/"><img src="images/barquinho.png" alt="Shiplab logo" style="height:150%">
</a>
</div>
</div>
</div>
</nav>

<!-- Container creates the space -->
<div class="container">

<!-- Row creates horizontal groups of columns -->
<div class="row">

<!-- choose horizontal layout in https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp-->

<!-- No divisions in page. Only 1 column. -->
<div class="col-md-12 text-center">
<h2>Hull Hydrostatics</h2>
</div>

<div class="col-md-12 text-center">

<!-- Link the GitHub page if you have one. Add a pdf of how the project works if necessary. Just put it inside the same folder and call it how_to.pdf -->
<!--<h1>Hull Hydrostatics</h1>-->
<p>Interactive calculation of hull hydrostatic properties.</p>

<p>Developed by: Elias Hasle, Vicente Alejandro Iváñez Encinas and Henrique M. Gaspar. Visualization made using three.js.</p>

</div>

<div class="col-md-12 text-left">
<h2>Input</h2>
<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>
<br>
</div>

<div class="col-md-12 text-left">
<h2>3D orbit view of hull</h2>
</div>
<div id="3d" class="col-md-12 text-left" style="min-height: 80vh">
</div>

</div>
<div class="col-md-12 text-left">
<h2>Hydrostatic Properties</h2>
<table class="table">
<thead>
<tr>
<th>Variable</th>
<th>Results</th>
</tr>

</thead>
<body>
<tr>
<td>Draft Amidships (m)</td>
<td id="draftc"></span></td>
</tr>
<tr>
<td>Displacement (t)</td>
<td id="dispc"></span></td>
</tr>
<tr>
<td>Waterline Length (m)</td>
<td id="lwlc"></span></td>
</tr>
<tr>
<td>Maximum Waterline Breadth (m)</td>
<td id="bwlc"></span></td>
</tr>
<tr>
<td>Waterplane Area (m<sup>2</sup>)</td>
<td id="Awpc"></span></td>
</tr>
<tr>
<td>Cb</td>
<td id="cbc"></span></td>
</tr>
<tr>
<td>KB (m) <b>WRONG VALUE</b></td>
<td id="KBc"></span></td>
</tr>
<tr>
<td>BM (m) <b>WRONG VALUE</b></td>
<td id="BMc"></span></td>
</tr>
<tr>

</body>

</table>
</div>
</div>
</div>

<script>
"use strict";

// Create scene+
var renderer, scene, camera, controls, ship3D, ocean;
var gui = new dat.GUI();

//Ready renderer and scene
(function (){
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0xA9CCE3, 1);

// get the div that will hold the renderer
var container = document.getElementById('3d');
//renderer.setSize(container.clientWidth, container.clientHeight);
// add the renderer to the div
container.appendChild(renderer.domElement);

scene = new THREE.Scene();

//Camera and controls:
camera = new THREE.PerspectiveCamera(50);
camera.up.set(0,0,1);
scene.add(camera);
controls = new THREE.OrbitControls(camera, renderer.domElement);

//Respond to window resize:
function onResize() {
renderer.setSize(container.clientWidth, container.clientHeight);
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
}
window.addEventListener("resize", onResize);
onResize(); //Ensure the initial setup is good too

//Add lights:
scene.add(new THREE.AmbientLight(0xffffff,0.3));
scene.add(function() {
let sun = new THREE.DirectionalLight(0xffffff,1);
sun.position.set(1,1,1);
return sun;
}());

//Add rudimentary ocean, to see effect of draft changes:
ocean = new THREE.Mesh(new THREE.PlaneBufferGeometry(1000,1000), new THREE.MeshPhongMaterial({color: 0x2222bb}));
scene.add(ocean);
var grid = new THREE.GridHelper(1000, 100);
grid.rotation.x = 0.5*Math.PI;
grid.position.z = 0.01;
scene.add(grid);

})();

// read file from user
function readSingleFile(e){
var file = e.target.files[0];
if (!file) {
return;
}

var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
//call common function for user files and server files
useFileData(contents);
};
reader.readAsText(file);
}

//Load sample file:
new THREE.FileLoader().load("data/ship_specifications/prysmaticHull.JSON", useFileData);

function useFileData(contents) {
var shipspec = JSON.parse(contents);
displayContents(shipspec);
var ship = new Vessel.Ship(shipspec);
if (ship3D !== undefined) {
scene.remove(ship3D);
}
ship3D = new Ship3D(ship, "data/STL files");
scene.add(ship3D);

let LOA = ship.structure.hull.attributes.LOA;
camera.position.set(0.7*LOA, 0.7*LOA, 0.7*LOA);
controls.target = new THREE.Vector3(LOA/2,0,0);
controls.update();

//calculate hydrostatics
let {KB: KBc, BM: BMc} = ship.calculateStability();
let {LWL: lwlc, Cb: cbc, BWL: bwlc, Awp: Awpc} = ship.structure.hull.calculateAttributesAtDraft(ship.designState.calculationParameters.Draft_design);
let dispc = lwlc * bwlc * cbc * ship.designState.calculationParameters.Draft_design;

document.getElementById("KBc").innerHTML = KBc.toFixed(3);
document.getElementById("BMc").innerHTML = BMc.toFixed(3);
document.getElementById("draftc").innerHTML = ship.designState.calculationParameters.Draft_design.toFixed(3);
document.getElementById("lwlc").innerHTML = lwlc.toFixed(3);
document.getElementById("bwlc").innerHTML = bwlc.toFixed(3);
document.getElementById("Awpc").innerHTML = Awpc.toFixed(3);
document.getElementById("cbc").innerHTML = cbc.toFixed(3);
document.getElementById("dispc").innerHTML = dispc.toFixed(3);

gui.add(ship.designState.calculationParameters, "Draft_design", 0, 4, 0.01).onChange(function (value) {
let {KB: KBc, BM: BMc} = ship.calculateStability();
let {LWL: lwlc, Cb: cbc, BWL: bwlc, Awp: Awpc} = ship.structure.hull.calculateAttributesAtDraft(ship.designState.calculationParameters.Draft_design);
let dispc = lwlc * bwlc * cbc * ship.designState.calculationParameters.Draft_design;

document.getElementById("KBc").innerHTML = KBc.toFixed(3);
document.getElementById("BMc").innerHTML = BMc.toFixed(3);
document.getElementById("draftc").innerHTML = ship.designState.calculationParameters.Draft_design.toFixed(3);
document.getElementById("lwlc").innerHTML = lwlc.toFixed(3);
document.getElementById("bwlc").innerHTML = bwlc.toFixed(3);
document.getElementById("Awpc").innerHTML = Awpc.toFixed(3);
document.getElementById("cbc").innerHTML = cbc.toFixed(3);
document.getElementById("dispc").innerHTML = dispc.toFixed(3);
ship3D.position.z = -ship.designState.calculationParameters.Draft_design;

});

animate();

}

function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}

// display pretty JSON
function displayContents(jsonData) {
let fileCont = document.getElementById("file-content");
fileCont.innerHTML = "";
fileCont.appendChild(
renderjson(jsonData)
);
}

// Catch file browse
document.getElementById('file-input')
.addEventListener('change', readSingleFile, false)

//compare values


</script>
<!-- /.container -->



<!-- Insert own scripts here -->


</body>

</html>
Loading

0 comments on commit a3d9a1b

Please sign in to comment.