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 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">