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 diff --git a/web/app/DeviceImages.js b/web/app/DeviceImages.js index c79406b0..d781b529 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 e7ad4cbc..ba91575a 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 2f72e81c..a0e28671 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 a85201d8..00000000 --- a/web/images/arrow.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/web/images/bus.svg b/web/images/bus.svg index 2847eab4..935d7b92 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 0f56cc59..893078fa 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 00000000..b199135e --- /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 00000000..a85201d8 --- /dev/null +++ b/web/images/route.svg @@ -0,0 +1 @@ + diff --git a/web/images/truck.svg b/web/images/truck.svg index f9a34d49..e0026c3b 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 7f0caf9d..7f5c62c0 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