I’m excited

Journey Recording using GPS Tracking

I would like to make a page in my app where the user may press a button and begin recording a bike ride.

They should be able to:
- View their location at any given time on the map component
- View their data in real time as they ride, such as elapsed distance and current speed
- Press another button to cease the recording
- View the summary of all of the data at the end which includes average speed over the recorded time, the time elapsed, the distance traveled, and the route which they traveled on a map
-Share the summary of data via social network

Are all of these things possible? Thanks for your amazing help, I couldn't get anything done without you!

The project should be shared with support@tiggzi.com
4 people have
this question
+1
This topic is no longer open for comments or replies.
next » « previous
  • Hello! The problem is that you're trying to show too many points. Looks like there is no way to show so many points on a little graph. Try to decrease number of points. For example for first graph change code to the following
    var maxPoints = 100;

    var coordsArray = JSON.parse(localStorage.getItem("coordsArray"));
    var startTime = coordsArray[0].time;
    var points = [], j = 0, i, avrSpeed = 0;
    var interval = Math.round(coordsArray.length/maxPoints);
    for (i = 0; i < coordsArray.length; i++) {
    if (j < interval) {
    avrSpeed += coordsArray[i].speed;
    j++;
    } else {
    points.push([(coordsArray[i].time - startTime) / 1000 / 60, avrSpeed/j]);
    avrSpeed = 0;
    j = 0;

    }
    }
    var plot1 = $.jqplot('plot1', [points], {
    series: [{
    showMarker: false
    }],
    axes: {
    xaxis: {
    label: 'Journey time (minutes)',
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    },
    yaxis: {
    label: 'Speed (m/h)',
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    }
    }
    });
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Well, the only problem it seems is with the altitude jplot chart. So could I just amend the page show event to have
    var maxPoints = 100;

    and then

    var points = []; j = 0, i, alt = 0;
    var interval = Math.round(coordsArray.length/maxPoints);
    for (var i = 0; i < coordsArray.length; i++) {
    if (j < interval) {
    alt += coordsArray{}.alt;
    j++;
    } else {
    points.push([(coordsArray[i].time - startTime) / 1000, alt = 0; j = 0;
    }
    }
    for (var i = 0; i < coordsArray.length; i++) {
    points.push([(coordsArray[i].time - startTime) / 1000, alt/j]);
    alt = 0;
    j = 0;
    }
    };
    var plot2 = $.jqplot('plot2', [points], {
    series: [{
    showMarker: false
    }],
    axes: {
    xaxis: {
    label: 'Journey Time (minutes)',
    labelRender: $.jqplot.CanvasAxisLabelRenderer
    },
    yaxis: {
    label: 'Altitude (feet)',
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    }
    }
    });
    }
    Would this accommodate a proper range for the altitude jplot graph on results page?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hello! Try this
    var points = [], j = 0, i, alt = 0;
    var interval = Math.round(coordsArray.length/maxPoints);
    for (var i = 0; i < coordsArray.length; i++) {
    if (j < interval) {
    alt += coordsArray[i].alt;
    j++;
    } else {
    points.push([(coordsArray[i].time - startTime) / 1000 / 60, alt/j]);
    alt = 0;
    j = 0;
    }
    }
    var plot2 = $.jqplot('plot2', [points], {
    series: [{
    showMarker: false
    }],
    axes: {
    xaxis: {
    label: 'Journey Time (minutes)',
    labelRender: $.jqplot.CanvasAxisLabelRenderer
    },
    yaxis: {
    label: 'Altitude (feet)',
    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    }
    }
    });
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • I’m excited
    Hey Maryna! So once I add this code, the jplot graph no longer shows up. This is what is displayed in logcat: Any thoughts? Thanks very much!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hello! Looks like you have a typo somewhere. The final code should look like this:
    var maxPoints = 100;

    var coordsArray = JSON.parse(localStorage.getItem("coordsArray"));

    var startTime = coordsArray[0].time;
    var points = [], j = 0, i, avrSpeed = 0;
    var interval = Math.round(coordsArray.length/maxPoints);
    for (i = 0; i < coordsArray.length; i++) {
    if (interval < 1) {
    points.push([(coordsArray[i].time - startTime) / 1000 / 60, coordsArray[i].speed]);
    continue;
    }
    if (j < interval) {
    avrSpeed += coordsArray[i].speed;
    j++;
    } else {
    points.push([(coordsArray[i].time - startTime) / 1000 / 60, avrSpeed/j]);
    avrSpeed = 0;
    j = 0;

    }
    }
    var plot1 = $.jqplot('plot1', [points], {
    series: [{
    showMarker: false
    }],
    axes: {
    xaxis: {
    label: 'Journey time (minutes)',
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • I’m happy
    Thank you so much Maryna! It works wonderfully! It seemed so far away when it was first started, but now it's here! It's working! (mostly thanks to your team).

    I have 2 more questions pertaining to this section of the app.

    Must the altitude label on "recordride" page show the altitude from start? Or is there a way to show altitude difference from sea level?

    Also, is there a way to share the graphs (i.e. a screenshot) once the graphs are populated on the "results" page?

    I really really can't thank you all enough for your immense help. I wish I could throw a giant party and invite all of you!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hello!
    1)
    is there a way to show altitude difference from sea level
    not sure, but you can try.
    2) Yes, you can save as image
    var imgData = $('#plot1').jqplotToImageStr({});
    it returns base64 encoded string with image. You can send it where you need.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Thanks Maryna! I've added this to the top of page show event on results:

    var imgData = $('#plot1').jqplotToImageStr({});
    var imgData = $('#plot2').jqplotToImageStr({});


    But I'm not really sure if it did what it was supposed to, if anything. I found this example on stackoverflow:

    http://stackoverflow.com/questions/12...

    Where the user cites an example code like this:

    //after creating your plot do
    var imgData = $('#chart1').jqplotToImageStr({}); // given the div id of your plot, get the img data
    var imgElem = $('<img/>').attr('src',imgData); // create an img and add the data to it
    $('#imgChart1').append(imgElem);​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ // append the img to the DOM


    Is this applicable to my jqplot graphs?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hello! You can use that for your graph, but you don't need it. Think about what you need and where you want to send picture?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

  • I’m excited
    I'm not as familiar with the iOS operating system, but generally I would like an image of both graphs to be shared on either Twitter or Facebook (or both). I'd like the same for the image captured on the "camera" page as discussed in this forum: http://gsfn.us/t/4dixi

    Thank you so much! Once these issues are resolved, the only things I could possibly want to change is cosmetic appearance (i.e. custom CSS). Everything else I had hoped to be accomplished has been (mostly thanks to you!).
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned

next » « previous