Space Apps Challenge 2018

Agatas | Don’t Forget the Can Opener!

Team Updates

<!DOCTYPE html>
<html>
<head>
<title>TITLE HERE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!--script type="text/javascript" src="roomsJSON.json"></script>-->
<script>
var rooms = [];
var items = [];
var itemsIndex = 0;
var xCord=0;
var yCord=0;
//export .json
function download(content, fileName, contentType) {
var a = document.createElement("a");
var file = new Blob([content], {type: contentType});
a.href = URL.createObjectURL(file);
a.download = fileName;
a.click();
}
//import json?
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'roomsJSON.json', true); // Replace 'my_data' with the path to your file
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
callback(xobj.responseText);
}
};
xobj.send(null);
}
///room constructor
function room(){
this.index = parseInt($("#roomNumber").val());
this.name = $("#roomName").val();
this.xCord = parseFloat($("#xCord").val());
this.yCord = parseFloat($("#yCord").val());
this.width = parseFloat($("#width").val());
this.height = parseFloat($("#height").val());
}
function drawRoom(Room) {
ctx.beginPath();
ctx.rect(Room.xCord, Room.yCord, Room.width, Room.height);
ctx.stroke();
}
function drawItem(Item) {
ctx.beginPath();
ctx.arc(Item.xCord, Item.yCord, Item.radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = Item.color;
ctx.fill();
}
//item constructor
function item(){
this.index = prompt("Enter index:", itemsIndex);
this.name = prompt("Enter name of item:");
this.xCord = xCord;
this.yCord = yCord;
this.radius = 5;
this.color = prompt("Enter color of item:"); //green earthquak //blue flood //red fire //yellow volcano
}
function drawRooms(){
for (var i=0; i < rooms.length; i++){ //draww the new circles
drawRoom(rooms[i]);
}
}
function drawItems(){
for (var i=0; i < items.length; i++){ //draww the new circles
drawItem(items[i]);
}
}
function clearCanvas(){
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear whole canvas
}
///get cords
function getXCord(){
return event.clientX; //min 0 max 349; right = positive
}
function getYCord(){
return event.clientY; //min 0 max 349; downwards = positive
}
//jquery
$(document).ready(function(){
///click on canvas
$("#canvas").click(function(){
xCord=getXCord();
yCord=getYCord();
$("#redDot").css({
"top": yCord - 2, //4px width and height ng dot kaya adjust by 2
"left": xCord + 14 ,
});
$("#xCord").val(xCord);
$("#yCord").val(yCord); //puts clicked cords automatically to form
$("#redDot").show();
})
//show table and input
$(this).keypress(function(key){
if (key.key == "P" || key.key == "p"){
$("#inputForm").toggle();
}
})
///exit form
$("#formExit").click(function(){
$("#inputForm").hide();
})
//save rooms
function submitForm(){
var indexCalled = parseInt($("#roomNumber").val()) - 1;
rooms[indexCalled] = new room();
var roomCalled = rooms[indexCalled];
$("#roomList").append("<tr>"); //new row
document.getElementsByTagName("tr")[indexCalled+1].innerHTML = ""; //clear whole row in case of overwriting
for (i in roomCalled){
document.getElementsByTagName("tr")[indexCalled+1].innerHTML += "<td>" + roomCalled[i] + "</td>"; //inputs table values in row
}
$("#roomNumber").val(parseInt($("#roomNumber").val())+1);
clearCanvas();
drawRooms();
drawItems();
}
$("#saveValues").click(submitForm);
$("#redDot").dblclick(submitForm);
//save items
$(this).keypress(function(key){
if (key.key == "t" || key.key == "T"){
items[itemsIndex] = new item();
itemsIndex++;
items.length++;
clearCanvas();
drawRooms();
drawItems();
}
})
//save .json
$(this).keypress(function(key){
if (key.key == "e" || key.key == "E"){
download(JSON.stringify(rooms), 'roomsJSON.json', 'text/plain');
download(JSON.stringify(items), 'itemsJSON.json', 'text/plain');
}
})
$("#volcano").click(function(){
document.getElementById("textFile").innerHTML = "<h3>Volcano</h3><p>Things to Bring: long sleeved shirts, jogging pants, eyeglasses/goggles, emergency mask/damp cloth for your face, first aid kit, respiratory protection kit, flashlight, food and water</p><p>Before a Volcanic Eruption</p><ul><li>Turn on the radio, listen for updates</li><li>Fill up your vehicle's gas tank</li><li>Stock up on water</li><li>If told to evacuate:<ul><li>take only essential items</li><li>bring medication</li><li>follow designated evacuation routes</li><li>bring pets</li></ul></li><li>If told to take shelter where you are:<ul><li>keep listening to updates</li><li>bring your pets inside</li><li>have a hard-wired telephone inside your shelter</li></ul></li></ul><p>During a volcanic eruption</p><ul><li>Listen to radio for updates</li><li>If you are outside, seek shelter in cars or buildings</li><li>Stay indoors</li><li>Wear clothes that expose as little skin as possible, along with eyeglasses or goggles</li></ul><p>After a volcanic eruption</p><ul><li>Listen to radio for updates</li><li>Stay indoors and away from volcanic ashes</li><li>Avoid driving in heavy ashfall areas to prevent engine failure</li><li>Use protecctive equipment when cleaning up the ashes</li><li>Report broken utilities</li></ul>"
clearCanvas();
drawRooms();
for (var i=0; i < items.length; i++){
if (items[i].color=="yellow"){drawItem(items[i])};
}
});
$("#fire").click(function(){
document.getElementById("textFile").innerHTML = "<h3>Fire</h3><p>Things to Bring: medicine, first aid kit, water, clothes</p><p>Things to Avoid: use elevators during an evacuation</p><p>During a fire</p><ul><li>Before opening a door, feel it with the back of your hand. If it is hot, don't open it.</li><li>Activate the nearest fire alarm pull station, alert those around you, and from a safe location call the fire department.</li><li>Use fire extinguishers.</li><li>Get as much water as you can.</li></ul><p>After a fire</p><ul><li>Before turning the power back on, have the wirings checked by an electrician.</li><li>If the house is safe, secure your valuables</li><li>If house is deemed unsafe, contact authorities who can watch over your house.</li></ul><p>When trapped inside a building</p><ul><li>Gather everyone into a room.</li><li>Allow any possible air ventilation.</li><li>If possible, refrain from jumping out a window</li></ul><p>When you have to jump out a window</p><ul><li>Children first</li><li>Don't jump, lower yourself to arms length from the window then drop</li></ul>"
clearCanvas();
drawRooms();
for (var i=0; i < items.length; i++){
if (items[i].color=="red"){drawItem(items[i])};
}
});
$("#rain").click(function(){
document.getElementById("textFile").innerHTML = "<h3>Rain/Tsunammi</h3><p>Things to bring: food and water, batteries, flashlights, candles, battery powered radio, clothes, first aid kit, life vest, raincoat, boots</p><p>Before the typhoon:</p><ul><li>Stay updated on the typhoon through radio, TV, or internet</li><li>Repair house if needed</li><li>Secure animals in safe area</li><li>If house has higher floor, put objects there to prevent water from coming in contact with them.</li></ul><p>During the typhoon:</p><ul><li>Stay updated</li><li>Boil possibly contaminated water before drinking</li><li>Stay inside house unless told to evacuate</li><li>Don't wade through floodwater to avoid contracting diseases. If necessary, use raincoat and boots</li></ul><p>After the typhoon:</p><ul><li>Stay updated</li><li>Boil possibly contaminated water before drinking</li><li>Watch out for live wires/electrical outlets submerged in water</li><li>Report damaged electrical wires/posts to the authorities</li><li>Don't let water accumulate in mosquito breeding grounds such as tires, pots, and cans</li></ul>"
clearCanvas();
drawRooms();
for (var i=0; i < items.length; i++){
if (items[i].color=="blue"){drawItem(items[i])};
}
});
$("#earthquake").click(function(){
document.getElementById("textFile").innerHTML = "<h3>Earthquake</h3><p>Things to Bring: food and water, whistle, first aid kit, fire extinguisher, batteries, battery powered radio, flashlight</p><p>Before the Earthquake:</p><ul><li>Place heavy and breakable objects on low shelves</li></ul><p>During the Earthquake:</p><ul><li>Indoors:<ul><li>Drop, Cover, and Hold On</li><li>If you are in bed, stay there and keep a pillow over your head unless something can fall on you.</li><li>Don't exit the building</li><li>Things to avoid: glass, windows, doorways, things that can fall such as tall furniture and light fixtures, elevators</li></ul></li><li>Outdoors:<ul><li>Move away from things that can collapse such as buildings, trees, streetlights, overpasses, and utility wires</li><li>Stay in the open until the shaking stops</li></ul></li><li>Vehicle<ul><li>Stop immediately when it is safe to do so and stay inside. Avoid stopping under things that can collapse such as downed power lines, buildings, trees, streetlights, overpasses, and utility wires.</li><li>Once earthquake has stopped, avoid roads that have been damaged.</li></ul></li><li>Trapped in Debris<ul><li>Don't light a match</li><li>Don't move around or kick up dust</li><li>Cover your mouth</li><li>Tap on pipe or wall, or use whistle if available to be located. Shout only as a last resort, as you can inhale dangerous amounts of dust.</li></ul></li></ul><p>After the Earthquake:</p><ul><li>Be ready for aftershocks.</li></ul>"
clearCanvas();
drawRooms();
for (var i=0; i < items.length; i++){
if (items[i].color=="green"){drawItem(items[i])};
}
});
$("#import").click(function(){
var files = document.getElementById("selectFiles").files;
console.log(files);
if (files.length <= 0) {
return false;
}
var fr = new FileReader();
fr.onload = function(e) {
clearCanvas();
console.log(e);
var result = JSON.parse(e.target.result);
var formatted = JSON.stringify(result, null, 2);
document.getElementById('result').value = formatted;
$("result").val(formatted);
if (files[0].name.includes("room")) {
rooms = JSON.parse(e.target.result);
drawRooms();
for (var i=0; i < rooms.length; i++) {
$("#roomList").append("<tr>"); //new row
document.getElementsByTagName("tr")[i+1].innerHTML = ""; //clear whole row in case of overwriting
var currentRoom = rooms[i];
for (j in currentRoom){
document.getElementsByTagName("tr")[i+1].innerHTML += "<td>" + currentRoom[j] + "</td>"; //inputs table values in row
}
}
}
else if (files[0].name.includes("item")) {
items = JSON.parse(e.target.result);
drawItems();
}
}
fr.readAsText(files.item(0));
});
//show table and input
$(this).keypress(function(key){
if (key.key == "d" || key.key == "D"){
drawRooms();
drawItems();
}
})
})
</script>
<style>
body{
margin: 0px;
}
#floorPlan div{
font-family: Calibri;
box-sizing: border-box;
position: absolute;
}
/*#canvasParent{
width: 600px;
height: 600px;
overflow: hidden;
border: 1px solid black;
}*/
#canvas{
position: relative;
z-index: 0;
border: 1px solid blue;
}
#redDot{
height: 4px;
width: 4px;
background-color: red;
position: absolute;
}
#inputForm{
top: 5px;
left: 380px;
height: 235px;
width: 215px;
border: 1px solid black;
background-color: white;z-index:2;
}
#inputForm div{
left: 10px;
top: 10px;
}
#inputForm input{
font-size:12px;
}
#formExit{
width: 25px;
height: 25px;
background-color: red;
color: white;
text-align: center;
position: absolute;
left: 185px;
}
#floorPlan table, #floorPlan th, #floorPlan td{
background-color: white;
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
font-size: 12px;
}
#floorPlan td{font-size: 8px;}
#floorPlan thead, tbody {
display: block;
}
#floorPlan tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
#floorPlan tr > td:nth-of-type(2){
width: 30px;
}
#floorPlan tr > td:nth-of-type(3){
width: 30px;
}
#disasters {
table-layout: fixed;
height: 100%;
width: 100%;
clear: both;
float: right;
}
#disasters td {
width: 50%;
height: 50%;
}
#disasters td img {
object-fit: cover;
height: 300px;
}
button{
font-size: 10;
}
#textFile {
float: left;
clear: both;
}
</style>
</head>
<body>
<div class="container-fLuid">
<div class=row>
<div class="col-xl-6" id="floorPlan">
<canvas id="canvas"></canvas>
<div id="redDot" style="display:none"></div>
<div id="inputForm" style="display:none">
<div>
Room Number<br><input id="roomNumber" value="1" type="number" style="width:45px;">
<br>Room Name<br><input id="roomName" style="width:45px;">
<br>X Coordinate<br><input id="xCord" value="0" type="number" style="width:45px;">
<br>Y Coordinate<br><input id="yCord" value="0" type="number" style="width:45px;">
</div>
<div style="left: 110px">
Width<br><input id="width" value="30" type="number" style="width:45px;">
<br>Height<br><input id="height" value="30" type="number" style="width:45px;">
<br><br><input type="submit" id="saveValues" value="Save Values" style="font-size:6;">
</div>
<button id="formExit">X</button>
<table id="roomList" style="top:240px; position: absolute;" width=215px>
<tr>
<th>Number</th>
<th>Name</th>
<th>X-Cord</th>
<th>Y-Cord</th>
<th>Width</th>
<th>Height</th>
</tr>
</table>
</div>
</div>
<div class="col-xl-6" id="disasters">
<table border=0 height="100%" width="100%">
<tr>
<td>
<div id="earthquake">
<center><img src="https://images-assets.nasa.gov/image/GSFC_20171208_Archive_e001369/GSFC_20171208_Archive_e001369~orig.jpg" width="100%" height="100%"></center>
<p><b><center>Earthquake</center></b></p>
</div>
</td>
<td>
<div id="rain">
<center><img src="https://images-assets.nasa.gov/image/GSFC_20171208_Archive_e001349/GSFC_20171208_Archive_e001349~orig.jpg" width="100%" height="100%"></center>
<p><b><center>Rain/Tsunami</center></b></p>
</div>
</td>
</tr>
<tr>
<td>
<div id="fire">
<center><img src="https://images-assets.nasa.gov/image/KSC-2014-1646/KSC-2014-1646~orig.JPG" width="100%" height="100%"></center>
<p><b><center>Fire</center></b></p>
</div>
</td>
<td>
<div id="volcano">
<center><img src="https://images-assets.nasa.gov/image/ARC-1980-AC80-0513-1/ARC-1980-AC80-0513-1~orig.jpg" width="100%" height="100%"></center>
<p><b><center>Volcano</center></b></p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<input type="file" id="selectFiles" value="Import" /><br />
<button id="import">Import</button>
<textarea id="result"></textarea>
<div id=textFile style="width:350px; height:350px;"></div>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 350;
canvas.height = 350;
</script>
</body>
</html>
view raw Building Plans hosted with ❤ by GitHub
niallymricNiall Ymric Navasero
NASA Logo

SpaceApps is a NASA incubator innovation program.