Published source code to dev.josh47 repository
This commit is contained in:
parent
024ed6dd61
commit
b70317b1e0
BIN
floorspace/80x15.png
Normal file
BIN
floorspace/80x15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 281 B |
159
floorspace/index.html
Normal file
159
floorspace/index.html
Normal file
@ -0,0 +1,159 @@
|
||||
<!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.
|
||||
-->
|
||||
4
floorspace/jquery-1.7.1.min.js
vendored
Normal file
4
floorspace/jquery-1.7.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
floorspace/man.png
Normal file
BIN
floorspace/man.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
96
floorspace/style.css
Normal file
96
floorspace/style.css
Normal file
@ -0,0 +1,96 @@
|
||||
html,body {
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body {
|
||||
font-family: "Droid Serif", serif;
|
||||
font-size: 22pt;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
/* color: #43F2FD; */
|
||||
background: #64ade5; /* Old browsers */
|
||||
background: -moz-linear-gradient(top, #64ade5 0%, #1e5799 100%); /* FF3.6+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#64ade5), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
|
||||
background: -webkit-linear-gradient(top, #64ade5 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-linear-gradient(top, #64ade5 0%,#1e5799 100%); /* Opera 11.10+ */
|
||||
background: -ms-linear-gradient(top, #64ade5 0%,#1e5799 100%); /* IE10+ */
|
||||
background: linear-gradient(top, #64ade5 0%,#1e5799 100%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64ade5', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
a, a:visited {
|
||||
color: #43F2FD;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
#container {
|
||||
position:relative;
|
||||
min-height:98%;
|
||||
}
|
||||
|
||||
#apt {
|
||||
position:absolute;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
}
|
||||
/*#apt label {
|
||||
display: block;
|
||||
}
|
||||
*/
|
||||
#man {
|
||||
border:none;
|
||||
position:absolute;
|
||||
bottom:15%;
|
||||
right:80%;
|
||||
height:20%;
|
||||
width:auto;
|
||||
display:none;
|
||||
}
|
||||
|
||||
#floor {
|
||||
position:absolute;
|
||||
left: 25%;
|
||||
top: 20%;
|
||||
bottom:15%;
|
||||
right:10%;
|
||||
}
|
||||
#surface {
|
||||
position:relative;
|
||||
width:100%;
|
||||
height:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
.tile {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: none;
|
||||
width: auto;
|
||||
opacity: 0.8;
|
||||
}
|
||||
#ratio {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
bottom:-10%;
|
||||
display:none;
|
||||
}
|
||||
|
||||
#key {
|
||||
text-align: right;
|
||||
position:absolute;
|
||||
bottom:3%;
|
||||
right:5%;
|
||||
width:60%;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position:absolute;
|
||||
bottom:0%;
|
||||
left:5%;
|
||||
width:35%;
|
||||
font-size:x-small;
|
||||
}
|
||||
BIN
floorspace/tile.png
Normal file
BIN
floorspace/tile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 260 B |
Loading…
x
Reference in New Issue
Block a user