Tuesday, 14 October 2014
Wednesday, 8 October 2014
Monday, 6 October 2014
Some manifestation photos
I made a city that was powered by solar lights. This idea reflects my manifesto very well because it is using free energy to power this city i made. The point I'm communicating across is how a real life city could be powered by net zero energy meaning that the city is powered using free natural resources such as sunlight.
Here are some photo's of manifestation:
Here are some photo's of manifestation:
Monday, 22 September 2014
Manifesto Update
Manifesto ideas/concepts
Net-zero
energy – nature and sustainability
Designers
need to use nature and sustainability to their advantage. Renewable energy is
the way to a healthy, cheaper, reliable future. Renewable sources of energy are
free. Wind. Water. Light. Heat.
The
points I want to bring across in my manifesto is that eco-design, specifically
renewable energy is the way to go and how we can create a sustainable net zero
energy building with renewable energy. With the likes of bio-engineering and
using natural resources to create a building that is net zero. Net zero is a
building that can power itself through natural sources. It’s a way to make
cheap, affordable power and it is the way of the future because of the
advantages it has over other resources. Also my evidence can be the Process
Zero project, how the building has decreased it energy demand by 84% while the
rest of the 16% is generated on site resulting in a net zero building.
I want my main points to be:
Sustainable, be renewable, and make a change.
The protection, conservation, efficiency, and re-use
of water
The conservation, efficiency, and renewable use of
energy
Non-polluting environments and healthy materials.
Holistic, Intrinsically Recyclable, restorative and Regenerative
Manifesto Draft:
I want to emphasis these main points in my manifesto and for my manifestation I want to create an object that powers itself! So I'm thinking of having a light bulb planted within a pot plant and hide a battery underneath the soil to power this light bulb. My point of this is to show people how natural resources can power objects!
I want to emphasis these main points in my manifesto and for my manifestation I want to create an object that powers itself! So I'm thinking of having a light bulb planted within a pot plant and hide a battery underneath the soil to power this light bulb. My point of this is to show people how natural resources can power objects!
You have one world. One life. One solution. Renewable energy
is our future.
Project Process Zero reduced their energy demand by 84%. One
net zero energy building making a huge change. We need more buildings like
this. The power of bio-engineering and eco-design will create a better, more sustainable future. To
stop pollution. To stop bad habits. To stop ruining this earth. Renewable
energy is the future.
My final Hero render
I chose the
city Sophronia because of its feeling I got out of the storyline with two completely
different cities split by a stone wall. One side of the city is full of fun and
colourful adventures having roller coasters, Ferris wheels and overall a circus
themed city. On the other side of the wall we have a strictly business city
with banks, factories and hospitals. What I took out of this was to create an
abstract city with one side being colourful, bright and stand out whilst on the
other side having an array of buildings representing the boring city of
business. My generative approach to create this effect of fun vs boring was
that I made an array of buildings that all looked the same with the aesthetic
and colour giving the effect of having a boring city, while on the other side I
generated intricate models that had all different aesthetics and different
colours that were very vibrant giving the feeling of an exciting, interesting city.
My renders tell this story of having a fun side and a boring side with the
buildings being the stock standard grey and rectangle buildings, while on the
other side my models are all colourful and intricate which makes them stand
out. This creates the mood of being playful and exciting which is in harmonizes
with my concept of fun vs boring.
Mobile App project
The
existing wave of mobile and tablet applications is primarily commercial
in nature, and rarely socially altruistic or active. Considering the
demographics that are engaging with these devices, this presents an
exciting niche in the application ecosystem.
Design and build a conversationally responsible, counter-consumerist culture mobile application.
This was a group project and our app was called "Drop".
For this project I did 90% of the HTML,CSS and JavaScript along with the Design.
Link to video: https://www.youtube.com/watch?v=dKAMwMD9ux4&feature=youtu.be
Some HTML from the App:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/Intro.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/loginpage.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/Facebook.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/Google.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/home.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/guesthome.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/geo.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mypanel.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/drop.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/dropguest.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/camera.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/upload.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/size.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/hidecameratext.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/Settings.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/hidetext.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mydropspage.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/explain.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/viewdrop.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/hidetestinmydrops.css" type="text/css" media="screen">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}
ul.sdt_menu{
margin-top:150px;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div data-role="page" id="loginpage">
<div data-role="main" class="ui-content">
<img id = "droplogogif" src="images/thebluegif.gif" >
<a href = "#guesthome" data-transition="slide"><img id = "guesticon" src="images/circles.png" ></a>
<a href = "#Facebook" data-transition="slide"><img id = "facebookicon" src="images/circles.png" ></a>
<a href = "#explainpage" data-transition="slide"><img id = "explain" src="images/circles.png" ></a>
<div id="loginbarslidetop"></div>
<div id= "logintext"><p> Log In</p></div>
<div id="loginbarwhite"></div>
</div>
</div>
<div data-role="page" id="Facebook">
<div data-role="main" class="ui-content">
<div id= "Loginfacebook"><p>Log In</p></div>
<div id="facebookbarwhite"></div>
<div id="facebookbarslidetop"></div>
<div id="facebookslide"></div>
<br><br><br>
<form action="demo_form.asp" onsubmit="facebooklogin()" id="thebox">
<br><br><br><br>
Username: <input type="text" id="FacebookId" value=""><br>
Password: <input type="text" id="FacebookPassword" value=""><br>
<br>
<input id="sumbitbuttonlogin" type="submit" value="Submit">
</form>
</div>
</div>
<div data-role="page" id="home">
<div data-role="main" class="ui-content">
<div id= "homepage"><p>Home</p></div>
<div id="homebarslidetop"></div>
<div id="homebarwhite"></div>
<a href = "#camera" data-transition="slide"><img id ="Cameracircle" src="images/circles.png">
<a href = "#mydrop" data-transition="slide"><img id ="Mydropcircle" src="images/circles.png">
<a href = "#drop" data-transition="slide"><img id ="Mapcircle" src="images/circles.png">
<a href = "#loginpage" data-transition="slide"><img id ="Logoutcircle" src="images/circles.png">
</div>
</div>
<div data-role="page" id="guesthome">
<div data-role="main" class="ui-content">
<div id= "guestpage"><p>Guest</p></div>
<div id="homebarslide"></div>
<div id ="guestbarwhite"></div>
<div id ="guestbarslidetop"></div>
<div id= "guestcameratext"><p> Camera</p></div>
<a data-transition="slide"><img id="guestarrowcamera" src="images/Arrow.png"/></a>
<div id="guestcamerabar"> </div>
<div id= "guestmydropstext"><p> My Drops</p></div>
<a data-transition="slide"><img id="guestarrowmydrops" src="images/Arrow.png"/></a>
<div id="guestmydropsbar"> </div>
<a href = "#guestdrop" data-transition="slide"><div id= "dropstext"><p>Drops</p></div></a>
<a href = "#guestdrop" data-transition="slide"><img id="arrowdrops" src="images/Arrow.png"/></a>
<a href = "#guestdrop" data-transition="slide"><div id="guestdropsbar"> </div></a>
<a href = "#loginpage" data-transition="slide"><div id= "logouttext"><p>Log Out</p></div></a>
<a href = "#loginpage" data-transition="slide"><img id="arrowlogout" src="images/Arrow.png"/></a>
<a href = "#loginpage" data-transition="slide"><div id="guestlogoutbar"> </div></a>
</div>
</div>
<div data-role="page" id="camera">
<div data-role="main" class="ui-content">
<div><img id="thecamerabackground" src='images/camerabackground.png'></div>
<div id= "Cameratextinmenu"><p>Make A Drop</p></div>
<div id= "camerabarwhite"></div>
<div id= "camerabarslidetop"></div>
<div class="bottomMenu"></div>
<br><br><br><br><br><br>
<form action="demo_form.asp">
<input type="file" id="image-upload" accept="image/*" capture onchange="photochosen(event)">
<br>
<input type="text" id="Title" value="Title.." maxlength="16"><br>
<input type="text" id="Description" value="Description.." rows="4" cols="50" maxlength="25"><br>
<div id="selecttag"><p>Select a tag</p></div>
<select id="Category">
<option value="Nature">Nature</option>
<option value="Wildlife">Wildlife</option>
<option value="People">People</option>
<option value="Treasure">Treasue</option>
<option value="Other">Other</option>
</select>
<br>
</form>
<img src="about:blank" alt="" id="show-picture">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" data-transition="slide"> <img id="leafbutton" src="images/circles.png" onclick="photoupload()"></a>
<a href="#home" data-transition="slide"> <img id="homebutton" src="images/circles.png"></a>
<br><br><br><br>
</div>
</div>
<div data-role="page" id="mydrop">
<div data-role="main" class="ui-content">
<div id= "Mydroptext"><p>My Drops</p></div>
<div id="mydropsbarinmenu"></div>
<div class="bottomMenu"></div>
<div id = "mydropsbarwhite"></div>
<div id ="mydropsbarslidetop"></div>
<div id="diagonal"></div>
<div id="circle1"></div>
<div class="content">
<ul id="sdt_menu" class="sdt_menu">
</ul>
<a href="#home" data-transition="slide"> <img id="homebutton2" src="images/circles.png"></a>
</div>
<a href="#home" data-transition="slide"><img id="backarrow2" src="images/backarrow2.png"/></a>
</div>
</div>
<div data-role="page" id="drop">
<img id="themapbackground"src="images/mapbackground.png"/>
<div id="map_canvas"></div>
<div id="toprect"></div>
<div id="topof"></div>
<div id= "Maptitle"><p>Drops Map</p></div>
<div id="mapbarslide"></div>
<a href="#mypanel" data-transition="slide"><img id="setbutton" src="images/circles.png"/></a>
<a href="#home" data-transition="slide"><img id ="backarrow2" src="images/circles.png" ></a>
<a href="#camera" data-transition="slide"><img id ="cameralink" src="images/circles.png" ></a>
<img id ="refresh"src="images/refresh.png" onclick="refreshMarkers()">
</div>
<div data-role="page" id="guestdrop">
<div id="map_canvas"></div>
<div id= "Dropsmap"><p>Drops Map</p></div>
<div id="mapbarslide"></div>
<a href="#mypanel" data-transition="slide"><img id="setbutton" src="images/circles.png"/></a>
<a href="#guesthome" data-transition="slide"><img id ="backarrow2" src="images/backarrow2.png" ></a>
</div>
<div data-role="page" id="mypanel">
<img id="settingsbackground"src="images/settingsbackground.png"/>
<div id="settingssbarslidetop"></div>
<div id="settingsettingbarwhite"></div>
<div id= "themapsetting"><p>Map Settings</p></div>
<div id= "Lowestrateddrop"><font size="3"><p>View drops with a rating of :</p></font></div>
<form name = "filter">
<br><br><br><br>
<div id= "naturedrops"><font size="4"><p>Nature Drops</p></font></div>
<div id= "wildlifedrops"><font size="4"><p>Wildlife Drops</p></font></div>
<div id= "peopledrops"><font size="4"><p>People Drops</p></font></div>
<div id= "treasuredrops"><font size="4"><p>Treasure Drops</p></font></div>
<div id= "otherdrops"><font size="4"><p>Other Drops</p></font></div>
<div id= "visdrops"><font size="3"><p>Drops Visible</p></font></div>
<div id="naturecolor"></div>
<div id="wildlifecolor"></div>
<div id="peoplecolor"></div>
<div id="treasurecolor"></div>
<div id="othercolor"></div>
<div id="checkbox1" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch" name="Nature" value="Nature" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox2" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch2" name="Wildlife" value="Wildlife" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox3" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch3" name="People" value="People" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox4" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch4" name="Treasure" value="Treasure" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox5" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch5" name="Other" value="Other" checked="checked" data-role="flipswitch">
</div>
<div id="try"><input type="range" min="0" max="5" value="0" step="1" onchange="showValue(this.value)" id="thesliderbar"/></div>
</form>
<a href="#drop" data-transition="slide"><img id="backarrow2" src="images/backarrow2.png"/></a>
</div>
<div data-role="page" id="showdrop">
<div id="viewdropsslidetop"></div>
<div id="whitedropbar"></div>
<br><br><br><br>
<h1 id="currenttitle"></h1>
<p id="currentdesc"></p>
<img src="about:blank" alt="" id="drop-picture">
<a href="#drop" data-transition="slide"><img id="back1" src="images/circles.png" onclick="refreshMarkers()"/></a>
<a> <img id="upvote" src="images/circles.png" onclick="upvoteDrop()"/></a>
<a> <img id="downvote" src="images/circles.png" onclick="downvoteDrop()"/></a>
</div>
<div data-role="page" id="explainpage">
<div data-role="main" class="ui-content">
<div id="explainbarbar"></div>
<div id=""></div>
<a href = "#loginpage" data-transition="slide"><img id="backbuttonexplain" src="images/circles.png"></a>
<img id="Theexplainlogonew" src="images/logoalone.png">
<img id="thebluething" src="images/bluebarthing.png">
<img id="thewhitething" src="images/whitebarthing.png">
<div id="Theexplainlogo"><img src="images/logoalone.png">
<div id="bacccccck"><img src="images/textpage.png">
<div id="infront">
<font size="5" ><p style="position: absolute; color:white" id="para1"><br>Welcome to Drop</p></font>
<br>
<p style="position: absolute; color:white" id="firstsen">Ever wanted to leave your presence at your favourite location forever. Such as Abel Tasman Park? For everyone else to see?
Well now you can with our app called Drop.
</p>
<br>
<font size="5"><p style="position: absolute; color:white" id="parahow">How to use Drop</p></font>
<br>
<p style="position: absolute; color:white" id="para2">
If you see something you like while wandering around the park, you can seize the moment by using our app!
</p>
<br>
<p style="position: absolute; color:white" id="para3">
Firstly you choose whether you want to log in via Facebook or guest.
This will re-direct you accordingly. Once logged in the app will direct you to the home screen. This page you will see four buttons which are the camera, drops, map and logout. </p>
<br>
<p style="position: absolute; color:white" id="para4">
If you tap on the camera icon you will be able to capture a photo you want to upload. You can give it a title and description along with selecting a genre, then you can preview your image and then drop your image by clicking the Drop icon which is located below your previewed image. This will now re-direct to the map where you will see your freshly uploaded Drop at your current GPS location. From here you can click on your drop to view the title and description and double click to view the complete package which includes the title, description and image.
</p>
<br>
<p style="position: absolute; color:white" id="para5">
On the map you can view all the drops within a certain radius of your position. The idea of the radius is to create an incentive for the you to keep on walking to find and view more ‘drops’. All other drops are greyed out an un-viewable. There are four buttons at the bottom of the page that re-direct you to certain parts of the app. A settings buttons that has options where you can control what kind of drops you want to view. You can turn off/on the genres of the drops, so for example if you wanted to just see a nature drop, you can toggle it accordingly. The slider is to change the rating of the view you want to see, so for example if you wanted to see the highest rating (5) you would change the slider accordingly. The next button on the map is a refresh button which refreshes the map, so if the drops aren’t showing up for some reason you can refresh the page. Third button is a camera button to re-direct you back to the camera page just in case you want to take more than one photo. Then lastly a home button which re-directs you to the home.
</p>
<br>
<p style="position: absolute; color:white" id="para6">
The drops page is where you can view your drops that you have uploaded to the map. So if you wanted to show you friends this awesome drop and not search through the map to access it, you can go to this page to find and view it.
</p>
</div>
</div>
</div>
</div>
</body>
<script src = "js/photoupload.js"> </script>
<script src = "js/page2.js"> </script>
<script src = "js/geo.js"> </script>
<script src = "js/guestgeo.js"> </script>
<script src = "js/range.js"> </script>
<script src = "js/menu.js"> </script>
<script src = "js/dropdown.js"> </script>
<script src = "js/jquery.easing.1.3.js"> </script>
<script src = "js/hide.js"> </script>
<script src = "js/hidemydropstext.js"> </script>
<script src = "js/dropdowntext.js"> </script>
<script src = "js/hidetextinmydrops.js"> </script>
<script src = "js/hidedroptext.js"> </script>
<script src = "js/hidecameratext.js"> </script>
<script src = "js/loginpage.js"> </script>
<script src = "js/mydrops.js"> </script>
</html>
Some CSS from the App. One section of 24 pages of CSS:
#camera{
width:100%;
height:100%;
background:#000000;
background-size: cover;
color: #ffffff;
}
#selecttag{
position:absolute;
font-weight:lighter;
font-size:150%;
left:20%;
bottom:48%;
z-index:3;
color: #ffffff;
}
#leafbutton{
width: 42%;
height: 23%;
right: 22%;
bottom: -70%;
z-index: 1;
opacity: 0;
}
#homebutton{
width: 23%;
height: 13%;
right: 75%;
bottom: -75%;
z-index: 1;
opacity: 0;
}
#thecamerabackground{
left:0%;
height: 175%;
width:102%;
top:1%;
}
#camerabarslidetop{
width:100%;
height:7%;
left:0%;
top:5%;
opacity: 1;
filter: alpha(opacity=0.05); /* For IE8 and earlier */
background: -webkit-gradient(linear, left top, right top, from(#04798a), to(#a2d7df));
position:fixed;
z-index: 2;
animation: 1.2s ease homebarslidetop;
-webkit-animation: 1.2s ease homebarslidetop;
-moz-animation: 1.2s ease homebarslidetop;
-o-animation: 1.2s ease homebarslidetop;
-ms-animation: 1.2s ease homebarslidetop ;
}
@keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-webkit-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-moz-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-o-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-ms-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
#camerabarwhite{
width:100%;
height:5%;
left:0%;
top:0%;
background: #ffffff;
position:fixed;
z-index: 2;
animation: 1.2s ease homebarwhite;
-webkit-animation: 1.2s ease homebarwhite;
-moz-animation: 1.2s ease homebarwhite;
-o-animation: 1.2s ease homebarwhite;
-ms-animation: 1.2s ease homebarwhite ;
}
@keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-webkit-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-moz-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-o-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-ms-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
#Cameratextinmenu{
position:fixed;
font-weight:lighter;
font-size:150%;
left:5%;
bottom:90.5%;
z-index:3;
color: #ffffff;
animation: 1.2s ease Cameratextinmenu;
-webkit-animation: 1.2s ease Cameratextinmenu;
-moz-animation: 1.2s ease Cameratextinmenu;
-o-animation: 1.2s ease Cameratextinmenu;
-ms-animation: 1.2s ease Cameratextinmenu ;
}
@keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-webkit-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-moz-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-o-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-ms-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
#camera img {position:absolute;}
#photodone{
width:50%;
height:10%;
bottom:20%;
left:5%;
z-index: 1;
}
#logoforcamerapage{
width:50%;
height:10%;
left:28%;
position:fixed;
z-index: 1;
}
#Description {
width:75%;
left:18.5%;
top:38%;
padding: 0; /* Overridden by padding: 1px; */
font-family: Helvetica; /* Overridden by font: -webkit-small-control; */
border: 5% transparent white; /* Overridden by border: 2px inset; */
background: white; /* Overridden by background-color: white; */
line-height: 1;
z-index: 1;
position: absolute;
}
#Title{
width:75%;
left:18.5%;
top:28.5%;
padding: 0; /* Overridden by padding: 1px; */
font-family: Helvetica; /* Overridden by font: -webkit-small-control; */
border: 5% transparent white; /* Overridden by border: 2px inset; */
background: white; /* Overridden by background-color: white; */
line-height: 1;
z-index: 1;
position: absolute;
}
input[type=file] {
width:75%;
left:19%;
top:20%;
padding: 0; /* Overridden by padding: 1px; */
font-family: Helvetica; /* Overridden by font: -webkit-small-control; */
border: 5% transparent white; /* Overridden by border: 2px inset; */
background: white; /* Overridden by background-color: white; */
line-height: 1;
z-index: 1;
position: absolute;
}
form {
min-width: 81%;/* set the min width here */
width: 85%;
height:20%;
max-width: 81%;/* set the max width here */
margin: 30% 16%;
}
form textarea,
form input {
width: 100%;
}
#show-picture{
width:74.5%;
height:58%;
left:19%;
top:82%;
}
Some JavaScript from the App:
var url = 'http://desolate-spire-7901.herokuapp.com/locations/';
var watchID;
var geo;
var map;
var mapMaker;
var MAXIMUM_AGE = 200;
var TIMEOUT = 300000;
var HIGHACCURACY = true;
var AbelTasman = new google.maps.LatLng(-40.934774, 172.972194);
var circle;
var bounds;
var drops = [];
var infow = [];
var currentid;
var fakeGPS = false;
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to AbelTasman';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Abel Tasman<b>'
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(AbelTasman)
});
}
function getGeoLocation() {
try {
if (!!navigator.geolocation) {
console.log(navigator.geolocation);
return navigator.geolocation;
}
else {
return undefined;
}
}
catch(e) {
return undefined;
}
}
function show_map(position) {
if (fakeGPS) {
var lat = -41.2961783603629;
var lon = 174.775206793936;
} else {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
}
var latlng = new google.maps.LatLng(lat, lon);
if (map) {
//Map already exists, just upade your position and redo the cirlce/drops etc..
map.panTo(latlng);
mapMarker.setPosition(latlng);
bounds = circle.getBounds();
//Re-check all the drops
for (var i = 0; i < drops.length; i++) {
updateMarker(drops[i]);
}
}
else {
//Map doesn't exist yet, create it!
var myStyles = [
{
stylers: [
{ saturation: -20 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "poi",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var myOptions = {
zoom: 18,
center:latlng,
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:myStyles
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setTilt(0);
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
//homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
mapMarker = new google.maps.Marker({
position: latlng,
map:map,
title:"You are here.",
animation:google.maps.Animation.BOUNCE
});
circle = new google.maps.Circle({
map:map,
radius: 50,
strokeColor: '#4ABA8D',
fillColor: '#99FFBB'
});
circle.bindTo('center', mapMarker, 'position');
bounds = circle.getBounds();
mapMarker.setMap(map);
refreshMarkers();
}
}
function createMarkers(data) {
console.log("create");
for (var i = 0; i < data.length; i++) {
var drop = data[i];
var latlng = new google.maps.LatLng(drop.latitude, drop.longitude);
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.DROP,
title: drop.title,
description: drop.description,
tag: drop.tag,
uploader: drop.uploadername,
upvotes: drop.upvotes,
downvotes: drop.downvotes,
id: drop.dropid,
map: map
});
updateMarker(marker);
drops.push(marker);
}
google.maps.event.addListener(map, 'click', function() {
for (var i=0; i<infow.length; i++)
infow[i].setMap(null);
});
}
function updateMarker(marker) {
var showNature = document.filter[0].checked;
var showWildlife = document.filter[1].checked;
var showPeople = document.filter[2].checked;
var showTreasure = document.filter[3].checked;
var showOther = document.filter[4].checked;
var filtered = filter.value;
var contentString;
var rating = (((marker.upvotes) / (marker.upvotes + marker.downvotes)) * 5).toFixed(1);
var latlng = marker.getPosition();
if (marker.upvotes == 0)
rating = 0;
else if (marker.downvotes == 0) {
if (marker.upvotes<5)
rating = marker.upvotes;
else
rating = 5;
}
if (rating < filtered)
marker.setMap(null);
else
marker.setMap(map);
if (!marker.getVisible())
marker.setAnimation(google.maps.Animation.DROP);
if (marker.tag == "Nature") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
marker.setVisible(showNature);
}
else if (marker.tag == "Wildlife") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
marker.setVisible(showWildlife);
}
else if (marker.tag == "People") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/orange-dot.png');
marker.setVisible(showPeople);
}
else if (marker.tag == "Treasure") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png');
marker.setVisible(showTreasure);
}
else {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/purple-dot.png');
marker.setVisible(showOther);
}
google.maps.event.clearListeners(marker, 'dblclick');
if (bounds.contains(latlng) && ((google.maps.geometry.spherical.computeDistanceBetween(latlng, mapMarker.getPosition())) <= 50) ) {
contentString = '<div>' +
'<h1>' + marker.title +'</h1>' +
'<p>uploaded by ' + marker.uploader + '<p>' +
'<p>' + marker.description + '<p>' +
'<p>Rating: ' + rating +'/5<p>' +
'</div>';
google.maps.event.addListener(marker, 'dblclick', function() {
console.log("doubleclick");
window.location.replace("#showdrop");
$.get(url + marker.id, function(data) {
console.log(data);
var pic = document.querySelector("#drop-picture");
console.log(marker.id);
pic.src = data;
pic.width = 500;
pic.height = 300;
currentid = marker.id;
document.getElementById("currenttitle").innerHTML = marker.title;
document.getElementById("currentdesc").innerHTML = marker.description;
//$("#drop-picture").attr('src', url + marker.id);
//console.log(data);
});
});
//window.open( "http://fathomless-shore-7584.herokuapp.com/locations/" + marker.id )
}
else {
marker.setIcon('http://maps.google.com/mapfiles/marker_grey.png');
contentString = '<div>' +
'<h1>' + marker.title + '</h1>' +
'<p>Rating: ' + rating + '/5<p>' +
'<p>Move closer to view this drop<p>' +
'</div>';
}
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infow.push(infowindow);
google.maps.event.clearListeners(marker, 'click');
google.maps.event.addListener(marker, 'click', function() {
for (var i=0; i<infow.length; i++)
infow[i].setMap(null);
infowindow.open(map, marker);
});
}
function refreshMarkers() {
//Remove all the current markers
for (var i = 0; i < drops.length; i++) {
drops[i].setMap(null);
}
for (i=0; i<infow.length; i++)
infow[i].setMap(null);
infow = [];
drops = [];
setTimeout(function(){
console.log("refresh");
$.getJSON(url, function(data) {
createMarkers(data.drops);
});
}, 250);
}
function upvoteDrop() {
var upvoteid = currentid;
$.get('http://desolate-spire-7901.herokuapp.com/upvote/'+upvoteid);
alert("Upvoting Drop:"+upvoteid+"\nVotes may take a while to update.");
}
function downvoteDrop() {
var downvoteid = currentid;
$.get('http://desolate-spire-7901.herokuapp.com/downvote/'+downvoteid);
alert("Downvoting Drop: "+downvoteid+"\nVotes may take a while to update.");
}
function geo_error(error) {
stopWatching();
switch(error.code) {
case error.TIMEOUT:
alert('Geolocation Timeout');
break;
case error.POSITION_UNAVAILABLE:
alert('Geolocation Postion unavailable');
break;
case error.PERMISSION_DENIED:
alert('Geolocation Permission denied');
break;
default:
alert('Geolocation returned an unknown error code: ' + error.code);
}
}
function stopWatching() {
if (watchID) geo.clearWatch(watchID);
watchID = null;
}
function startWatching() {
watchID = geo.watchPosition(show_map, geo_error, {
enableHighAccuracy: HIGHACCURACY,
maximumAge: MAXIMUM_AGE,
timeout: TIMEOUT
});
console.log(geo);
}
window.onload = function() {
//???
}
$("#drop").on("pageshow",function() {
//google.maps.event.trigger(map, 'resize');
//map.setZoom( map.getZoom() );
if (fakeGPS) show_map(null);
else {
if ((geo = getGeoLocation())) {
startWatching();
}
else {
alert('Geolocation not supported.')
}
}
});
Design and build a conversationally responsible, counter-consumerist culture mobile application.
This was a group project and our app was called "Drop".
Link to video: https://www.youtube.com/watch?v=dKAMwMD9ux4&feature=youtu.be
Some HTML from the App:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="css/Intro.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/loginpage.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/Facebook.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/Google.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/home.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/guesthome.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/geo.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mypanel.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/drop.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/dropguest.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/camera.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/upload.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/size.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/hidecameratext.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/Settings.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/hidetext.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/mydropspage.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/explain.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/viewdrop.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/hidetestinmydrops.css" type="text/css" media="screen">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<style>
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}
ul.sdt_menu{
margin-top:150px;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div data-role="page" id="loginpage">
<div data-role="main" class="ui-content">
<img id = "droplogogif" src="images/thebluegif.gif" >
<a href = "#guesthome" data-transition="slide"><img id = "guesticon" src="images/circles.png" ></a>
<a href = "#Facebook" data-transition="slide"><img id = "facebookicon" src="images/circles.png" ></a>
<a href = "#explainpage" data-transition="slide"><img id = "explain" src="images/circles.png" ></a>
<div id="loginbarslidetop"></div>
<div id= "logintext"><p> Log In</p></div>
<div id="loginbarwhite"></div>
</div>
</div>
<div data-role="page" id="Facebook">
<div data-role="main" class="ui-content">
<div id= "Loginfacebook"><p>Log In</p></div>
<div id="facebookbarwhite"></div>
<div id="facebookbarslidetop"></div>
<div id="facebookslide"></div>
<br><br><br>
<form action="demo_form.asp" onsubmit="facebooklogin()" id="thebox">
<br><br><br><br>
Username: <input type="text" id="FacebookId" value=""><br>
Password: <input type="text" id="FacebookPassword" value=""><br>
<br>
<input id="sumbitbuttonlogin" type="submit" value="Submit">
</form>
</div>
</div>
<div data-role="page" id="home">
<div data-role="main" class="ui-content">
<div id= "homepage"><p>Home</p></div>
<div id="homebarslidetop"></div>
<div id="homebarwhite"></div>
<a href = "#camera" data-transition="slide"><img id ="Cameracircle" src="images/circles.png">
<a href = "#mydrop" data-transition="slide"><img id ="Mydropcircle" src="images/circles.png">
<a href = "#drop" data-transition="slide"><img id ="Mapcircle" src="images/circles.png">
<a href = "#loginpage" data-transition="slide"><img id ="Logoutcircle" src="images/circles.png">
</div>
</div>
<div data-role="page" id="guesthome">
<div data-role="main" class="ui-content">
<div id= "guestpage"><p>Guest</p></div>
<div id="homebarslide"></div>
<div id ="guestbarwhite"></div>
<div id ="guestbarslidetop"></div>
<div id= "guestcameratext"><p> Camera</p></div>
<a data-transition="slide"><img id="guestarrowcamera" src="images/Arrow.png"/></a>
<div id="guestcamerabar"> </div>
<div id= "guestmydropstext"><p> My Drops</p></div>
<a data-transition="slide"><img id="guestarrowmydrops" src="images/Arrow.png"/></a>
<div id="guestmydropsbar"> </div>
<a href = "#guestdrop" data-transition="slide"><div id= "dropstext"><p>Drops</p></div></a>
<a href = "#guestdrop" data-transition="slide"><img id="arrowdrops" src="images/Arrow.png"/></a>
<a href = "#guestdrop" data-transition="slide"><div id="guestdropsbar"> </div></a>
<a href = "#loginpage" data-transition="slide"><div id= "logouttext"><p>Log Out</p></div></a>
<a href = "#loginpage" data-transition="slide"><img id="arrowlogout" src="images/Arrow.png"/></a>
<a href = "#loginpage" data-transition="slide"><div id="guestlogoutbar"> </div></a>
</div>
</div>
<div data-role="page" id="camera">
<div data-role="main" class="ui-content">
<div><img id="thecamerabackground" src='images/camerabackground.png'></div>
<div id= "Cameratextinmenu"><p>Make A Drop</p></div>
<div id= "camerabarwhite"></div>
<div id= "camerabarslidetop"></div>
<div class="bottomMenu"></div>
<br><br><br><br><br><br>
<form action="demo_form.asp">
<input type="file" id="image-upload" accept="image/*" capture onchange="photochosen(event)">
<br>
<input type="text" id="Title" value="Title.." maxlength="16"><br>
<input type="text" id="Description" value="Description.." rows="4" cols="50" maxlength="25"><br>
<div id="selecttag"><p>Select a tag</p></div>
<select id="Category">
<option value="Nature">Nature</option>
<option value="Wildlife">Wildlife</option>
<option value="People">People</option>
<option value="Treasure">Treasue</option>
<option value="Other">Other</option>
</select>
<br>
</form>
<img src="about:blank" alt="" id="show-picture">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" data-transition="slide"> <img id="leafbutton" src="images/circles.png" onclick="photoupload()"></a>
<a href="#home" data-transition="slide"> <img id="homebutton" src="images/circles.png"></a>
<br><br><br><br>
</div>
</div>
<div data-role="page" id="mydrop">
<div data-role="main" class="ui-content">
<div id= "Mydroptext"><p>My Drops</p></div>
<div id="mydropsbarinmenu"></div>
<div class="bottomMenu"></div>
<div id = "mydropsbarwhite"></div>
<div id ="mydropsbarslidetop"></div>
<div id="diagonal"></div>
<div id="circle1"></div>
<div class="content">
<ul id="sdt_menu" class="sdt_menu">
</ul>
<a href="#home" data-transition="slide"> <img id="homebutton2" src="images/circles.png"></a>
</div>
<a href="#home" data-transition="slide"><img id="backarrow2" src="images/backarrow2.png"/></a>
</div>
</div>
<div data-role="page" id="drop">
<img id="themapbackground"src="images/mapbackground.png"/>
<div id="map_canvas"></div>
<div id="toprect"></div>
<div id="topof"></div>
<div id= "Maptitle"><p>Drops Map</p></div>
<div id="mapbarslide"></div>
<a href="#mypanel" data-transition="slide"><img id="setbutton" src="images/circles.png"/></a>
<a href="#home" data-transition="slide"><img id ="backarrow2" src="images/circles.png" ></a>
<a href="#camera" data-transition="slide"><img id ="cameralink" src="images/circles.png" ></a>
<img id ="refresh"src="images/refresh.png" onclick="refreshMarkers()">
</div>
<div data-role="page" id="guestdrop">
<div id="map_canvas"></div>
<div id= "Dropsmap"><p>Drops Map</p></div>
<div id="mapbarslide"></div>
<a href="#mypanel" data-transition="slide"><img id="setbutton" src="images/circles.png"/></a>
<a href="#guesthome" data-transition="slide"><img id ="backarrow2" src="images/backarrow2.png" ></a>
</div>
<div data-role="page" id="mypanel">
<img id="settingsbackground"src="images/settingsbackground.png"/>
<div id="settingssbarslidetop"></div>
<div id="settingsettingbarwhite"></div>
<div id= "themapsetting"><p>Map Settings</p></div>
<div id= "Lowestrateddrop"><font size="3"><p>View drops with a rating of :</p></font></div>
<form name = "filter">
<br><br><br><br>
<div id= "naturedrops"><font size="4"><p>Nature Drops</p></font></div>
<div id= "wildlifedrops"><font size="4"><p>Wildlife Drops</p></font></div>
<div id= "peopledrops"><font size="4"><p>People Drops</p></font></div>
<div id= "treasuredrops"><font size="4"><p>Treasure Drops</p></font></div>
<div id= "otherdrops"><font size="4"><p>Other Drops</p></font></div>
<div id= "visdrops"><font size="3"><p>Drops Visible</p></font></div>
<div id="naturecolor"></div>
<div id="wildlifecolor"></div>
<div id="peoplecolor"></div>
<div id="treasurecolor"></div>
<div id="othercolor"></div>
<div id="checkbox1" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch" name="Nature" value="Nature" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox2" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch2" name="Wildlife" value="Wildlife" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox3" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch3" name="People" value="People" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox4" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch4" name="Treasure" value="Treasure" checked="checked" data-role="flipswitch">
</div>
<br>
<div id="checkbox5" data-role="fieldcontain">
<input type="checkbox" id="checkbox-based-flipswitch5" name="Other" value="Other" checked="checked" data-role="flipswitch">
</div>
<div id="try"><input type="range" min="0" max="5" value="0" step="1" onchange="showValue(this.value)" id="thesliderbar"/></div>
</form>
<a href="#drop" data-transition="slide"><img id="backarrow2" src="images/backarrow2.png"/></a>
</div>
<div data-role="page" id="showdrop">
<div id="viewdropsslidetop"></div>
<div id="whitedropbar"></div>
<br><br><br><br>
<h1 id="currenttitle"></h1>
<p id="currentdesc"></p>
<img src="about:blank" alt="" id="drop-picture">
<a href="#drop" data-transition="slide"><img id="back1" src="images/circles.png" onclick="refreshMarkers()"/></a>
<a> <img id="upvote" src="images/circles.png" onclick="upvoteDrop()"/></a>
<a> <img id="downvote" src="images/circles.png" onclick="downvoteDrop()"/></a>
</div>
<div data-role="page" id="explainpage">
<div data-role="main" class="ui-content">
<div id="explainbarbar"></div>
<div id=""></div>
<a href = "#loginpage" data-transition="slide"><img id="backbuttonexplain" src="images/circles.png"></a>
<img id="Theexplainlogonew" src="images/logoalone.png">
<img id="thebluething" src="images/bluebarthing.png">
<img id="thewhitething" src="images/whitebarthing.png">
<div id="Theexplainlogo"><img src="images/logoalone.png">
<div id="bacccccck"><img src="images/textpage.png">
<div id="infront">
<font size="5" ><p style="position: absolute; color:white" id="para1"><br>Welcome to Drop</p></font>
<br>
<p style="position: absolute; color:white" id="firstsen">Ever wanted to leave your presence at your favourite location forever. Such as Abel Tasman Park? For everyone else to see?
Well now you can with our app called Drop.
</p>
<br>
<font size="5"><p style="position: absolute; color:white" id="parahow">How to use Drop</p></font>
<br>
<p style="position: absolute; color:white" id="para2">
If you see something you like while wandering around the park, you can seize the moment by using our app!
</p>
<br>
<p style="position: absolute; color:white" id="para3">
Firstly you choose whether you want to log in via Facebook or guest.
This will re-direct you accordingly. Once logged in the app will direct you to the home screen. This page you will see four buttons which are the camera, drops, map and logout. </p>
<br>
<p style="position: absolute; color:white" id="para4">
If you tap on the camera icon you will be able to capture a photo you want to upload. You can give it a title and description along with selecting a genre, then you can preview your image and then drop your image by clicking the Drop icon which is located below your previewed image. This will now re-direct to the map where you will see your freshly uploaded Drop at your current GPS location. From here you can click on your drop to view the title and description and double click to view the complete package which includes the title, description and image.
</p>
<br>
<p style="position: absolute; color:white" id="para5">
On the map you can view all the drops within a certain radius of your position. The idea of the radius is to create an incentive for the you to keep on walking to find and view more ‘drops’. All other drops are greyed out an un-viewable. There are four buttons at the bottom of the page that re-direct you to certain parts of the app. A settings buttons that has options where you can control what kind of drops you want to view. You can turn off/on the genres of the drops, so for example if you wanted to just see a nature drop, you can toggle it accordingly. The slider is to change the rating of the view you want to see, so for example if you wanted to see the highest rating (5) you would change the slider accordingly. The next button on the map is a refresh button which refreshes the map, so if the drops aren’t showing up for some reason you can refresh the page. Third button is a camera button to re-direct you back to the camera page just in case you want to take more than one photo. Then lastly a home button which re-directs you to the home.
</p>
<br>
<p style="position: absolute; color:white" id="para6">
The drops page is where you can view your drops that you have uploaded to the map. So if you wanted to show you friends this awesome drop and not search through the map to access it, you can go to this page to find and view it.
</p>
</div>
</div>
</div>
</div>
</body>
<script src = "js/photoupload.js"> </script>
<script src = "js/page2.js"> </script>
<script src = "js/geo.js"> </script>
<script src = "js/guestgeo.js"> </script>
<script src = "js/range.js"> </script>
<script src = "js/menu.js"> </script>
<script src = "js/dropdown.js"> </script>
<script src = "js/jquery.easing.1.3.js"> </script>
<script src = "js/hide.js"> </script>
<script src = "js/hidemydropstext.js"> </script>
<script src = "js/dropdowntext.js"> </script>
<script src = "js/hidetextinmydrops.js"> </script>
<script src = "js/hidedroptext.js"> </script>
<script src = "js/hidecameratext.js"> </script>
<script src = "js/loginpage.js"> </script>
<script src = "js/mydrops.js"> </script>
</html>
Some CSS from the App. One section of 24 pages of CSS:
#camera{
width:100%;
height:100%;
background:#000000;
background-size: cover;
color: #ffffff;
}
#selecttag{
position:absolute;
font-weight:lighter;
font-size:150%;
left:20%;
bottom:48%;
z-index:3;
color: #ffffff;
}
#leafbutton{
width: 42%;
height: 23%;
right: 22%;
bottom: -70%;
z-index: 1;
opacity: 0;
}
#homebutton{
width: 23%;
height: 13%;
right: 75%;
bottom: -75%;
z-index: 1;
opacity: 0;
}
#thecamerabackground{
left:0%;
height: 175%;
width:102%;
top:1%;
}
#camerabarslidetop{
width:100%;
height:7%;
left:0%;
top:5%;
opacity: 1;
filter: alpha(opacity=0.05); /* For IE8 and earlier */
background: -webkit-gradient(linear, left top, right top, from(#04798a), to(#a2d7df));
position:fixed;
z-index: 2;
animation: 1.2s ease homebarslidetop;
-webkit-animation: 1.2s ease homebarslidetop;
-moz-animation: 1.2s ease homebarslidetop;
-o-animation: 1.2s ease homebarslidetop;
-ms-animation: 1.2s ease homebarslidetop ;
}
@keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-webkit-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-moz-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-o-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
@-ms-keyframes homebarslidetop {
from {left:-200%;}
to {left:0%;}
}
#camerabarwhite{
width:100%;
height:5%;
left:0%;
top:0%;
background: #ffffff;
position:fixed;
z-index: 2;
animation: 1.2s ease homebarwhite;
-webkit-animation: 1.2s ease homebarwhite;
-moz-animation: 1.2s ease homebarwhite;
-o-animation: 1.2s ease homebarwhite;
-ms-animation: 1.2s ease homebarwhite ;
}
@keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-webkit-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-moz-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-o-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
@-ms-keyframes homebarwhite {
from {left:-200%;}
to {left:0%;}
}
#Cameratextinmenu{
position:fixed;
font-weight:lighter;
font-size:150%;
left:5%;
bottom:90.5%;
z-index:3;
color: #ffffff;
animation: 1.2s ease Cameratextinmenu;
-webkit-animation: 1.2s ease Cameratextinmenu;
-moz-animation: 1.2s ease Cameratextinmenu;
-o-animation: 1.2s ease Cameratextinmenu;
-ms-animation: 1.2s ease Cameratextinmenu ;
}
@keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-webkit-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-moz-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-o-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
@-ms-keyframes Cameratextinmenu {
from {left:-50%;}
to {left:5%;}
}
#camera img {position:absolute;}
#photodone{
width:50%;
height:10%;
bottom:20%;
left:5%;
z-index: 1;
}
#logoforcamerapage{
width:50%;
height:10%;
left:28%;
position:fixed;
z-index: 1;
}
#Description {
width:75%;
left:18.5%;
top:38%;
padding: 0; /* Overridden by padding: 1px; */
font-family: Helvetica; /* Overridden by font: -webkit-small-control; */
border: 5% transparent white; /* Overridden by border: 2px inset; */
background: white; /* Overridden by background-color: white; */
line-height: 1;
z-index: 1;
position: absolute;
}
#Title{
width:75%;
left:18.5%;
top:28.5%;
padding: 0; /* Overridden by padding: 1px; */
font-family: Helvetica; /* Overridden by font: -webkit-small-control; */
border: 5% transparent white; /* Overridden by border: 2px inset; */
background: white; /* Overridden by background-color: white; */
line-height: 1;
z-index: 1;
position: absolute;
}
input[type=file] {
width:75%;
left:19%;
top:20%;
padding: 0; /* Overridden by padding: 1px; */
font-family: Helvetica; /* Overridden by font: -webkit-small-control; */
border: 5% transparent white; /* Overridden by border: 2px inset; */
background: white; /* Overridden by background-color: white; */
line-height: 1;
z-index: 1;
position: absolute;
}
form {
min-width: 81%;/* set the min width here */
width: 85%;
height:20%;
max-width: 81%;/* set the max width here */
margin: 30% 16%;
}
form textarea,
form input {
width: 100%;
}
#show-picture{
width:74.5%;
height:58%;
left:19%;
top:82%;
}
Some JavaScript from the App:
var url = 'http://desolate-spire-7901.herokuapp.com/locations/';
var watchID;
var geo;
var map;
var mapMaker;
var MAXIMUM_AGE = 200;
var TIMEOUT = 300000;
var HIGHACCURACY = true;
var AbelTasman = new google.maps.LatLng(-40.934774, 172.972194);
var circle;
var bounds;
var drops = [];
var infow = [];
var currentid;
var fakeGPS = false;
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to AbelTasman';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Abel Tasman<b>'
controlUI.appendChild(controlText);
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(AbelTasman)
});
}
function getGeoLocation() {
try {
if (!!navigator.geolocation) {
console.log(navigator.geolocation);
return navigator.geolocation;
}
else {
return undefined;
}
}
catch(e) {
return undefined;
}
}
function show_map(position) {
if (fakeGPS) {
var lat = -41.2961783603629;
var lon = 174.775206793936;
} else {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
}
var latlng = new google.maps.LatLng(lat, lon);
if (map) {
//Map already exists, just upade your position and redo the cirlce/drops etc..
map.panTo(latlng);
mapMarker.setPosition(latlng);
bounds = circle.getBounds();
//Re-check all the drops
for (var i = 0; i < drops.length; i++) {
updateMarker(drops[i]);
}
}
else {
//Map doesn't exist yet, create it!
var myStyles = [
{
stylers: [
{ saturation: -20 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "poi",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var myOptions = {
zoom: 18,
center:latlng,
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:myStyles
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map.setTilt(0);
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
//homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
mapMarker = new google.maps.Marker({
position: latlng,
map:map,
title:"You are here.",
animation:google.maps.Animation.BOUNCE
});
circle = new google.maps.Circle({
map:map,
radius: 50,
strokeColor: '#4ABA8D',
fillColor: '#99FFBB'
});
circle.bindTo('center', mapMarker, 'position');
bounds = circle.getBounds();
mapMarker.setMap(map);
refreshMarkers();
}
}
function createMarkers(data) {
console.log("create");
for (var i = 0; i < data.length; i++) {
var drop = data[i];
var latlng = new google.maps.LatLng(drop.latitude, drop.longitude);
var marker = new google.maps.Marker({
position: latlng,
animation: google.maps.Animation.DROP,
title: drop.title,
description: drop.description,
tag: drop.tag,
uploader: drop.uploadername,
upvotes: drop.upvotes,
downvotes: drop.downvotes,
id: drop.dropid,
map: map
});
updateMarker(marker);
drops.push(marker);
}
google.maps.event.addListener(map, 'click', function() {
for (var i=0; i<infow.length; i++)
infow[i].setMap(null);
});
}
function updateMarker(marker) {
var showNature = document.filter[0].checked;
var showWildlife = document.filter[1].checked;
var showPeople = document.filter[2].checked;
var showTreasure = document.filter[3].checked;
var showOther = document.filter[4].checked;
var filtered = filter.value;
var contentString;
var rating = (((marker.upvotes) / (marker.upvotes + marker.downvotes)) * 5).toFixed(1);
var latlng = marker.getPosition();
if (marker.upvotes == 0)
rating = 0;
else if (marker.downvotes == 0) {
if (marker.upvotes<5)
rating = marker.upvotes;
else
rating = 5;
}
if (rating < filtered)
marker.setMap(null);
else
marker.setMap(map);
if (!marker.getVisible())
marker.setAnimation(google.maps.Animation.DROP);
if (marker.tag == "Nature") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
marker.setVisible(showNature);
}
else if (marker.tag == "Wildlife") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
marker.setVisible(showWildlife);
}
else if (marker.tag == "People") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/orange-dot.png');
marker.setVisible(showPeople);
}
else if (marker.tag == "Treasure") {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png');
marker.setVisible(showTreasure);
}
else {
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/purple-dot.png');
marker.setVisible(showOther);
}
google.maps.event.clearListeners(marker, 'dblclick');
if (bounds.contains(latlng) && ((google.maps.geometry.spherical.computeDistanceBetween(latlng, mapMarker.getPosition())) <= 50) ) {
contentString = '<div>' +
'<h1>' + marker.title +'</h1>' +
'<p>uploaded by ' + marker.uploader + '<p>' +
'<p>' + marker.description + '<p>' +
'<p>Rating: ' + rating +'/5<p>' +
'</div>';
google.maps.event.addListener(marker, 'dblclick', function() {
console.log("doubleclick");
window.location.replace("#showdrop");
$.get(url + marker.id, function(data) {
console.log(data);
var pic = document.querySelector("#drop-picture");
console.log(marker.id);
pic.src = data;
pic.width = 500;
pic.height = 300;
currentid = marker.id;
document.getElementById("currenttitle").innerHTML = marker.title;
document.getElementById("currentdesc").innerHTML = marker.description;
//$("#drop-picture").attr('src', url + marker.id);
//console.log(data);
});
});
//window.open( "http://fathomless-shore-7584.herokuapp.com/locations/" + marker.id )
}
else {
marker.setIcon('http://maps.google.com/mapfiles/marker_grey.png');
contentString = '<div>' +
'<h1>' + marker.title + '</h1>' +
'<p>Rating: ' + rating + '/5<p>' +
'<p>Move closer to view this drop<p>' +
'</div>';
}
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infow.push(infowindow);
google.maps.event.clearListeners(marker, 'click');
google.maps.event.addListener(marker, 'click', function() {
for (var i=0; i<infow.length; i++)
infow[i].setMap(null);
infowindow.open(map, marker);
});
}
function refreshMarkers() {
//Remove all the current markers
for (var i = 0; i < drops.length; i++) {
drops[i].setMap(null);
}
for (i=0; i<infow.length; i++)
infow[i].setMap(null);
infow = [];
drops = [];
setTimeout(function(){
console.log("refresh");
$.getJSON(url, function(data) {
createMarkers(data.drops);
});
}, 250);
}
function upvoteDrop() {
var upvoteid = currentid;
$.get('http://desolate-spire-7901.herokuapp.com/upvote/'+upvoteid);
alert("Upvoting Drop:"+upvoteid+"\nVotes may take a while to update.");
}
function downvoteDrop() {
var downvoteid = currentid;
$.get('http://desolate-spire-7901.herokuapp.com/downvote/'+downvoteid);
alert("Downvoting Drop: "+downvoteid+"\nVotes may take a while to update.");
}
function geo_error(error) {
stopWatching();
switch(error.code) {
case error.TIMEOUT:
alert('Geolocation Timeout');
break;
case error.POSITION_UNAVAILABLE:
alert('Geolocation Postion unavailable');
break;
case error.PERMISSION_DENIED:
alert('Geolocation Permission denied');
break;
default:
alert('Geolocation returned an unknown error code: ' + error.code);
}
}
function stopWatching() {
if (watchID) geo.clearWatch(watchID);
watchID = null;
}
function startWatching() {
watchID = geo.watchPosition(show_map, geo_error, {
enableHighAccuracy: HIGHACCURACY,
maximumAge: MAXIMUM_AGE,
timeout: TIMEOUT
});
console.log(geo);
}
window.onload = function() {
//???
}
$("#drop").on("pageshow",function() {
//google.maps.event.trigger(map, 'resize');
//map.setZoom( map.getZoom() );
if (fakeGPS) show_map(null);
else {
if ((geo = getGeoLocation())) {
startWatching();
}
else {
alert('Geolocation not supported.')
}
}
});
Subscribe to:
Posts (Atom)