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') diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index 52eea1d0..c79406b0 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 22a7872f..e7ad4cbc 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 829a8ea5..2f72e81c 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 538b0581..a85201d8 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 4e3d1f7a..2847eab4 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 e12ed9a0..0f56cc59 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 1f65e0dc..f9a34d49 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