From 450f4a3a2423c90985603103b10e61a195d0f74f Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Mon, 7 Nov 2016 15:27:31 +0500 Subject: Draft of device images --- web/app/Application.js | 3 +- web/app/DeviceImages.js | 74 ++++++++++++++++++++++++++++++++++++ web/app/Style.js | 6 +-- web/app/store/DeviceImages.js | 69 +++++++++++++++++++++++++++++++++ web/app/view/MapController.js | 88 +++++++++++++++++++++---------------------- 5 files changed, 189 insertions(+), 51 deletions(-) create mode 100644 web/app/DeviceImages.js create mode 100644 web/app/store/DeviceImages.js (limited to 'web/app') diff --git a/web/app/Application.js b/web/app/Application.js index fc6ff5e..a92d148 100644 --- a/web/app/Application.js +++ b/web/app/Application.js @@ -69,7 +69,8 @@ Ext.define('Traccar.Application', { 'ReportSummary', 'ReportTypes', 'ReportEventTypes', - 'Statistics' + 'Statistics', + 'DeviceImages' ], controllers: [ diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js new file mode 100644 index 0000000..ade88bd --- /dev/null +++ b/web/app/DeviceImages.js @@ -0,0 +1,74 @@ +/* + * Copyright 2016 Anton Tananaev (anton@traccar.org) + * Copyright 2016 Andrey Kunitsyn (andrey@traccar.org) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +Ext.define('Traccar.DeviceImages', { + singleton: true, + + getImageIcon: function(color, zoom, angle, category) { + var image, device, svg, width, height, rotateTransform, scaleTransform, transform; + // Get right image or fallback to default arrow + if (category) { + device = Ext.getStore('DeviceImages').findRecord('key', category); + } + if (device === undefined || device === null) { + device = Ext.getStore('DeviceImages').findRecord('key', 'default'); + } + + // Duplicate svg object to not brake origin + svg = Ext.clone(device.get('svg')); + + // Get original dimensions + width = parseFloat(svg.documentElement.getAttribute('width')); + height = parseFloat(svg.documentElement.getAttribute('height')); + // Colorize + svg.getElementById(device.get('fillId')).style.fill = color; + // Prepare rotate transformation + rotateTransform = 'rotate(' + angle + ' ' + (width / 2) + ' ' + (height / 2) + ')'; + + // Adjust size and prepare scale transformation + width *= device.get('scale'); + height *= device.get('scale'); + if (zoom) { + width *= Traccar.Style.mapScaleSelected; + height *= Traccar.Style.mapScaleSelected; + scaleTransform = 'scale(' + device.get('scale') * Traccar.Style.mapScaleSelected + ') '; + } else { + scaleTransform = 'scale(' + device.get('scale') + ') '; + } + + //Apply both transformation in right order + transform = scaleTransform + ' ' + rotateTransform; + svg.getElementById(device.get('rotateId')).setAttribute('transform', transform); + + // Set dimension attributes + svg.documentElement.setAttribute('width', width); + svg.documentElement.setAttribute('height', height); + svg.documentElement.setAttribute('viewBox', '0 0 ' + width + ' ' + height); + + image = new ol.style.Icon({ + imgSize: [width, height], // Workaround for IE + src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent((new XMLSerializer()).serializeToString(svg.documentElement)) + }); + image.fill = color; + image.zoom = zoom; + image.angle = angle; + image.category = category; + + return image; + } +}); \ No newline at end of file diff --git a/web/app/Style.js b/web/app/Style.js index b4201bb..2353a21 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -49,9 +49,6 @@ Ext.define('Traccar.Style', { ], mapRouteWidth: 5, - mapArrowStrokeColor: 'rgba(50, 50, 50, 1.0)', - mapArrowStrokeWidth: 2, - mapTextColor: 'rgba(50, 50, 50, 1.0)', mapTextStrokeColor: 'rgba(255, 255, 255, 1.0)', mapTextStrokeWidth: 2, @@ -62,8 +59,7 @@ Ext.define('Traccar.Style', { mapColorUnknown: 'rgba(250, 190, 77, 1.0)', mapColorOffline: 'rgba(255, 84, 104, 1.0)', - mapRadiusNormal: 9, - mapRadiusSelected: 14, + mapScaleSelected: 1.5, mapMaxZoom: 19, mapDelay: 500, diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js new file mode 100644 index 0000000..968f90c --- /dev/null +++ b/web/app/store/DeviceImages.js @@ -0,0 +1,69 @@ +/* + * Copyright 2016 Anton Tananaev (anton@traccar.org) + * Copyright 2016 Andrey Kunitsyn (andrey@traccar.org) + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ +Ext.define('Traccar.store.DeviceImages', { + extend: 'Ext.data.Store', + fields: ['key', 'name', 'url', 'svg', 'fillId', 'rotateId', 'scale'], + + data: [{ + key: 'default', + name: Strings.categoryDefault, + svg: (new DOMParser()) + .parseFromString('' + + '', "image/svg+xml"), + rotateId: 'arrow', + fillId: 'arrow', + scale: 1 + }, { + key: 'car', + name: Strings.categoryCar, + url: 'images/car.svg', + fillId: 'path4149', + rotateId: 'g4207', + scale: 0.06, + }, { + key: 'bus', + name: Strings.categoryBus, + url: 'images/bus.svg', + fillId: 'path4713', + rotateId: 'layer2', + scale: 0.12, + }, { + key: 'truck', + name: Strings.categoryTruck, + url: 'images/truck.svg', + fillId: 'path4718', + rotateId: 'layer2', + scale: 0.1, + }], + + constructor: function() { + this.callParent(arguments); + this.config.data.forEach(function (device) { + if (device.url) { + Ext.Ajax.request({ + url: device.url, + scope: device, + success: function (response) { + this.svg = (new DOMParser()).parseFromString(response.responseText, "image/svg+xml"); + } + }); + } + }); + } +}); \ No newline at end of file diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 32ea6b0..7875e94 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -22,7 +22,8 @@ Ext.define('Traccar.view.MapController', { requires: [ 'Traccar.model.Position', 'Traccar.model.Device', - 'Traccar.GeofenceConverter' + 'Traccar.GeofenceConverter', + 'Traccar.DeviceImages' ], config: { @@ -86,17 +87,14 @@ Ext.define('Traccar.view.MapController', { }, changeMarkerColor: function (style, color) { - return new ol.style.Style({ - image: new ol.style.Arrow({ - radius: style.getImage().getRadius(), - fill: new ol.style.Fill({ - color: color - }), - stroke: style.getImage().getStroke(), - rotation: style.getImage().getRotation() - }), + var newStyle = new ol.style.Style({ + image: Traccar.DeviceImages.getImageIcon(color, + style.getImage().zoom, + style.getImage().angle, + style.getImage().category), text: style.getText() }); + return newStyle; }, updateDevice: function (store, data) { @@ -154,18 +152,20 @@ Ext.define('Traccar.view.MapController', { if (deviceId in this.latestMarkers) { marker = this.latestMarkers[deviceId]; marker.setGeometry(geometry); + marker.setStyle(this.rotateMarker(marker.getStyle(), position.get('course'))); } else { marker = new ol.Feature(geometry); marker.set('record', device); - this.latestMarkers[deviceId] = marker; - this.getView().getLatestSource().addFeature(marker); - style = this.getLatestMarker(this.getDeviceColor(device)); + style = this.getLatestMarker(this.getDeviceColor(device), + position.get('course'), + device.get('category')); style.getText().setText(device.get('name')); marker.setStyle(style); - } + this.latestMarkers[deviceId] = marker; + this.getView().getLatestSource().addFeature(marker); - marker.getStyle().getImage().setRotation(position.get('course') * Math.PI / 180); + } if (marker === this.selectedMarker && this.followSelected()) { this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); @@ -231,8 +231,7 @@ Ext.define('Traccar.view.MapController', { this.reportMarkers[position.get('id')] = marker; this.getView().getReportSource().addFeature(marker); - style = this.getReportMarker(position.get('deviceId')); - style.getImage().setRotation(position.get('course') * Math.PI / 180); + style = this.getReportMarker(position.get('deviceId'), position.get('course')); /*style.getText().setText( Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/ @@ -278,18 +277,9 @@ Ext.define('Traccar.view.MapController', { }); }, - getMarkerStyle: function (radius, color) { + getMarkerStyle: function (zoom, color, angle, category) { return new ol.style.Style({ - image: new ol.style.Arrow({ - radius: radius, - fill: new ol.style.Fill({ - color: color - }), - stroke: new ol.style.Stroke({ - color: Traccar.Style.mapArrowStrokeColor, - width: Traccar.Style.mapArrowStrokeWidth - }) - }), + image: Traccar.DeviceImages.getImageIcon(color, zoom, angle, category), text: new ol.style.Text({ textBaseline: 'bottom', fill: new ol.style.Fill({ @@ -299,47 +289,55 @@ Ext.define('Traccar.view.MapController', { color: Traccar.Style.mapTextStrokeColor, width: Traccar.Style.mapTextStrokeWidth }), - offsetY: -radius / 2 - Traccar.Style.mapTextOffset, + offsetY: -Traccar.Style.mapTextOffset, font : Traccar.Style.mapTextFont }) }); }, - getLatestMarker: function (color) { - return this.getMarkerStyle( - Traccar.Style.mapRadiusNormal, color); + getLatestMarker: function (color, angle, category) { + return this.getMarkerStyle(false, color, angle, category); }, - getReportMarker: function (deviceId) { + getReportMarker: function (deviceId, angle) { var index = 0; if (deviceId !== undefined) { index = deviceId % Traccar.Style.mapRouteColor.length; } - return this.getMarkerStyle( - Traccar.Style.mapRadiusNormal, Traccar.Style.mapRouteColor[index]); + return this.getMarkerStyle(false, Traccar.Style.mapRouteColor[index], angle); }, - resizeMarker: function (style, radius) { - return new ol.style.Style({ - image: new ol.style.Arrow({ - radius: radius, - fill: style.getImage().getFill(), - stroke: style.getImage().getStroke(), - rotation: style.getImage().getRotation() - }), + resizeMarker: function (style, zoom) { + var newStyle = new ol.style.Style({ + image: Traccar.DeviceImages.getImageIcon(style.getImage().fill, + zoom, + style.getImage().angle, + style.getImage().category), + text: style.getText() + }); + return newStyle; + }, + + rotateMarker: function (style, angle) { + var newStyle = new ol.style.Style({ + image: Traccar.DeviceImages.getImageIcon(style.getImage().fill, + style.getImage().zoom, + angle, + style.getImage().category), text: style.getText() }); + return newStyle; }, selectMarker: function (marker, center) { if (this.selectedMarker) { this.selectedMarker.setStyle( - this.resizeMarker(this.selectedMarker.getStyle(), Traccar.Style.mapRadiusNormal)); + this.resizeMarker(this.selectedMarker.getStyle(), false)); } if (marker) { marker.setStyle( - this.resizeMarker(marker.getStyle(), Traccar.Style.mapRadiusSelected)); + this.resizeMarker(marker.getStyle(), true)); if (center) { this.getView().getMapView().setCenter(marker.getGeometry().getCoordinates()); } -- cgit v1.2.3 From 97fd53f33b92e334e6094edb340ea551a44d136e Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Tue, 8 Nov 2016 10:03:18 +0500 Subject: - Move arrow to file - Change stroke width - Fix label offset --- web/app/DeviceImages.js | 2 +- web/app/Style.js | 2 +- web/app/store/DeviceImages.js | 7 ++----- web/app/view/MapController.js | 5 +++-- web/images/arrow.svg | 1 + web/images/bus.svg | 42 +++++++++++++++++++++--------------------- web/images/car.svg | 14 +++++++------- web/images/truck.svg | 18 +++++++++--------- 8 files changed, 45 insertions(+), 46 deletions(-) create mode 100644 web/images/arrow.svg (limited to 'web/app') diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index ade88bd..52eea1d 100644 --- a/web/app/DeviceImages.js +++ b/web/app/DeviceImages.js @@ -62,7 +62,7 @@ Ext.define('Traccar.DeviceImages', { image = new ol.style.Icon({ imgSize: [width, height], // Workaround for IE - src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent((new XMLSerializer()).serializeToString(svg.documentElement)) + src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement)) }); image.fill = color; image.zoom = zoom; diff --git a/web/app/Style.js b/web/app/Style.js index 2353a21..4fe5afd 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -52,7 +52,7 @@ Ext.define('Traccar.Style', { mapTextColor: 'rgba(50, 50, 50, 1.0)', mapTextStrokeColor: 'rgba(255, 255, 255, 1.0)', mapTextStrokeWidth: 2, - mapTextOffset: 10, + mapTextOffset: 2, mapTextFont: 'bold 12px sans-serif', mapColorOnline: 'rgba(77, 250, 144, 1.0)', diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js index 968f90c..57745f1 100644 --- a/web/app/store/DeviceImages.js +++ b/web/app/store/DeviceImages.js @@ -22,10 +22,7 @@ Ext.define('Traccar.store.DeviceImages', { data: [{ key: 'default', name: Strings.categoryDefault, - svg: (new DOMParser()) - .parseFromString('' - + '', "image/svg+xml"), + url: 'images/arrow.svg', rotateId: 'arrow', fillId: 'arrow', scale: 1 @@ -60,7 +57,7 @@ Ext.define('Traccar.store.DeviceImages', { url: device.url, scope: device, success: function (response) { - this.svg = (new DOMParser()).parseFromString(response.responseText, "image/svg+xml"); + this.svg = new DOMParser().parseFromString(response.responseText, "image/svg+xml"); } }); } diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 7875e94..829a8ea 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -278,8 +278,9 @@ Ext.define('Traccar.view.MapController', { }, getMarkerStyle: function (zoom, color, angle, category) { + var image = Traccar.DeviceImages.getImageIcon(color, zoom, angle, category); return new ol.style.Style({ - image: Traccar.DeviceImages.getImageIcon(color, zoom, angle, category), + image: image, text: new ol.style.Text({ textBaseline: 'bottom', fill: new ol.style.Fill({ @@ -289,7 +290,7 @@ Ext.define('Traccar.view.MapController', { color: Traccar.Style.mapTextStrokeColor, width: Traccar.Style.mapTextStrokeWidth }), - offsetY: -Traccar.Style.mapTextOffset, + offsetY: - image.getSize()[1] / 2 - Traccar.Style.mapTextOffset, font : Traccar.Style.mapTextFont }) }); diff --git a/web/images/arrow.svg b/web/images/arrow.svg new file mode 100644 index 0000000..538b058 --- /dev/null +++ b/web/images/arrow.svg @@ -0,0 +1 @@ + diff --git a/web/images/bus.svg b/web/images/bus.svg index f926055..4e3d1f7 100644 --- a/web/images/bus.svg +++ b/web/images/bus.svg @@ -71,7 +71,7 @@ id="layer2" inkscape:label="Layer 2"> + style="fill:#f2f2f2;fill-rule:evenodd;stroke:#000000;stroke-width:5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="fill:#f2f2f2;fill-rule:evenodd;stroke:#000000;stroke-width:5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="fill:#f2f2f2;fill-rule:evenodd;stroke:#000000;stroke-width:5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="fill:#f2f2f2;fill-rule:evenodd;stroke:#000000;stroke-width:5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> + style="opacity:1;fill:#f2f2f2;fill-rule:evenodd;stroke:#000000;stroke-width:5px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="fill:#008000;fill-rule:evenodd;stroke:#000000;stroke-width:18px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="fill:#f2f2f2;fill-rule:evenodd;stroke:#000000;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="fill:#f2f2f2;fill-rule:evenodd;stroke:#000000;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="fill:#f2f2f2;fill-rule:evenodd;stroke:#000000;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="fill:#f2f2f2;fill-rule:evenodd;stroke:#000000;stroke-width:10px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> + style="opacity:1;fill:#f9f9f9;fill-opacity:1;stroke:#000000;stroke-width:5" /> + style="opacity:1;fill:#f9f9f9;fill-opacity:1;stroke:#000000;stroke-width:5" /> diff --git a/web/images/truck.svg b/web/images/truck.svg index ef835b6..1f65e0d 100644 --- a/web/images/truck.svg +++ b/web/images/truck.svg @@ -71,54 +71,54 @@ id="layer2" inkscape:label="Layer 2"> Date: Tue, 8 Nov 2016 11:49:00 +0500 Subject: Load SVGs to html --- web/app/store/DeviceImages.js | 18 +++++------------- web/load.js | 16 +++++++++++++++- 2 files changed, 20 insertions(+), 14 deletions(-) (limited to 'web/app') diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js index 57745f1..4e49482 100644 --- a/web/app/store/DeviceImages.js +++ b/web/app/store/DeviceImages.js @@ -22,28 +22,28 @@ Ext.define('Traccar.store.DeviceImages', { data: [{ key: 'default', name: Strings.categoryDefault, - url: 'images/arrow.svg', + elementId: 'arrowSvg', rotateId: 'arrow', fillId: 'arrow', scale: 1 }, { key: 'car', name: Strings.categoryCar, - url: 'images/car.svg', + elementId: 'carSvg', fillId: 'path4149', rotateId: 'g4207', scale: 0.06, }, { key: 'bus', name: Strings.categoryBus, - url: 'images/bus.svg', + elementId: 'busSvg', fillId: 'path4713', rotateId: 'layer2', scale: 0.12, }, { key: 'truck', name: Strings.categoryTruck, - url: 'images/truck.svg', + elementId: 'truckSvg', fillId: 'path4718', rotateId: 'layer2', scale: 0.1, @@ -52,15 +52,7 @@ Ext.define('Traccar.store.DeviceImages', { constructor: function() { this.callParent(arguments); this.config.data.forEach(function (device) { - if (device.url) { - Ext.Ajax.request({ - url: device.url, - scope: device, - success: function (response) { - this.svg = new DOMParser().parseFromString(response.responseText, "image/svg+xml"); - } - }); - } + device.svg = document.getElementById(device.elementId).contentDocument; }); } }); \ No newline at end of file diff --git a/web/load.js b/web/load.js index f4987ac..7f0caf9 100644 --- a/web/load.js +++ b/web/load.js @@ -14,6 +14,15 @@ script.async = false document.head.appendChild(script); } + + function addSvgFile(file, id) { + var svg = document.createElement('object'); + svg.setAttribute('id', id); + svg.setAttribute('data', file); + svg.setAttribute('type', 'image/svg+xml'); + svg.setAttribute('style','visibility:hidden') + document.body.appendChild(svg); + } var debugMode = document.getElementById('loadScript').getAttribute('mode') === 'debug'; var touchMode = 'ontouchstart' in window || navigator.maxTouchPoints; @@ -119,6 +128,11 @@ addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol-debug.js'); addStyleFile('app.css'); - addScriptFile('arrow.js'); + //addScriptFile('arrow.js'); + + addSvgFile('images/arrow.svg', 'arrowSvg'); + addSvgFile('images/car.svg', 'carSvg'); + addSvgFile('images/bus.svg', 'busSvg'); + addSvgFile('images/truck.svg', 'truckSvg'); })(); -- cgit v1.2.3 From 7aaa4418b81a9d7686969715198b4b639c263b79 Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Tue, 8 Nov 2016 11:52:54 +0500 Subject: Remove store constructor --- web/app/store/DeviceImages.js | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) (limited to 'web/app') diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js index 4e49482..22a7872 100644 --- a/web/app/store/DeviceImages.js +++ b/web/app/store/DeviceImages.js @@ -22,37 +22,30 @@ Ext.define('Traccar.store.DeviceImages', { data: [{ key: 'default', name: Strings.categoryDefault, - elementId: 'arrowSvg', + svg: document.getElementById('arrowSvg').contentDocument, rotateId: 'arrow', fillId: 'arrow', scale: 1 }, { key: 'car', name: Strings.categoryCar, - elementId: 'carSvg', + svg: document.getElementById('carSvg').contentDocument, fillId: 'path4149', rotateId: 'g4207', scale: 0.06, }, { key: 'bus', name: Strings.categoryBus, - elementId: 'busSvg', + svg: document.getElementById('busSvg').contentDocument, fillId: 'path4713', rotateId: 'layer2', scale: 0.12, }, { key: 'truck', name: Strings.categoryTruck, - elementId: 'truckSvg', + svg: document.getElementById('truckSvg').contentDocument, fillId: 'path4718', rotateId: 'layer2', scale: 0.1, - }], - - constructor: function() { - this.callParent(arguments); - this.config.data.forEach(function (device) { - device.svg = document.getElementById(device.elementId).contentDocument; - }); - } + }] }); \ No newline at end of file -- cgit v1.2.3 From dbd7cb8ca62dd7fbc62fbfb9ccc16fc4b8a08d64 Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Tue, 8 Nov 2016 16:01:59 +0500 Subject: Changed icon styles --- web/app/DeviceImages.js | 11 ++- web/app/store/DeviceImages.js | 26 +++--- web/app/view/MapController.js | 17 ++-- web/images/arrow.svg | 2 +- web/images/bus.svg | 178 +++++------------------------------------- web/images/car.svg | 76 +++++------------- web/images/truck.svg | 69 ++++------------ 7 files changed, 90 insertions(+), 289 deletions(-) (limited to 'web/app') diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index 52eea1d..c79406b 100644 --- a/web/app/DeviceImages.js +++ b/web/app/DeviceImages.js @@ -39,6 +39,7 @@ Ext.define('Traccar.DeviceImages', { svg.getElementById(device.get('fillId')).style.fill = color; // Prepare rotate transformation rotateTransform = 'rotate(' + angle + ' ' + (width / 2) + ' ' + (height / 2) + ')'; + svg.getElementById(device.get('rotateId')).setAttribute('transform', rotateTransform); // Adjust size and prepare scale transformation width *= device.get('scale'); @@ -51,9 +52,13 @@ Ext.define('Traccar.DeviceImages', { scaleTransform = 'scale(' + device.get('scale') + ') '; } - //Apply both transformation in right order - transform = scaleTransform + ' ' + rotateTransform; - svg.getElementById(device.get('rotateId')).setAttribute('transform', transform); + if (device.get('scaleId') !== device.get('rotateId')) { + svg.getElementById(device.get('scaleId')).setAttribute('transform', scaleTransform); + } else { + svg.getElementById(device.get('scaleId')).setAttribute('transform', scaleTransform + ' ' + rotateTransform); + } + //transform = scaleTransform + ' ' + rotateTransform; + // Set dimension attributes svg.documentElement.setAttribute('width', width); diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js index 22a7872..e7ad4cb 100644 --- a/web/app/store/DeviceImages.js +++ b/web/app/store/DeviceImages.js @@ -17,35 +17,39 @@ */ Ext.define('Traccar.store.DeviceImages', { extend: 'Ext.data.Store', - fields: ['key', 'name', 'url', 'svg', 'fillId', 'rotateId', 'scale'], + fields: ['key', 'name', 'svg', 'fillId', 'rotateId', 'scaleId', 'scale'], data: [{ key: 'default', name: Strings.categoryDefault, svg: document.getElementById('arrowSvg').contentDocument, - rotateId: 'arrow', fillId: 'arrow', + rotateId: 'arrow', + scaleId: 'arrow', scale: 1 }, { key: 'car', name: Strings.categoryCar, svg: document.getElementById('carSvg').contentDocument, - fillId: 'path4149', - rotateId: 'g4207', - scale: 0.06, + fillId: 'path4148', + rotateId: 'path4148', + scaleId: 'layer2', + scale: 1 }, { key: 'bus', name: Strings.categoryBus, svg: document.getElementById('busSvg').contentDocument, - fillId: 'path4713', - rotateId: 'layer2', - scale: 0.12, + fillId: 'path4148', + rotateId: 'path4148', + scaleId: 'layer2', + scale: 1 }, { key: 'truck', name: Strings.categoryTruck, svg: document.getElementById('truckSvg').contentDocument, - fillId: 'path4718', - rotateId: 'layer2', - scale: 0.1, + fillId: 'path4148', + rotateId: 'path4148', + scaleId: 'layer2', + scale: 1 }] }); \ No newline at end of file diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 829a8ea..2f72e81 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -309,14 +309,17 @@ Ext.define('Traccar.view.MapController', { }, resizeMarker: function (style, zoom) { - var newStyle = new ol.style.Style({ - image: Traccar.DeviceImages.getImageIcon(style.getImage().fill, - zoom, - style.getImage().angle, - style.getImage().category), - text: style.getText() + var image, text; + image = Traccar.DeviceImages.getImageIcon(style.getImage().fill, + zoom, + style.getImage().angle, + style.getImage().category); + text = style.getText(); + text.setOffsetY(- image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); + return newStyle = new ol.style.Style({ + image: image, + text: text }); - return newStyle; }, rotateMarker: function (style, angle) { diff --git a/web/images/arrow.svg b/web/images/arrow.svg index 538b058..a85201d 100644 --- a/web/images/arrow.svg +++ b/web/images/arrow.svg @@ -1 +1 @@ - + diff --git a/web/images/bus.svg b/web/images/bus.svg index 4e3d1f7..2847eab 100644 --- a/web/images/bus.svg +++ b/web/images/bus.svg @@ -9,15 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="500px" - height="500px" - viewBox="0 0 500.00001 500.00001" - id="svg4144" + width="50" + height="50" + viewBox="0 0 50.000001 50.000001" + id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="bus.svg"> + id="defs4" /> + id="metadata7"> image/svg+xml - + @@ -71,152 +71,16 @@ id="layer2" inkscape:label="Layer 2"> - - - - - - - - - - - - - - - - - - - + sodipodi:nodetypes="ssscccs" /> - - + sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccccccccccc" /> diff --git a/web/images/car.svg b/web/images/car.svg index e12ed9a..0f56cc5 100644 --- a/web/images/car.svg +++ b/web/images/car.svg @@ -9,8 +9,9 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="500" - height="500" + width="50" + height="50" + viewBox="0 0 50.000001 50.000001" id="svg2" version="1.1" inkscape:version="0.91 r13725" @@ -24,12 +25,13 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="0.7" - inkscape:cx="-332.69084" - inkscape:cy="476.11054" + inkscape:zoom="32.000001" + inkscape:cx="28.992205" + inkscape:cy="19.572065" inkscape:document-units="px" - inkscape:current-layer="layer1" + inkscape:current-layer="layer2" showgrid="false" + units="px" inkscape:window-width="1920" inkscape:window-height="981" inkscape:window-x="0" @@ -65,55 +67,19 @@ - - - - - - - - - + id="layer2" + inkscape:label="Layer 2"> + + diff --git a/web/images/truck.svg b/web/images/truck.svg index 1f65e0d..f9a34d4 100644 --- a/web/images/truck.svg +++ b/web/images/truck.svg @@ -9,9 +9,9 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="500" - height="500" - viewBox="0 0 500.00001 500.00001" + width="50" + height="50" + viewBox="0 0 50.000001 50.000001" id="svg2" version="1.1" inkscape:version="0.91 r13725" @@ -25,9 +25,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="1.4" - inkscape:cx="195.16338" - inkscape:cy="286.29962" + inkscape:zoom="16" + inkscape:cx="40.268129" + inkscape:cy="20.202497" inkscape:document-units="px" inkscape:current-layer="layer2" showgrid="false" @@ -71,57 +71,16 @@ id="layer2" inkscape:label="Layer 2"> + sodipodi:nodetypes="ssscccs" /> - - - - - - - + sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccccc" /> -- cgit v1.2.3 From 03c7abe38d7d4852e80630d9f3f2124387f65d2c Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Tue, 8 Nov 2016 17:28:30 +0500 Subject: - Make icon inner space transparent - Use array of fillId - Make default icon consistent with other - Use bare arrow for route markers --- web/app/DeviceImages.js | 10 ++++-- web/app/store/DeviceImages.js | 18 +++++++--- web/app/view/MapController.js | 2 +- web/images/arrow.svg | 1 - web/images/bus.svg | 46 +++++++++++++++++------- web/images/car.svg | 33 +++++++++++------ web/images/default.svg | 84 +++++++++++++++++++++++++++++++++++++++++++ web/images/route.svg | 1 + web/images/truck.svg | 40 ++++++++++++++------- web/load.js | 3 +- 10 files changed, 193 insertions(+), 45 deletions(-) delete mode 100644 web/images/arrow.svg create mode 100644 web/images/default.svg create mode 100644 web/images/route.svg (limited to 'web/app') diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index c79406b..d781b52 100644 --- a/web/app/DeviceImages.js +++ b/web/app/DeviceImages.js @@ -20,7 +20,7 @@ Ext.define('Traccar.DeviceImages', { singleton: true, getImageIcon: function(color, zoom, angle, category) { - var image, device, svg, width, height, rotateTransform, scaleTransform, transform; + var image, device, svg, width, height, rotateTransform, scaleTransform, transform, fill; // Get right image or fallback to default arrow if (category) { device = Ext.getStore('DeviceImages').findRecord('key', category); @@ -36,7 +36,13 @@ Ext.define('Traccar.DeviceImages', { width = parseFloat(svg.documentElement.getAttribute('width')); height = parseFloat(svg.documentElement.getAttribute('height')); // Colorize - svg.getElementById(device.get('fillId')).style.fill = color; + fill = device.get('fillId'); + if (!Ext.isArray(fill)) { + fill = [fill]; + } + for (i = 0; i < fill.length; i++) { + svg.getElementById(fill[i]).style.fill = color; + } // Prepare rotate transformation rotateTransform = 'rotate(' + angle + ' ' + (width / 2) + ' ' + (height / 2) + ')'; svg.getElementById(device.get('rotateId')).setAttribute('transform', rotateTransform); diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js index e7ad4cb..ba91575 100644 --- a/web/app/store/DeviceImages.js +++ b/web/app/store/DeviceImages.js @@ -20,18 +20,26 @@ Ext.define('Traccar.store.DeviceImages', { fields: ['key', 'name', 'svg', 'fillId', 'rotateId', 'scaleId', 'scale'], data: [{ - key: 'default', + key: 'route', name: Strings.categoryDefault, - svg: document.getElementById('arrowSvg').contentDocument, + svg: document.getElementById('routeSvg').contentDocument, fillId: 'arrow', rotateId: 'arrow', scaleId: 'arrow', scale: 1 + }, { + key: 'default', + name: Strings.categoryDefault, + svg: document.getElementById('defaultSvg').contentDocument, + fillId: ['arrow', 'path4148'], + rotateId: 'layer2', + scaleId: 'layer2', + scale: 1 }, { key: 'car', name: Strings.categoryCar, svg: document.getElementById('carSvg').contentDocument, - fillId: 'path4148', + fillId: ['path4148', 'path4157'], rotateId: 'path4148', scaleId: 'layer2', scale: 1 @@ -39,7 +47,7 @@ Ext.define('Traccar.store.DeviceImages', { key: 'bus', name: Strings.categoryBus, svg: document.getElementById('busSvg').contentDocument, - fillId: 'path4148', + fillId: ['path4148', 'path4200'], rotateId: 'path4148', scaleId: 'layer2', scale: 1 @@ -47,7 +55,7 @@ Ext.define('Traccar.store.DeviceImages', { key: 'truck', name: Strings.categoryTruck, svg: document.getElementById('truckSvg').contentDocument, - fillId: 'path4148', + fillId: ['path4148', 'path4336'], rotateId: 'path4148', scaleId: 'layer2', scale: 1 diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 2f72e81..a0e2867 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -305,7 +305,7 @@ Ext.define('Traccar.view.MapController', { if (deviceId !== undefined) { index = deviceId % Traccar.Style.mapRouteColor.length; } - return this.getMarkerStyle(false, Traccar.Style.mapRouteColor[index], angle); + return this.getMarkerStyle(false, Traccar.Style.mapRouteColor[index], angle, 'route'); }, resizeMarker: function (style, zoom) { diff --git a/web/images/arrow.svg b/web/images/arrow.svg deleted file mode 100644 index a85201d..0000000 --- a/web/images/arrow.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/web/images/bus.svg b/web/images/bus.svg index 2847eab..935d7b9 100644 --- a/web/images/bus.svg +++ b/web/images/bus.svg @@ -25,9 +25,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="7.9999999" - inkscape:cx="-4.2362527" - inkscape:cy="18.152102" + inkscape:zoom="16" + inkscape:cx="24.67596" + inkscape:cy="22.389227" inkscape:document-units="px" inkscape:current-layer="layer2" showgrid="false" @@ -71,16 +71,36 @@ id="layer2" inkscape:label="Layer 2"> + style="opacity:1;fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.9;stroke-miterlimit:4;stroke-dasharray:none" + d="m 24.835938,15 c -2.029405,0.104367 -4.224031,0.194416 -5.955099,1.384579 -0.967027,0.625001 -0.992823,1.834875 -1.313127,2.824078 -0.634042,2.314087 -1.159315,4.692966 -1.065749,7.106185 -0.0078,1.92435 -0.01563,3.848699 -0.02345,5.773049 0.488281,-0.0013 0.976562,-0.0026 1.464843,-0.0039 0.06247,0.821104 -0.222941,1.763667 0.355267,2.45298 0.725171,0.850603 2.364263,0.385698 2.379597,-0.787667 0.01539,-0.547653 6.57e-4,-1.095919 0.0034,-1.643828 2.901042,-0.0039 5.802083,-0.0078 8.703125,-0.01172 0.04124,0.736959 -0.129081,1.507503 0.114137,2.214921 0.525411,1.082242 2.49727,0.850284 2.589362,-0.416067 0.01489,-0.602538 -0.0036,-1.205791 -0.0024,-1.80862 0.479167,0.002 0.958333,0.0039 1.4375,0.0059 -0.01716,-2.624357 0.02704,-5.250153 -0.03272,-7.87352 C 33.334549,21.925736 32.563956,19.744982 32.054629,17.52153 31.45137,16.048265 29.736634,15.607466 28.321878,15.325483 27.171936,15.117024 26.002455,15.037677 24.835938,15 Z" + id="path4200" + inkscape:connector-curvature="0" /> + + + + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:0.9;stroke-miterlimit:4;stroke-dasharray:none" + d="m 19.335938,27.111328 c 0.665875,-0.01325 1.294092,0.494428 1.41792,1.149271 0.137989,0.617714 -0.191102,1.29637 -0.759018,1.574081 -0.583075,0.309284 -1.3635,0.149537 -1.775759,-0.366694 -0.429377,-0.499232 -0.440039,-1.296433 -0.02181,-1.80562 0.269487,-0.345034 0.700603,-0.554527 1.138662,-0.551038 z" + id="path4181" + inkscape:connector-curvature="0" /> + + diff --git a/web/images/car.svg b/web/images/car.svg index 0f56cc5..893078f 100644 --- a/web/images/car.svg +++ b/web/images/car.svg @@ -25,9 +25,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="32.000001" - inkscape:cx="28.992205" - inkscape:cy="19.572065" + inkscape:zoom="11.313709" + inkscape:cx="-6.1434451" + inkscape:cy="26.255618" inkscape:document-units="px" inkscape:current-layer="layer2" showgrid="false" @@ -71,15 +71,28 @@ id="layer2" inkscape:label="Layer 2"> + sodipodi:nodetypes="cccccccccccccccccccc" /> + + + diff --git a/web/images/default.svg b/web/images/default.svg new file mode 100644 index 0000000..b199135 --- /dev/null +++ b/web/images/default.svg @@ -0,0 +1,84 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + diff --git a/web/images/route.svg b/web/images/route.svg new file mode 100644 index 0000000..a85201d --- /dev/null +++ b/web/images/route.svg @@ -0,0 +1 @@ + diff --git a/web/images/truck.svg b/web/images/truck.svg index f9a34d4..e0026c3 100644 --- a/web/images/truck.svg +++ b/web/images/truck.svg @@ -26,8 +26,8 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="16" - inkscape:cx="40.268129" - inkscape:cy="20.202497" + inkscape:cx="12.420548" + inkscape:cy="24.226399" inkscape:document-units="px" inkscape:current-layer="layer2" showgrid="false" @@ -45,7 +45,7 @@ image/svg+xml - + @@ -72,15 +72,31 @@ inkscape:label="Layer 2"> + d="M 30.316406 29.011719 C 30.032969 29.012099 29.77725 29.129922 29.591797 29.318359 C 29.406343 29.506797 29.292477 29.765616 29.292969 30.052734 C 29.293119 30.339392 29.406391 30.599146 29.591797 30.787109 C 29.777203 30.975073 30.033423 31.091416 30.316406 31.091797 C 30.599849 31.092075 30.857088 30.977075 31.042969 30.789062 C 31.228849 30.60105 31.343599 30.339859 31.34375 30.052734 C 31.344243 29.76515 31.228896 29.504892 31.042969 29.316406 C 30.857041 29.12792 30.600304 29.011439 30.316406 29.011719 z " + id="path4330" /> + + + style="opacity:1;fill:#f2f2f2;fill-opacity:1;stroke:#000000;stroke-width:0.90704989" + d="m 20.392578,28.955078 c 0.495617,-0.01 0.949054,0.392744 1.015279,0.880782 0.08326,0.480935 -0.222962,0.990466 -0.686539,1.142734 -0.433519,0.157426 -0.953792,-0.03157 -1.192133,-0.42471 -0.264966,-0.402656 -0.196351,-0.982659 0.156372,-1.311528 0.187059,-0.182377 0.44554,-0.288296 0.707021,-0.287278 z" + id="path4322" + inkscape:connector-curvature="0" /> + + diff --git a/web/load.js b/web/load.js index 7f0caf9..7f5c62c 100644 --- a/web/load.js +++ b/web/load.js @@ -130,7 +130,8 @@ addStyleFile('app.css'); //addScriptFile('arrow.js'); - addSvgFile('images/arrow.svg', 'arrowSvg'); + addSvgFile('images/default.svg', 'defaultSvg'); + addSvgFile('images/route.svg', 'routeSvg'); addSvgFile('images/car.svg', 'carSvg'); addSvgFile('images/bus.svg', 'busSvg'); addSvgFile('images/truck.svg', 'truckSvg'); -- cgit v1.2.3 From 26ecb43bc27087ae1f7aac8a8b0ffa8421b846d9 Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Wed, 9 Nov 2016 14:32:43 +0500 Subject: - Add other icons - Add Category combobox --- web/app/DeviceImages.js | 8 ++-- web/app/Style.js | 1 + web/app/store/DeviceImages.js | 56 ++++++++++++++++++++------ web/app/view/DeviceDialog.js | 8 ++++ web/images/bicycle.svg | 94 +++++++++++++++++++++++++++++++++++++++++++ web/images/default.svg | 26 +++++++----- web/images/motorcycle.svg | 94 +++++++++++++++++++++++++++++++++++++++++++ web/images/person.svg | 93 ++++++++++++++++++++++++++++++++++++++++++ web/images/plane.svg | 94 +++++++++++++++++++++++++++++++++++++++++++ web/images/ship.svg | 94 +++++++++++++++++++++++++++++++++++++++++++ web/l10n/en.json | 12 +++++- web/load.js | 5 +++ 12 files changed, 558 insertions(+), 27 deletions(-) create mode 100644 web/images/bicycle.svg create mode 100644 web/images/motorcycle.svg create mode 100644 web/images/person.svg create mode 100644 web/images/plane.svg create mode 100644 web/images/ship.svg (limited to 'web/app') diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index d781b52..87f2ca8 100644 --- a/web/app/DeviceImages.js +++ b/web/app/DeviceImages.js @@ -48,14 +48,14 @@ Ext.define('Traccar.DeviceImages', { svg.getElementById(device.get('rotateId')).setAttribute('transform', rotateTransform); // Adjust size and prepare scale transformation - width *= device.get('scale'); - height *= device.get('scale'); + width *= Traccar.Style.mapScaleNormal; + height *= Traccar.Style.mapScaleNormal; if (zoom) { width *= Traccar.Style.mapScaleSelected; height *= Traccar.Style.mapScaleSelected; - scaleTransform = 'scale(' + device.get('scale') * Traccar.Style.mapScaleSelected + ') '; + scaleTransform = 'scale(' + Traccar.Style.mapScaleSelected + ') '; } else { - scaleTransform = 'scale(' + device.get('scale') + ') '; + scaleTransform = 'scale(' + Traccar.Style.mapScaleNormal + ') '; } if (device.get('scaleId') !== device.get('rotateId')) { diff --git a/web/app/Style.js b/web/app/Style.js index 4fe5afd..b19584f 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -59,6 +59,7 @@ Ext.define('Traccar.Style', { mapColorUnknown: 'rgba(250, 190, 77, 1.0)', mapColorOffline: 'rgba(255, 84, 104, 1.0)', + mapScaleNormal: 1, mapScaleSelected: 1.5, mapMaxZoom: 19, diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js index ba91575..64a7855 100644 --- a/web/app/store/DeviceImages.js +++ b/web/app/store/DeviceImages.js @@ -21,43 +21,73 @@ Ext.define('Traccar.store.DeviceImages', { data: [{ key: 'route', - name: Strings.categoryDefault, + name: Strings.categoryRoute, svg: document.getElementById('routeSvg').contentDocument, fillId: 'arrow', rotateId: 'arrow', - scaleId: 'arrow', - scale: 1 + scaleId: 'arrow' }, { key: 'default', name: Strings.categoryDefault, svg: document.getElementById('defaultSvg').contentDocument, - fillId: ['arrow', 'path4148'], - rotateId: 'layer2', - scaleId: 'layer2', - scale: 1 + fillId: ['path4148', 'path4149'], + rotateId: 'path4148', + scaleId: 'layer2' }, { key: 'car', name: Strings.categoryCar, svg: document.getElementById('carSvg').contentDocument, fillId: ['path4148', 'path4157'], rotateId: 'path4148', - scaleId: 'layer2', - scale: 1 + scaleId: 'layer2' }, { key: 'bus', name: Strings.categoryBus, svg: document.getElementById('busSvg').contentDocument, fillId: ['path4148', 'path4200'], rotateId: 'path4148', - scaleId: 'layer2', - scale: 1 + scaleId: 'layer2' }, { key: 'truck', name: Strings.categoryTruck, svg: document.getElementById('truckSvg').contentDocument, fillId: ['path4148', 'path4336'], rotateId: 'path4148', - scaleId: 'layer2', - scale: 1 + scaleId: 'layer2' + }, { + key: 'ship', + name: Strings.categoryShip, + svg: document.getElementById('shipSvg').contentDocument, + fillId: ['path4148', 'path4177'], + rotateId: 'path4148', + scaleId: 'layer2' + }, { + key: 'plane', + name: Strings.categoryPlane, + svg: document.getElementById('planeSvg').contentDocument, + fillId: ['path4148', 'path4203'], + rotateId: 'path4148', + scaleId: 'layer2' + }, { + key: 'motorcycle', + name: Strings.categoryMotorcycle, + svg: document.getElementById('motorcycleSvg').contentDocument, + fillId: ['path4148', 'path4256'], + rotateId: 'path4148', + scaleId: 'layer2' + }, { + key: 'bicycle', + name: Strings.categoryBicycle, + svg: document.getElementById('bicycleSvg').contentDocument, + fillId: ['path4148', 'path4282'], + rotateId: 'path4148', + scaleId: 'layer2' + }, { + key: 'person', + name: Strings.categoryPerson, + svg: document.getElementById('personSvg').contentDocument, + fillId: ['path4148', 'path4308'], + rotateId: 'path4148', + scaleId: 'layer2' }] }); \ No newline at end of file diff --git a/web/app/view/DeviceDialog.js b/web/app/view/DeviceDialog.js index 68740b2..dea5074 100644 --- a/web/app/view/DeviceDialog.js +++ b/web/app/view/DeviceDialog.js @@ -57,6 +57,14 @@ Ext.define('Traccar.view.DeviceDialog', { xtype: 'textfield', name: 'contact', fieldLabel: Strings.deviceContact + }, { + xtype: 'combobox', + name: 'category', + fieldLabel: Strings.deviceCategory, + store: 'DeviceImages', + queryMode: 'local', + displayField: 'name', + valueField: 'key', }] } }); diff --git a/web/images/bicycle.svg b/web/images/bicycle.svg new file mode 100644 index 0000000..2f0c4d9 --- /dev/null +++ b/web/images/bicycle.svg @@ -0,0 +1,94 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/web/images/default.svg b/web/images/default.svg index b199135..5af1abc 100644 --- a/web/images/default.svg +++ b/web/images/default.svg @@ -15,7 +15,7 @@ id="svg2" version="1.1" inkscape:version="0.91 r13725" - sodipodi:docname="default.svg"> + sodipodi:docname="default.svg" - + + diff --git a/web/images/motorcycle.svg b/web/images/motorcycle.svg new file mode 100644 index 0000000..d3b6ee7 --- /dev/null +++ b/web/images/motorcycle.svg @@ -0,0 +1,94 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/web/images/person.svg b/web/images/person.svg new file mode 100644 index 0000000..306b303 --- /dev/null +++ b/web/images/person.svg @@ -0,0 +1,93 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/web/images/plane.svg b/web/images/plane.svg new file mode 100644 index 0000000..b3b749c --- /dev/null +++ b/web/images/plane.svg @@ -0,0 +1,94 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/web/images/ship.svg b/web/images/ship.svg new file mode 100644 index 0000000..5e24299 --- /dev/null +++ b/web/images/ship.svg @@ -0,0 +1,94 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + diff --git a/web/l10n/en.json b/web/l10n/en.json index 580c2a9..9dc20ad 100644 --- a/web/l10n/en.json +++ b/web/l10n/en.json @@ -60,6 +60,7 @@ "devicePhone": "Phone", "deviceModel": "Model", "deviceContact": "Contact", + "deviceCategory": "Category", "deviceLastUpdate": "Last Update", "deviceCommand": "Command", "deviceFollow": "Follow", @@ -185,5 +186,14 @@ "statisticsActiveDevices": "Active Devices", "statisticsRequests": "Requests", "statisticsMessagesReceived": "Messages Received", - "statisticsMessagesStored": "Messages Stored" + "statisticsMessagesStored": "Messages Stored", + "categoryDefault": "Default", + "categoryCar": "Car", + "categoryBus": "Bus", + "categoryTruck": "Truck", + "categoryShip": "Ship", + "categoryPlane": "Plane", + "categoryMotorcycle": "Motorcycle", + "categoryBicycle": "Bicycle", + "categoryPerson": "Person" } \ No newline at end of file diff --git a/web/load.js b/web/load.js index 7f5c62c..6257fe0 100644 --- a/web/load.js +++ b/web/load.js @@ -135,5 +135,10 @@ addSvgFile('images/car.svg', 'carSvg'); addSvgFile('images/bus.svg', 'busSvg'); addSvgFile('images/truck.svg', 'truckSvg'); + addSvgFile('images/ship.svg', 'shipSvg'); + addSvgFile('images/plane.svg', 'planeSvg'); + addSvgFile('images/motorcycle.svg', 'motorcycleSvg'); + addSvgFile('images/bicycle.svg', 'bicycleSvg'); + addSvgFile('images/person.svg', 'personSvg'); })(); -- cgit v1.2.3 From 185a6e4b3518ea7cebac33430751507b1bb94994 Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Thu, 10 Nov 2016 12:08:25 +0500 Subject: - Implement category selector for DeviceDialog - Fix jscs and jshint issues --- web/app/Application.js | 1 - web/app/DeviceImages.js | 43 +++++++++++---------- web/app/Style.js | 2 +- web/app/store/DeviceImages.js | 64 ++++++++++++++++---------------- web/app/view/DeviceDialog.js | 8 ++++ web/app/view/MapController.js | 12 +++--- web/app/view/ReportController.js | 2 +- web/images/arrow.svg | 1 + web/images/bicycle.svg | 70 +++++++++++------------------------ web/images/bus.svg | 80 +++++++++++----------------------------- web/images/car.svg | 70 ++++++++++------------------------- web/images/default.svg | 69 ++++++++++++---------------------- web/images/motorcycle.svg | 70 +++++++++++------------------------ web/images/person.svg | 69 +++++++++++----------------------- web/images/plane.svg | 70 +++++++++++------------------------ web/images/route.svg | 1 - web/images/ship.svg | 70 +++++++++++------------------------ web/images/truck.svg | 76 +++++++++++--------------------------- web/l10n/en.json | 1 + web/load.js | 30 +++++++-------- 20 files changed, 283 insertions(+), 526 deletions(-) create mode 100644 web/images/arrow.svg delete mode 100644 web/images/route.svg (limited to 'web/app') diff --git a/web/app/Application.js b/web/app/Application.js index a92d148..702a75a 100644 --- a/web/app/Application.js +++ b/web/app/Application.js @@ -127,7 +127,6 @@ Ext.define('Traccar.Application', { }, showError: function (response) { - var data; if (Ext.isString(response)) { Ext.Msg.alert(Strings.errorTitle, response); } else if (response.responseText) { diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index 87f2ca8..f96a3b0 100644 --- a/web/app/DeviceImages.js +++ b/web/app/DeviceImages.js @@ -18,24 +18,21 @@ Ext.define('Traccar.DeviceImages', { singleton: true, - - getImageIcon: function(color, zoom, angle, category) { - var image, device, svg, width, height, rotateTransform, scaleTransform, transform, fill; - // Get right image or fallback to default arrow + + getImageSvg: function (color, zoom, angle, category) { + var i, device, svg, width, height, rotateTransform, scaleTransform, fill; + if (category) { - device = Ext.getStore('DeviceImages').findRecord('key', category); + device = Ext.getStore('DeviceImages').findRecord('key', category, 0, false, false, true); } if (device === undefined || device === null) { - device = Ext.getStore('DeviceImages').findRecord('key', 'default'); + device = Ext.getStore('DeviceImages').findRecord('key', 'default', 0, false, false, true); } - - // Duplicate svg object to not brake origin svg = Ext.clone(device.get('svg')); - // Get original dimensions width = parseFloat(svg.documentElement.getAttribute('width')); height = parseFloat(svg.documentElement.getAttribute('height')); - // Colorize + fill = device.get('fillId'); if (!Ext.isArray(fill)) { fill = [fill]; @@ -43,11 +40,10 @@ Ext.define('Traccar.DeviceImages', { for (i = 0; i < fill.length; i++) { svg.getElementById(fill[i]).style.fill = color; } - // Prepare rotate transformation + rotateTransform = 'rotate(' + angle + ' ' + (width / 2) + ' ' + (height / 2) + ')'; svg.getElementById(device.get('rotateId')).setAttribute('transform', rotateTransform); - // Adjust size and prepare scale transformation width *= Traccar.Style.mapScaleNormal; height *= Traccar.Style.mapScaleNormal; if (zoom) { @@ -63,23 +59,30 @@ Ext.define('Traccar.DeviceImages', { } else { svg.getElementById(device.get('scaleId')).setAttribute('transform', scaleTransform + ' ' + rotateTransform); } - //transform = scaleTransform + ' ' + rotateTransform; - - // Set dimension attributes svg.documentElement.setAttribute('width', width); svg.documentElement.setAttribute('height', height); svg.documentElement.setAttribute('viewBox', '0 0 ' + width + ' ' + height); - + + return svg; + }, + + getImageIcon: function (color, zoom, angle, category) { + var image, svg, width, height; + + svg = this.getImageSvg(color, zoom, angle, category); + width = parseFloat(svg.documentElement.getAttribute('width')); + height = parseFloat(svg.documentElement.getAttribute('height')); + image = new ol.style.Icon({ - imgSize: [width, height], // Workaround for IE + imgSize: [width, height], src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg.documentElement)) }); image.fill = color; image.zoom = zoom; image.angle = angle; image.category = category; - + return image; - } -}); \ No newline at end of file + } +}); diff --git a/web/app/Style.js b/web/app/Style.js index b19584f..a7fe105 100644 --- a/web/app/Style.js +++ b/web/app/Style.js @@ -57,7 +57,7 @@ Ext.define('Traccar.Style', { mapColorOnline: 'rgba(77, 250, 144, 1.0)', mapColorUnknown: 'rgba(250, 190, 77, 1.0)', - mapColorOffline: 'rgba(255, 84, 104, 1.0)', + mapColorOffline: 'rgba(255, 162, 173, 1.0)', mapScaleNormal: 1, mapScaleSelected: 1.5, diff --git a/web/app/store/DeviceImages.js b/web/app/store/DeviceImages.js index 64a7855..efe8606 100644 --- a/web/app/store/DeviceImages.js +++ b/web/app/store/DeviceImages.js @@ -17,12 +17,12 @@ */ Ext.define('Traccar.store.DeviceImages', { extend: 'Ext.data.Store', - fields: ['key', 'name', 'svg', 'fillId', 'rotateId', 'scaleId', 'scale'], + fields: ['key', 'name', 'svg', 'fillId', 'rotateId', 'scaleId'], data: [{ - key: 'route', - name: Strings.categoryRoute, - svg: document.getElementById('routeSvg').contentDocument, + key: 'arrow', + name: Strings.categoryArrow, + svg: document.getElementById('arrowSvg').contentDocument, fillId: 'arrow', rotateId: 'arrow', scaleId: 'arrow' @@ -30,64 +30,64 @@ Ext.define('Traccar.store.DeviceImages', { key: 'default', name: Strings.categoryDefault, svg: document.getElementById('defaultSvg').contentDocument, - fillId: ['path4148', 'path4149'], - rotateId: 'path4148', - scaleId: 'layer2' + fillId: 'path4724', + rotateId: 'path4724', + scaleId: 'layer1' }, { key: 'car', name: Strings.categoryCar, svg: document.getElementById('carSvg').contentDocument, - fillId: ['path4148', 'path4157'], - rotateId: 'path4148', - scaleId: 'layer2' + fillId: 'path4724', + rotateId: 'path4724', + scaleId: 'layer1' }, { key: 'bus', name: Strings.categoryBus, svg: document.getElementById('busSvg').contentDocument, - fillId: ['path4148', 'path4200'], - rotateId: 'path4148', - scaleId: 'layer2' + fillId: 'path4724', + rotateId: 'path4724', + scaleId: 'layer1' }, { key: 'truck', name: Strings.categoryTruck, svg: document.getElementById('truckSvg').contentDocument, - fillId: ['path4148', 'path4336'], - rotateId: 'path4148', - scaleId: 'layer2' + fillId: 'path4724', + rotateId: 'path4724', + scaleId: 'layer1' }, { key: 'ship', name: Strings.categoryShip, svg: document.getElementById('shipSvg').contentDocument, - fillId: ['path4148', 'path4177'], - rotateId: 'path4148', - scaleId: 'layer2' + fillId: 'path4724', + rotateId: 'path4724', + scaleId: 'layer1' }, { key: 'plane', name: Strings.categoryPlane, svg: document.getElementById('planeSvg').contentDocument, - fillId: ['path4148', 'path4203'], - rotateId: 'path4148', - scaleId: 'layer2' + fillId: 'path4724', + rotateId: 'path4724', + scaleId: 'layer1' }, { key: 'motorcycle', name: Strings.categoryMotorcycle, svg: document.getElementById('motorcycleSvg').contentDocument, - fillId: ['path4148', 'path4256'], - rotateId: 'path4148', - scaleId: 'layer2' + fillId: 'path4724', + rotateId: 'path4724', + scaleId: 'layer1' }, { key: 'bicycle', name: Strings.categoryBicycle, svg: document.getElementById('bicycleSvg').contentDocument, - fillId: ['path4148', 'path4282'], - rotateId: 'path4148', - scaleId: 'layer2' + fillId: 'path4724', + rotateId: 'path4724', + scaleId: 'layer1' }, { key: 'person', name: Strings.categoryPerson, svg: document.getElementById('personSvg').contentDocument, - fillId: ['path4148', 'path4308'], - rotateId: 'path4148', - scaleId: 'layer2' + fillId: 'path4724', + rotateId: 'path4724', + scaleId: 'layer1' }] -}); \ No newline at end of file +}); diff --git a/web/app/view/DeviceDialog.js b/web/app/view/DeviceDialog.js index dea5074..d3f964e 100644 --- a/web/app/view/DeviceDialog.js +++ b/web/app/view/DeviceDialog.js @@ -65,6 +65,14 @@ Ext.define('Traccar.view.DeviceDialog', { queryMode: 'local', displayField: 'name', valueField: 'key', + listConfig: { + getInnerTpl: function () { + return '' + + '
' + + '{[new XMLSerializer().serializeToString(Traccar.DeviceImages.getImageSvg(' + + 'Traccar.Style.mapColorOnline, false, 0, values.key))]}
- {name}
'; + } + } }] } }); diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index a0e2867..103d62e 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -71,7 +71,7 @@ Ext.define('Traccar.view.MapController', { this.lookupReference('showReportsButton').setVisible(Traccar.app.isMobile()); }, - showReports: function() { + showReports: function () { Traccar.app.showReports(true); }, @@ -290,7 +290,7 @@ Ext.define('Traccar.view.MapController', { color: Traccar.Style.mapTextStrokeColor, width: Traccar.Style.mapTextStrokeWidth }), - offsetY: - image.getSize()[1] / 2 - Traccar.Style.mapTextOffset, + offsetY: -image.getSize()[1] / 2 - Traccar.Style.mapTextOffset, font : Traccar.Style.mapTextFont }) }); @@ -305,7 +305,7 @@ Ext.define('Traccar.view.MapController', { if (deviceId !== undefined) { index = deviceId % Traccar.Style.mapRouteColor.length; } - return this.getMarkerStyle(false, Traccar.Style.mapRouteColor[index], angle, 'route'); + return this.getMarkerStyle(false, Traccar.Style.mapRouteColor[index], angle, 'arrow'); }, resizeMarker: function (style, zoom) { @@ -315,13 +315,13 @@ Ext.define('Traccar.view.MapController', { style.getImage().angle, style.getImage().category); text = style.getText(); - text.setOffsetY(- image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); - return newStyle = new ol.style.Style({ + text.setOffsetY(-image.getSize()[1] / 2 - Traccar.Style.mapTextOffset); + return new ol.style.Style({ image: image, text: text }); }, - + rotateMarker: function (style, angle) { var newStyle = new ol.style.Style({ image: Traccar.DeviceImages.getImageIcon(style.getImage().fill, diff --git a/web/app/view/ReportController.js b/web/app/view/ReportController.js index 67fcf12..50eabae 100644 --- a/web/app/view/ReportController.js +++ b/web/app/view/ReportController.js @@ -41,7 +41,7 @@ Ext.define('Traccar.view.ReportController', { } }, - hideReports: function() { + hideReports: function () { Traccar.app.showReports(false); }, diff --git a/web/images/arrow.svg b/web/images/arrow.svg new file mode 100644 index 0000000..a85201d --- /dev/null +++ b/web/images/arrow.svg @@ -0,0 +1 @@ + diff --git a/web/images/bicycle.svg b/web/images/bicycle.svg index 2f0c4d9..86132ff 100644 --- a/web/images/bicycle.svg +++ b/web/images/bicycle.svg @@ -9,18 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="50" - height="50" - viewBox="0 0 50.000001 50.000001" - id="svg2" + width="40" + height="40" + viewBox="0 0 40 40" + id="svg4145" version="1.1" inkscape:version="0.91 r13725" - sodipodi:docname="bicycle.svg" - inkscape:export-filename="/home/local/RG/kas/repos/traccar/traccar-web/web/images/default.svg.png" - inkscape:export-xdpi="90" - inkscape:export-ydpi="90"> + sodipodi:docname="bicycle.svg"> + id="defs4147" /> + id="metadata4150"> @@ -49,46 +46,23 @@ - - - - - - - - - + id="layer1"> + style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z" + id="path4724" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ssscccs" /> - + inkscape:connector-curvature="0" + id="path4140" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 17.279576,21.785713 -2.19029,0 q -0.279018,0 -0.404576,-0.24414 -0.118583,-0.244141 0.04883,-0.467355 l 1.311384,-1.750837 q -0.453404,-0.216239 -0.955636,-0.216239 -0.920759,0 -1.576451,0.655692 -0.655692,0.655692 -0.655692,1.576451 0,0.920759 0.655692,1.576451 0.655692,0.655692 1.576451,0.655692 0.802176,0 1.416015,-0.502232 0.61384,-0.509208 0.774275,-1.283483 z m -1.297433,-0.892857 1.297433,0 Q 17.154018,20.299943 16.756418,19.86049 l -0.774275,1.032366 z m 3.348214,0 2.008929,-2.678571 -3.348214,0 -0.69057,0.920759 q 0.732422,0.718471 0.878907,1.757812 l 1.150948,0 z m 7.156808,2.02288 q 0.655692,-0.655692 0.655692,-1.576451 0,-0.920759 -0.655692,-1.576451 -0.655692,-0.655692 -1.576451,-0.655692 -0.418526,0 -0.844029,0.167411 l 1.213728,1.813616 q 0.104632,0.160435 0.06976,0.341797 -0.03488,0.181361 -0.188338,0.279018 -0.104631,0.07673 -0.251116,0.07673 -0.24414,0 -0.369698,-0.202287 L 23.327293,19.76981 q -0.648716,0.662668 -0.648716,1.569476 0,0.920759 0.655692,1.576451 0.655691,0.655692 1.57645,0.655692 0.920759,0 1.576451,-0.655692 z m 0.62779,-3.780692 q 0.920759,0.913783 0.920759,2.204241 0,1.290457 -0.920759,2.211216 -0.913783,0.913784 -2.204241,0.913784 -1.290457,0 -2.211216,-0.913784 -0.913784,-0.920759 -0.913784,-2.211216 0,-0.676618 0.272043,-1.276507 0.279018,-0.606864 0.767299,-1.046317 l -0.453404,-0.683594 -2.462333,3.271485 q -0.125558,0.181361 -0.355747,0.181361 l -1.374163,0 q -0.160436,1.143974 -1.039342,1.911273 -0.878906,0.767299 -2.050781,0.767299 -1.290458,0 -2.211217,-0.913784 -0.913783,-0.920759 -0.913783,-2.211216 0,-1.290458 0.913783,-2.204241 0.920759,-0.920759 2.211217,-0.920759 0.795201,0 1.499721,0.383649 l 0.955636,-1.276506 -1.5625,0 q -0.181362,0 -0.313895,-0.132534 -0.132534,-0.132533 -0.132534,-0.313895 0,-0.181361 0.132534,-0.313895 0.132533,-0.132533 0.313895,-0.132533 l 2.678571,0 0,0.892857 3.03432,0 -0.592913,-0.892857 -1.548549,0 q -0.181362,0 -0.313896,-0.132534 -0.132533,-0.132533 -0.132533,-0.313895 0,-0.181362 0.132533,-0.313895 0.132534,-0.132534 0.313896,-0.132534 l 1.785714,0 q 0.23019,0 0.369699,0.195313 l 1.862444,2.790179 q 0.634765,-0.30692 1.339285,-0.30692 1.290458,0 2.204241,0.920759 z" /> diff --git a/web/images/bus.svg b/web/images/bus.svg index 935d7b9..6f1b7a9 100644 --- a/web/images/bus.svg +++ b/web/images/bus.svg @@ -9,15 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="50" - height="50" - viewBox="0 0 50.000001 50.000001" - id="svg2" + width="40" + height="40" + viewBox="0 0 40 40" + id="svg4145" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="bus.svg"> + id="defs4147" /> + id="metadata4150"> @@ -46,61 +46,23 @@ - - - - - - - - - + id="layer1"> + style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z" + id="path4724" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ssscccs" /> - - - - - + inkscape:connector-curvature="0" + id="path4477" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 17.056362,22.866908 q 0.265067,-0.265067 0.265067,-0.634766 0,-0.369699 -0.265067,-0.62779 -0.258092,-0.265067 -0.62779,-0.265067 -0.369699,0 -0.634766,0.265067 -0.258091,0.258091 -0.258091,0.62779 0,0.369699 0.258091,0.634766 0.265067,0.258091 0.634766,0.258091 0.369698,0 0.62779,-0.258091 z m 7.142857,0 q 0.265067,-0.265067 0.265067,-0.634766 0,-0.369699 -0.265067,-0.62779 -0.258091,-0.265067 -0.62779,-0.265067 -0.369699,0 -0.634766,0.265067 -0.258091,0.258091 -0.258091,0.62779 0,0.369699 0.258091,0.634766 0.265067,0.258091 0.634766,0.258091 0.369699,0 0.62779,-0.258091 z m -0.0558,-3.397043 -0.502233,-2.678571 q -0.03488,-0.160435 -0.160435,-0.258092 -0.118582,-0.104631 -0.279018,-0.104631 l -6.40346,0 q -0.160435,0 -0.285993,0.104631 -0.118582,0.09766 -0.15346,0.258092 l -0.502232,2.678571 q -0.03488,0.209264 0.09766,0.369699 0.132534,0.160435 0.341797,0.160435 l 7.407924,0 q 0.209264,0 0.341797,-0.160435 0.132534,-0.160435 0.09766,-0.369699 z m -1.674108,-4.031808 q 0.09766,-0.09766 0.09766,-0.237165 0,-0.139509 -0.09766,-0.237165 -0.09766,-0.09766 -0.237165,-0.09766 l -4.464285,0 q -0.139509,0 -0.237166,0.09766 -0.09766,0.09766 -0.09766,0.237165 0,0.139509 0.09766,0.237165 0.09766,0.09766 0.237166,0.09766 l 4.464285,0 q 0.139509,0 0.237165,-0.09766 z m 2.887835,4.820034 0,4.206194 -0.892857,0 0,0.892857 q 0,0.369699 -0.265067,0.62779 -0.258091,0.265067 -0.62779,0.265067 -0.369699,0 -0.634766,-0.265067 -0.258091,-0.258091 -0.258091,-0.62779 l 0,-0.892857 -5.357143,0 0,0.892857 q 0,0.369699 -0.265067,0.62779 -0.258092,0.265067 -0.62779,0.265067 -0.369699,0 -0.634766,-0.265067 -0.258091,-0.258091 -0.258091,-0.62779 l 0,-0.892857 -0.892857,0 0,-4.206194 q 0,-0.78125 0.174386,-1.555525 l 0.718471,-3.166853 q 0.06278,-0.544084 0.676618,-0.955636 0.620815,-0.411551 1.604353,-0.620814 0.99051,-0.209264 2.183311,-0.209264 1.192802,0 2.17634,0.209264 0.990513,0.209263 1.604352,0.620814 0.620815,0.411552 0.683594,0.955636 l 0.732422,3.166853 q 0.160435,0.711496 0.160435,1.555525 z" /> diff --git a/web/images/car.svg b/web/images/car.svg index 893078f..d712374 100644 --- a/web/images/car.svg +++ b/web/images/car.svg @@ -9,15 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="50" - height="50" - viewBox="0 0 50.000001 50.000001" - id="svg2" + width="40" + height="40" + viewBox="0 0 40 40" + id="svg4145" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="car.svg"> + id="defs4147" /> + id="metadata4150"> @@ -46,53 +46,23 @@ - - - - - - - - - + id="layer1"> + sodipodi:nodetypes="ssscccs" /> - - - + inkscape:connector-curvature="0" + id="path4409" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 15.877511,21.904297 q 0.327846,-0.327846 0.327846,-0.788225 0,-0.46038 -0.327846,-0.788226 Q 15.549665,20 15.089285,20 q -0.460379,0 -0.788225,0.327846 -0.327846,0.327846 -0.327846,0.788226 0,0.460379 0.327846,0.788225 0.327846,0.327846 0.788225,0.327846 0.46038,0 0.788226,-0.327846 z m 0.578962,-3.020368 7.087053,0 -0.620814,-2.490235 q -0.01395,-0.0558 -0.09766,-0.118582 -0.0837,-0.06976 -0.146484,-0.06976 l -5.357143,0 q -0.06278,0 -0.146484,0.06976 -0.08371,0.06278 -0.09766,0.118582 l -0.620815,2.490235 z m 9.242466,3.020368 q 0.327846,-0.327846 0.327846,-0.788225 0,-0.46038 -0.327846,-0.788226 Q 25.371093,20 24.910714,20 q -0.46038,0 -0.788226,0.327846 -0.327846,0.327846 -0.327846,0.788226 0,0.460379 0.327846,0.788225 0.327846,0.327846 0.788226,0.327846 0.460379,0 0.788225,-0.327846 z m 1.443918,-1.457868 0,2.678571 q 0,0.09766 -0.06278,0.160436 -0.06278,0.06278 -0.160436,0.06278 l -0.669642,0 0,0.892857 q 0,0.558035 -0.390625,0.94866 -0.390625,0.390625 -0.948661,0.390625 -0.558036,0 -0.948661,-0.390625 -0.390625,-0.390625 -0.390625,-0.94866 l 0,-0.892857 -7.142857,0 0,0.892857 q 0,0.558035 -0.390625,0.94866 -0.390625,0.390625 -0.948661,0.390625 -0.558035,0 -0.94866,-0.390625 Q 13.75,24.799107 13.75,24.241072 l 0,-0.892857 -0.669643,0 q -0.09766,0 -0.160436,-0.06278 -0.06278,-0.06278 -0.06278,-0.160436 l 0,-2.678571 q 0,-0.648717 0.453404,-1.102121 0.46038,-0.460379 1.109096,-0.460379 l 0.195313,0 0.732422,-2.922712 q 0.160435,-0.655692 0.725446,-1.095145 0.565011,-0.446429 1.248605,-0.446429 l 5.357143,0 q 0.683594,0 1.248605,0.446429 0.565011,0.439453 0.725446,1.095145 l 0.732422,2.922712 0.195313,0 q 0.648716,0 1.10212,0.460379 0.46038,0.453404 0.46038,1.102121 z" /> diff --git a/web/images/default.svg b/web/images/default.svg index 5af1abc..983e487 100644 --- a/web/images/default.svg +++ b/web/images/default.svg @@ -9,15 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="50" - height="50" - viewBox="0 0 50.000001 50.000001" - id="svg2" + width="40" + height="40" + viewBox="0 0 40 40" + id="svg4145" version="1.1" inkscape:version="0.91 r13725" - sodipodi:docname="default.svg" + sodipodi:docname="default.svg"> + id="defs4147" /> + id="metadata4150"> @@ -46,47 +46,24 @@ - - - - - - - - - + id="layer1"> - + style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z" + id="path4724" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ssscccs" /> + style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.81362325;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + id="path4250" + cx="20" + cy="20" + r="5.2625632" /> diff --git a/web/images/motorcycle.svg b/web/images/motorcycle.svg index d3b6ee7..5e46b4d 100644 --- a/web/images/motorcycle.svg +++ b/web/images/motorcycle.svg @@ -9,18 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="50" - height="50" - viewBox="0 0 50.000001 50.000001" - id="svg2" + width="40" + height="40" + viewBox="0 0 40 40" + id="svg4145" version="1.1" inkscape:version="0.91 r13725" - sodipodi:docname="motorcycle.svg" - inkscape:export-filename="/home/local/RG/kas/repos/traccar/traccar-web/web/images/default.svg.png" - inkscape:export-xdpi="90" - inkscape:export-ydpi="90"> + sodipodi:docname="motorcycle.svg"> + id="defs4147" /> + id="metadata4150"> @@ -49,46 +46,23 @@ - - - - - - - - - + id="layer1"> + style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z" + id="path4724" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ssscccs" /> - + inkscape:connector-curvature="0" + id="path4140" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 28.014333,20.976253 q 0.08371,0.718471 -0.15346,1.388114 -0.237165,0.662667 -0.690569,1.136997 -0.453404,0.474331 -1.109096,0.739398 -0.648716,0.265067 -1.367187,0.216238 -1.123047,-0.07673 -1.953125,-0.87193 -0.823103,-0.795201 -0.93471,-1.911273 -0.08371,-0.774274 0.188337,-1.464843 0.279018,-0.697545 0.830078,-1.192802 l -0.495257,-0.746373 q -0.669643,0.558036 -1.053292,1.353237 -0.38365,0.795201 -0.38365,1.702009 0,0.188337 -0.132533,0.327846 -0.125558,0.132533 -0.313895,0.132533 l -1.785714,0 -0.481306,0 q -0.160436,1.143974 -1.039342,1.911273 -0.878906,0.767299 -2.050781,0.767299 -1.290458,0 -2.211217,-0.913784 -0.913783,-0.920759 -0.913783,-2.211216 0,-1.290458 0.913783,-2.204241 0.920759,-0.920759 2.211217,-0.920759 0.530134,0 1.060268,0.188337 l 0.167411,-0.313895 q -0.85798,-0.767299 -2.120536,-0.767299 l -0.446429,0 q -0.181361,0 -0.313895,-0.132534 -0.132533,-0.132533 -0.132533,-0.313895 0,-0.181361 0.132533,-0.313895 0.132534,-0.132533 0.313895,-0.132533 l 0.892857,0 q 0.544085,0 1.01144,0.09766 0.467355,0.09068 0.809152,0.265067 0.348772,0.174386 0.502232,0.279018 0.15346,0.09766 0.355748,0.251116 l 3.571428,0 0.802177,0 -0.592913,-0.892857 -1.548549,0 q -0.209264,0 -0.341797,-0.15346 -0.132534,-0.160435 -0.09766,-0.369699 0.0279,-0.160435 0.160435,-0.265067 0.132533,-0.104632 0.299944,-0.104632 l 1.764788,0 q 0.23019,0 0.369699,0.195313 l 0.488281,0.732422 0.795201,-0.795201 q 0.132533,-0.132534 0.32087,-0.132534 l 0.70452,0 q 0.181362,0 0.313895,0.132534 0.132534,0.132533 0.132534,0.313895 l 0,0.892857 q 0,0.181362 -0.132534,0.313895 -0.132533,0.132534 -0.313895,0.132534 l -1.248605,0 0.802177,1.199777 q 0.913783,-0.439454 1.918248,-0.251117 0.997488,0.181362 1.702009,0.941686 0.70452,0.753348 0.823102,1.764788 z m -12.925502,2.594866 q 0.802176,0 1.416016,-0.502232 0.613839,-0.509208 0.774274,-1.283483 l -2.19029,0 q -0.244141,0 -0.38365,-0.216238 -0.125558,-0.223215 -0.007,-0.439453 l 1.025391,-1.932199 q -0.327846,-0.09068 -0.634766,-0.09068 -0.920759,0 -1.576451,0.655692 -0.655692,0.655692 -0.655692,1.576451 0,0.920759 0.655692,1.576451 0.655692,0.655692 1.576451,0.655692 z m 8.244978,-0.655692 q 0.655692,0.655692 1.576451,0.655692 0.920758,0 1.57645,-0.655692 0.655692,-0.655692 0.655692,-1.576451 0,-0.920759 -0.655692,-1.576451 -0.655692,-0.655692 -1.57645,-0.655692 -0.418527,0 -0.844029,0.167411 l 1.213727,1.813616 q 0.104632,0.160435 0.06976,0.341797 -0.03488,0.181361 -0.188337,0.279018 -0.104632,0.07673 -0.251116,0.07673 -0.244141,0 -0.369699,-0.202287 L 23.326833,19.7695 q -0.648716,0.662668 -0.648716,1.569476 0,0.920759 0.655692,1.576451 z" /> diff --git a/web/images/person.svg b/web/images/person.svg index 306b303..71546ec 100644 --- a/web/images/person.svg +++ b/web/images/person.svg @@ -9,18 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="50" - height="50" - viewBox="0 0 50.000001 50.000001" - id="svg2" + width="40" + height="40" + viewBox="0 0 40 40" + id="svg4145" version="1.1" inkscape:version="0.91 r13725" - sodipodi:docname="person.svg" - inkscape:export-filename="/home/local/RG/kas/repos/traccar/traccar-web/web/images/default.svg.png" - inkscape:export-xdpi="90" - inkscape:export-ydpi="90"> + sodipodi:docname="person.svg"> + id="defs4147" /> + id="metadata4150"> @@ -49,45 +46,23 @@ - - - - - - - - - + id="layer1"> + style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z" + id="path4724" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ssscccs" /> - + inkscape:connector-curvature="0" + id="path4140" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 24.464286,23.508649 q 0,0.760323 -0.439454,1.304408 -0.432477,0.544085 -1.046317,0.544085 l -5.957031,0 q -0.613839,0 -1.053292,-0.544085 -0.432478,-0.544085 -0.432478,-1.304408 0,-0.592913 0.0558,-1.116072 0.06278,-0.530134 0.223214,-1.060268 0.160435,-0.537109 0.404576,-0.913783 0.251116,-0.38365 0.655692,-0.620815 0.411551,-0.24414 0.941685,-0.24414 0.913784,0.892857 2.183315,0.892857 1.269531,0 2.183315,-0.892857 0.530134,0 0.934709,0.24414 0.411552,0.237165 0.655692,0.620815 0.251116,0.376674 0.411552,0.913783 0.160435,0.530134 0.216239,1.060268 0.06278,0.523159 0.06278,1.116072 z m -2.57394,-8.077567 q 0.788225,0.78125 0.788225,1.890346 0,1.109096 -0.788225,1.897321 -0.78125,0.78125 -1.890346,0.78125 -1.109096,0 -1.897322,-0.78125 -0.78125,-0.788225 -0.78125,-1.897321 0,-1.109096 0.78125,-1.890346 Q 18.890904,14.642856 20,14.642856 q 1.109096,0 1.890346,0.788226 z" /> diff --git a/web/images/plane.svg b/web/images/plane.svg index b3b749c..5c81e9b 100644 --- a/web/images/plane.svg +++ b/web/images/plane.svg @@ -9,18 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="50" - height="50" - viewBox="0 0 50.000001 50.000001" - id="svg2" + width="40" + height="40" + viewBox="0 0 40 40" + id="svg4145" version="1.1" inkscape:version="0.91 r13725" - sodipodi:docname="plane.svg" - inkscape:export-filename="/home/local/RG/kas/repos/traccar/traccar-web/web/images/default.svg.png" - inkscape:export-xdpi="90" - inkscape:export-ydpi="90"> + sodipodi:docname="plane.svg"> + id="defs4147" /> + id="metadata4150"> @@ -49,46 +46,23 @@ - - - - - - - - - + id="layer1"> + style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z" + id="path4724" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ssscccs" /> - + inkscape:connector-curvature="0" + id="path4140" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 24.710579,15.289739 q 0.30692,0.362723 0.08371,1.032366 -0.223214,0.669642 -0.753348,1.199776 l -1.123047,1.123047 1.116072,4.854911 q 0.03488,0.132533 -0.08371,0.23019 l -0.892857,0.669643 q -0.04883,0.04185 -0.132533,0.04185 -0.0279,0 -0.04883,-0.007 -0.104632,-0.02093 -0.146485,-0.111607 l -1.946149,-3.543527 -1.806641,1.80664 0.369699,1.353237 q 0.03488,0.118583 -0.0558,0.216239 l -0.669643,0.669643 q -0.06278,0.06278 -0.160435,0.06278 l -0.01395,0 Q 18.342,24.873977 18.279221,24.797247 L 16.960858,23.03946 15.203046,21.7211 q -0.07673,-0.04883 -0.09068,-0.160435 -0.007,-0.09068 0.06278,-0.174386 l 0.669643,-0.676619 q 0.06278,-0.06278 0.160435,-0.06278 0.04185,0 0.0558,0.007 l 1.353237,0.369698 1.806641,-1.80664 -3.543527,-1.94615 q -0.09766,-0.0558 -0.118583,-0.16741 -0.01395,-0.111608 0.06278,-0.188337 L 16.51443,16.02216 q 0.09766,-0.09068 0.209263,-0.0558 l 4.638672,1.109096 1.116071,-1.116072 q 0.530134,-0.530134 1.199777,-0.753348 0.669643,-0.223214 1.032366,0.08371 z" /> diff --git a/web/images/route.svg b/web/images/route.svg deleted file mode 100644 index a85201d..0000000 --- a/web/images/route.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/web/images/ship.svg b/web/images/ship.svg index 5e24299..c82dc6c 100644 --- a/web/images/ship.svg +++ b/web/images/ship.svg @@ -9,18 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="50" - height="50" - viewBox="0 0 50.000001 50.000001" - id="svg2" + width="40" + height="40" + viewBox="0 0 40 40" + id="svg4145" version="1.1" inkscape:version="0.91 r13725" - sodipodi:docname="ship.svg" - inkscape:export-filename="/home/local/RG/kas/repos/traccar/traccar-web/web/images/default.svg.png" - inkscape:export-xdpi="90" - inkscape:export-ydpi="90"> + sodipodi:docname="ship.svg"> + id="defs4147" /> + id="metadata4150"> image/svg+xml - - + - - - - - - - - + id="layer1"> - + style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z" + id="path4724" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ssscccs" /> + id="path4511" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 25.489676,24.596818 q 0.132533,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.892857,0.892858 -0.62779,0.62779 -0.578962,-0.578962 -0.578962,0.578962 q -0.125558,0.132533 -0.313895,0.132533 -0.188337,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132533 -0.313895,0.132533 -0.181362,0 -0.313895,-0.132533 l -0.578963,-0.578962 -0.578962,0.578962 q -0.132533,0.132533 -0.313895,0.132533 -0.181361,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132533,0.132533 -0.313895,0.132533 -0.181362,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132533 -0.313895,0.132533 -0.181362,0 -0.313895,-0.132533 L 16.875,25.538504 16.296038,26.117466 q -0.132534,0.132533 -0.313896,0.132533 -0.181361,0 -0.313895,-0.132533 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132533,0.132533 -0.313895,0.132533 -0.181361,0 -0.313895,-0.132533 l -0.892857,-0.892857 0.62779,-0.627791 0.578962,0.578962 0.578962,-0.578962 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.578962,0.578962 0.578963,-0.578962 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313896,0.132533 L 23.125,25.17578 23.703962,24.596818 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.578962 0.578962,-0.578962 z M 14.510323,24.331751 q -0.132533,0.132534 -0.313895,0.132534 -0.181361,0 -0.313895,-0.132534 l -0.892857,-0.892857 0.62779,-0.62779 0.578962,0.571987 0.578962,-0.571987 q 0.132534,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.578962,0.571987 0.446429,-0.446429 0,-2.043806 -1.464844,-2.19029 q -0.118582,-0.181361 -0.04883,-0.390625 0.06976,-0.216239 0.279018,-0.285993 l 1.234654,-0.404576 0,-2.085659 0.892857,0 0,-0.892857 1.785714,0 0,-0.892857 1.785715,0 0,0.892857 1.785714,0 0,0.892857 0.892857,0 0,2.085659 1.234654,0.404576 q 0.209264,0.06975 0.279018,0.285993 0.06976,0.209264 -0.04883,0.390625 l -1.464844,2.19029 0,2.043806 0.132534,-0.125558 q 0.132533,-0.132533 0.313895,-0.132533 0.181361,0 0.313895,0.132533 l 0.578962,0.571987 0.578962,-0.571987 q 0.132533,-0.132533 0.313895,-0.132533 0.181362,0 0.313895,0.132533 l 0.892857,0.892857 -0.62779,0.62779 -0.578962,-0.578962 -0.578962,0.578962 q -0.125558,0.132534 -0.313895,0.132534 -0.188337,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132534 -0.313895,0.132534 -0.181362,0 -0.313895,-0.132534 l -0.578963,-0.578962 -0.578962,0.578962 q -0.132533,0.132534 -0.313895,0.132534 -0.181361,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132533,0.132534 -0.313895,0.132534 -0.181362,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 q -0.132534,0.132534 -0.313895,0.132534 -0.181362,0 -0.313895,-0.132534 L 16.875,23.752789 16.296038,24.331751 q -0.132534,0.132534 -0.313896,0.132534 -0.181361,0 -0.313895,-0.132534 l -0.578962,-0.578962 -0.578962,0.578962 z m 2.811105,-7.90318 0,0.892857 L 20,16.428571 l 2.678571,0.892857 0,-0.892857 -0.892857,0 0,-0.892858 -3.571429,0 0,0.892858 -0.892857,0 z" /> diff --git a/web/images/truck.svg b/web/images/truck.svg index e0026c3..0f82a3e 100644 --- a/web/images/truck.svg +++ b/web/images/truck.svg @@ -9,15 +9,15 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="50" - height="50" - viewBox="0 0 50.000001 50.000001" - id="svg2" + width="40" + height="40" + viewBox="0 0 40 40" + id="svg4145" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="truck.svg"> + id="defs4147" /> + id="metadata4150"> @@ -46,57 +46,23 @@ - - - - - - - - - + id="layer1"> + style="fill:#008000;fill-opacity:1;stroke:#000000;stroke-width:0.94994837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" + d="m 33.525025,20 c 0,7.469665 -6.05536,13.525025 -13.525025,13.525025 -7.469665,0 -13.5250252,-6.05536 -13.5250254,-13.525025 -2e-7,-5.309252 3.0591749,-9.903995 7.5109944,-12.117699 L 20,1.4749746 26.049865,7.9001866 C 30.482258,10.120688 33.525025,14.705006 33.525025,20 Z" + id="path4724" + inkscape:connector-curvature="0" + sodipodi:nodetypes="ssscccs" /> - - - - + inkscape:connector-curvature="0" + id="path4443" + style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:125%;font-family:FontAwesome;-inkscape-font-specification:'FontAwesome, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + d="m 17.726005,23.75279 q 0.265067,-0.265067 0.265067,-0.627791 0,-0.362723 -0.265067,-0.62779 -0.265067,-0.265067 -0.627791,-0.265067 -0.362723,0 -0.62779,0.265067 -0.265067,0.265067 -0.265067,0.62779 0,0.362724 0.265067,0.627791 0.265067,0.265067 0.62779,0.265067 0.362724,0 0.627791,-0.265067 z m -2.413505,-4.199219 2.678572,0 0,-1.785714 -1.102121,0 q -0.09068,0 -0.15346,0.06278 l -1.360212,1.360212 q -0.06278,0.06278 -0.06278,0.153459 l 0,0.209264 z m 8.663505,4.199219 q 0.265067,-0.265067 0.265067,-0.627791 0,-0.362723 -0.265067,-0.62779 -0.265067,-0.265067 -0.627791,-0.265067 -0.362723,0 -0.62779,0.265067 -0.265067,0.265067 -0.265067,0.62779 0,0.362724 0.265067,0.627791 0.265067,0.265067 0.62779,0.265067 0.362724,0 0.627791,-0.265067 z m 2.050781,-8.217076 0,7.142857 q 0,0.104632 -0.0279,0.188337 -0.0279,0.07673 -0.09766,0.125558 -0.06278,0.04883 -0.111607,0.0837 -0.04883,0.0279 -0.167411,0.04185 -0.111607,0.007 -0.15346,0.01395 -0.04185,0 -0.181361,0 -0.132534,-0.007 -0.15346,-0.007 0,0.739398 -0.523159,1.262556 -0.523158,0.523159 -1.262556,0.523159 -0.739397,0 -1.262555,-0.523159 Q 21.5625,23.864397 21.5625,23.124999 l -2.678571,0 q 0,0.739398 -0.523159,1.262556 -0.523158,0.523159 -1.262556,0.523159 -0.739397,0 -1.262555,-0.523159 Q 15.3125,23.864397 15.3125,23.124999 l -0.446428,0 q -0.02093,0 -0.160436,0.007 -0.132533,0 -0.174386,0 -0.04185,-0.007 -0.160435,-0.01395 -0.111607,-0.01395 -0.160435,-0.04185 -0.04883,-0.03488 -0.118583,-0.0837 -0.06278,-0.04883 -0.09068,-0.125558 -0.0279,-0.0837 -0.0279,-0.188337 0,-0.181362 0.132534,-0.313895 0.132533,-0.132534 0.313895,-0.132534 l 0,-2.232143 q 0,-0.0558 -0.007,-0.24414 0,-0.188337 0,-0.265067 0.007,-0.07673 0.02093,-0.237165 0.01395,-0.167411 0.04185,-0.258092 0.03488,-0.09766 0.09766,-0.216239 0.06975,-0.118582 0.160435,-0.209263 l 1.381138,-1.381138 q 0.132534,-0.132534 0.348773,-0.223215 0.223214,-0.09068 0.411551,-0.09068 l 1.116072,0 0,-1.339285 q 0,-0.181362 0.132533,-0.313895 0.132534,-0.132534 0.313895,-0.132534 l 7.142857,0 q 0.181362,0 0.313895,0.132534 0.132534,0.132533 0.132534,0.313895 z" /> diff --git a/web/l10n/en.json b/web/l10n/en.json index 9dc20ad..ee6bef8 100644 --- a/web/l10n/en.json +++ b/web/l10n/en.json @@ -187,6 +187,7 @@ "statisticsRequests": "Requests", "statisticsMessagesReceived": "Messages Received", "statisticsMessagesStored": "Messages Stored", + "categoryArrow": "Arrow", "categoryDefault": "Default", "categoryCar": "Car", "categoryBus": "Bus", diff --git a/web/load.js b/web/load.js index 6257fe0..0d13b2c 100644 --- a/web/load.js +++ b/web/load.js @@ -1,33 +1,34 @@ (function () { + var debugMode, touchMode, locale, localeParameter, extjsVersion, fontAwesomeVersion, olVersion; function addStyleFile(file) { var link = document.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); link.setAttribute('href', file); - document.head.appendChild(link) + document.head.appendChild(link); } function addScriptFile(file) { var script = document.createElement('script'); script.setAttribute('src', file); - script.async = false + script.async = false; document.head.appendChild(script); } - + function addSvgFile(file, id) { var svg = document.createElement('object'); svg.setAttribute('id', id); svg.setAttribute('data', file); svg.setAttribute('type', 'image/svg+xml'); - svg.setAttribute('style','visibility:hidden') + svg.setAttribute('style', 'visibility:hidden'); document.body.appendChild(svg); } - var debugMode = document.getElementById('loadScript').getAttribute('mode') === 'debug'; - var touchMode = 'ontouchstart' in window || navigator.maxTouchPoints; + debugMode = document.getElementById('loadScript').getAttribute('mode') === 'debug'; + touchMode = 'ontouchstart' in window || navigator.maxTouchPoints; - var locale = {}; + locale = {}; window.Locale = locale; locale.languages = { @@ -74,7 +75,7 @@ 'zh': { name: '中文', code: 'zh_CN' } }; - var localeParameter = window.location.search.match(/locale=([^&#]+)/); + localeParameter = window.location.search.match(/locale=([^&#]+)/); locale.language = localeParameter && localeParameter[1]; if (locale.language === undefined) { locale.language = window.navigator.userLanguage || window.navigator.language; @@ -85,7 +86,7 @@ locale.language = 'en'; // default } - window.addEventListener("load", function (event) { + window.addEventListener('load', function (event) { if (debugMode) { Ext.Loader.setConfig({ @@ -108,9 +109,9 @@ }); - var extjsVersion = '6.0.1'; - var fontAwesomeVersion = '4.6.3'; - var olVersion = '3.18.2'; + extjsVersion = '6.0.1'; + fontAwesomeVersion = '4.6.3'; + olVersion = '3.18.2'; if (debugMode) { addScriptFile('//cdnjs.cloudflare.com/ajax/libs/extjs/' + extjsVersion + '/ext-all-debug.js'); @@ -128,10 +129,9 @@ addScriptFile('//cdnjs.cloudflare.com/ajax/libs/ol3/' + olVersion + '/ol-debug.js'); addStyleFile('app.css'); - //addScriptFile('arrow.js'); - + addSvgFile('images/default.svg', 'defaultSvg'); - addSvgFile('images/route.svg', 'routeSvg'); + addSvgFile('images/arrow.svg', 'arrowSvg'); addSvgFile('images/car.svg', 'carSvg'); addSvgFile('images/bus.svg', 'busSvg'); addSvgFile('images/truck.svg', 'truckSvg'); -- cgit v1.2.3 From fb76f0118e148f77c83fb55e75c805127bb597a2 Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Thu, 10 Nov 2016 13:20:51 +0500 Subject: - Update device icon on map after device update - Fix devices buttons enabling --- web/app/view/DevicesController.js | 1 + web/app/view/MapController.js | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'web/app') diff --git a/web/app/view/DevicesController.js b/web/app/view/DevicesController.js index aa8e788..a31ceb7 100644 --- a/web/app/view/DevicesController.js +++ b/web/app/view/DevicesController.js @@ -147,6 +147,7 @@ Ext.define('Traccar.view.DevicesController', { selectDevice: function (device, center) { this.getView().getSelectionModel().select([device], false, true); + this.updateButtons(this.getView().getSelectionModel()); this.getView().getView().focusRow(device); }, diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js index 103d62e..c981fab 100644 --- a/web/app/view/MapController.js +++ b/web/app/view/MapController.js @@ -86,12 +86,12 @@ Ext.define('Traccar.view.MapController', { } }, - changeMarkerColor: function (style, color) { + changeMarkerColor: function (style, color, category) { var newStyle = new ol.style.Style({ image: Traccar.DeviceImages.getImageIcon(color, style.getImage().zoom, style.getImage().angle, - style.getImage().category), + category), text: style.getText() }); return newStyle; @@ -111,7 +111,7 @@ Ext.define('Traccar.view.MapController', { if (deviceId in this.latestMarkers) { marker = this.latestMarkers[deviceId]; marker.setStyle( - this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device))); + this.changeMarkerColor(marker.getStyle(), this.getDeviceColor(device), device.get('category'))); } } }, -- cgit v1.2.3 From 9b36b690301faa7b84bade074aae3e863be5495d Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Thu, 10 Nov 2016 14:25:30 +0500 Subject: - Simplify check - Fix scale --- web/app/DeviceImages.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'web/app') diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index f96a3b0..fac16a5 100644 --- a/web/app/DeviceImages.js +++ b/web/app/DeviceImages.js @@ -25,7 +25,7 @@ Ext.define('Traccar.DeviceImages', { if (category) { device = Ext.getStore('DeviceImages').findRecord('key', category, 0, false, false, true); } - if (device === undefined || device === null) { + if (!device) { device = Ext.getStore('DeviceImages').findRecord('key', 'default', 0, false, false, true); } svg = Ext.clone(device.get('svg')); @@ -44,13 +44,13 @@ Ext.define('Traccar.DeviceImages', { rotateTransform = 'rotate(' + angle + ' ' + (width / 2) + ' ' + (height / 2) + ')'; svg.getElementById(device.get('rotateId')).setAttribute('transform', rotateTransform); - width *= Traccar.Style.mapScaleNormal; - height *= Traccar.Style.mapScaleNormal; if (zoom) { width *= Traccar.Style.mapScaleSelected; height *= Traccar.Style.mapScaleSelected; scaleTransform = 'scale(' + Traccar.Style.mapScaleSelected + ') '; } else { + width *= Traccar.Style.mapScaleNormal; + height *= Traccar.Style.mapScaleNormal; scaleTransform = 'scale(' + Traccar.Style.mapScaleNormal + ') '; } -- cgit v1.2.3