Difference between revisions of "Widget:SpaceAPI"
m (polyline needs a marker) |
m (Try and fix SpaceAPI popup alignment) |
||
| (26 intermediate revisions by the same user not shown) | |||
| Line 10: | Line 10: | ||
|url=/spaceAPI/ | |url=/spaceAPI/ | ||
|width=260px | |width=260px | ||
| − | |height= | + | |height=300px |
|padding=8px | |padding=8px | ||
|interval=20 | |interval=20 | ||
|float=right | |float=right | ||
| − | |features=beacon | + | |features=beacon,annex |
}}</nowiki> | }}</nowiki> | ||
| Line 21: | Line 21: | ||
|url=/spaceAPI/?beacon_log=HoT | |url=/spaceAPI/?beacon_log=HoT | ||
|width=260px | |width=260px | ||
| − | |height= | + | |height=300px |
|padding=8px | |padding=8px | ||
|interval=20 | |interval=20 | ||
|float=right | |float=right | ||
| − | |features=beacon | + | |features=beacon,annex |
}}<br/> | }}<br/> | ||
'''Notes''' | '''Notes''' | ||
| Line 126: | Line 126: | ||
} | } | ||
node.style.width = this._width; | node.style.width = this._width; | ||
| + | node.style.height = this._height; | ||
| + | |||
node.style.textAlign = "center"; | node.style.textAlign = "center"; | ||
node.style.BoxShadow = "3px 3px 4px rgba(0,0,0,0.2)"; | node.style.BoxShadow = "3px 3px 4px rgba(0,0,0,0.2)"; | ||
| Line 136: | Line 138: | ||
this._node.style.display = "block"; | this._node.style.display = "block"; | ||
this._node.style.color = "inherit"; | this._node.style.color = "inherit"; | ||
| − | |||
this._node.style.padding = this._padding; | this._node.style.padding = this._padding; | ||
this._node.textContent = this._msgLoading; | this._node.textContent = this._msgLoading; | ||
| Line 146: | Line 147: | ||
var mapNode = node.appendChild( document.createElement( "div" ) ); | var mapNode = node.appendChild( document.createElement( "div" ) ); | ||
mapNode.style.width = "100%"; | mapNode.style.width = "100%"; | ||
| − | mapNode.style.height = " | + | mapNode.style.height = "calc(" + this._height + " + " + this._padding + " - 2em)"; |
srcNode = document.createElement( "link" ); | srcNode = document.createElement( "link" ); | ||
| Line 163: | Line 164: | ||
this._leaflet = {}; | this._leaflet = {}; | ||
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 ).panTo( this._leaflet.point ); |
| + | //this._leaflet.map = L.map( mapNode ).setView( this._leaflet.point, 16); | ||
L.CRS.CustomZoom = L.extend({}, L.CRS.EPSG3857, | L.CRS.CustomZoom = L.extend({}, L.CRS.EPSG3857, | ||
| Line 328: | Line 330: | ||
| − | if ( !this._leaflet.temperatures[" | + | if ( !this._leaflet.temperatures["000005667ABD"] ) |
return; | return; | ||
| Line 334: | Line 336: | ||
if ( z > 17 ) | if ( z > 17 ) | ||
o = Math.max( (23-z) / 5, 0 ); | o = Math.max( (23-z) / 5, 0 ); | ||
| − | this._leaflet.temperatures[" | + | this._leaflet.temperatures["000005667ABD"].setStyle( { fillOpacity: o } ); |
}, this ); | }, this ); | ||
| Line 394: | Line 396: | ||
bounds.extend( this._leaflet.point ); | bounds.extend( this._leaflet.point ); | ||
| − | this._leaflet.map.fitBounds( bounds ); | + | // Depending on polyline: don't zoom |
| − | if ( this._leaflet.map.getZoom() > 18 ) | + | //this._leaflet.map.fitBounds( bounds ); |
| − | this._leaflet.map.setZoom( 18 ); | + | //if ( this._leaflet.map.getZoom() > 18 ) |
| + | //this._leaflet.map.setZoom( 18 ); | ||
} | } | ||
}.bind( this ) ); | }.bind( this ) ); | ||
| Line 439: | Line 442: | ||
this._leaflet.temperatures = { | this._leaflet.temperatures = { | ||
// outside | // outside | ||
| − | " | + | "000005671715" : 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 | ||
| − | " | + | "000005667ABD" : L.polygon( [[50.892458293019,5.971340775608], [50.892410920402,5.9713032246818], [50.8924743319376, 5.9711186739150435], [50.89251872057557, 5.97115655487869]], {stroke:0,fillOpacity:0.8} ).addTo( this._leaflet.map ), |
// barbecue | // barbecue | ||
| − | "DEADBEEF0" : L.circle( [ 50.89277, 5.97134 ], 1, {stroke:0,fillOpacity:0.8} ).addTo( this._leaflet.map ) | + | "DEADBEEF0" : L.circle( [ 50.89277, 5.97134 ], 1, {stroke:0,fillOpacity:0.8} ).addTo( this._leaflet.map ), |
// hot zone | // hot zone | ||
| − | + | "00000567138A" : L.circle( [ 50.89250, 5.9711867 ], 2, {stroke:0,fillOpacity:0.8} ).addTo( this._leaflet.map ) | |
}; | }; | ||
| Line 479: | Line 482: | ||
// Load the script | // Load the script | ||
( document.head || document.documentElement ).appendChild( srcNode ); | ( document.head || document.documentElement ).appendChild( srcNode ); | ||
| − | } | + | } // beacon |
// Update the space state immediately | // Update the space state immediately | ||
| Line 659: | Line 662: | ||
}, this ); | }, this ); | ||
} | } | ||
| + | |||
| + | var bounds = null; | ||
| + | var maxZoom = 18; | ||
// Handle beacons | // Handle beacons | ||
| Line 716: | Line 722: | ||
} | } | ||
} | } | ||
| − | else | + | else if (this.data.sensors && this.data.sensors.beacon && this.data.sensors.beacon.length) |
{ | { | ||
var apiBeacon = this.data.sensors.beacon[ 0 ]; | var apiBeacon = this.data.sensors.beacon[ 0 ]; | ||
var beacon = {}; | var beacon = {}; | ||
| + | var bHoaB = false; | ||
beacon.point = L.latLng( apiBeacon.location.lat,apiBeacon.location.lon ); | beacon.point = L.latLng( apiBeacon.location.lat,apiBeacon.location.lon ); | ||
| Line 739: | Line 746: | ||
popup.setContent( ( this._leaflet.descriptions[ apiBeacon.name ] || apiBeacon.name ) + "<br/>Last update: " + this._nlsTime( delta ) + " ago" ); | popup.setContent( ( this._leaflet.descriptions[ apiBeacon.name ] || apiBeacon.name ) + "<br/>Last update: " + this._nlsTime( delta ) + " ago" ); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
// TODO: clean up old beacons!! | // TODO: clean up old beacons!! | ||
| Line 755: | Line 757: | ||
this._leaflet.map.removeLayer( _beacon.circle ); | this._leaflet.map.removeLayer( _beacon.circle ); | ||
}, this ); | }, this ); | ||
| − | + | this._leaflet.beacons = [ beacon ]; | |
| − | + | ||
| + | if ( bHoaB && this._leaflet.follow === null ) | ||
{ | { | ||
| − | + | this._leaflet.follow = true; | |
| − | + | document.querySelector( "div.leaflet-bar > a.leaflet-clickable" ).className = "leaflet-clickable toggle"; | |
} | } | ||
| − | |||
| − | |||
this._drawBeaconPolyLine( ); | this._drawBeaconPolyLine( ); | ||
| + | |||
| + | maxZoom = 10; | ||
} | } | ||
| Line 775: | Line 778: | ||
this._leaflet.point = L.latLng( this.data.location.lat, this.data.location.lon ); | this._leaflet.point = L.latLng( this.data.location.lat, this.data.location.lon ); | ||
this._leaflet.marker.setLatLng( this._leaflet.point ); | this._leaflet.marker.setLatLng( this._leaflet.point ); | ||
| + | this._leaflet.map.setZoom( 18 ); | ||
| + | |||
// Set popup data and open it | // Set popup data and open it | ||
| Line 781: | Line 786: | ||
popup = this._leaflet.marker.bindPopup().getPopup(); | popup = this._leaflet.marker.bindPopup().getPopup(); | ||
| − | var info = | + | var info = '<img src="' + this.data.logo + '" style="max-width:'+this._width+'px;width:100%"><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+"<br/>"; | ||
| Line 789: | Line 794: | ||
if ( l.ext_room ) | if ( l.ext_room ) | ||
info += ", room " + l.ext_room; | info += ", room " + l.ext_room; | ||
| + | info += "<br/>☎ " + '<a target="blank" href="tel:+'+this.data.contact.phone+'">+'+this.data.contact.phone+'</a>'; | ||
info += "<br/>" + this._tristate( s.spacenet ) + ' <a target="blank" href="Spacenet">spacenet</a>'; | info += "<br/>" + this._tristate( s.spacenet ) + ' <a target="blank" href="Spacenet">spacenet</a>'; | ||
info += "<br/>" + this._tristate( s.ext_spacenet5g ) + " spacenet (5GHz)"; | info += "<br/>" + this._tristate( s.ext_spacenet5g ) + " spacenet (5GHz)"; | ||
| Line 795: | Line 801: | ||
info += "<br/>" + this._tristate( s.spacephone ) + ' <a target="blank" href="Spacephone">spacephone</a>'; | info += "<br/>" + this._tristate( s.spacephone ) + ' <a target="blank" href="Spacephone">spacephone</a>'; | ||
if ( s.ext_spacephone_extension ) | if ( s.ext_spacephone_extension ) | ||
| − | info += ": | + | info += ": E" + s.ext_spacephone_extension; |
popup.setContent( info ); | popup.setContent( info ); | ||
| Line 806: | Line 812: | ||
{ | { | ||
// Determine the bounding box to 'follow | // Determine the bounding box to 'follow | ||
| − | + | bounds = L.latLngBounds( this._leaflet.beacons.map( function( _beacon ) | |
{ | { | ||
return _beacon.point; | return _beacon.point; | ||
| Line 815: | Line 821: | ||
bounds.extend( this._leaflet.point ); | bounds.extend( this._leaflet.point ); | ||
| − | this._leaflet.map.fitBounds( bounds ); | + | // Disable zoom (in) if already zoomed beyond set max |
| − | + | if ( this._leaflet.map.getZoom() > maxZoom ) | |
| − | + | { | |
| + | this._leaflet.map.panTo( bounds.getCenter() ); | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | this._leaflet.map.fitBounds( bounds ); | ||
| + | if ( this._leaflet.map.getZoom() > maxZoom ) | ||
| + | this._leaflet.map.setZoom( maxZoom ); | ||
| + | } | ||
} | } | ||
| + | } // leaflet | ||
| + | |||
| + | if ( this._features.split(",").indexOf( "annex" ) >= 0 ) | ||
| + | { | ||
| + | var node = this._node; | ||
| + | [].forEach.call(document.querySelectorAll(".state.annex"),function(_n) | ||
| + | { | ||
| + | node.removeChild( _n ); | ||
| + | }); | ||
| + | |||
| + | (this.data.sensors&&this.data.sensors.service||[]).filter(function(_s) | ||
| + | { | ||
| + | return (_s.source==="annex" && _s.name!=="annex"); | ||
| + | }).forEach(function(_d,_i) | ||
| + | { | ||
| + | var anode = node.appendChild( document.createElement( "div" ) ); | ||
| + | anode.style.position = "absolute"; | ||
| + | anode.style.width = "0.4em"; | ||
| + | anode.style.height = "0.4em"; | ||
| + | anode.style.top = "calc(2em + 10px)"; | ||
| + | anode.style.right = (0.5 * _i) + "em"; | ||
| + | anode.style.backgroundColor = (_d.status|0)?"green":"red"; | ||
| + | anode.style.zIndex = 500; | ||
| + | anode.className = "state annex"; | ||
| + | var t = new Date( 0 ); | ||
| + | t.setUTCSeconds( _d.ext_lastchange ); | ||
| + | anode.title = _d.name + " (updated " + t.toLocaleString( )+")"; | ||
| + | }); | ||
} | } | ||
}; | }; | ||
Latest revision as of 17:51, 24 April 2023
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=300px
|padding=8px
|interval=20
|float=right
|features=beacon,annex
}}
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.
