Skip to content

Commit

Permalink
Changed peer connection window to modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@Koenvh1
Koenvh1 committed Oct 25, 2016
1 parent 8f8a749 commit 9200a6e
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 22 deletions.
29 changes: 28 additions & 1 deletion dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,10 @@
@import "bootstrap.css";

body {
overflow-y: scroll;
height: 100%;
min-height: 100vh;
width: 100%;
overflow-y: auto;
}

.game-connected.yes .statusMessage {
Expand All @@ -40,3 +43,27 @@ body {
.update {
display: none;
}

.label-id {
float: right;
font-size: 100%;
}

.station-image-container {
height: 70px;
width: 100%;
}

.station-image-container > img {
width: auto;
height: auto;
max-height: 70px;
max-width: 100%;
}

.number-input {
padding: 0;
font-size: 25px;
width: 100% !important;
text-align: center;
}
62 changes: 51 additions & 11 deletions dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="javascript:window.history.back();">Back</a></li>
<li><a href="javascript:connect()">Connect to other device</a></li>
<li><a href="javascript:void(0)" data-toggle="modal" data-target="#connectModal">Connect to other device</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" onclick="setRadioStation('', 'none', 0)">Stop playback</a></li>
Expand All @@ -36,7 +36,7 @@ <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-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>
<p><a href="https://goo.gl/forms/5p8d7eLs2S1Knjz52" target="_blank">Submit a new station</a><span class="label label-success label-id">This device: <span class="peer-id"></span></span></p>
</div>
</div>
<div class="row">
Expand All @@ -60,25 +60,65 @@ <h1 class="page-header">Radio stations: <span class="nearestCountry"></span></h1
</footer>

</div>

<div class="modal fade" id="connectModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Enter the device ID:</h4>
</div>
<div class="modal-body">
<div class="form-inline">
<input type="tel" pattern="[0-9]*" class="form-control number-input" maxlength="5" name="connectText" id="connectText">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-block btn-success" data-dismiss="modal" onclick="connect($('#connectText').val());">Connect</button>
</div>
</div>
</div>
</div>
</div>

<script>
var id = null;
var peer = null;
var conn = null;
var connectedPeerID = null;
var controlRemote = false;

function connect() {
function connectPrompt() {
var peerID = prompt("What's the peer ID?");
if (peerID != null) {
conn = peer.connect(peerID);
conn.on('open', function () {
conn.send("CONNECT");
console.log("Successfully connected");
controlRemote = true;
document.getElementById("player").pause();
alert("Successfully connected!");
});
connect(peerID);
}
}

function connect(peerID) {
conn = peer.connect(peerID);
conn.on('open', function () {
conn.send("CONNECT");
console.log("Successfully connected");
controlRemote = true;
connectedPeerID = peerID;
document.getElementById("player").pause();
alert("Successfully connected");
});
conn.on('error', function (err) {
alert("Something went wrong while connecting: \n" + err);
});
}

$('#connectModal').on('shown.bs.modal', function (e) {
$("#connectText").val("");
$("#connectText").focus();
});

$('#connectText').keypress(function (e) {
if (e.which == 13) {
connect($("#connectText").val());
$("#connectModal").modal("hide");
}
});
</script>
39 changes: 29 additions & 10 deletions dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,27 +20,37 @@ Funbit.Ets.Telemetry.Dashboard.prototype.initialize = function (skinConfig, util

g_skinConfig = skinConfig;

//Get bootstrap:
$.getScript("/skins/" + skinConfig.name + "/bootstrap.js");
//Get city locations:
$.getScript("/skins/" + skinConfig.name + "/cities/" + skinConfig.map);
//Get stations per country:
$.getScript("/skins/" + skinConfig.name + "/stations/" + skinConfig.stations);
$.getScript("/skins/" + skinConfig.name + "/bootstrap.js");

//Check updates:
$.getJSON("https://koenvh1.github.io/ets2-local-radio/version.json", function (data) {
if(data.version != version){
$(".update").show();
}
});
//Get PeerJS dependencies:
$.getScript("http://cdn.peerjs.com/0.3.14/peer.js", function () {
//Set ID for PearJS
id = Math.floor(Math.random()*90000) + 10000;
peer = new Peer(id, {key: g_skinConfig.peerJSkey});
$(".peer-id").html(id);

//Receive message logic
peer.on('connection', function (conn) {
conn.on('data', function (data) {
console.log(data);
if(data == "CONNECT"){
//Show connected
console.log("Someone started controlling this player remotely");
$(".remote").show();
}
if (data.substring(0, 1) == "{") {
//If an object, set radio
var obj = JSON.parse(data);
setRadioStation(obj.url, obj.country, obj.volume);
}
Expand All @@ -50,13 +60,9 @@ Funbit.Ets.Telemetry.Dashboard.prototype.initialize = function (skinConfig, util


// return to menu by a click
$(document).add('body').on('click', function () {
//$(document).add('body').on('click', function () {
//window.history.back();
});

$(document).add('div[data-station]').on('click', function () {
//setRadioStation($(this).attr("data-station"));
});
//});
};

Funbit.Ets.Telemetry.Dashboard.prototype.filter = function (data, utils) {
Expand Down Expand Up @@ -103,30 +109,34 @@ Funbit.Ets.Telemetry.Dashboard.prototype.render = function (data, utils) {
var availableCountries = {
none: {
country: "none",
distance: 9999999999999999,
distance: 999999999999999999,
whitenoise: 0
}
};

var location = data.truck.placement;
//Test whether location is real and not disconnected
if(!(location.x == 0.0 && location.y == 0.0 && location.z == 0.0)){

for(var i = 0; i < cities.length; i++){
//Calculate distance
var distance = Math.sqrt(Math.pow((location["x"] - cities[i]["x"]), 2) + Math.pow((location["z"] - cities[i]["z"]), 2));
if(distance < lowestDistance){
//Write lowest distance
lowestDistance = distance;
countryLowestDistance = cities[i]["country"];
cityLowestDistance = cities[i]["realName"];
//$("#lowestDistance").html(countryLowestDistance);
}
if(distance < g_skinConfig.radius) {
//Add country to availableCountries
if(!availableCountries.hasOwnProperty(cities[i]["country"])) {
availableCountries[cities[i]["country"]] = {
country: cities[i]["country"],
distance: distance,
whitenoise: distance / g_skinConfig.radius
}
} else {
//Set whitenoise if there is a closer city in that country
if(availableCountries[cities[i]["country"]]["whitenoise"] > distance / g_skinConfig.radius){
availableCountries[cities[i]["country"]]["whitenoise"] = distance / g_skinConfig.radius;
availableCountries[cities[i]["country"]]["distance"] = distance;
Expand All @@ -141,11 +151,13 @@ Funbit.Ets.Telemetry.Dashboard.prototype.render = function (data, utils) {
if(!availableCountries.hasOwnProperty(g_current_country) ||
(availableCountries[countryLowestDistance]["distance"] + g_skinConfig.treshold < availableCountries[g_current_country]["distance"] &&
g_last_nearest_country != countryLowestDistance)) {
//If current station country is not close enough OR (the distance + treshold is larger than the new country's distance and the last station wasn't set manually.
g_last_nearest_country = countryLowestDistance;
setRadioStation(stations[countryLowestDistance][0]["url"], countryLowestDistance, availableCountries[countryLowestDistance]["whitenoise"]);
}

if(Object.keys(availableCountries).sort().toString() != Object.keys(g_countries).sort().toString()) {
//If they don't contain the same keys (ie. a country update)
g_countries = availableCountries;

var content = "";
Expand All @@ -162,7 +174,7 @@ Funbit.Ets.Telemetry.Dashboard.prototype.render = function (data, utils) {
' \'' + key + '\',' +
' \'' + 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>' +
'<div class="well-sm text-center"><div class="station-image-container"><img src="' + stations[key][j]['logo'] + '"></div><br>' +
'<h3 class="station-title">' + stations[key][j]['name'] + '</h3>' +
key.toUpperCase() +
'</div>' +
Expand All @@ -180,12 +192,17 @@ Funbit.Ets.Telemetry.Dashboard.prototype.render = function (data, utils) {

function setRadioStation(url, country, volume) {
if(controlRemote){
if(!conn.open){
//If connection closed, reconnect
conn = peer.connect(connectedPeerID);
}
conn.send(JSON.stringify({
url: url,
country: country,
volume: volume
}));
} else {
//Set current listening country for when crossing the border
g_current_country = country;
document.getElementById("player").src = url;
//document.getElementById("player").play();
Expand All @@ -195,10 +212,12 @@ function setRadioStation(url, country, volume) {

function setWhitenoise(volume) {
if(g_skinConfig.whitenoise) {
//Make new volume work exponentially:
var newVolume = Math.pow(volume, 2) - 0.15;
if(newVolume < 0) newVolume = 0;
var playerVolume = 1;
if(newVolume > 0.5){
//Create a distorted sound effect, with the sound sometimes dropping (no signal)
playerVolume = document.getElementById("player").volume + parseFloat(((Math.floor(Math.random() * 19) / 100) - 0.09) / 1.2);
if(playerVolume > 1) playerVolume = 1;
if(playerVolume < 0.1) playerVolume = 0.1;
Expand Down

0 comments on commit 9200a6e

Please sign in to comment.