Untitled


<?php

$username = "***";
$password = "***";
$hostname = "***";

//connection to the database
$dbhandle = mysql_connect($hostname, $username, $password)
 or die("Unable to connect to MySQL");


//select a database to work with
$selected = mysql_select_db("hw_terranova",$dbhandle)
  or die("Could not select database");
 ?>
      <script type="text/javascript" src="https://rawgit.com/pyalot/webgl-heatmap/master/webgl-heatmap.js"></script>


  <style type="text/css">


body {
    background-image: url("http://steffeno.net/terranova/heatmap/terrainmap_2209x1974.jpg");
    background-color: #cccccc;
 background-repeat: no-repeat;
 width: 2209px;
  height: 1974;

}

canvas {
 width: 1800px;
  height: 1800px;
  margin: 0;
  padding: 0;
position: absolute;
 // background-color: red;
// border: 5px solid blue;
top: 00px;
left: 220px;
opacity: .8;
}

div.controls {
  font-weight: bold;
  position: absolute;
  top: 10px;
  left: 10px;
}

header .logo a {
background: rgba(0, 0, 0, 0) url("../images/logo.png") no-repeat scroll center center / 97px 84px;
border: medium none;
color: transparent;
display: block;
font: 0px/0 a;
height: 84px;
width: 97px;
margin: 10px;
outline: 0 none;
padding-left: 15px;
text-shadow: none;
transition: all 0.5s ease-in-out 0s;
position: fixed;
z-index: 2; /* Stay on top */

}

 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 120px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 20px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.closebtn {
    position: absolute;
    top: 0;
    right: 0px;
    font-size: 26px !important;
    margin-left: 10px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 0px;

}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
.sidenavtext  {
    padding: 8px 8px 8px 20px;
    text-decoration: none;
    font-size: 15px;
    color: #818181;
    display: block;
    transition: 0.3s
font-weight: normal;

}

  </style>


  <title>Terra Nova Tracking (beta)</title>


</head>

<body>
  <canvas width="1800" height="1800"></canvas>

<header>

    <div class="logo">
        <span onclick="openNav()"> <a href="#">TerraNova</a></span>
    </div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="http://steffeno.net/terranova/">Main page</a>
  <a href="http://steamcommunity.com/groups/TERRAN0VA/">Steam Group</a><br />

<div class="sidenavtext">
<hr>
Controlpanel<br />


<?php
$result = mysql_query("SELECT * FROM playermovement");

    echo "<select name='id'>";
while ($row = mysql_fetch_array($result)) {


               unset($id, $name);
               $id = $row['id'];
                 $name = $row['name'];
               echo '<option value="'.$id.'">'.$name.'</option>';

}

    echo "</select>";
  ?>


 <button type="button" onclick="location.href='../?name=fuckme">Update</button></form><br /><br />

Work in Progress.<br />


<div style="position:relative;">
<span style="position:absolute: bottom:0px;">
Created by Sionn
and Ztif
</span>
</div>

</div>


</header>
<div id="main">


<script type='text/javascript'>//<![CDATA[

var canvas = document.getElementsByTagName('canvas')[0];
var heatmap = createWebGLHeatmap({
  canvas: canvas,
  intensityToAlpha:true,
// alphaRange:  [0.9, 0.9],
gradientTexture:'skyline-gradient.png',
    width: 1800,
    height: 1800
});


document.body.appendChild(heatmap.canvas);
canvas.onclick = function() {
  heatmap.clear();
}

var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
  window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

// IIFE so our variables don't pollute the global scope
(function(){
    var _addPoint = heatmap.addPoint.bind(heatmap),
        _center = {
            x: canvas.width/2,
            y: canvas.height/2
            },
        _scale = {
            w: canvas.width / 8500,
            h: canvas.height / -8500
          };

    heatmap.addPoint = function(x, y, size, intensity){
        x = x*_scale.w + _center.x;
        y = y*_scale.h + _center.y;
        console.log("Adding",x,y);
        _addPoint(x, y, size, intensity);
    };
})();


var update = function() {

<?php

//execute the SQL query and return records

if(isset($_GET['name'])) {
    $name = $_GET['name'];
$result = mysql_query("SELECT `coordinates` FROM `playermovement` WHERE name = '$name'");
} else {
    $test = '*';

$result = mysql_query("SELECT coordinates FROM playermovement");
}
/*
while ($row = mysql_fetch_array($result)) {
   echo "ID:".$row{'id'}." Name:".$row{'model'}."Year: ". //display the results
   $row{'year'}."<br>";
}
*/

//fetch tha data from the database
while ($row = mysql_fetch_array($result)) {

    $coords = explode(",", $row["coordinates"]);

if (count($coords) == 3) echo "heatmap.addPoint(". trim($coords[0]). ", ". trim($coords[2]) .", 8, 10 / 255); \n" ;

}

//close the connection
mysql_close($dbhandle);
?>


/*
heatmap.addPoint(2941.6, 2192.8, 25, 10 / 255); //Dune City
heatmap.addPoint(-4614.3, 3061.4, 25, 10 / 255); //Alpha Six
heatmap.addPoint(-0, 0, 45, 10 / 255); //Alpha Six
    heatmap.addPoint(2846, 2152, 25, 10 / 255); //Dune City in Unity
    heatmap.addPoint(-635., 2934.7, 15, 10 / 255); //Redville
    heatmap.addPoint(-4614.3, 3061.4, 65, 10 / 255); //Alpha Six
    heatmap.addPoint(2941.6, 2192.8, 25, 10 / 255); //Dune City
    heatmap.addPoint(-3427.9, -1605.9, 15, 10 / 255); //Slime
    heatmap.addPoint(-3428, -3747, 15, 10 / 255); //Icelake
*/
  // heatmap.adjustSize(); // can be commented out for statically sized heatmaps, resize clears the map
  heatmap.update(); // adds the buffered points
  heatmap.display(); // adds the buffered points
  heatmap.multiply(0.9995);
   heatmap.blur();
  heatmap.clamp(0.0, 1.0); // depending on usecase you might want to clamp it
  raf(update);
}
update();

//]]>


/* Set the width of the side navigation to 250px and the left margin of the page content to 150px */
function openNav() {
    document.getElementById("mySidenav").style.width = "150px";
    document.getElementById("main").style.marginLeft = "150px";
}

/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}

</script>
</div>
</body>

</html>