Space Apps Challenge 2017

Solar Geeks | You are my Sunshine

Madina

Team Updates

https://biteable.com/watch/solar-geeks-1370447/

aqubalyAbdulmajeed Kamal AlQubaly

Our Service! https://solargeeks.github.io/ (Mind the slow hosting service of github)

merk07Ayman

https://drive.google.com/file/d/0B5Dg2b7mcXtxc19IaENoVDM3Rms/view?usp=sharing

aqubalyAbdulmajeed Kamal AlQubaly

https://drive.google.com/open?id=0B4WUEFe1oH65anBZ...

aqubalyAbdulmajeed Kamal AlQubaly

Hello world we are “solar Geeks” a devoted group for helping people to understands how solar panels works and how much energy comes from it. That is why we’ve created the first of its kind solar power calculator.

This calculator purpose is to let people understand how much they normally consumes and relate that to solar output. you have two options to use the calculator:

aqubalyAbdulmajeed Kamal AlQubaly
Prototype
Prototype
merk07Ayman
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="effects.js"></script>
</head>
<body>
<div class="header">
<img src="Icons/logo%20.PNG" align="center" alt="logo" />
</div>
<div id="object-calculator">
<!-- Screen and clear key -->
<div class="screen"></div>
<div class="navagation">
<span class="clear">C</span>
<span class="clear">del</span>
<span id="back" class="eval">Back</span>
<span id="next" class="eval">Next</span>
</div>
<!-- Main Keys -->
<div class="keys" id="main">
<div>
<span class="eval" id="lights-button">Lights<img class="manImg" src="Icons/light.png"/></span>
</div>
<span class="eval" id="general-button">TVs<img class="manImg" src="Icons/tv.png"/></span>
<span class="eval" id="devices-button">Consoles<img class="manImg" src="Icons/consoles.png"/></span>
<span class="eval" id="computers-button">Computers<img class="manImg" src="Icons/computers.PNG"/></span>
<span class="eval" id="kitchen-button">Kitchen<img class="manImg" src="Icons/kitchen.png"/></span>
<span class="eval" id="washroom-button">Washroom<img class="manImg" src="Icons/washroom.png"/></span>
<span class="eval" id="home-button">Home<img class="manImg" src="Icons/mobile.png"/></span>
</div>
<div class="keys" id="lights">
<!-- operators and other keys -->
<span class="eval">10 LED Bulb</span>
<span class="eval">30 LED Bulb</span>
<span class="eval">50 LED Bulb</span>
<span class="eval">10 Fluor. Bulb</span>
<span class="eval">30 Fluor. Bulb</span>
<span class="eval">50 Fluor. Bulb</span>
</div>
<div class="keys" id="general">
<!-- operators and other keys -->
<span class="eval">Plasma TV</span>
<span class="eval">(20in+) LCD TV</span>
<span class="eval">(60in+) LCD TV</span>
<span class="eval">(20in+) LED TV</span>
<span class="eval">(60in+) LED TV</span>
</div>
<div class="keys" id="devices">
<!-- operators and other keys -->
<span class="eval">Xbox 360</span>
<span class="eval">Xbox One</span>
<span class="eval">Play Station 3</span>
<span class="eval">Play Station 4</span>
<span class="eval">Wii U</span>
<span class="eval">Smart Phone</span>
</div>
<div class="keys" id="computers">
<!-- operators and other keys -->
<span class="eval">PC</span>
<span class="eval">Laptop PC</span>
<span class="eval">Mac</span>
<span class="eval">Laptop Mac</span>
<span class="eval">Printer</span>
<span class="eval">Router</span>
</div>
<div class="keys" id="kitchen">
<!-- operators and other keys -->
<span class="eval">Oven</span>
<span class="eval">Dish Washer</span>
<span class="eval">Fride / Freezer</span>
<span class="eval">Microwave</span>
<span class="eval">Blender</span>
<span class="eval">Kettle</span>
</div>
<div class="keys" id="washroom">
<!-- operators and other keys -->
<span class="eval">Electronic Razor</span>
<span class="eval">Blow Dryer</span>
<span class="eval">Washer</span>
<span class="eval">Dryer</span>
<span class="eval">Iron</span>
</div>
<div class="keys" id="home">
<!-- operators and other keys -->
<span class="eval">A/C</span>
<span class="eval">Fan</span>
<span class="eval">Water Pump</span>
</div>
</div>
<script type="text/javascript" src="logic.js"></script>
<script type="text/javascript">
var catagories = ["#lights", "#general", "#devices", "#computers", "#kitchen", "#washroom", "#home", "#phones"]
var buttons = ["#lights-button", "#general-button", "#devices-button","#computers-button", "#kitchen-button", "#washroom-button", "#home-button"];
var clicked_sf = 0;
var behind = -1;
function is(num) {
if (num == 7) {
console.log("yp");
$("#next").html("Done");
$("#next").css("width", "100px;")
}
}
$("#next").click(function () {
$(buttons[clicked_sf]).css("background", "#ff9fa8");
$(buttons[clicked_sf]).css("color", "black");
$(buttons[clicked_sf]).css("box-shadow", "0px 4px #d3545d");
$(catagories[clicked_sf]).css("display", "block");
++clicked_sf;
++behind;
is(clicked_sf);
});
$("#back").click(function () {
$(buttons[behind]).css("background", "#1a1a1a");
$(buttons[behind]).css("color", "white");
$(buttons[behind]).css("box-shadow", "0px 4px grey");
$(catagories[behind]).css("display", "none");
--behind;
--clicked_sf;
$("#next").html("Next");
});
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
merk07Ayman
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* Better text styling */
font: bold 14px Arial, sans-serif;
}
.header img {
background: linear-gradient(#202b5b, #142260) !important;
height: 150px;
width: 300px;
border-radius: 50px;
display: block;
margin: 0 auto;
margin-top: 10px;
}
/* Finally adding some IE9 fallbacks for gradients to finish things up */
/* A nice BG gradient */
html {
height: 100%;
background: #FFFF66;
background: radial-gradient(circle, #FFFF66 20%, #ccc);
background-size: cover;
}
.navagation span {
float: right;
}
/* Inset shadow on the screen to create indent */
.screen {
height: 450px;
width: 210px;
float: right;
word-wrap: break-word;
padding: 0 10px;
background: rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
/* Typography */
font-size: 17px;
line-height: 40px;
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-align: right;
letter-spacing: 1px;
}
.navagation {
margin-left: 10px;
}
/* Using box shadows to create 3D effects */
#object-calculator {
width: 1100px;
height: 700px;
margin: 0;
padding: 20px 20px 9px;
background: linear-gradient(#FFF0F5, #fff);
border-radius: 3px;
box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}
/* Clear floats */
.keys, .navagation {overflow: hidden;}
/* Applying same to the keys */
.navagation span {
width: 80px;
height: 50px;
}
#main span {
width: 110px;
height: 150px;
color: white;
background: #1a1a1a;
box-shadow: 0 4px black;
}
.keys span, .navagtion span.clear, .navagation span {
float: left;
position: relative;
top: 0;
cursor: pointer;
background: white;
border-radius: 3px;
box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
margin: 0 7px 11px 0;
color: #888;
line-height: 36px;
text-align: center;
/* prevent selection of text inside keys */
user-select: none;
/* Smoothing out hover and active states using css3 transitions */
transition: all 0.2s ease;
}
/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
span.operator {
background: #000000;
width: 75px;
}
span.eval {
background: #e6e6e6;
box-shadow: 0px 4px grey;
color: black;
width: 110px;
}
.navagation span {
width: 100px !important;
height: 50px;
}
span.clear {
background: #ff9fa8;
box-shadow: 0px 4px #ff7c87;
color: white;
}
#general, #lights, #devices, #computers, #kitchen, #washroom, #home {
display: none;
}
/* Some hover effects */
.keys span:hover {
background: #9c89f6;
box-shadow: 0px 4px #6b54d3;
color: white;
}
span.eval:hover {
background: black;
box-shadow: 0px 4px grey;
color: white;
}
span.clear:hover {
background: #f68991;
box-shadow: 0px 4px #d3545d;
color: white;
}
/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
span:active {
box-shadow: 0px 0px #6b54d3;
top: 4px;
}
span.eval:active {
box-shadow: 0px 0px grey;
top: 4px;
}
span.clear:active {
top: 4px;
box-shadow: 0px 0px #d3545d;
}
#main span {
pointer-events: none;
}
view raw styles.css hosted with ❤ by GitHub
merk07Ayman
for(var i = 0; i < keys.length; i++) {
keys[i].onclick = function(e) {
// Get the input and button values
var result = document.querySelector('#result');
var input = document.querySelector('.screen');
var inputVal = input.innerHTML;
var id = '#' + this.getAttribute('id');
var btnVal = this.innerHTML;
console.log(btnVal);
// Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
// If clear key is pressed, erase everything
if (btnVal == 'C') {
input.innerHTML = '';
}
// If eval key is pressed, calculate and display the result
else if(btnVal == 'Calculate') {
result.innerHTML = Math.floor(list_of_val.reduce(function(a, b) { return a + b; }, 0) / 175) + " Panel(s)!";
}
// Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
else if(btnVal == '.') {
if(!decimalAdded) {
input.innerHTML += data[inputVal];
decimalAdded = true;
}
}
// if any other key is pressed, just append it
else {
if (data[btnVal] == -1) {
list_of_val.pop();
str_sf.pop()
input.innerHTML = str_sf.join(" + ");
}
else if (data[btnVal] != 0) {
console.log(data[btnVal]);
list_of_val.push(data[btnVal]);
str_sf.push(btnVal);
console.log(list_of_val);
console.log(str_sf);
input.innerHTML = str_sf.join(" + ");
}
}
// prevent page jumps
e.preventDefault();
}
}
view raw Button logic.js hosted with ❤ by GitHub
var data = {
"del": -1,
"Next": 0,
"Back": 0,
"Request Form": 0,
"Lights": 0,
"10 LED Bulb": 85,
"30 LED Bulb": 255,
"50 LED Bulb": 425,
"10 Fluor. Bulb": 4250,
"30 Fluor. Bulb": 12750,
"50 Fluor. Bulb": 21250,
"General": 0,
"Plasma TV": 300,
"(20in+) LED TV": 80,
"(60in+) LED TV": 150,
"(20in+) LCD TV": 120,
"(60in+) LCD TV": 250,
"Devices": 0,
"Xbox 360": 120,
"Xbox One": 90,
"Play Station 3": 800,
"Play Station 4": 90,
"Wii U": 32.6,
"Smart Phone": 0,
"Computers": 0,
"PC": 275,
"Laptop PC": 75,
"iMac": 230,
"Laptop Mac": 205,
"Printer": 25,
"Router": 10,
"Kitchen": 0,
"Blender": 350,
"Coffe Machine": 1100,
"Oven": 350,
"Microwave": 1150,
"Dish Washer": 275,
"Fridge / Freezer": 275,
"Washroom": 0,
"Electronic Razor": 17.5,
"Blow Dryer": 2150,
"Dryer": 2500,
"Washer": 500,
"Iron": 1000,
"Home": 0,
"A/C" :2500,
"Fan": 50,
"Water Pump": 00
};
view raw Database for devices.js hosted with ❤ by GitHub
merk07Ayman
Team Stream Item
mohammedsi3Mohammed Sameer Ali Khan

نحن مجموعة شباب من المدينة المنورة نتكون من أربعة مهندسين ومبرمجين وعالم بيانات نسعى للتوعية عن الطاقة الشمسية .

mohammedsi3Mohammed Sameer Ali Khan

Hello world

aqubalyAbdulmajeed Kamal AlQubaly

نحن فريق سعودي متكامل نتكون من خمسة مهندسين و ثلاثة مبرمجين ومصمم نسعى الى إبتكار حل للتوعية بضرورة الطاقة الشمسية لكوكبنا الأرض لكي ننعم بمعيشة أفضل عليه .

aqubalyAbdulmajeed Kamal AlQubaly

we found geeks in energy.

aqubalyAbdulmajeed Kamal AlQubaly

We have a fantastic ideas.

aqubalyAbdulmajeed Kamal AlQubaly
NASA Logo

SpaceApps is a NASA incubator innovation program.