THIS PROJECT IS IN DEVELOPMENT SurfMe is a surfboard leash that is able to help keep you safe in the water by warning you when the water is going to get too dangerous.…

No title available

Product Placement

⁂
No title available
cherry valley forever
KIROKAZE

@theartofmadeline

#extradirty
I'd rather be in outer space 🛸

❣ Chile in a Photography ❣
almost home

oozey mess
Mike Driver

Janaina Medeiros
No title available
Today's Document
Three Goblin Art
taylor price
No title available
hello vonnie

seen from United States

seen from United States

seen from India
seen from United States

seen from Singapore
seen from United States
seen from Sweden
seen from United States
seen from United States

seen from Malaysia
seen from United States
seen from United States
seen from South Africa

seen from Türkiye

seen from United States
seen from Netherlands

seen from Malaysia
seen from United States

seen from India
seen from United States
@maddieinteractiondesign-blog
THIS PROJECT IS IN DEVELOPMENT SurfMe is a surfboard leash that is able to help keep you safe in the water by warning you when the water is going to get too dangerous.…
Here is the online hub for surf me. It is functional however If I was to carry this project further I would like to create a separate app version, this way I will be able to build a website version purely with a vision of big screens and then an app version to suit the users on their phones.
GPS GOOGLE MAP TRACKING After trying many different ways of getting the GPS tracking to work, I started with the google maps example and I firstly I managed to get it working so that every time the user moved a new marker was drawn. From here I needed to add tweak to code to add a poly line between each new point. After I managed to get this working I added a boolean recording statement and added some start and stop recording buttons. This allows the user to start and stop mapping their co-ordinates.
GOOGLE MAPS POLYLINES
The final part of finishing my online hub is sorting google maps and it tracking and drawing out your surf path. I have tried lots of different ways of doing it but so far not so successful. I started with a Location Tracker a JQuery plugin that works with google maps. However I found this really restricting and wasn’t able to do what I wanted.
Next I tried Insta Mapper, this site works my using the GPS on your mobile phone and then it is able to send all its points into a JSON file and then from here I would be able to show the mapping of points. This option worked well however I decided not to pursue as it was using someone else’s tech and the documentation was poor. Finally I have decided to go back to google maps and use their simpe poly line example. I am planning to adapt it so that everytime a new point is pushed into the array it will draw a line between the two points.
PARSE BRINGING UP MULTIPLE IMAGES
To finish my friends page I needed to be able to bring up all the users profile pictures to show who is currently on SurfMe. From previous code I am able to bring up the current users profile pictures however I couldn’t find a way of getting parse to bring up all the images form the users. After a very long afternoon looking into google and previous people who have asked similar questions, I was able to come up with some results.
Here are some blogs that helped me solve my questions:
https://www.parse.com/docs/js/guide#objects-data-types
http://stackoverflow.com/questions/18553290/how-do-i-display-images-from-parse-com-database-using-javascript
http://stackoverflow.com/questions/24336736/retrieving-images-from-parse-com-using-javascript
The biggest problem I encountered is the examples people gave weren’t working for me and I needed to find some line of code that was going to make it work. To make mine from I began exactly the same. I queried the user table and found all the profile images that existed. Then I created an empty array and underneath created a for loop to make a request for the images. Unlike the blogs before I pushed the images into the array I put in an extra var to get the images url before pushing it into the array.
This solved my issue and I was then able to finish it off and bring up all the images.
LINKING FACEBOOK TO PARSE USER:
I have tried to link Facebook with the parse user to be able to bring up a list of their friends that are also on SurfMe. I have been close to completing this, I managed to get one user signed up to Facebook and link it to their account however I was then not able to load friends or access anything on the facebook account. Since this project’s deadline is Friday 15th January, I am going to leave this and instead use the ‘Friends’ tab to bring up all the Users from Parse so the User is still able to compare their statistics against others.
Facebook Code (unfinished):
Parse.initialize("KEY", "KEY");
// This is called with the results from from FB.getLoginStatus(). function statusChangeCallback(response) { console.log('statusChangeCallback'); console.log(response); // The response object is returned with a status field that lets the // app know the current login status of the person. // Full docs on the response object can be found in the documentation // for FB.getLoginStatus(). if (response.status === 'connected') { // Logged into your app and Facebook. testAPI(); } else if (response.status === 'not_authorized') { // The person is logged into Facebook, but not your app. document.getElementById('status').innerHTML = 'Please log ' + 'into this app.'; } else { // The person is not logged into Facebook, so we're not sure if // they are logged into this app or not. document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.'; } }
// This function is called when someone finishes with the Login // Button. See the onlogin handler attached to it in the sample // code below. function checkLoginState() { FB.getLoginStatus(function(response) { statusChangeCallback(response); }); }
window.fbAsyncInit = function() { FB.init({ appId : 'KEY', cookie : true, // enable cookies to allow the server to access // the session xfbml : true, // parse social plugins on this page version : 'v2.2' // use version 2.2 });
// Now that we've initialized the JavaScript SDK, we call // FB.getLoginStatus(). This function gets the state of the // person visiting this page and can return one of three states to // the callback you provide. They can be: // // 1. Logged into your app ('connected') // 2. Logged into Facebook, but not your app ('not_authorized') // 3. Not logged into Facebook and can't tell if they are logged into // your app or not. // // These three cases are handled in the callback function.
FB.getLoginStatus(function(response) { statusChangeCallback(response); });
};
// Load the SDK asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is // successful. See statusChangeCallback() for when this call is made. function testAPI() { console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { console.log('Successful login for: ' + response.name); document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!'; }); FB.api( '/me', 'GET', {"fields":"id,name,friends{id,name,installed}"}, function(response) { console.log(response); } );
}
$(document).ready(function(){
var currentUser = Parse.User.current();
$('#fb-link').on('click', function(e){ if (!Parse.FacebookUtils.isLinked(currentUser)) { Parse.FacebookUtils.link(currentUser, null, { success: function(user) { alert("Woohoo, user logged in with Facebook!");
}, error: function(user, error) { alert("User cancelled the Facebook login or did not fully authorize."); } }); } });
$('#fb-unlink').on('click', function(e){ e.preventDefault(); FB.logout(function(response) { // Person is now logged out document.getElementById('status').innerHTML = 'Thanks for visiting, you are signed out'; }); });
});
Google Maps Update
When first coding the profile homepage, I used a plugin called locationPicker to load the google maps. However this has proved issues as I am not able to style the map that way I would like and I am not able to use google maps poly lines. I decided to rebuild this area and use the proper google maps api. I have written some code to get the users current location and then every time the users position moves the map will draw a poly line and calculate the overall distance. This is the code below - there are still some errors in here as it does not fully function yet (this just puts all the points into an array and calculates the distance): //create array for points to go into var pointsArray = [];//fing current position and navigator.geolocation.watchPosition(function(position) { document.getElementById('currentLat').innerHTML = position.coords.latitude; document.getElementById('currentLon').innerHTML = position.coords.longitude; var point = [position.coords.latitude, position.coords.longitude]; pointsArray.push(point); });function calculateDistance(latA, lonA, latB, lonB) { var R = 6371000; // metres var dLat = (lat2 - lat1).toRad(); var dLon = (lon2 - lon1).toRad(); var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; return d; } Number.prototype.toRad = function() { return this * Math.PI / 180; } var totalDistance = 0; for (var i = 1; i < pointsArray.length; i++){ var pointALat = pointsArray[i-1][0]; var pointALng = pointsArray[i-1][1]; var pointBLat = pointsArray[i][0]; var pointBLng = pointsArray[i][1]; var dist = calculateDistance(pointALat, pointALng, pointBLat, pointBLng); totalDistance = totalDistance + dist; }console.log("DISTANCE:" + totalDistance + " M");
Parse Image File FIXED
I have now managed to fix my gallery page. After going through each bit of code really carefully and making sure there were no silly errors I started to think more about how the code was reading. Then I realised this part of the code:
var currentUser = Parse.User.current(); var photoOne = currentUser.get("photoOne"); $("#photo-one")[0].src = photoOne.url(); var photoTwo = currentUser.get("photoTwo"); $("#photo-two")[0].src = photoTwo.url(); var photoThree = currentUser.get("photoThree"); $("#photo-three")[0].src = photoThree.url(); var photoFour = currentUser.get("photoFour"); $("#photo-four")[0].src = photoFour.url(); var photoFive = currentUser.get("photoFive"); $("#photo-five")[0].src = photoFive.url();
Wasn’t going to work until after the images had been uploaded.
So the next problem I had was the image automatically updating once the user had uploaded a new image. So come across this issue I added the code above into a window on load function. Now I have a fully working gallery page which updates the picture straight away after the user updates their images.
Parse Image File
I am now building my hub to have a gallery area for the user where they can set themselves 5 images of their sessions. So far I have managed to write the following:
JS: $(document).ready(function(){ Parse.User.current().fetch(); $("#gallery-settings").on('click',function(){ $('#picture-form').toggle(); $('#picture-form1').toggle(); $('#picture-form2').toggle(); $('#picture-form3').toggle(); $('#picture-form4').toggle(); });
var currentUser = Parse.User.current(); var photoOne = currentUser.get("photoOne"); $("#photo-one")[0].src = photoOne.url();
// --------------------------------------------------------------------- GALLERY $('#pic-one-save').on('click', function(e) { e.preventDefault(); //Upload first picture var fileUploadControl = $('#pic-one-set')[0];
if (fileUploadControl.files.length > 0) { var file = fileUploadControl.files[0]; var name = "photo1.jpg"; var parseFile = new Parse.File(name, file); } parseFile.save().then(function() { // The file has been saved to Parse. location.reload(); alert("saved"); }, function(error) { // The file either could not be read, or could not be saved to Parse. console.log("error"); }); currentUser.set("photoOne", parseFile); currentUser.save();
});
});
HTML:
<div class="column twoSmall bgBlue5" id="image-box"> <form id="picture-form"> <input type="file" id="pic-one-set" placeholder="CHANGE PICTURE" class="picture-box bgLightCoral"> <input type="submit" id="pic-one-save" class="picture-box"></input> </form> <img id="photo-one" src="img/no-profile.png"/> </div>
This works great for updating and changing one image tile. However as soon as I try to duplicate the code and change it for another image tile, everything breaks and it stops saving the images. I have been looking into using parse cloud as I have seen people are using this to save multiple images. For my next steps I will be looking at ways to upload galleries using parse, once I have this part working I will move onto intregating Facebook to be able to create the ‘friends’ tab on my hub
After a day of working with the switch, I have managed to get the api running when the switched is pressed down. The next step I am trying to do is get the switch to toggle on and off when it reads the API, however the issues I was finding when trying to code this is that the switch would successfully turn on and read the API however it won’t switch off again. Once I eventually get this part working I will have a basic working leash, I will then need to put the parts into the leash and turn it into an actually working prototype.
After trialling again and again with involt and trying to get it to work with my own project, I came across quite a lot of problems.
1. I wasnt able to fully load my project, it would not enable to me scroll down the pages and none of my links to other pages worked.
2. Because involt is for prototyping offline none of my links for styling.. ect worked.
So I decided this wasn’t going to be the best route to go down. I carried on my research online for another way of working the arduino off my hub. Eventually I cam across a tutorial by Sindre. He found a way to get the arduino LED to work through a switch put onto your website. To make this work the website has to be run through a server that supports PHP. I am currently running my hub through MAMP on my computer, this enabled me to set up the switch to work with the arduino.
In this tutorial its works by using a sketch in the arduino IDE and when run, you can open the serial monitor and send through a H or L to turn the LED on. Once this works I moved onto processing where I added an extra file name LEDstate.txt which reads whether on or off has been clicked on the page and then send a 1 or 0 to the arduino.
PROBLEMS AND NEXT STEPS:
I have it working so you are able to turn the LED on or off from my hub, however when I clicked on it automatically goes back to my index.html. I need to carefully read through all the code from the tutorial and find a way of manipulating it to not do this.
Then once I have completed this I need to set it up so that it doesn’t work of a switch but off an if statement, checking if the water is above the set level of the user.
Today after doing some research of how to get the arduino to read from a html page without an ethernet shield or wifi chip, I came across a program called involt. It’s a brilliant little program which lets you control your from a HTML page arduino through USB, It works from reading CSS classes as functions which is what I have used in this example, however Involt is also able to read as JQuery, which will be really useful as I am hoping I will be be able to add an IF statement to my api request to test the users inputed set wave height and the results from the api.
Next I had to built a way for the user to be able to select a beach without putting a number into an input box. To do this I built a find a beach page where the user is able to set their current local beach and for that beach it will bring up the max and min breaking wave height.
I built a database from the magic seaweed site in excel and then added this to parse. From using a series of different queries I started building this in the above picture where the user will click an option in the ‘place’ column and then the query will bring up all the results from the database.
When I first started building the api into my hub I came across a few new things that I needed to be able to understand.
This API runs off UNIX timestamps, which I have never come across before. I wrote the javascript to output predicted wave height, however as you can see from the image above, I had to manually choose which data to show.
To overcome this, I first then built an input where the user could choose a number and then once the submit button is clicked it will bring the predicted wave height for that data set.
From here I needed to built onto the javascript and make sure that when the user selected a beach that it would be the forecast closest to that time. I did this by building an if statement. Then I found an issue that it wouldn’t check to make sure that the date was actually in the future, so the outputted forecast was actually incredibly inaccurate. So from here I had to built another check to make sure that if the forecast was the closest to the current time that it could also be in the future.
To make this project work, I was thinking of using a mobile modular for the Arduino, I attempted plenty of times to get it working. Here is the example results from just trying to set up a sim card and make it connect to the carrier. This mobile modular is able to connect a sim card to the internet and work just like a phone, this would mean I could get it to read magic seaweeds API and make the led strip flash when the users settings had been reached. With this modular I was also hoping to use it as the GPS, however I then started thinking a little more and decided due to time constraints it seemed silly to try and built these when today’s mobile phones are able to do exactly what I needed and a lot better that the modular could do.
I have moved my project in a different direction and will make it work in another way. Since I wont have to the time to built further with the modular, the leash will run the api from being plugged straight into a laptop and I will set up an installation to show how it works. The surf me leash will have to work with the user’s phone for now.
With the phone in a waterproof pouch, you can take this on the water with you and the phone will take care of the GPS tracking and marking out your surfing session.
My parse database is definitely being well used.
Today I have been working on the user interface and the user experience. I have cleaned up a few links that were not necessary and made other parts easier on the eye. My main project today was to get the user to be able to set a profile picture. The user is now able to set their own profile picture and the hub will fetch this from the database and everytime a page has the profile picture on it will automatically update.