diff --git a/.gitignore b/.gitignore index df41b5ca..dcf79fab 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ build bundle public/icons/* +maps/ # local env files .env.local diff --git a/maps b/maps new file mode 120000 index 00000000..4adfaa0e --- /dev/null +++ b/maps @@ -0,0 +1 @@ +/home/esm/Downloads/maps/ \ No newline at end of file diff --git a/public/maps/.gitkeep b/public/maps/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/server.dev/package-lock.json b/server.dev/package-lock.json index 308c2b23..434b82a0 100644 --- a/server.dev/package-lock.json +++ b/server.dev/package-lock.json @@ -141,6 +141,15 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" }, + "cors": { + "version": "2.8.5", + "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", + "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", + "requires": { + "object-assign": "^4", + "vary": "^1" + } + }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -457,6 +466,11 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, "object-component": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz", diff --git a/server.dev/package.json b/server.dev/package.json index f23eaf6d..9e8ce61c 100644 --- a/server.dev/package.json +++ b/server.dev/package.json @@ -9,8 +9,9 @@ "author": "", "license": "ISC", "dependencies": { - "express": "^4.17.1", - "http": "0.0.1-security", - "socket.io": "^2.3.0" + "cors" : "^2.8.5", + "express" : "^4.17.1", + "http" : "0.0.1-security", + "socket.io" : "^2.3.0" } } diff --git a/server.dev/src/index.js b/server.dev/src/index.js index 3e5a1225..775d576a 100644 --- a/server.dev/src/index.js +++ b/server.dev/src/index.js @@ -10,6 +10,12 @@ const path = require( 'path' ); const fs = require( 'fs' ); const socketio = require( 'socket.io' ); +const express = require( 'express' ); +const http = require( 'http' ); +const bodyParser = require( 'body-parser' ); +const cors = require( 'cors' ); + + const options = { /* ... */ }; const io = socketio( options ); const dateFilename = path.resolve( process.cwd(), '../src/data/scs_sdk_plugin_parsed_data.json' ); @@ -24,24 +30,60 @@ const interval = () => { : 15; }; // Milisecond -io.listen( port, () => { - const url = `localhost:${ port }`; - const data = { +// --- + +let app = express(); +let server = http.createServer( app ); + +app.use( bodyParser.json() ); +app.use( cors( { + origin: /http:\/\/localhost:\d+/, + credentials: true +} ) ); +app.use( '/maps', express.static( path.resolve( __dirname, '../../maps' ) ) ); + +// --- + +//io.listen( port, () => { +// const url = `localhost:${ port }`; +// const data = { +// url: url, +// port: port +// }; +// const eventName = 'server.listen'; +// const txt = `Euro Truck Simulator 2 dashboard is running at http://${ url }/`; +// io.emit( 'log', { +// eventName: eventName, +// rawData: data +// } ); +// console.log( `[${ eventName }] ${ txt }` ); +//} ); + +io.on( 'connection', socket => { + const data = fs.readFileSync( dateFilename ); + console.log( 'Update' ); + setInterval( () => io.emit( 'update', JSON.parse( data.toString() ) ), interval() ); + //io.emit( 'update', JSON.parse( data.toString() ) ); +} ); + +server.listen( port, () => { + const url = `localhost:${ port }`; + const data = { url: url, port: port }; + + // const url = `localhost:${ port }`; + // const data = { + // url: url, + // port: port + // }; const eventName = 'server.listen'; - const txt = `Euro Truck Simulator 2 dashboard is running at http://${ url }/`; + //const txt = `Euro Truck Simulator 2 dashboard is running at http://${ url }/`; io.emit( 'log', { eventName: eventName, rawData: data } ); - console.log( `[${ eventName }] ${ txt }` ); -} ); - -io.on( 'connection', socket => { - const data = fs.readFileSync( dateFilename ); - console.log( 'Update' ); - setInterval( () => io.emit( 'update', JSON.parse( data.toString() ) ), interval() ); - //io.emit( 'update', JSON.parse( data.toString() ) ); -} ); + + console.log( 'server.listen', data, `Euro Truck Simulator 2 dashboard is running at http://${ url }/` ); +} ); \ No newline at end of file diff --git a/src/dashboards/maps/components/DashMaps.vue b/src/dashboards/maps/components/DashMaps.vue index 34095a6a..f299dca6 100644 --- a/src/dashboards/maps/components/DashMaps.vue +++ b/src/dashboards/maps/components/DashMaps.vue @@ -79,7 +79,7 @@ export default { }; }, mounted() { - _maps.init(); + _maps.init( this.telemetry.game.game.name ); EventBus.$on( 'tmp-update', dataIn => { _maps.updatePlayerPositionAndRotation( @@ -91,11 +91,13 @@ export default { // --- Dev if ( _app.isOnDevEnvironment ) - _maps.updatePlayerPositionAndRotation( - this.telemetry.truck.position.X, - this.telemetry.truck.position.Z, - this.telemetry.truck.orientation.heading, - this.telemetry.truck.speed.kph ); + setTimeout( () => { + _maps.updatePlayerPositionAndRotation( + this.telemetry.truck.position.X, + this.telemetry.truck.position.Z, + this.telemetry.truck.orientation.heading, + this.telemetry.truck.speed.kph ); + }, 1000 ); // --- ./Dev }, methods: { diff --git a/src/dashboards/maps/components/DashMaps.vue.bck b/src/dashboards/maps/components/DashMaps.vue.bck deleted file mode 100644 index c15703c9..00000000 --- a/src/dashboards/maps/components/DashMaps.vue.bck +++ /dev/null @@ -1,94 +0,0 @@ - - - - - diff --git a/src/data/ets2-dashboard-skin.config.json b/src/data/ets2-dashboard-skin.config.json index c39b6017..843df726 100644 --- a/src/data/ets2-dashboard-skin.config.json +++ b/src/data/ets2-dashboard-skin.config.json @@ -38,27 +38,27 @@ "events_truck.electric" : true, "events_truck.emergency" : true, "events_truck.warning" : true, - "events_truck.cruise-control-decrease" : true, - "events_truck.cruise-control-increase" : true, - "events_truck.cruise-control" : true, - "events_trailers.damage" : true, - "events_trailers.coupling" : true, - "events_navigation.speed-limit" : true, - "events_job.started" : true, - "events_job.finished" : true, - "events_job.delivered" : true, - "events_job.cancelled" : true, - "events_game.refuel-payed" : true, - "events_game.train" : true, - "events_game.ferry" : true, - "events_game.tollgate" : true, - "events_game.fine" : true, - "events_game.pause" : true, - "maps_elements_eta" : true, - "maps_elements_speedAndGear" : true, - "maps_elements_mapControls" : true, - "maps_elements_speedLimit" : true, - "maps_map_tilesLocations" : "remote", - "maps_map_activeMap" : "vanilla", - "maps_map_navigationRemaining" : "remaining_date" + "events_truck.cruise-control-decrease" : true, + "events_truck.cruise-control-increase" : true, + "events_truck.cruise-control" : true, + "events_trailers.damage" : true, + "events_trailers.coupling" : true, + "events_navigation.speed-limit" : true, + "events_job.started" : true, + "events_job.finished" : true, + "events_job.delivered" : true, + "events_job.cancelled" : true, + "events_game.refuel-payed" : true, + "events_game.train" : true, + "events_game.ferry" : true, + "events_game.tollgate" : true, + "events_game.fine" : true, + "events_game.pause" : true, + "maps_elements_eta" : true, + "maps_elements_speedAndGear" : true, + "maps_elements_mapControls" : true, + "maps_elements_speedLimit" : true, + "maps_map_tilesLocations" : "local", + "maps_map_activeMap" : "vanilla", + "maps_map_navigationRemaining" : "remaining_date" } diff --git a/src/utils/_maps.js b/src/utils/_maps.js index da6ac48b..12506938 100644 --- a/src/utils/_maps.js +++ b/src/utils/_maps.js @@ -6,7 +6,9 @@ * Time: 21:38 */ -import ol from 'openlayers'; +import axios from 'axios'; +import ol from 'openlayers'; +import store from '../store/index'; let d = { map: null, @@ -15,24 +17,68 @@ let d = { gBehaviorCenterOnPlayer: true, gBehaviorRotateWithPlayer: true, gIgnoreViewChangeEvents: false, - arrowRotate: '' + arrowRotate: '', + config: null, + paths: { + base: '', + tiles: 'tiles/{z}/{x}/{y}.png', + config: 'config.json' + } }; -const MAP_MAX_X = 131072; -const MAP_MAX_Y = 131072; const ZOOM_MIN = 0; const ZOOM_MAX = 9; const ZOOM_DEFAULT = 9; // ---- -const init = () => { +const initConfig = ( game ) => { + const type = store.getters[ 'config/get' ]( 'maps_map_activeMap' ); + const tilesLocation = store.getters[ 'config/get' ]( 'maps_map_tilesLocations' ); + const basePath = (tilesLocation === 'remote') + ? `https://github.com/meatlayer/ets2-mobile-route-advisor/raw/master/maps/${ type }/${ game }/` + : `http://${ window.location.hostname }:3000/maps/${ type }/${ game }/`; + + d.paths.base = basePath; + + return axios + .get( d.paths.base + d.paths.config ) + .then( response => { + //console.log( 'config', response.data ); + d.config = response.data; + + const replaces = { + '{x}': 1, '{y}': 2, '{z}': 2 + }; + const tilesPath = d.paths.tiles.replace( /{[xyz]}/g, m => replaces[ m ] ); + + //console.log( tilesPath ); + + return axios + .get( d.paths.base + tilesPath ) + .then( response => { + //console.log( 'tiles', response ); + //d.config = response.data; + }, err => { + console.error( 'Cant get tiles', err ); + //throw err; + } ); + }, err => { + console.error( 'Cant get config', err ); + //throw err; + } ); + + //console.log( game, type, tilesLocation, basePath ); + //console.log( d.paths ); +}; + +const initMap = () => { let projection = new ol.proj.Projection( { // Any name here. I chose "Funbit" because we are using funbit's image coordinates. code: 'Funbit', units: 'pixels', - extent: [ 0, 0, MAP_MAX_X, MAP_MAX_Y ], - worldExtent: [ 0, 0, MAP_MAX_X, MAP_MAX_Y ] + extent: [ 0, 0, d.config.map.maxX, d.config.map.maxY ], + worldExtent: [ 0, 0, d.config.map.maxX, d.config.map.maxY ] } ); ol.proj.addProjection( projection ); @@ -50,7 +96,7 @@ const init = () => { image: d.playerIcon } ); d.playerFeature = new ol.Feature( { - geometry: new ol.geom.Point( [ MAP_MAX_X / 2, MAP_MAX_Y / 2 ] ) + geometry: new ol.geom.Point( [ d.config.map.maxX / 2, d.config.map.maxY / 2 ] ) } ); // For some reason, we cannot pass the style in the constructor. d.playerFeature.setStyle( playerIconStyle ); @@ -66,9 +112,9 @@ const init = () => { // Configuring the custom map tiles. let custom_tilegrid = new ol.tilegrid.TileGrid( { - extent: [ 0, 0, MAP_MAX_X, MAP_MAX_Y ], + extent: [ 0, 0, d.config.map.maxX, d.config.map.maxY ], minZoom: ZOOM_MIN, - origin: [ 0, MAP_MAX_Y ], + origin: [ 0, d.config.map.maxY ], tileSize: [ 512, 512 ], resolutions: (function () { let r = []; @@ -139,9 +185,9 @@ const init = () => { ], view: new ol.View( { projection: projection, - extent: [ 0, 0, MAP_MAX_X, MAP_MAX_Y ], + extent: [ 0, 0, d.config.map.maxX, d.config.map.maxY ], //center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'), - center: [ MAP_MAX_X / 2, MAP_MAX_Y / 2 ], + center: [ d.config.map.maxX / 2, d.config.map.maxY / 2 ], minZoom: ZOOM_MIN, maxZoom: ZOOM_MAX, zoom: ZOOM_DEFAULT @@ -185,15 +231,22 @@ const init = () => { // }); }; +const init = ( game ) => { + initConfig( game ) + .then( () => initMap() ); +}; + // ---- const getMapTilesLayer = ( projection, tileGrid ) => { return new ol.layer.Tile( { - extent: [ 0, 0, MAP_MAX_X, MAP_MAX_Y ], + extent: [ 0, 0, d.config.map.maxX, d.config.map.maxY ], source: new ol.source.XYZ( { projection: projection, - url: 'https://github.com/meatlayer/ets2-mobile-route-advisor/raw/master/maps/ets2/tiles/{z}/{x}/{y}.png', - tileSize: [ 512, 512 ], + //url: + // 'https://github.com/meatlayer/ets2-mobile-route-advisor/raw/master/maps/ets2/tiles/{z}/{x}/{y}.png', + url: d.paths.base + d.paths.tiles, + tileSize: [ 512, 512 ], // Using createXYZ() makes the vector layer (with the features) unaligned. // It also tries loading non-existent tiles. // @@ -214,6 +267,10 @@ const getMapTilesLayer = ( projection, tileGrid ) => { }; const updatePlayerPositionAndRotation = ( lon, lat, rot, speed ) => { + + if ( d.config === null ) + return; + let map_coords = gameCoordToPixels( lon, lat ); let rad = rot * Math.PI * 2; @@ -258,13 +315,16 @@ const updatePlayerPositionAndRotation = ( lon, lat, rot, speed ) => { }; const gameCoordToPixels = ( x, y ) => { - let r = [ x / 1.087326 + 57157, y / 1.087326 + 59287 ]; + //let r = [ x / 1.087326 + 57157, y / 1.087326 + 59287 ]; + let r = [ x / d.config.transposition.x.factor + d.config.transposition.x.offset, y + / d.config.transposition.y.factor + + d.config.transposition.y.offset ]; // The United Kingdom of Great Britain and Northern Ireland - if ( x < -31056.8 && y < -5832.867 ) { - let r = [ x / 1.087326 + 57157, y / 1.087326 + 59287 ]; - } - r[ 1 ] = MAP_MAX_Y - r[ 1 ]; + //if ( x < -31056.8 && y < -5832.867 ) { + // let r = [ x / 1.087326 + 57157, y / 1.087326 + 59287 ]; + //} + r[ 1 ] = d.config.map.maxY - r[ 1 ]; return r; };