Difference between revisions of "Widget:SpaceAPI"

From Hackerspace ACKspace
Jump to: navigation, search
m (popup too big, trying an extra newline)
m (added BBQ sensor)
Line 125: Line 125:
 
                     this._leaflet.point = L.latLng( 50.8925,5.9713 );
 
                     this._leaflet.point = L.latLng( 50.8925,5.9713 );
 
                     this._leaflet.map = L.map( mapNode ).setView( this._leaflet.point, 16);
 
                     this._leaflet.map = L.map( mapNode ).setView( this._leaflet.point, 16);
 +
 +
                    L.CRS.CustomZoom = L.extend({}, L.CRS.EPSG3857,
 +
                    {
 +
                        scale: function( zoom ) {
 +
                            //console.log( zoom );
 +
                            if ( zoom < 24 )
 +
                                return 256 * Math.pow( 2, zoom );
 +
 +
                            // Freeze the actual zooming above this level to show the different floors
 +
                            // 256 * pow( 2, 23 )
 +
                            return 2147483648;
 +
                        }
 +
                    });
 +
 +
/**********************************/
 +
L.TileLayer.Functional = L.TileLayer.extend({
 +
 +
  _tileFunction: null,
 +
 +
  initialize: function (tileFunction, options) {
 +
this._tileFunction = tileFunction;
 +
L.TileLayer.prototype.initialize.call(this, null, options);
 +
  },
 +
 +
  getTileUrl: function (tilePoint) {
 +
var map = this._map,
 +
  crs = map.options.crs,
 +
  tileSize = this.options.tileSize,
 +
  zoom = tilePoint.z,
 +
  nwPoint = tilePoint.multiplyBy(tileSize),
 +
  sePoint = nwPoint.add(new L.Point(tileSize, tileSize)),
 +
  nw = crs.project(map.unproject(nwPoint, zoom)),
 +
  se = crs.project(map.unproject(sePoint, zoom)),
 +
  bbox = [nw.x, se.y, se.x, nw.y].join(',');
 +
 +
// Setup object to send to tile function.
 +
var view = {
 +
  bbox: bbox,
 +
  width: tileSize,
 +
  height: tileSize,
 +
  zoom: zoom,
 +
  tile: {
 +
row: this.options.tms ? this._tileNumBounds.max.y - tilePoint.y : tilePoint.y,
 +
column: tilePoint.x
 +
  },
 +
  subdomain: this._getSubdomain(tilePoint)
 +
};
 +
 +
return this._tileFunction(view);
 +
  },
 +
 +
  _loadTile: function (tile, tilePoint) {
 +
tile._layer = this;
 +
tile.onload = this._tileOnLoad;
 +
tile.onerror = this._tileOnError;
 +
 +
this._adjustTilePoint(tilePoint);
 +
var tileUrl = this.getTileUrl(tilePoint);
 +
 +
if (typeof tileUrl === 'string') {
 +
  tile.src = tileUrl;
 +
  this.fire('tileloadstart', {
 +
tile: tile,
 +
url: tile.src
 +
  });
 +
} else if (typeof tileUrl.then === 'function') {
 +
  // Assume we are dealing with a promise.
 +
  var self = this;
 +
  tileUrl.then(function (tileUrl) {
 +
tile.src = tileUrl;
 +
self.fire('tileloadstart', {
 +
  tile: tile,
 +
  url: tile.src
 +
});
 +
  });
 +
}
 +
  }
 +
});
 +
 +
L.tileLayer.functional = function (tileFunction, options) {
 +
  return new L.TileLayer.Functional(tileFunction, options);
 +
};
 +
/*******************************/
  
 
                     L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 
                     L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
