• Recent
    • Tags
    • Popular
    • Register
    • Login

    Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

    Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website Mango 5 Documentation Website

    How to obtain live data with websockets?

    Dashboard Designer & Custom AngularJS Pages
    3
    7
    2.2k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • MattFoxM
      MattFox
      last edited by

      Hi again all,

      Am running Mango 3.2.1 and am attempting to create updating GPS points on the mapbox gl map library.
      Am hitting a bit of a wall with how I can update longitude and latitude variables in real time in which I can push to the map. I could use Ajax but polling doesn't seem like a good idea to me and I would prefer to keep the app as lightweight as possible. With regards to this I feel it would be wiser to learn how to hook into the websocket connection. If I can have some advice or even an idea where to get some inspiration from I'd be grateful. Thanks
      Fox

      Do not follow where the path may lead; go instead where there is no path.
      And leave a trail - Muriel Strode

      1 Reply Last reply Reply Quote 0
      • Jared WiltshireJ
        Jared Wiltshire
        last edited by Jared Wiltshire

        Hey @MattFox are you doing this inside a custom page or dashboard? Are the lat/long values coming from an alphanumeric data point?

        edit. If you are going to connect to the websocket yourself independently to the Mango AngularJS environment I'd suggest looking at the frames in Chrome's developer tools e.g.
        0_1506527781231_81f987ca-7f48-46af-952a-a00c0f164100-image.png

        Developer at Radix IoT

        1 Reply Last reply Reply Quote 0
        • MattFoxM
          MattFox
          last edited by

          @Jared-Wiltshire, twice in one week eh?
          Haha, yes custom dashboard derived from your admin template in the overrides folder. Variables are Alphanumeric.
          I can see the frames but I was not sure if I need to connect by writing my own websocket connection method and subscribing to the /point-values URL or if I could utilise what's already there to accomplish the same thing.
          Seeing how it connects when you log in I'd imagine I would just have to tap into the connection and add additional subscriptions to the GPS points I require - does that seem like a fair assumption?

          Do not follow where the path may lead; go instead where there is no path.
          And leave a trail - Muriel Strode

          Jared WiltshireJ 1 Reply Last reply Reply Quote 0
          • Will GellerW
            Will Geller
            last edited by Will Geller

            Just to chime in, If you are interested we have already built a component for working with the google map library. There is an example here /ui/examples/utilities/google-maps that shows how you can interact with the markers and set marker position based on lat/long values.

            A lot less work then writing your own websocket subscription code to get data to MapBox library. There also may be AngularJS directives written that wrap MapBox and if you bring that in you could just bind the lat/long data in with HTML as we do with our map component.

            Here's one for example: http://licyeus.github.io/angular-mapbox/

            Infinite Automation - UI Developer

            1 Reply Last reply Reply Quote 0
            • MattFoxM
              MattFox
              last edited by

              That's the problem, it's the ability to bring the data in, I cannot pull the data in and bind it fast enough before the map loads.
              Despite using AJAX with promises I still have undefined value errors. It would be good to have the data ready for when I initialise the map page. That and the fact I'm updating polygons, not individual coordinates.
              I'm either going at this at the completely wrong angle or some more advice is required. This is likely due to my limited knowledge of angular but I'd rather not have to start over and use google maps if I can help it. Only as a last resort.

              Do not follow where the path may lead; go instead where there is no path.
              And leave a trail - Muriel Strode

              1 Reply Last reply Reply Quote 0
              • Jared WiltshireJ
                Jared Wiltshire @MattFox
                last edited by

                @mattfox said in How to obtain live data with websockets?:

                twice in one week eh?

                I aim to please :D

                @mattfox said in How to obtain live data with websockets?:

                I can see the frames but I was not sure if I need to connect by writing my own websocket connection method and subscribing to the /point-values URL or if I could utilise what's already there to accomplish the same thing.

                Yeah since you are using our framework you can definitely use our AngularJS services to get the values via websockets.

                @mattfox said in How to obtain live data with websockets?:

                That's the problem, it's the ability to bring the data in, I cannot pull the data in and bind it fast enough before the map loads.

                There should be a way to set the data via the Mapbox API after the map loads.

                Here's an example of how to use the websockets from app.js. This is an example of injecting the maPointEventManager service into the run() block, this will subscribe to the events when the app first runs. You could also do this from a controller or a directive's controller.

                myApp.run(['maPointEventManager', function(maPointEventManager) {
                    const eventTypes = ['REGISTERED', 'UPDATE', 'TERMINATE', 'INITIALIZE'];
                    const handler = (event, payload) => {
                        console.log(event, payload);
                        // handle the payloads here and call the Mapbox API
                    };
                    
                    // subscribe to the datapoints you want
                    maPointEventManager.subscribe('DP_370045', eventTypes, handler);
                    maPointEventManager.subscribe('DP_394777', eventTypes, handler);
                    maPointEventManager.subscribe('DP_222324', eventTypes, handler);
                }]);
                

                Developer at Radix IoT

                1 Reply Last reply Reply Quote 0
                • MattFoxM
                  MattFox
                  last edited by

                  @Jared-Wiltshire thank you so much!
                  I'll get started and will see what I can pull off. Was ready to do the token 'beat head against keyboard' in a fit of ennui... :D

                  Do not follow where the path may lead; go instead where there is no path.
                  And leave a trail - Muriel Strode

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post