Josh47_WebDev/Floorspace
1
0
Fork 0
Code Issues Pull Requests Activity

Published source code to dev.josh47 repository

Browse Source
This commit is contained in:
JoshuaMarti 2025-02-21 17:34:13 -07:00
parent 024ed6dd61
commit b70317b1e0
6 changed files with 259 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
floorspace/80x15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 B

159
floorspace/index.html Normal file
View 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
View File

File diff suppressed because one or more lines are too long

BIN
floorspace/man.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

96
floorspace/style.css Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 B