Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
frame_source
Python Playground
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>AGV Graphing tool</title> <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript" charset="utf-8" src="http://visjs.org/dist/vis.js"></script> <link type="text/css" rel="stylesheet" href="http://visjs.org/dist/vis.css"/> </head> <body> <div id="AGV_network" style="width: 100%; height: 90%;"></div> </body> </html>
var timeout_animate; var eligoLOG_obj = {}; var time_array = []; var time_Idx; var animationInterval = 25; // 25msec interval => 40 fps animation var network; $(document).ready(function() { // create a network having container, data and options var container = document.getElementById('AGV_network'); var data = {}; var options = { nodes: { shape: 'dot' }, edges: { smooth: false }, physics: false, interaction:{ dragNodes:false, hover: true } }; // Draw the network network = new vis.Network(container, data, options); // Update the network clearTimeout(timeout_animate); timeout_animate = null; time_Idx = 0; update_ELIGO(); }); // Update the ELIGO data function update_ELIGO() { // Retrieve eligo data eligoLOG = "<eligoLOG><time at='75'><AGV id='1' loc='(2082,1944)' speed='.01' head='55' /><edge from='2' to='1' RSSI0='-54.30' RSSI1='-54.50' RSSI2='-54.50' RSSI3='-54.25' RSSI4='-54.20' RSSI5='-54.55' RSSI6='-54.20' RSSI7='-54.37' LAT0='231.60' LAT1='231.00' LAT2='231.30' LAT3='231.25' LAT4='231.90' LAT5='231.88' LAT6='232.00' LAT7='231.62' JIT0='-2.11' JIT1='0' JIT2='.11' JIT3='-.14' JIT4='-.11' JIT5='-.12' JIT6='-.22' JIT7='-.28' /><AGV id='2' loc='(1953,2084)' speed='.02' head='147' /><AGV id='3' loc='(1917,1956)' speed='.01' head='235' /><edge from='2' to='3' RSSI0='-49.20' RSSI1='-49.20' RSSI2='-49.00' RSSI3='-49.30' RSSI4='-49.10' RSSI5='-49.10' RSSI6='-49.00' RSSI7='-49.37' LAT0='231.10' LAT1='230.80' LAT2='231.00' LAT3='231.50' LAT4='231.90' LAT5='231.90' LAT6='232.00' LAT7='231.62' JIT0='0' JIT1='0' JIT2='.11' JIT3='-.11' JIT4='-.11' JIT5='-.11' JIT6='-.22' JIT7='-.28' /><AGV id='4' loc='(2043,1917)' speed='.01' head='325' /><edge from='2' to='4' RSSI0='-52.10' RSSI1='-52.50' RSSI2='-52.40' RSSI3='-52.30' RSSI4='-52.00' RSSI5='-52.33' RSSI6='-52.10' RSSI7='-52.12' LAT0='236.00' LAT1='235.40' LAT2='235.30' LAT3='236.00' LAT4='235.90' LAT5='236.22' LAT6='236.00' LAT7='235.62' JIT0='0' JIT1='0' JIT2='.11' JIT3='-.22' JIT4='-.11' JIT5='-.12' JIT6='-.22' JIT7='-.28' /></time><time at='1050'><AGV id='1' loc='(2092,1962)' speed='.01' head='67' /><edge from='3' to='1' RSSI0='-40.60' RSSI1='-41.30' RSSI2='-41.30' RSSI3='-40.50' RSSI4='-40.90' RSSI5='-41.30' RSSI6='-40.80' RSSI7='-41.22' LAT0='1.10' LAT1='.70' LAT2='.90' LAT3='1.30' LAT4='1.60' LAT5='1.20' LAT6='1.10' LAT7='1.11' JIT0='.11' JIT1='0' JIT2='.11' JIT3='-.11' JIT4='-.11' JIT5='-.11' JIT6='-.11' JIT7='-.12' /><AGV id='2' loc='(1938,2092)' speed='.02' head='157' /><edge from='3' to='2' RSSI0='-47.60' RSSI1='-47.90' RSSI2='-47.80' RSSI3='-48.10' RSSI4='-47.90' RSSI5='-47.90' RSSI6='-47.90' RSSI7='-47.88' LAT0='-114.40' LAT1='-114.60' LAT2='-114.50' LAT3='-114.30' LAT4='-114.30' LAT5='-113.80' LAT6='-114.00' LAT7='-113.88' JIT0='.22' JIT1='0' JIT2='.11' JIT3='-.22' JIT4='-.22' JIT5='-.11' JIT6='-.11' JIT7='-.12' /><AGV id='3' loc='(1907,1937)' speed='.01' head='248' /><AGV id='4' loc='(2061,1907)' speed='.02' head='337' /><edge from='3' to='4' RSSI0='-16.60' RSSI1='-15.00' RSSI2='-14.80' RSSI3='-14.60' RSSI4='-15.30' RSSI5='-13.20' RSSI6='-16.30' RSSI7='-16.00' LAT0='3.10' LAT1='3.10' LAT2='3.00' LAT3='3.90' LAT4='3.70' LAT5='3.20' LAT6='3.00' LAT7='4.00' JIT0='.11' JIT1='.11' JIT2='0' JIT3='-.22' JIT4='-.22' JIT5='-.11' JIT6='-.11' JIT7='0' /></time><time at='2075'><AGV id='1' loc='(2098,1981)' speed='.02' head='78' /><edge from='4' to='1' RSSI0='-40.60' RSSI1='-40.10' RSSI2='-40.50' RSSI3='-39.30' RSSI4='-38.10' RSSI5='-41.50' RSSI6='-40.80' RSSI7='-40.11' LAT0='-1.60' LAT1='-1.80' LAT2='-1.60' LAT3='-1.20' LAT4='-1.10' LAT5='-1.40' LAT6='-1.20' LAT7='-1.22' JIT0='.22' JIT1='.11' JIT2='-.11' JIT3='0' JIT4='-.22' JIT5='-.11' JIT6='-.22' JIT7='-.25' /><AGV id='2' loc='(1919,2098)' speed='.01' head='168' /><edge from='4' to='2' RSSI0='-49.70' RSSI1='-50.00' RSSI2='-50.20' RSSI3='-49.90' RSSI4='-50.00' RSSI5='-50.00' RSSI6='-49.90' RSSI7='-50.22' LAT0='-116.80' LAT1='-117.30' LAT2='-117.00' LAT3='-116.50' LAT4='-116.10' LAT5='-116.40' LAT6='-116.30' LAT7='-116.22' JIT0='.22' JIT1='-.11' JIT2='-.22' JIT3='-.11' JIT4='-.22' JIT5='-.11' JIT6='-.33' JIT7='-.25' /><AGV id='3' loc='(1901,1919)' speed='.01' head='258' /><edge from='4' to='3' RSSI0='-13.70' RSSI1='-13.80' RSSI2='-13.90' RSSI3='-13.70' RSSI4='-14.70' RSSI5='-14.50' RSSI6='-13.60' RSSI7='-13.55' LAT0='-1.80' LAT1='-2.10' LAT2='-1.80' LAT3='-1.50' LAT4='-1.10' LAT5='-1.40' LAT6='-1.20' LAT7='-1.11' JIT0='.22' JIT1='0' JIT2='-.22' JIT3='-.11' JIT4='-.22' JIT5='-.11' JIT6='-.22' JIT7='-.12' /><AGV id='4' loc='(2082,1901)' speed='.02' head='349' /></time><time at='9075'><AGV id='1' loc='(2034,2094)' speed='.01' head='159' /><AGV id='2' loc='(1806,2036)' speed='.01' head='248' /><edge from='1' to='2' RSSI0='-52.80' RSSI1='-51.60' RSSI2='-51.30' RSSI3='-50.77' RSSI4='-51.20' RSSI5='-51.20' RSSI6='-51.00' RSSI7='-51.85' LAT0='-.20' LAT1='0' LAT2='-.50' LAT3='.22' LAT4='.10' LAT5='0' LAT6='.37' LAT7='0' JIT0='.22' JIT1='.11' JIT2='.11' JIT3='-.12' JIT4='-.22' JIT5='-.11' JIT6='-.28' JIT7='0' /><AGV id='3' loc='(1963,1806)' speed='.02' head='338' /><edge from='1' to='3' RSSI0='-38.60' RSSI1='-37.00' RSSI2='-36.90' RSSI3='-36.50' RSSI4='-36.50' RSSI5='-36.50' RSSI6='-36.10' RSSI7='-37.00' LAT0='.60' LAT1='.60' LAT2='.40' LAT3='.70' LAT4='.90' LAT5='1.10' LAT6='.90' LAT7='1.44' JIT0='.22' JIT1='.11' JIT2='0' JIT3='-.22' JIT4='0' JIT5='-.11' JIT6='-.11' JIT7='0' /><AGV id='4' loc='(2193,1963)' speed='.02' head='68' /><edge from='1' to='4' RSSI0='-35.00' RSSI1='-31.70' RSSI2='-32.80' RSSI3='-32.66' RSSI4='-31.90' RSSI5='-32.50' RSSI6='-31.60' RSSI7='-31.88' LAT0='.60' LAT1='.50' LAT2='.50' LAT3='.77' LAT4='1.10' LAT5='1.00' LAT6='.40' LAT7='1.44' JIT0='.22' JIT1='.11' JIT2='.11' JIT3='-.25' JIT4='-.22' JIT5='-.22' JIT6='-.11' JIT7='0' /></time><time at='10075'><AGV id='1' loc='(2016,2099)' speed='.01' head='170' /><edge from='2' to='1' RSSI0='-54.60' RSSI1='-54.50' RSSI2='-55.00' RSSI3='-55.12' RSSI4='-55.00' RSSI5='-54.22' RSSI6='-54.62' RSSI7='-54.00' LAT0='1.10' LAT1='.90' LAT2='1.00' LAT3='1.37' LAT4='1.30' LAT5='1.22' LAT6='1.37' LAT7='1.85' JIT0='.11' JIT1='0' JIT2='0' JIT3='-.28' JIT4='-.11' JIT5='-.25' JIT6='-3.14' JIT7='-.16' /><AGV id='2' loc='(1801,2014)' speed='.01' head='261' /><AGV id='3' loc='(1983,1801)' speed='.01' head='350' /><edge from='2' to='3' RSSI0='-48.40' RSSI1='-48.50' RSSI2='-48.60' RSSI3='-48.25' RSSI4='-48.80' RSSI5='-48.55' RSSI6='-48.50' RSSI7='-48.75' LAT0='1.10' LAT1='1.30' LAT2='1.40' LAT3='2.12' LAT4='1.30' LAT5='1.77' LAT6='2.12' LAT7='2.00' JIT0='-.11' JIT1='-.11' JIT2='0' JIT3='-.14' JIT4='-.11' JIT5='-.12' JIT6='-3.14' JIT7='-.28' /><AGV id='4' loc='(2198,1983)' speed='.01' head='80' /><edge from='2' to='4' RSSI0='-53.90' RSSI1='-54.20' RSSI2='-54.40' RSSI3='-54.00' RSSI4='-54.10' RSSI5='-53.44' RSSI6='-54.12' RSSI7='-53.25' LAT0='1.10' LAT1='.90' LAT2='1.30' LAT3='1.44' LAT4='1.30' LAT5='1.33' LAT6='1.37' LAT7='2.00' JIT0='.11' JIT1='0' JIT2='0' JIT3='-.12' JIT4='-.11' JIT5='-.12' JIT6='-3.14' JIT7='-.28' /></time></eligoLOG>"; eligoLOG_obj = $.parseXML(eligoLOG); time_array = []; $(eligoLOG_obj).find("time").each(function() { // Next time object next = $(this).next(); t0 = parseFloat($(this).attr('at')); t1 = parseFloat($(next).attr('at')); // Update time array time_array.push(t0); for(var t=t0+animationInterval; t<t1; t = t+animationInterval) { intrpl_eligoLOG = "<time at='" + t + "'>"; $(this).find("AGV").each(function() { id =$(this).attr('id'); loc0 = $(this).attr('loc'); loc0_x = parseFloat(loc0.split('(')[1].split(',')[0]); loc0_y = parseFloat(loc0.split(')')[0].split(',')[1]); speed0 = parseFloat($(this).attr('speed')); head0 = parseFloat($(this).attr('head')); loc1 = $(next).find('AGV[id="' + id + '"]').attr('loc'); loc1_x = parseFloat(loc1.split('(')[1].split(',')[0]); loc1_y = parseFloat(loc1.split(')')[0].split(',')[1]); speed1 = parseFloat($(next).find('AGV[id="' + id + '"]').attr('speed')); head1 = parseFloat($(next).find('AGV[id="' + id + '"]').attr('head')); loc_x = (loc0_x + (loc1_x - loc0_x)/(t1 - t0) * (t - t0)).toFixed(2); loc_y = (loc0_y + (loc1_y - loc0_y)/(t1 - t0) * (t - t0)).toFixed(2); speed = (speed0 + (speed1 - speed0)/(t1 - t0) * (t - t0)).toFixed(2); head = (head0 + (head1 - head0) /(t1 - t0) * (t - t0)).toFixed(2); intrpl_eligoLOG = intrpl_eligoLOG + "<AGV id='" + id + "' loc='(" + loc_x + "," + loc_y + ")' speed='" + speed + "' head='" + head + "' />"; }); intrpl_eligoLOG = intrpl_eligoLOG + "</time>"; // Insert the interpolated ELIGO LOG into the main object intrpl_eligoLOG_obj = $.parseXML(intrpl_eligoLOG); $(next).before(intrpl_eligoLOG); // Update time array time_array.push(t); } }); setTimeout(animate_AGV_network, animationInterval, time_Idx); } // Plot the AGV network at a specific time instance function animate_AGV_network(time_Idx) { // Log the start time start_time = new Date().getTime(); // ELIGO time object at current instance var time_obj = $(eligoLOG_obj).find("time[at='" + time_array[time_Idx] + "']"); // create an array of nodes var nodes = new vis.DataSet(); $(time_obj).find("AGV").each(function() { var id = $(this).attr('id'); var loc = $(this).attr('loc'); var loc_x = loc.split('(')[1].split(',')[0]; var loc_y = loc.split(')')[0].split(',')[1]; var speed = $(this).attr('speed'); var head = $(this).attr('head'); var title = "<table><tr><td>Loc</td><td>=</td><td>" + loc + "</td></tr><tr><td>Speed</td><td>=</td><td>" + speed + "</td></tr><tr><td>Head</td><td>=</td><td>" + head + "</td></tr></table>"; nodes.add({id: id, label: 'AGV ' + id, x: loc_x, y: loc_y, title: title}); }); // create an array of edges var edges = new vis.DataSet(); $(time_obj).find("edge").each(function() { var from = $(this).attr('from'); var to = $(this).attr('to'); var RSSI = []; var LAT = []; var JIT = []; for(var i=0; i<8; i++) { RSSI[i] = $(this).attr('RSSI' + i); LAT[i] = $(this).attr('LAT' + i); JIT[i] = $(this).attr('JIT' + i); } // Count the number of successful OFDM bitrate results var value = RSSI.filter(function(a){return a !== "-";}).length; var title = "<table border='1'>"; title = title + "<tr><th></th><th>6Mbps</th><th>9Mbps</th><th>12Mbps</th><th>18Mbps</th><th>24Mbps</th><th>36Mbps</th><th>48Mbps</th><th>54Mbps</th></tr>"; title = title + "<tr><td><b>RSSI (dBm)</b></td><td>" + RSSI[0] + "</td><td>" + RSSI[1] + "</td><td>" + RSSI[2] + "</td><td>" + RSSI[3] + "</td><td>" + RSSI[4] + "</td><td>" + RSSI[5] + "</td><td>" + RSSI[6] + "</td><td>" + RSSI[7] + "</td></tr>"; title = title + "<tr><td><b>LAT (msec)</b></td><td>" + LAT[0] + "</td><td>" + LAT[1] + "</td><td>" + LAT[2] + "</td><td>" + LAT[3] + "</td><td>" + LAT[4] + "</td><td>" + LAT[5] + "</td><td>" + LAT[6] + "</td><td>" + LAT[7] + "</td></tr>"; title = title + "<tr><td><b>JIT (msec)</b></td><td>" + JIT[0] + "</td><td>" + JIT[1] + "</td><td>" + JIT[2] + "</td><td>" + JIT[3] + "</td><td>" + JIT[4] + "</td><td>" + JIT[5] + "</td><td>" + JIT[6] + "</td><td>" + JIT[7] + "</td></tr>"; title = title + "</table>"; edges.add({id: from + '-' + to, from: from, to: to, arrows: {to: {enabled: true, scaleFactor: parseFloat(1/value)}}, value: value, title: title}); }); // set the data of nodes and edges network.setData({nodes: nodes, edges: edges}); time_Idx++; setTimeout(animate_AGV_network, animationInterval - (new Date().getTime() - start_time), time_Idx); }