−
                         attribution: '&copy; <a href="//openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+
                         attribution: '&copy; <a href="//openstreetmap.org/copyright">OpenStreetMap</a> contributors',
 +
                        minZoom: 2,
 +
                        maxZoom: 27,
 +
                        maxNativeZoom: 19
 
                     }).addTo( this._leaflet.map );
 
                     }).addTo( this._leaflet.map );
 +
 +
                    L.tileLayer("/images/ACK_{x}_{y}_{z}.png", {
 +
                        attribution: 'ACKspace',
 +
                        minZoom: 23,
 +
                        maxZoom: 27,
 +
                        maxNativeZoom: 23
 +
                    }).addTo( this._leaflet.map );
 +
 +
                    var funcLayer = new L.TileLayer.Functional( function( view )
 +
                    {
 +
switch ( view.zoom )
 +
{
 +
case 23:
 +
if ( view.tile.column < 4333441 || view.tile.column > 4333446 )
 +
return "/images/blank.png";
 +
if ( view.tile.row < 2812292 || view.tile.row > 2812296 )
 +
return "/images/blank.png";
 +
break;
 +
case 24:
 +
if ( view.tile.column !== 8666890 && view.tile.column !== 5624590 )
 +
return "/images/blank.png";
 +
break;
 +
case 25:
 +
if ( view.tile.column !== 17333781 && view.tile.column !== 11249181 )
 +
return "/images/blank.png";
 +
break;
 +
case 26:
 +
if ( view.tile.column !== 34667562 && view.tile.column !== 22498362 )
 +
return "/images/blank.png";
 +
break;
 +
case 27:
 +
if ( view.tile.column !== 69335125 && view.tile.column !== 44996725 )
 +
return "/images/blank.png";
 +
break;
 +
}
 +
 +
var url = "/images/ACK_{x}_{y}_{z}.png"
 +
.replace('{z}', view.zoom)
 +
.replace('{y}', view.tile.row)
 +
.replace('{x}', view.tile.column)
 +
.replace('{s}', view.subdomain);
 +
                       
 +
                        return url;
 +
                    },
 +
                    {
 +
                        attribution: 'ACKspace',
 +
                        minZoom: 23,
 +
                        maxZoom: 27/*,
 +
                        bounds: L.latLngBounds( [ L.latLng(50.892509702742856, 5.971158519387245), L.latLng(50.89240850727338, 5.971345268189907) ] )*/
 +
                    } ).addTo( this._leaflet.map );
 +
 +
this._leaflet.map.on('zoomend', function( _event )
 +
{
 +
// zoom 18->23 opacity 1->0
 +
var o = 1, z = _event.target.getZoom();
 +
if ( z > 17 )
 +
o = Math.max( (23-z) / 5, 0 );
 +
this._leaflet.temperatures["28151767050000a0"].setStyle( { fillOpacity: o } );
 +
}, this );
 +
 +
if ( false )
 +
{
 +
this._leaflet.map.on( "click", function( _e )
 +
{
 +
console.log( _e.latlng );
 +
});
 +
 +
L.GridLayer.DebugCoords = L.GridLayer.extend({
 +
createTile: function (coords) {
 +
var tile = document.createElement('div');
 +
tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
 +
tile.style.outline = '1px solid red';
 +
return tile;
 +
}
 +
});
 +
 +
L.gridLayer.debugCoords = function(opts) {
 +
return new L.GridLayer.DebugCoords(opts);
 +
};
 +
 +
this._leaflet.map.addLayer( L.gridLayer.debugCoords() );
 +
}
  
 
                     // "Follow" control
 
                     // "Follow" control
Line 196: Line 364:
 
                         "28bd7a660500002f" : L.polygon([[50.892537811238,5.9711101056338], [50.892517508729,5.9710966945888], [50.892534427487,5.9710564614536], [50.892715457818,5.9712093473674], [50.892696847256,5.9712790848018], [50.892808510518,5.9713836909534], [50.892788208127,5.9714373351337], [50.892774673195,5.9714319707157], [50.892681620427,5.971697509408], [50.892641015525,5.9716653228998], [50.892559805614,5.971893310666], [50.892569956861,5.9719120861291], [50.892559805614,5.9719496370554], [50.892377082796,5.9717940689325], [50.892399077248,5.9717189670801], [50.89233140198,5.9716545940637], [50.892350012689,5.9716009498835], [50.892326326331,5.9715794922114], [50.892414304169,5.9713032246828], [50.892458293026,5.971340775609]], {stroke:0,fillOpacity:0.8} ).addTo( this._leaflet.map ),
 
                         "28bd7a660500002f" : L.polygon([[50.892537811238,5.9711101056338], [50.892517508729,5.9710966945888], [50.892534427487,5.9710564614536], [50.892715457818,5.9712093473674], [50.892696847256,5.9712790848018], [50.892808510518,5.9713836909534], [50.892788208127,5.9714373351337], [50.892774673195,5.9714319707157], [50.892681620427,5.971697509408], [50.892641015525,5.9716653228998], [50.892559805614,5.971893310666], [50.892569956861,5.9719120861291], [50.892559805614,5.9719496370554], [50.892377082796,5.9717940689325], [50.892399077248,5.9717189670801], [50.89233140198,5.9716545940637], [50.892350012689,5.9716009498835], [50.892326326331,5.9715794922114], [50.892414304169,5.9713032246828], [50.892458293026,5.971340775609]], {stroke:0,fillOpacity:0.8} ).addTo( this._leaflet.map ),
 
                         // cold zone
 
                         // cold zone
