Difference between revisions of "Widget:GraphInteractivity"

From Hackerspace ACKspace
Jump to: navigation, search
(Creating a (javascript only) widget for adding interactivity to graphs)
 
m (wait, milisecond interval makes no sense -> second)
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<script type="text/javascript">
+
<noinclude>__NOTOC__
 +
This widget allows you to display the Space API data (provided as JSON)
 +
 
 +
Created by [[User:Xopr|Xopr]]
 +
 
 +
== Using this widget ==
 +
To insert this widget, use the following code:
 +
 
 +
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>}}</nowiki>
 +
 
 +
(supported field for SpaceAPI is <code>interval</code>
 +
This will add javascript logic that enables 'interactivity' to graphs.<br/>
 +
 
 +
== Copy to your site ==
 +
To use this widget on your site, just install [http://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article.
 +
</noinclude><includeonly><script type="text/javascript">
 
(function( )
 
(function( )
 
{
 
{
−
"use strict";
+
"use strict";
  
 
var g_graphs;
 
var g_graphs;
Line 8: Line 23:
 
var g_coloredNodes;
 
var g_coloredNodes;
  
−
document.addEventListener( "load", function()
{
 g_graphs = document.querySelectorAll( "svg > g.graph" );
+
var g_interval = <!--{$interval|validate:int|default:0}-->;
−
g_coloredNodes = [ [ g_graphs[0].querySelector( "g#h4" ), "green" ] ];
+
window.addEventListener( "load", function(){g_graphs = document.querySelectorAll( "svg > g.graph" );
 +
g_coloredNodes = [];//[ [ g_graphs[0].querySelector( "g#h4" ), "green" ] ];
  
 
g_graphs.forEach( function( _graph )
 
g_graphs.forEach( function( _graph )
Line 22: Line 38:
 
_graph.addEventListener( "mousedown", onMouseDown );
 
_graph.addEventListener( "mousedown", onMouseDown );
 
} );
 
} );
 +
 +
        if ( g_interval )
 +
        {
 +
    setInterval( fetchState, g_interval * 1000 );
 +
    fetchState( );
 +
        }
 
} );
 
} );
  
Line 40: Line 62:
 
_graph.querySelectorAll( "g[id] > *" ).forEach( function( _gNode )
 
_graph.querySelectorAll( "g[id] > *" ).forEach( function( _gNode )
 
{
 
{
−
if ( !_arrNodeColors.some( function( _nodeColor )
 {
+
if ( !_arrNodeColors.some( function( _nodeColor )

 +
{
 
if ( _nodeColor[0] && _nodeColor[0].getAttribute( "class" ) !== "graph" && _gNode.parentNode.id === _nodeColor[0].id )
 
if ( _nodeColor[0] && _nodeColor[0].getAttribute( "class" ) !== "graph" && _gNode.parentNode.id === _nodeColor[0].id )
−
return _gNode.style.stroke = _nodeColor[1];
+
return ( _gNode.style.stroke = _nodeColor[1] );
 
return false;
 
return false;
 
} ) )
 
} ) )
Line 55: Line 78:
 
g_selectedNode = g_selectedNode.parentNode;
 
g_selectedNode = g_selectedNode.parentNode;
 
decorateNodes( g_coloredNodes.concat( [ [g_selectedNode, "lightskyblue" ] ].reverse() ).reverse() );
 
decorateNodes( g_coloredNodes.concat( [ [g_selectedNode, "lightskyblue" ] ].reverse() ).reverse() );
 +
}
 +
 +
function fetchState( )
 +
{
 +
var xhr = new XMLHttpRequest( );
 +
if ( !!( "onload" in xhr ) )
 +
{
 +
xhr.onreadystatechange = function( _event )
 +
{
 +
if ( _event.target.readyState !== 4 )
 +
return;
 +
if ( _event.target.status === 200 )
 +
_xhr_onload( _event );
 +
//else
 +
//_xhr_onerror( _event );
 +
};
 +
}
 +
else
 +
{
 +
// Modern xhr
 +
xhr.onload = _xhr_onload( );
 +
//xhr.onerror = _xhr_onerror( );
 +
}
 +
xhr.open( "GET", "//ackspace.nl/spaceAPI/", true );
 +
 +
// Tells server that this call is made for ajax purposes.
 +
// Most libraries like jQuery/Prototype/Dojo do this
 +
xhr.setRequestHeader( "X-Requested-With", "XMLHttpRequest" );
 +
 +
// No data needs to be sent along with the request.
 +
xhr.send( null );
 +
}
 +
 +
function _xhr_onload( _event )
 +
{
 +
var data = {};
 +
try
 +
{
 +
data = JSON.parse( _event.target.responseText );
 +
}
 +
catch( _e )
 +
{
 +
}
 +
 +
if ( data && data.sensors && data.sensors.power_consumption )
 +
{
 +
g_coloredNodes = [];
 +
data.sensors.power_consumption.forEach( function( _powerConsumption )
 +
{
 +
// value, unit, location, name, description
 +
var powerstrip = document.querySelector( "g#" + _powerConsumption.name + ">polygon+text" );
 +
if ( powerstrip )
 +
powerstrip.textContent = "strip " + _powerConsumption.value + _powerConsumption.unit;
 +
 +
var color;
 +
if ( _powerConsumption.value < 5 )
 +
color = "lightgray";
 +
else if ( _powerConsumption.value < 10 )
 +
color = "green";
 +
else if ( _powerConsumption.value < 100 )
 +
color = "lightgreen";
 +
else if ( _powerConsumption.value < 200 )
 +
color = "yellow";
 +
else if ( _powerConsumption.value < 1000 )
 +
color = "orange";
 +
else
 +
color = "red";
 +
 +
g_coloredNodes.push( [ document.querySelector( "g#" + _powerConsumption.name ), color ] );
 +
} );
 +
 +
decorateNodes( g_coloredNodes.concat( [ [g_selectedNode, "lightskyblue" ] ].reverse() ).reverse() );
 +
}
 
}
 
}
  
 
}( ));
 
}( ));
 
</script>
 
</script>
 +
</includeonly>

Latest revision as of 17:13, 4 February 2019

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:GraphInteractivity}}

(supported field for SpaceAPI is interval This will add javascript logic that enables 'interactivity' to graphs.

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:GraphInteractivity article.

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