Ship Design Layout Tool - A Web-based App Prototype

by Henrique M. Gaspar - Associate Professor, ShipLab Aalesund University College
(hega @ hials.no), v0.1, Jun 2015.

Grid size Canvas size - x: y:

Database: simple_blocks.csv maindeck.csv twindeck.csv

Space Information:

Columns:

Rows:

Total Area:

Matches:

Number of Blocks in the Database:

Block Information (click any block):

ID:

Width:

Height:

Block Area:

Space Used:

Connection Wheel:

The lenght of the border is connected to the number of the grid spaces that a block connects with other blocks in its perimeter. The line represents a connection between two blocks, and its thickness is proportional to how many grid spaces these blocks share in their perimeter. Connections are filtered when passing the mouse over the borders of the circle

Databases: simple_block.csv , maindeck.csv , twindeck.csv

About

App: This tool intends to be a proof of concept to demonstrate that it is possible to quickly develop a web-based app for handling ship design layout during conceptual phase. The app reads the blocks from a database (.csv file), plot them into a grid and evaluate their positioning, attributes, neighbors and connections. A connection whell plots the relationship between blocks.
Total work was approximatedely 14 hours, including concept development, coding, debugging, examples, layout detailing and text writing.

This web-based approach allows extended functionalities when compared to a spreadsheet-like version, such as:

  • Pretty much every element can be parametrized and interacted with.
  • It can be available online, being used in any HTML5 compatible browser (desktop, mobile, tablet).
  • A large set of data handling libraries can be used, such as d3, snap and numeric.
  • Possibility of a powerful script language in the backend, to support advanced calculation.

This work will be used for a collaborative research between the Ship Design and Operations Lab @ HIALS and Naval Architecture Research @ UCL.

Features:

  • Currently grid size and canvas size are parametrized. Slide to modify it (layout resets to orginal position).
  • Space information is availble, with total number of rows, columns and total area of the grid.
  • Click on a block to get its information (from database).
  • Click and drag a block to change its position and update its space used information and matches.
  • Space used presents which positions in the grid the block uses.
  • Matches presents how blocks are connected, based on the analysis of their perimeter. Blocks adjacents have a two way match: [A,B] = [B,A] = match. A block totally inserted in another will have a one way match: A inside B, [A,B] = match; [B,A] no match.
  • A connection wheel is presented, reprensenting graphically the perimetral matches. Connections are filtered when passing the mouse over the borders of the circle.