−
                         "28151767050000a0" : L.polygon( [[50.892458293019,5.971340775608], [50.892410920402,5.9713032246818], [50.892461676775,5.9711557031861], [50.892507357464,5.9711959363214]], {stroke:0,fillOpacity:0.8} ).addTo( this._leaflet.map )
+
                         "28151767050000a0" : L.polygon( [[50.892458293019,5.971340775608], [50.892410920402,5.9713032246818], [50.892461676775,5.9711557031861], [50.892507357464,5.9711959363214]], {stroke:0,fillOpacity:0.8} ).addTo( this._leaflet.map ),
 +
                        // barbecue
 +
                        "DEADBEEF0" : L.circle( [ 50.89277, 5.97134 ], 1, {stroke:0,fillOpacity:0.8} ).addTo( this._leaflet.map )
 +
//{lat: 50.89277067395246, lng: 5.971342250704766}
 
                         // hot zone
 
                         // hot zone
 
                         /*"288a13670500002a" : null*/
 
                         /*"288a13670500002a" : null*/
 
                     };
 
                     };
−
 
 
                 }.bind( this ) );
 
                 }.bind( this ) );
  
Line 242: Line 412:
 
         {
 
         {
 
             var postfix;
 
             var postfix;
 +
            if ( _time < 2 )
 +
            {
 +
                return "moments";
 +
            }
  
 
             if ( _time > 31556952 )
 
             if ( _time > 31556952 )
Line 369: Line 543:
  
 
                             var delta = (Date.now() - new Date( _apiTemp.ext_lastchange * 1000 )) / 1000;
 
                             var delta = (Date.now() - new Date( _apiTemp.ext_lastchange * 1000 )) / 1000;
−
                             temp.bindPopup( "Description: " + _apiTemp.description + "<br/>Location: " + _apiTemp.location + "Value: " + _apiTemp.value + _apiTemp.unit + "<br/>Last update: " + this._nlsTime( delta ) + " ago" );
+
                            temp.custom = {
 +
                                description: _apiTemp.description | _apiTemp.name,
 +
                                location: _apiTemp.location | null,
 +
                                value: _apiTemp.value,
 +
                                lastchange: _apiTemp.ext_lastchange
 +
                            }
 +
                            //updatePopup( temp
 +
 
 +
                             temp.bindPopup( "Description: " + _apiTemp.description + "<br/>Location: " + _apiTemp.location + "<br/>Value: " + _apiTemp.value + _apiTemp.unit + "<br/>Last update: " + this._nlsTime( delta ) + " ago" );
 
                         }
 
                         }
 
                     }, this );
 
                     }, this );
Line 448: Line 630:
 
                     var info = "<img src='" + this.data.logo + "'><br/>";
 
                     var info = "<img src='" + this.data.logo + "'><br/>";
 
                     var l = this.data.location, s = this.data.spacefed;
 
                     var l = this.data.location, s = this.data.spacefed;
−
                     info += l.address+"<br/>";
+
                     info += l.address;
  
 
                     if ( l.ext_floor )
 
                     if ( l.ext_floor )

Revision as of 17:26, 29 March 2017

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
|features=
}}

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=7368"