159 lines
5.1 KiB
HTML
159 lines
5.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<!--
|
||
|
|
|
||
|
|
Licencse: CC0
|
||
|
|
Full text in LICENSE file and at:
|
||
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||
|
|
|
||
|
|
Get the source at http://bitbucket.org/joruffin/floorspace/
|
||
|
|
|
||
|
|
To the extent possible under law, The Eloquent Peasants have waived all
|
||
|
|
copyright and related or neighboring rights to Floor Space Visualizer.
|
||
|
|
This work is published from: United States.
|
||
|
|
|
||
|
|
-->
|
||
|
|
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<title>Floor Space Visualizer</title>
|
||
|
|
<link href="https://josh47.com/project/floorspace/style.css" rel="stylesheet"/>
|
||
|
|
<script type="text/javascript" src="https://josh47.com/project/floorspace/jquery-1.7.1.min.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
scale = 0.25;
|
||
|
|
ratio = 1.33;
|
||
|
|
th = Math.floor(350 * scale);
|
||
|
|
units = 1;
|
||
|
|
floors = 1;
|
||
|
|
yheight = 1;
|
||
|
|
ty = 1; // Number of tiles fit vertically in surface
|
||
|
|
tx = 1; // Number of tiles fit horizontally in surface
|
||
|
|
|
||
|
|
function resize(){
|
||
|
|
mh = Math.floor(420 * scale);
|
||
|
|
th = Math.floor(350 * scale);
|
||
|
|
$('.tile').height(th);
|
||
|
|
ty = Math.ceil(yheight); // Number of tiles fit vertically in surface
|
||
|
|
tx = Math.ceil(yheight*ratio); // Number of tiles fit horizontally in surface
|
||
|
|
$('#surface').height(th * yheight);
|
||
|
|
$('#surface').width(th * yheight*ratio);
|
||
|
|
//alert("Scale: " + scale + "\nRatio: " + ratio + "\nTX: " + tx + "\nTY: " + ty + "\nTH: " + th + "\nMH: " + mh);
|
||
|
|
}
|
||
|
|
|
||
|
|
function addTile(){
|
||
|
|
x = Math.floor($('.tile').length / ty);
|
||
|
|
y = $('.tile').length % ty;
|
||
|
|
el = $(document.createElement('img'));
|
||
|
|
el.attr('id','sur'+x+y);
|
||
|
|
el.addClass('tile');
|
||
|
|
el.attr('src', 'https://josh47.com/project/floorspace/tile.png');
|
||
|
|
el.width(th);
|
||
|
|
el.height(th);
|
||
|
|
el.attr('alt', 'A 25 square foot floor tile.');
|
||
|
|
el.css('bottom', y * th);
|
||
|
|
el.css('left', x * th);
|
||
|
|
$('#surface').append(el);
|
||
|
|
// xdelay = 150 * ty * x;
|
||
|
|
xdelay = 200 * x;
|
||
|
|
ydelay = 100 * y;
|
||
|
|
el.hide().delay(xdelay+ydelay).fadeTo(300,0.8);
|
||
|
|
}
|
||
|
|
|
||
|
|
function createFloor(){
|
||
|
|
$('#surface').html('');
|
||
|
|
if($('#man').css('display') == 'none') {
|
||
|
|
$('#man').height(0);
|
||
|
|
$('#man').show();
|
||
|
|
};
|
||
|
|
$('#man').animate({height:mh},300,'linear', function(){
|
||
|
|
$('#ratio').fadeIn(300, function(){
|
||
|
|
for( i=0; i < tx * ty; i++) {
|
||
|
|
addTile();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function submitForm(){
|
||
|
|
feet = $('#feet').val();
|
||
|
|
if (feet < 0) return false;
|
||
|
|
floors = $('#floors').val();
|
||
|
|
if (floors < 0) return false;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* Solve:
|
||
|
|
|
||
|
|
height = x;
|
||
|
|
width = ratio*x;
|
||
|
|
units = width * height;
|
||
|
|
units = x * (ratio*x);
|
||
|
|
units = ratio*x*x;
|
||
|
|
units / ratio = x*x;
|
||
|
|
sqrt(units/ratio) = x;
|
||
|
|
*/
|
||
|
|
|
||
|
|
units = feet / floors / 25; // each tile is 25sq feet
|
||
|
|
w = $('#floor').width();
|
||
|
|
h = $('#floor').height(); // fill the surface with
|
||
|
|
yheight = Math.sqrt(units / ratio); // tiles of target size
|
||
|
|
scale = h / 350 / yheight;
|
||
|
|
resize();
|
||
|
|
createFloor();
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
$(document).ready(function(){
|
||
|
|
$(window).resize(resize);
|
||
|
|
resize();
|
||
|
|
$('#submit').click(submitForm);
|
||
|
|
/* $('#ratio').slider({
|
||
|
|
min: 1/2,
|
||
|
|
max: 2*1,
|
||
|
|
step:0.01,
|
||
|
|
value:1.33,
|
||
|
|
slide:function(event, ui){
|
||
|
|
ratio = ui.value;
|
||
|
|
resize();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
*/
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="container">
|
||
|
|
<form id="apt">
|
||
|
|
<label>Square Feet <input id="feet" type="number" name="feet"/></label>
|
||
|
|
<label>Floors <input id="floors" type="number" name="floors" value="1"/></label>
|
||
|
|
<input id="submit" type="Submit" value="Show me"/>
|
||
|
|
</form>
|
||
|
|
<div id="key">
|
||
|
|
<img src="https://josh47.com/project/floorspace/man.png" height="30" width="13" alt="A man icon."/> = 6ft tall,
|
||
|
|
<img src="https://josh47.com/project/floorspace/tile.png" height="30" width="30" alt="A floor tile."/> = 25ft<sup>2</sup> = 5ft per side.
|
||
|
|
</div>
|
||
|
|
<img id="man" src="https://josh47.com/project/floorspace/man.png" height="420" width="220" alt="A six foot man for perspective."/>
|
||
|
|
<div id="floor">
|
||
|
|
<div id="surface"></div>
|
||
|
|
</div>
|
||
|
|
<div id="ratio"></div>
|
||
|
|
<div id="footer">
|
||
|
|
<p xmlns:dct="http://purl.org/dc/terms/" xmlns:vcard="http://www.w3.org/2001/vcard-rdf/3.0#">
|
||
|
|
<a rel="license" href="https://creativecommons.org/publicdomain/zero/1.0/">
|
||
|
|
<img src="https://josh47.com/project/floorspace/80x15.png" style="border-style: none;" alt="CC0" width="80" height="15"/>
|
||
|
|
</a>
|
||
|
|
<br/>
|
||
|
|
To the extent possible under law, <a rel="dct:publisher" href="https://web.archive.org/web/20160305111729/http://eloquentpeasant.net/"><span property="dct:title">The Eloquent Peasants</span></a>
|
||
|
|
have waived all copyright and related or neighboring rights to <span property="dct:title">Floor Space Visualizer</span>.
|
||
|
|
This work is published from: <span property="vcard:Country" datatype="dct:ISO3166" content="US" about="http://eloquentpeasant.net/">United States</span>. Because The Eloquent Peasants' website is no longer functional, this copy of the work is hosted by <a href="https://josh47.com">Josh47.com</a>, and is licensed under LGPLv3. Source code is available <a href="https://dev.josh47.org/Josh47_WebDev/Floorspace">here</a>.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<!--
|
||
|
|
FILE ARCHIVED ON 11:17:29 Mar 05, 2016 AND RETRIEVED FROM THE
|
||
|
|
INTERNET ARCHIVE ON 03:48:11 Feb 19, 2025.
|
||
|
|
JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE, HAS BEEN REMOVED.
|
||
|
|
-->
|