NOTICE: By continued use of this site you understand and agree to the binding Terms of Service and Privacy Policy.
// ==UserScript==
// @name VoR Pro Mode
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Add more graph to the tracker
// @author You
// @match http://www.volvooceanrace.com/static/tracker/leg1/en.html
// @grant none
// @require https://cdn.plot.ly/plotly-latest.min.js
// ==/UserScript==
(function() {
'use strict';
document.body.innerHTML += '<div id="configPro" style="width:100%;height:10%;opacity:1;z-index:100;background:#000;"><select id="ProSelect"><option value="1" selected="selected">Speed</option><option value="2" >VMG</option><option value="3">TWA</option><option value="4">TWS</option></select></div>';
document.body.innerHTML += '<div id="tester" style="position:absolute;width:100%;height:100%;opacity:1;z-index:100;background:#000;"></div>';
var UInt8Array = Uint8Array;
var text ="";
var filename ="";
var Speeds = [];
var VMGs = [];
var TWAs = [];
var TWSs = [];
var boatIDs = [51,53,57,54,56,55,58];
for ( var id in boatIDs)
{
Speeds[boatIDs[id]] = [];
VMGs[boatIDs[id]] = [];
TWAs[boatIDs[id]]= [];
TWSs[boatIDs[id]] = [];
}
var TESTER = document.getElementById('tester');
var Dates = [];
var Graphdata ="";
var layout = "";
ยต.loadHwxFile("http://www.volvooceanrace.com/static/tracker/leg1/data/race/leg1.tracker.reports.hwx?v=20171026140108","json",
function(data){
for (var i = 0; i < data.reports.history.length; i++) {
text += data.reports.history[i].date;
Dates.push(data.reports.history[i].date);
text += JSON.stringify(data.reports.history[i].lines);
for (var j=0;j< data.reports.history[i].lines.length;j++)
{
Speeds[parseInt(data.reports.history[i].lines[j][0])].push(data.reports.history[i].lines[j][8]);
VMGs[parseInt(data.reports.history[i].lines[j][0])].push(data.reports.history[i].lines[j][9]);
TWAs[parseInt(data.reports.history[i].lines[j][0])].push(data.reports.history[i].lines[j][14]);
TWSs[parseInt(data.reports.history[i].lines[j][0])].push(data.reports.history[i].lines[j][12]);
}
text +="\n";
filename = "report_"+data.reports.history[i].date+".txt";
}
var a = document.createElement("a");
//a.href = "data:text,"+encodeURI(text); //content
//a.download = filename; //file name
//a.click();
layout = {margin: { t: 0 }, paper_bgcolor : '#000',plot_bgcolor :'#000000',legend: {traceorder: 'normal',font: {color: '#FFFFFF'}},xaxis: {showticklabels: true,tickfont: {color: '#FFF'}},yaxis: {showticklabels: true,tickfont: {color: '#FFF'}}};
Graphdata =[{x: Dates,y: Speeds[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: Speeds[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: Speeds[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: Speeds[54],name: 'Vestas',
line: {color: '#EF7622',width: 2}},{x: Dates,y: Speeds[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: Speeds[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: Speeds[58],name: 'Akzo Nobel',line: {color: '#724DCB',
width: 2}}];
Plotly.plot( TESTER,Graphdata, layout );
});
$('#ProSelect').on('change', function() {
switch(this.value){
case "1":
Graphdata = [{x: Dates,y: Speeds[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: Speeds[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: Speeds[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: Speeds[54],name: 'Vestas',
line: {color: '#EF7622',width: 2}},{x: Dates,y: Speeds[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: Speeds[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: Speeds[58],name: 'Akzo Nobel',line: {color: '#724DCB',
width: 2}}];
Plotly.purge(TESTER);
Plotly.plot( TESTER,Graphdata, layout );
break;
case "2":
Graphdata = [{x: Dates,y: VMGs[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: VMGs[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: VMGs[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: VMGs[54],name: 'Vestas',
line: {color: '#EF7622',width: 2}},{x: Dates,y: VMGs[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: VMGs[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: VMGs[58],name: 'Akzo Nobel',line: {color: '#724DCB',
width: 2}}];
Plotly.purge(TESTER);
Plotly.plot( TESTER,Graphdata, layout );
break;
case "3":
Graphdata = [{x: Dates,y: TWAs[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: TWAs[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: TWAs[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: TWAs[54],name: 'Vestas',
line: {color: '#EF7622',width: 2}},{x: Dates,y: TWAs[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: TWAs[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: TWAs[58],name: 'Akzo Nobel',line: {color: '#724DCB',
width: 2}}];
Plotly.purge(TESTER);
Plotly.plot( TESTER,Graphdata, layout );
break;
case "4":
Graphdata = [{x: Dates,y: TWSs[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: TWSs[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: TWSs[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: TWSs[54],name: 'Vestas',
line: {color: '#EF7622',width: 2}},{x: Dates,y: TWSs[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: TWSs[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: TWSs[58],name: 'Akzo Nobel',line: {color: '#724DCB',
width: 2}}];
Plotly.purge(TESTER);
Plotly.plot( TESTER,Graphdata, layout );
break;
}
Plotly.redraw(TESTER);
});
//console.log(data.reports.history);});
// Your code here...
})();