Added updater, small fixes

README.md

@@ -12,5 +12,9 @@ It automatically switches when you are too far away from a station, and it can o
 3. Put the skin in ets2-telemetry-server's skins folder
 4. Select it and have fun
 
+## Screenshots: ##
+![Screenshot](http://i.imgur.com/1FOLMj5.png)
+_Screenshot near Białystok_
 
-![Screenshot](http://i.imgur.com/V0CtUkK.jpg)
+![Screenshot](http://i.imgur.com/KiFPfeP.png)
+_Screenshot near Suwałki_

config.json

@@ -9,7 +9,7 @@
         "         radius: What the radius in SCS coordinates is for a city to be in range",
         "       treshold: What value in SCS coordinates to switch to the new country's radio station",
         "     whitenoise: Play static when a station is far away",
-        "    volumeDelta: Tone down the volume by this amount (0.2 = 20%) [Planned feature]"
+        "      peerJSkey: The key for WebRTC pairing (the remote control). Key can be obtained for free by registering at http://peerjs.com "
     ],
 
     "config": {
@@ -23,7 +23,7 @@
         "radius": 7700,
         "treshold": 300,
         "whitenoise": true,
-        "volumeDelta": "0.2"
+        "peerJSkey": "damhc79361fhto6r"
     }
 
 }

dashboard.css

@@ -35,4 +35,8 @@ body {
 
 .remote {
     display: none;
-}
+}
+
+.update {
+    display: none;
+}

dashboard.html

@@ -32,11 +32,14 @@
     <div class="container">
         <div class="row">
             <div class="col-lg-12">
-                <h1 class="page-header">Radio stations: <span class="nearestCountry"></span></h1><span class="label label-success visible-md visible-lg" style="float: right; font-size: 100%">This device: <span class="peer-id"></span></span>
+                <h1 class="page-header">Radio stations: <span class="nearestCountry"></span></h1>
+                <div class="alert alert-info update">An update is available! <a class="btn btn-xs btn-primary" href="https://github.com/Koenvh1/ets2-local-radio/releases">Update now</a> </div>
                 <div class="alert alert-warning statusMessage"></div>
-                <div class="alert alert-info remote">This player is being controlled remotely</div>
-                <p><a href="https://goo.gl/forms/5p8d7eLs2S1Knjz52" target="_blank">Submit a new station</a></p>
+                <div class="alert alert-success remote">This player is being controlled remotely</div>
+                <p><a href="https://goo.gl/forms/5p8d7eLs2S1Knjz52" target="_blank">Submit a new station</a><span class="label label-success visible-md visible-lg" style="float: right; font-size: 100%">This device: <span class="peer-id"></span></span></p>
             </div>
+        </div>
+        <div class="row">
             <div id="stationsList">
                 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                     <!--a class="thumbnail" href="#">
@@ -45,12 +48,6 @@ <h1 class="page-header">Radio stations: <span class="nearestCountry"></span></h1
                 </div>
             </div>
         </div>
-
-        <div class="row">
-            <div class="col-lg-12">
-
-            </div>
-        </div>
         <hr>
 
         <!-- Footer -->
@@ -70,25 +67,7 @@ <h1 class="page-header">Radio stations: <span class="nearestCountry"></span></h1
     var peer = null;
     var conn = null;
     var controlRemote = false;
-    $.getScript("http://cdn.peerjs.com/0.3.14/peer.js", function () {
-        id = Math.floor(Math.random()*90000) + 10000;
-        peer = new Peer(id, {key: 'damhc79361fhto6r'});
-        $(".peer-id").html(id);
 
-        peer.on('connection', function (conn) {
-            conn.on('data', function (data) {
-                console.log(data);
-                if(data == "CONNECT"){
-                    console.log("Someone started controlling this player remotely");
-                    $(".remote").show();
-                }
-                if (data.substring(0, 1) == "{") {
-                    var obj = JSON.parse(data);
-                    setRadioStation(obj.url, obj.country, obj.volume);
-                }
-            });
-        });
-    });
     function connect() {
         var peerID = prompt("What's the peer ID?");
         if (peerID != null) {

dashboard.js

@@ -1,10 +1,12 @@
-//skinConfig global:
+//current version:
+var version = "0.0.3";
+//skinConfig global:
 var g_skinConfig;
 //countries near you global:
 var g_countries = {};
 //current country for that radio:
 var g_current_country;
-
+//nearest country:
 var g_last_nearest_country = "";
 
 Funbit.Ets.Telemetry.Dashboard.prototype.initialize = function (skinConfig, utils) {
@@ -21,6 +23,31 @@ Funbit.Ets.Telemetry.Dashboard.prototype.initialize = function (skinConfig, util
     $.getScript("/skins/" + skinConfig.name + "/cities/" + skinConfig.map);
     $.getScript("/skins/" + skinConfig.name + "/stations/" + skinConfig.stations);
     $.getScript("/skins/" + skinConfig.name + "/bootstrap.js");
+    $.getJSON("https://koenvh1.github.io/ets2-local-radio/version.json", function (data) {
+        if(data.version != version){
+            $(".update").show();
+        }
+    });
+    $.getScript("http://cdn.peerjs.com/0.3.14/peer.js", function () {
+        id = Math.floor(Math.random()*90000) + 10000;
+        peer = new Peer(id, {key: g_skinConfig.peerJSkey});
+        $(".peer-id").html(id);
+
+        peer.on('connection', function (conn) {
+            conn.on('data', function (data) {
+                console.log(data);
+                if(data == "CONNECT"){
+                    console.log("Someone started controlling this player remotely");
+                    $(".remote").show();
+                }
+                if (data.substring(0, 1) == "{") {
+                    var obj = JSON.parse(data);
+                    setRadioStation(obj.url, obj.country, obj.volume);
+                }
+            });
+        });
+    });
+
 
     // return to menu by a click
     $(document).add('body').on('click', function () {
@@ -69,6 +96,7 @@ Funbit.Ets.Telemetry.Dashboard.prototype.render = function (data, utils) {
     // data - same data object as in the filter function
     // utils - an object containing several utility functions (see skin tutorial for more information)
     //
+
     var countryLowestDistance = "nothing";
     var cityLowestDistance = "nothing";
     var lowestDistance = 999999999999999999;
@@ -135,7 +163,7 @@ Funbit.Ets.Telemetry.Dashboard.prototype.render = function (data, utils) {
                         ' \'' + volume + '\')">' +
                         '<a class="thumbnail" href="#">' +
                         '<div class="well-sm text-center"><div style="height: 70px; width: 100%"><img style="width: auto; height: auto; max-height: 70px; max-width: 100%" src="' + stations[key][j]['logo'] + '"></div><br>' +
-                        '<h3>' + stations[key][j]['name'] + '</h3>' +
+                        '<h3 class="station-title">' + stations[key][j]['name'] + '</h3>' +
                         key.toUpperCase() +
                         '</div>' +
                         '</a>' +
@@ -169,10 +197,11 @@ function setWhitenoise(volume) {
     if(g_skinConfig.whitenoise) {
         var newVolume =  Math.pow(volume, 2) - 0.1;
         if(newVolume < 0) newVolume = 0;
+        var playerVolume = 1;
         if(newVolume > 0.5){
-            var playerVolume = document.getElementById("player").volume + parseFloat(((Math.floor(Math.random() * 19) / 100) - 0.09) / 1.2);
+            playerVolume = document.getElementById("player").volume + parseFloat(((Math.floor(Math.random() * 19) / 100) - 0.09) / 1.2);
             if(playerVolume > 1) playerVolume = 1;
-            if(playerVolume < 0.2) playerVolume = 0.2;
+            if(playerVolume < 0.1) playerVolume = 0.1;
             document.getElementById("player").volume = playerVolume;
         } else {
             document.getElementById("player").volume = 1;