Space Apps Challenge 2017

AirSTech | Every Cloud

Jeddah

Team Updates

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>AirSTech</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="inbox.html">AirSTech</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="map" class="m"></div>
<script>
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat:24.774265, lng: 46.738586},
mapTypeId: 'roadmap'
});
infoWindow = new google.maps.InfoWindow;
//---------------extra code than the original-----------------------------------------
/* if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent( '');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}*/
//-------------------/extra code than the original--------------------------------------
//-------------------user select location-------------------------------
google.maps.event.addListener(map, 'click', function( event ){
// alert( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() );
var myLatlng = new google.maps.LatLng(event.latLng.lat(),event.latLng.lng() );
var humidity=40;
var cloud=30;
var textArray = [
'yes1.png',
'no1.png'
];
var randomNumber = Math.floor(Math.random()*textArray.length);
//audioElement.setAttribute('src', textArray[randomNumber]);
var marker = new google.maps.Marker({
position: myLatlng,
map: map ,
icon: textArray[randomNumber] ,
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
type: 'info'
});
/*if(humidity>39 && cloud<31 ){
var marker = new google.maps.Marker({
position: myLatlng,
map: map ,
icon: textArray[randomNumber] ,
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
type: 'info'
});
}else{
var marker = new google.maps.Marker({
position: myLatlng,
map: map ,
icon: textArray[randomNumber] ,
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
type: 'info'
});
}*/
});
//-------------------/user select location -----------------------------
//--------------marker look-----------------------
/* var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: 'yes1.png'
},
library: {
icon: 'no1.png'
},
info: {
icon: 'yes1.png'
}
};
var features = [
{
position: new google.maps.LatLng( 24.774265, 46.738586),
type: 'info'
}, {
position: new google.maps.LatLng( 26.399250, 49.984360),
type: 'info'
}, {
position: new google.maps.LatLng( 21.543333, 39.172777999999994),
type: 'info'
}
];
//reset icons after checking the condition .. not complete
//markersArray[0].setAnimation(google.maps.Animation.BOUNCE);
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}); */
//--------------/marker look-----------------------
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCct7K49jjt-NyQcECt7cb68oIAEyA7Exo&callback=initMap">
</script>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/creative.min.js"></script>
</body>
</html>
Contact GitHub API Training Shop Blog About
view raw index.html hosted with ❤ by GitHub
S
Sumayah Abualkhair
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>AirSTech</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="inbox.html">AirSTech</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="map" class="m"></div>
<script>
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat:24.774265, lng: 46.738586},
mapTypeId: 'roadmap'
});
infoWindow = new google.maps.InfoWindow;
//---------------extra code than the original-----------------------------------------
/* if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent( '');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}*/
//-------------------/extra code than the original--------------------------------------
//-------------------user select location-------------------------------
google.maps.event.addListener(map, 'click', function( event ){
// alert( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() );
var myLatlng = new google.maps.LatLng(event.latLng.lat(),event.latLng.lng() );
var humidity=40;
var cloud=30;
var textArray = [
'yes1.png',
'no1.png'
];
var randomNumber = Math.floor(Math.random()*textArray.length);
//audioElement.setAttribute('src', textArray[randomNumber]);
var marker = new google.maps.Marker({
position: myLatlng,
map: map ,
icon: textArray[randomNumber] ,
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
type: 'info'
});
/*if(humidity>39 && cloud<31 ){
var marker = new google.maps.Marker({
position: myLatlng,
map: map ,
icon: textArray[randomNumber] ,
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
type: 'info'
});
}else{
var marker = new google.maps.Marker({
position: myLatlng,
map: map ,
icon: textArray[randomNumber] ,
position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng()),
type: 'info'
});
}*/
});
//-------------------/user select location -----------------------------
//--------------marker look-----------------------
/* var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: 'yes1.png'
},
library: {
icon: 'no1.png'
},
info: {
icon: 'yes1.png'
}
};
var features = [
{
position: new google.maps.LatLng( 24.774265, 46.738586),
type: 'info'
}, {
position: new google.maps.LatLng( 26.399250, 49.984360),
type: 'info'
}, {
position: new google.maps.LatLng( 21.543333, 39.172777999999994),
type: 'info'
}
];
//reset icons after checking the condition .. not complete
//markersArray[0].setAnimation(google.maps.Animation.BOUNCE);
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}); */
//--------------/marker look-----------------------
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCct7K49jjt-NyQcECt7cb68oIAEyA7Exo&callback=initMap">
</script>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/creative.min.js"></script>
</body>
</html>
Contact GitHub API Training Shop Blog About
view raw index.html hosted with ❤ by GitHub
S
Sumayah Abualkhair
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>AirSTech</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">AirSTech</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About AirS </a>
</li>
<li>
<a class="page-scroll" href="#services"> AirS services</a>
</li>
<li>
<a class="page-scroll" href="#contact">AirSTech Team</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>AirS</h1>
<br/>
<h1>Ease people lifes using tech</h1>
<hr>
<a href="yourlocation.html" class="btn btn-primary btn-xl page-scroll">start using the system</a>
</div>
</div>
</header>
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">AirS device and system </h2>
<hr class="light">
<p >
<b > AirS</b> the device: used to Intensify water using physical method and seprate the salt from the water to give us pure water ,
there are two main uses of this pure water in our AirS Desvice , first it can be used for drinking and second using a chemical ,physics and mechanical methods.
</p>
<p class=""faded-text> after we created AirS device we cretaed a system that utilizes the usage of this device </p>
<p><b>AirS</b> the system: is a website that use API to collect historical data about selected climate conditions and using precalculated equations
to Determine the best geographical location to instal and use AirS device </p>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Service</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<!-- <i class="glyphicon glyphicon-glass text-primary sr-icons"></i>-->
<h3>pure drinking water</h3>
<p class="text-muted">Carry AirS with you every where and have pure drinking water all the time at no expence using only humidity and sunligth..</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<!-- <i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>-->
<h3>cooling device</h3>
<p class="text-muted">Using the salt extracted from the humidty and sunligth-again- you can have a cooling device for your own convenient.. </p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<!-- <i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i>-->
<h3>analytical system </h3>
<p class="text-muted">AirS system help you to decide the best geographical place to instal AirS device</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<!-- <i class="fa fa-4x fa-heart text-primary sr-icons"></i>-->
<h3>and many greate other usages </h3>
<p class="text-muted">AirS device functionalty can be implented for many useges , for a short list of examples: refridgrader , air conditionr ,
water self filling tank for farmers , self cooling mug , self Plant irrigation </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p>Wesal madani</p>
<p>@Wesal_md</p>
<p>physics</p>
<hr>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p>Nimah Ahmad Alyamani</p>
<p>Physics suction </p>
<p>@n_cmew</p>
<hr>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p>Dhaffaf Fayez Kamfar</p>
<p>Computer Science </p>
<p>@DhaffafKamfar</p>
<p>https://www.linkedin.com/in/dhaffaf-kamfar <p/>
<hr>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p> Bayan mohammed madani</p>
<p>Phsics suction</p>
<p>@of_writer</p>
<hr>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p>http://linkedin.com/in/aljwharah-alkhammash-62b031103 </p>
<p>Aljwharah Alkhammash</p>
<p>Computer Engineering </p>
<hr>
</div>
</div> <div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p> Sumayah Abualkhair</p>
<p>https://www.linkedin.com/in/sumayah-abualkhair-6738769a/ </p>
<p>web developer </p>
<hr>
</div>
</div> <div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p>lujain alharbi </p>
<p>linkedin.com/in/lujain-alharbi </p>
<p>web developer </p>
<hr>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<p>Amal Khotani </p>
<p>linkedin.com/?_mSplash=1#you</p>
<p>Application Programmer </p>
<hr>
</div>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/creative.min.js"></script>
</body>
</html>
view raw YourLocation.html hosted with ❤ by GitHub
S
Sumayah Abualkhair

