Difference between revisions of "Widget:SpaceAPI"

From Hackerspace ACKspace
Jump to: navigation, search
m (doh, text node is annoying)
m (fixed some styling, prepared beacon)
Line 60: Line 60:
 
         SpaceAPI.prototype._intervalId    = null;
 
         SpaceAPI.prototype._intervalId    = null;
 
         SpaceAPI.prototype._node          = null;
 
         SpaceAPI.prototype._node          = null;
 +
        SpaceAPI.prototype._beacon        = null;
 
         SpaceAPI.prototype._msgLoading    = "Loading..";
 
         SpaceAPI.prototype._msgLoading    = "Loading..";
 
         SpaceAPI.prototype._msgError      = "Error";
 
         SpaceAPI.prototype._msgError      = "Error";
Line 81: Line 82:
 
             if ( this._float )
 
             if ( this._float )
 
                 style += "float:" + this._float + ";"
 
                 style += "float:" + this._float + ";"
−
             document.write( '<div id="spaceAPI' + this._intervalId + '" style="' + style + '">' + this._msgLoading + '</div>' );
+
             document.write( '<div id="spaceAPI' + this._intervalId + '"></div>' );
  
 
             var node = document.getElementById( "spaceAPI" + this._intervalId );
 
             var node = document.getElementById( "spaceAPI" + this._intervalId );
 
             this._node = node.appendChild( document.createElement( "div" ) );
 
             this._node = node.appendChild( document.createElement( "div" ) );
−
             var mapNode = node.appendChild( document.createElement( "div" ) );
+
             this._node.style = style;
−
            mapNode.style.width = "100%";
+
             this._node.textContent = this._msgLoading;
−
             mapNode.style.height = "276px";
 
  
 
             if ( this._features.split(",").indexOf( "beacon" ) >= 0 )
 
             if ( this._features.split(",").indexOf( "beacon" ) >= 0 )
 
             {
 
             {
−
                 var node;
+
                 var srcNode;
 +
                var mapNode = node.appendChild( document.createElement( "div" ) );
 +
                mapNode.style.width = "100%";
 +
                mapNode.style.height = "276px";
 
                  
 
                  
−
                 node = document.createElement( "link" );
+
                 srcNode = document.createElement( "link" );
−
                 node.href = "/leaflet/leaflet.css";
+
                 srcNode.href = "/leaflet/leaflet.css";
−
                 node.rel = "stylesheet";
+
                 srcNode.rel = "stylesheet";
−
                 node.type = "text/css";
+
                 srcNode.type = "text/css";
 +
 
 
                 // Load the css
 
                 // Load the css
−
                 ( document.head || document.documentElement ).appendChild( node );
+
                 ( document.head || document.documentElement ).appendChild( srcNode );
 
                  
 
                  
−
                 node = document.createElement( "script" );
+
                 srcNode = document.createElement( "script" );
−
                 node.src = "/leaflet/leaflet.js";
+
                 srcNode.src = "/leaflet/leaflet.js";
−
                 node.type = "text/javascript";
+
                 srcNode.type = "text/javascript";
−
                 node.addEventListener( "load", function( _evt )
+
                 srcNode.addEventListener( "load", function( _evt )
 
                 {
 
                 {
−
                     var point = L.latLng( 50.883333, 5.983333 );
+
                     this._beacon = {};
−
                     var map = L.map( mapNode ).setView( point, 11);
+
                    this._beacon.point = L.latLng( 50.883333, 5.983333 );
 +
                     this._beacon.map = L.map( mapNode ).setView( this._beacon.point, 11);
  
 
                     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 
                     L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 
                         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 
                         attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
−
                     }).addTo(map);
+
                     }).addTo( this._beacon.map );
  
 
                     // TODO: "Follow" control
 
                     // TODO: "Follow" control
 +
                    this._beacon.follow = true;
  
 
                     // TODO: icon
 
                     // TODO: icon
  
−
                     var marker = L.marker( point, { /*icon: myIcon*/ } ).addTo( map );
+
                     this._beacon.marker = L.marker( this._beacon.point, { /*icon: myIcon*/ } ).addTo( this._beacon.map );
−
                     var circle = L.circle( point, 80, { stroke: false } ).addTo( map );
+
                     this._beacon.circle = L.circle( this._beacon.point, 80, { stroke: false } ).addTo( this._beacon.map );
 
                 } );
 
                 } );
  
 
                 // Load the script
 
                 // Load the script
−
                 ( document.head || document.documentElement ).appendChild( node );
+
                 ( document.head || document.documentElement ).appendChild( srcNode );
 
             }
 
             }
  
Line 200: Line 206:
 
             else
 
             else
 
                 this._updateState( message || this._msgUnknown, this._colorUnknown, title );
 
                 this._updateState( message || this._msgUnknown, this._colorUnknown, title );
 +
 +
            if ( this._beacon )
 +
            {
 +
                if ( this.data.sensors && this.data.sensors.beacon && this.data.sensors.beacon.length )
 +
                {
 +
                    // Draw the beacons
 +
                    //this._beacon.point = L.latLng( this.data.location.lat, this.data.location.lon );
 +
                }
 +
                else
 +
                {
 +
                    // Assume mandatory location
 +
                    this._beacon.point = L.latLng( this.data.location.lat, this.data.location.lon );
 +
 +
                    this._beacon.marker.update();
 +
                    this._beacon.circle.setLatLng( this._beacon.point ).setRadius( 20 );
 +
                    this._beacon.map.setView( this._beacon.point, 16, {} );
 +
                }
 +
                //this.data.location.lat lon
 +
                //this.data.sensors.beacon[]
 +
 +
                this._beacon.marker = L.marker( this._beacon.point, { /*icon: myIcon*/ } ).addTo( this._beacon.map );
 +
                this._beacon.circle = L.circle( this._beacon.point, 80, { stroke: false } ).addTo( this._beacon.map );
 +
 +
            }
 
         };
 
         };
  

Revision as of 14:07, 11 May 2016

This widget allows you to display the Space API data (provided as JSON)

Created by Xopr

Using this widget

To insert this widget, use the following code: 

{{#widget:SpaceAPI
|url=/spaceAPI/
|width=260px
|height=20px
|padding=8px
|interval=20
|float=right
}}

This will give the following result:

Notes

  • url is mandatory, the rest is optional (leave out interval to make the data static).
    it also must be written without protocol since colon (:) is not allowed, and may be relative, for example: //ackspace.nl/spaceAPI/ or /spaceAPI/
  • You must provide a unit for the sizes (i.e. px, %, etc.)

Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:SpaceAPI article.

Retrieved from "https://ackspace.nl/w/index.php?title=Widget:SpaceAPI&oldid=5985"