Hello

I have created a small page for displaying data of the beer I am brewing.
I though of using firebase for this purpose, since the updating of graphs
and data would happen by itself due to the three-way-databinding provided
by firebase.
I am all finished and the result of my first go at firebase can be found
here: beer.larsen.so

What I am wondering however is if the way i used firebase was a good way of
doing it or are there better ways. I dont want include all the code here,
ill only include the three functions that sets up the connection with
firebase.
If you want more information or have any constructive criticism of the way
I wrote my code feel free to contact me.

Some of the code is a bit more messy than i wanted due to the way
highcharts works.

         var sync = $firebase(new Firebase($scope.FURL+"tempratures"));
         var syncObject = sync.$asObject();
         syncObject.$loaded().then(function(object){

$('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

$('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
             object.$watch(function(event) {

$('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

$('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
             })
         });


         var sync = $firebase(new Firebase($scope.FURL+"dateStarted"));
         var syncObject = sync.$asObject();
         syncObject.$loaded().then(function(object){

$('#fermentation_gauge').highcharts().series[0].points[0].update($scope.daydiff(new
Date(object.$value)));
             object.$watch(function(event) {

$('#fermentation_gauge').highcharts().series[0].points[0].update($scope.daydiff(new
Date(object.$value)));
             })
         });


         var sync = $firebase(new
Firebase($scope.FURL+"tempratureLog").limitToLast(361));
         var syncArray = sync.$asArray();
         syncArray.$loaded().then(function(array){
             $scope.updateGraph(array);
             array.$watch(function(event) {
                 if(event.event==='child_removed'){
                 var refPoint = new
Firebase($scope.FURL+"tempratureLog").limitToLast(1);
                 var point = $firebase(refPoint).$asArray();
                     point.$loaded().then(function(array){
                         var chart = $('#tempratureLog').highcharts();

chart.series[0].addPoint(array[0].beer,true,true,true);

chart.series[1].addPoint(array[0].chamber,true,true,true);

chart.series[2].addPoint(array[0].chamberConstant,true,true,true);
                     });
                 }
             });
         });


--
You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
To post to this group, send email to firebase-angular@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/9de16fee-4579-4d4c-bd5e-e98f1a327631%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Search Discussions

  • Jacob Wenger at Dec 8, 2014 at 6:55 pm
    Hey Kristoffer,

    Nice work on the beer app! I wish I could try some of the beer myself!

    Your code definitely works, but I think using $watch() is a bit of a hacky
    solution to get HighCharts to update properly. I completely understand why
    you chose to go that route, but you may be better off using the plain old
    Firebase JavaScript API for that instead of AngularFire, since you aren't
    really using the bindings anyway. Instead of:

    var sync = $firebase(new Firebase($scope.FURL+"tempratures"));
    var syncObject = sync.$asObject();
    syncObject.$loaded().then(function(object){

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
       object.$watch(function(event) {

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
       })
    });

    You can just use a child_added listener:

    var ref = new Firebase($scope.FURL+"tempratures");
    ref.on("child_added", function(snapshot) {
       var object = snapshot.val();

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    });

    That is a lot less code and much easier to understand. AngularFire is great
    when you are utilizing the data binding, but in your case, you are better
    off adding the listener yourself instead of hacking something together with
    $watch().

    Jacob
    On Sun, Dec 7, 2014 at 10:27 AM, Kristoffer Larsen wrote:

    Hello

    I have created a small page for displaying data of the beer I am brewing.
    I though of using firebase for this purpose, since the updating of graphs
    and data would happen by itself due to the three-way-databinding provided
    by firebase.
    I am all finished and the result of my first go at firebase can be found
    here: beer.larsen.so

    What I am wondering however is if the way i used firebase was a good way
    of doing it or are there better ways. I dont want include all the code
    here, ill only include the three functions that sets up the connection with
    firebase.
    If you want more information or have any constructive criticism of the way
    I wrote my code feel free to contact me.

    Some of the code is a bit more messy than i wanted due to the way
    highcharts works.

    var sync = $firebase(new Firebase($scope.FURL+"tempratures"));
    var syncObject = sync.$asObject();
    syncObject.$loaded().then(function(object){

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    object.$watch(function(event) {

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    })
    });


    var sync = $firebase(new Firebase($scope.FURL+"dateStarted"));
    var syncObject = sync.$asObject();
    syncObject.$loaded().then(function(object){

    $('#fermentation_gauge').highcharts().series[0].points[0].update($scope.daydiff(new
    Date(object.$value)));
    object.$watch(function(event) {

    $('#fermentation_gauge').highcharts().series[0].points[0].update($scope.daydiff(new
    Date(object.$value)));
    })
    });


    var sync = $firebase(new
    Firebase($scope.FURL+"tempratureLog").limitToLast(361));
    var syncArray = sync.$asArray();
    syncArray.$loaded().then(function(array){
    $scope.updateGraph(array);
    array.$watch(function(event) {
    if(event.event==='child_removed'){
    var refPoint = new
    Firebase($scope.FURL+"tempratureLog").limitToLast(1);
    var point = $firebase(refPoint).$asArray();
    point.$loaded().then(function(array){
    var chart = $('#tempratureLog').highcharts();

    chart.series[0].addPoint(array[0].beer,true,true,true);

    chart.series[1].addPoint(array[0].chamber,true,true,true);

    chart.series[2].addPoint(array[0].chamberConstant,true,true,true);
    });
    }
    });
    });


    --
    You received this message because you are subscribed to the Google Groups
    "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an
    email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit
    https://groups.google.com/d/msgid/firebase-angular/9de16fee-4579-4d4c-bd5e-e98f1a327631%40googlegroups.com
    <https://groups.google.com/d/msgid/firebase-angular/9de16fee-4579-4d4c-bd5e-e98f1a327631%40googlegroups.com?utm_medium=email&utm_source=footer>
    .
    For more options, visit https://groups.google.com/d/optout.
    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/CAGcMwsDWWtu7iCSzhuBh_E_-kSqPxd4%3D%3DuzU11TJ%3D5M%2Bh3KgFA%40mail.gmail.com.
    For more options, visit https://groups.google.com/d/optout.
  • Kristoffer Larsen at Dec 8, 2014 at 7:32 pm
    Hi Jacob,

    Thanks for the tips. The alterations you made seems a lot better and ill
    check it out in the following days!
    I found using angularFire, was a bit tricky when i wasnt binding it to the
    scope.
    And i concluded that the way I was using firebase+angular the "proper" way
    ^^. I am planning a more advanced project in the future where i will get to
    utilize the 3 way databinding provided by angularFire.
    Before that time though I think I need to take a closer look on the basic
    javascript syntax, to get some better understanding of the basic features.

    Thanks, best regards
    Kristoffer Larsen

    kl. 19:55:23 UTC+1 mandag 8. desember 2014 skrev Jacob Wenger følgende:
    Hey Kristoffer,

    Nice work on the beer app! I wish I could try some of the beer myself!

    Your code definitely works, but I think using $watch() is a bit of a
    hacky solution to get HighCharts to update properly. I completely
    understand why you chose to go that route, but you may be better off using
    the plain old Firebase JavaScript API for that instead of AngularFire,
    since you aren't really using the bindings anyway. Instead of:

    var sync = $firebase(new Firebase($scope.FURL+"tempratures"));
    var syncObject = sync.$asObject();
    syncObject.$loaded().then(function(object){

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    object.$watch(function(event) {

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    })
    });

    You can just use a child_added listener:

    var ref = new Firebase($scope.FURL+"tempratures");
    ref.on("child_added", function(snapshot) {
    var object = snapshot.val();

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    });

    That is a lot less code and much easier to understand. AngularFire is
    great when you are utilizing the data binding, but in your case, you are
    better off adding the listener yourself instead of hacking something
    together with $watch().

    Jacob

    On Sun, Dec 7, 2014 at 10:27 AM, Kristoffer Larsen <krist...@larsen.so
    <javascript:>> wrote:
    Hello

    I have created a small page for displaying data of the beer I am brewing.
    I though of using firebase for this purpose, since the updating of graphs
    and data would happen by itself due to the three-way-databinding provided
    by firebase.
    I am all finished and the result of my first go at firebase can be found
    here: beer.larsen.so

    What I am wondering however is if the way i used firebase was a good way
    of doing it or are there better ways. I dont want include all the code
    here, ill only include the three functions that sets up the connection with
    firebase.
    If you want more information or have any constructive criticism of the
    way I wrote my code feel free to contact me.

    Some of the code is a bit more messy than i wanted due to the way
    highcharts works.

    var sync = $firebase(new Firebase($scope.FURL+"tempratures"));
    var syncObject = sync.$asObject();
    syncObject.$loaded().then(function(object){

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    object.$watch(function(event) {

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    })
    });


    var sync = $firebase(new Firebase($scope.FURL+"dateStarted"));
    var syncObject = sync.$asObject();
    syncObject.$loaded().then(function(object){

    $('#fermentation_gauge').highcharts().series[0].points[0].update($scope.daydiff(new
    Date(object.$value)));
    object.$watch(function(event) {

    $('#fermentation_gauge').highcharts().series[0].points[0].update($scope.daydiff(new
    Date(object.$value)));
    })
    });


    var sync = $firebase(new
    Firebase($scope.FURL+"tempratureLog").limitToLast(361));
    var syncArray = sync.$asArray();
    syncArray.$loaded().then(function(array){
    $scope.updateGraph(array);
    array.$watch(function(event) {
    if(event.event==='child_removed'){
    var refPoint = new
    Firebase($scope.FURL+"tempratureLog").limitToLast(1);
    var point = $firebase(refPoint).$asArray();
    point.$loaded().then(function(array){
    var chart = $('#tempratureLog').highcharts();

    chart.series[0].addPoint(array[0].beer,true,true,true);

    chart.series[1].addPoint(array[0].chamber,true,true,true);

    chart.series[2].addPoint(array[0].chamberConstant,true,true,true);
    });
    }
    });
    });


    --
    You received this message because you are subscribed to the Google Groups
    "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an
    email to firebase-angul...@googlegroups.com <javascript:>.
    To post to this group, send email to firebase...@googlegroups.com
    <javascript:>.
    To view this discussion on the web visit
    https://groups.google.com/d/msgid/firebase-angular/9de16fee-4579-4d4c-bd5e-e98f1a327631%40googlegroups.com
    <https://groups.google.com/d/msgid/firebase-angular/9de16fee-4579-4d4c-bd5e-e98f1a327631%40googlegroups.com?utm_medium=email&utm_source=footer>
    .
    For more options, visit https://groups.google.com/d/optout.
    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/6e8b2bdf-e5dc-4ada-a8ee-5930a945535a%40googlegroups.com.
    For more options, visit https://groups.google.com/d/optout.
  • Kristoffer Larsen at Dec 8, 2014 at 9:57 pm
    Thanks agian Jacob,

    Your suggestion worked very well!
    I did however find it difficult updating the method for the array. Since i
    require the latest added value to be added to the graph. But ill look into
    it!

    Kristoffer Larsen

    kl. 19:55:23 UTC+1 mandag 8. desember 2014 skrev Jacob Wenger følgende:
    Hey Kristoffer,

    Nice work on the beer app! I wish I could try some of the beer myself!

    Your code definitely works, but I think using $watch() is a bit of a
    hacky solution to get HighCharts to update properly. I completely
    understand why you chose to go that route, but you may be better off using
    the plain old Firebase JavaScript API for that instead of AngularFire,
    since you aren't really using the bindings anyway. Instead of:

    var sync = $firebase(new Firebase($scope.FURL+"tempratures"));
    var syncObject = sync.$asObject();
    syncObject.$loaded().then(function(object){

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    object.$watch(function(event) {

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    })
    });

    You can just use a child_added listener:

    var ref = new Firebase($scope.FURL+"tempratures");
    ref.on("child_added", function(snapshot) {
    var object = snapshot.val();

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    });

    That is a lot less code and much easier to understand. AngularFire is
    great when you are utilizing the data binding, but in your case, you are
    better off adding the listener yourself instead of hacking something
    together with $watch().

    Jacob

    On Sun, Dec 7, 2014 at 10:27 AM, Kristoffer Larsen <krist...@larsen.so
    <javascript:>> wrote:
    Hello

    I have created a small page for displaying data of the beer I am brewing.
    I though of using firebase for this purpose, since the updating of graphs
    and data would happen by itself due to the three-way-databinding provided
    by firebase.
    I am all finished and the result of my first go at firebase can be found
    here: beer.larsen.so

    What I am wondering however is if the way i used firebase was a good way
    of doing it or are there better ways. I dont want include all the code
    here, ill only include the three functions that sets up the connection with
    firebase.
    If you want more information or have any constructive criticism of the
    way I wrote my code feel free to contact me.

    Some of the code is a bit more messy than i wanted due to the way
    highcharts works.

    var sync = $firebase(new Firebase($scope.FURL+"tempratures"));
    var syncObject = sync.$asObject();
    syncObject.$loaded().then(function(object){

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    object.$watch(function(event) {

    $('#chamber_gauge').highcharts().series[0].points[0].update(object.chamber.temprature);

    $('#beer_gauge').highcharts().series[0].points[0].update(object.beer.temprature);
    })
    });


    var sync = $firebase(new Firebase($scope.FURL+"dateStarted"));
    var syncObject = sync.$asObject();
    syncObject.$loaded().then(function(object){

    $('#fermentation_gauge').highcharts().series[0].points[0].update($scope.daydiff(new
    Date(object.$value)));
    object.$watch(function(event) {

    $('#fermentation_gauge').highcharts().series[0].points[0].update($scope.daydiff(new
    Date(object.$value)));
    })
    });


    var sync = $firebase(new
    Firebase($scope.FURL+"tempratureLog").limitToLast(361));
    var syncArray = sync.$asArray();
    syncArray.$loaded().then(function(array){
    $scope.updateGraph(array);
    array.$watch(function(event) {
    if(event.event==='child_removed'){
    var refPoint = new
    Firebase($scope.FURL+"tempratureLog").limitToLast(1);
    var point = $firebase(refPoint).$asArray();
    point.$loaded().then(function(array){
    var chart = $('#tempratureLog').highcharts();

    chart.series[0].addPoint(array[0].beer,true,true,true);

    chart.series[1].addPoint(array[0].chamber,true,true,true);

    chart.series[2].addPoint(array[0].chamberConstant,true,true,true);
    });
    }
    });
    });


    --
    You received this message because you are subscribed to the Google Groups
    "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an
    email to firebase-angul...@googlegroups.com <javascript:>.
    To post to this group, send email to firebase...@googlegroups.com
    <javascript:>.
    To view this discussion on the web visit
    https://groups.google.com/d/msgid/firebase-angular/9de16fee-4579-4d4c-bd5e-e98f1a327631%40googlegroups.com
    <https://groups.google.com/d/msgid/firebase-angular/9de16fee-4579-4d4c-bd5e-e98f1a327631%40googlegroups.com?utm_medium=email&utm_source=footer>
    .
    For more options, visit https://groups.google.com/d/optout.
    --
    You received this message because you are subscribed to the Google Groups "Firebase + AngularJS" group.
    To unsubscribe from this group and stop receiving emails from it, send an email to firebase-angular+unsubscribe@googlegroups.com.
    To post to this group, send email to firebase-angular@googlegroups.com.
    To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-angular/e93a3269-e064-46ec-a5c2-6f863d64e767%40googlegroups.com.
    For more options, visit https://groups.google.com/d/optout.

Related Discussions

Discussion Navigation
viewthread | post
Discussion Overview
groupfirebase-angular @
postedDec 8, '14 at 4:32p
activeDec 8, '14 at 9:57p
posts4
users2

2 users in discussion

Kristoffer Larsen: 3 posts Jacob Wenger: 1 post

People

Translate

site design / logo © 2021 Grokbase