AirS website give the most convenient place to use use the AirS device.

The user choose his location then it desplay to him the humidity,wind and cloud result for a year

D
Dhaffaf Kamfar
our first fan circuit
our first fan circuit
N
Nimah Ahmed Alyamani
AirS device prototype
AirS device prototype
D
Dhaffaf Kamfar
AirS device 3D object
AirS device 3D object
D
Dhaffaf Kamfar
Team Stream Item
D
Dhaffaf Kamfar
AirS device from inside
AirS device from inside
D
Dhaffaf Kamfar
Team Stream Item
D
Dhaffaf Kamfar
another side from AirS device
another side from AirS device
D
Dhaffaf Kamfar
look from the top
look from the top
D
Dhaffaf Kamfar
AirS device full vision from inside
AirS device full vision from inside
D
Dhaffaf Kamfar
AirS website few touches to finish
AirS website few touches to finish
D
Dhaffaf Kamfar
simple touch
simple touch
D
Dhaffaf Kamfar

We're 8 members the work divided as half for Sofware and the other for Hardware

D
Dhaffaf Kamfar
design a close 2D vision for AirS device.
design a close 2D vision for AirS device.
D
Dhaffaf Kamfar

AirS device contain two rooms used to Intensification the air to water and purified to become drinking water and then separated into two parts, so the first part where the drinking water gone to the first room and the second part used to Highly purified of salts that save later at Specific room.

After purified from salt it move it to the second room to heat it to a certain temperature ""55c" , then it sends a signal to salt room to open it to added to water in certain quantities.

To turn it into ice where later the spring push it to blender to smash it into small pieces and then send it to the propeller to push it to the outside to cool the air.

D
Dhaffaf Kamfar

AirS device work on solar power.

D
Dhaffaf Kamfar
Final shape for AirS device as you can see it contains two room one for drinking water and one to purified the salts to cool the air.
Final shape for AirS device as you can see it contains two room one for drinking water and one to purified the salts to cool the air.
D
Dhaffaf Kamfar

The AirS device is multi use, you can use it as a refrigerator,Air conditioning,Cool water and propeller.

D
Dhaffaf Kamfar
just a few details and our AirS device will be ready to print it using 3D printer
just a few details and our AirS device will be ready to print it using 3D printer
D
Dhaffaf Kamfar

actually our project separated into two parts:

first part: the AirS device.

second part: we have the website that give the user the most convenient place to use the AirS device

D
Dhaffaf Kamfar

AirS device is used to extraction water from air and purified to become drinking water, this device contain two rooms so, the first room where the drinking water gone and the second room used to Highly purified of salts that save later at Specific room.

D
Dhaffaf Kamfar
sketch for our AirS device
sketch for our AirS device
D
Dhaffaf Kamfar
NASA Logo

SpaceApps is a NASA incubator innovation program.