Difference between revisions of "Widget:SpaceAPI"
m (adjust height for balloon to fit) |
m (Try and fix SpaceAPI popup alignment) |
||
| (18 intermediate revisions by the same user not shown) | |||
| Line 14: | Line 14: | ||
|interval=20 | |interval=20 | ||
|float=right | |float=right | ||
| − | |features=beacon | + | |features=beacon,annex |
}}</nowiki> | }}</nowiki> | ||
| Line 25: | Line 25: | ||
|interval=20 | |interval=20 | ||
|float=right | |float=right | ||
| − | |features=beacon | + | |features=beacon,annex |
}}<br/> | }}<br/> | ||
'''Notes''' | '''Notes''' | ||
| Line 147: | 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 = "calc(" + this._height + " - 2em)"; | + | mapNode.style.height = "calc(" + this._height + " + " + this._padding + " - 2em)"; |
srcNode = document.createElement( "link" ); | srcNode = document.createElement( "link" ); | ||
| Line 330: | Line 330: | ||
| − | if ( !this._leaflet.temperatures[" | + | if ( !this._leaflet.temperatures["000005667ABD"] ) |
return; | return; | ||
| Line 336: | 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 442: | 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 482: | 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 722: | 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 ]; | ||
| Line 786: | 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 794: | 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 800: | 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 832: | Line 833: | ||
} | } | ||
} | } | ||
| + | } // 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 16: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.
