Create SVG Icons

This commit is contained in:
BlubbFish 2019-03-13 00:18:21 +01:00
parent aa4f2de809
commit 8e66686c7c
5 changed files with 142 additions and 99 deletions

View File

@ -45,6 +45,7 @@
<Reference Include="System.Xml" />
</ItemGroup>
<ItemGroup>
<Compile Include="Model\Marker.cs" />
<Compile Include="Server.cs" />
<Compile Include="Model\Botclient.cs" />
<Compile Include="Program.cs" />
@ -66,6 +67,9 @@
<None Include="names.json">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</None>
<None Include="resources\icons\marker\din1451m.woff">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</None>
<None Include="resources\js\leaflet\leaflet-src.esm.js.map" />
<None Include="resources\js\leaflet\leaflet-src.js.map" />
<None Include="resources\js\leaflet\leaflet.js.map" />
@ -95,7 +99,12 @@
<Content Include="resources\icons\marker\map-marker.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="resources\icons\marker\Person.svg" />
<Content Include="resources\icons\marker\Marker.svg">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>
<Content Include="resources\icons\marker\Person.svg">
<SubType>Designer</SubType>
</Content>
<Content Include="resources\icons\marker\thw\einheiten\26-91.png">
<CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
</Content>

37
Lora-Map/Model/Marker.cs Normal file
View File

@ -0,0 +1,37 @@
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Xml;
namespace Fraunhofer.Fit.IoT.LoraMap.Model {
class Marker {
private readonly XmlDocument svg = new XmlDocument();
public Marker(String hash) {
this.svg.LoadXml(File.ReadAllText("resources/icons/marker/Marker.svg"));
this.ParseParams(hash);
}
private void ParseParams(String hash) {
String[] parts = hash.Split('&');
foreach(String part in parts) {
String[] keyvalue = part.Split('=');
if(keyvalue.Length == 2) {
switch(keyvalue[0].ToLower()) {
case "name":
XmlNodeList node = this.svg.DocumentElement.SelectNodes("//*[local-name()='tspan'][@id='marker-name-text']");
if(node.Count == 1) {
node.Item(0).InnerText = keyvalue[1];
}
break;
}
}
}
}
public override String ToString() => this.svg.OuterXml;
}
}

View File

@ -15,6 +15,7 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
{
private readonly SortedDictionary<String, Botclient> locations = new SortedDictionary<String, Botclient>();
private readonly JsonData marker;
private readonly Dictionary<String, Marker> markertable = new Dictionary<String, Marker>();
public Server(ADataBackend backend, Dictionary<String, String> settings, InIReader requests) : base(backend, settings, requests) => this.marker = JsonMapper.ToObject(File.ReadAllText("names.json"));
@ -63,6 +64,18 @@ namespace Fraunhofer.Fit.IoT.LoraMap {
return;
}
}
if(cont.Request.Url.PathAndQuery.StartsWith("/icons/marker/Marker.svg") && cont.Request.Url.PathAndQuery.Contains("?")) {
String hash = cont.Request.Url.PathAndQuery.Substring(cont.Request.Url.PathAndQuery.IndexOf('?')+1);
if(!this.markertable.ContainsKey(hash)) {
this.markertable.Add(hash, new Marker(hash));
}
cont.Response.ContentType = "image/svg+xml";
Byte[] buf = Encoding.UTF8.GetBytes(this.markertable[hash].ToString());
cont.Response.ContentLength64 = buf.Length;
cont.Response.OutputStream.Write(buf, 0, buf.Length);
Console.WriteLine("200 - " + cont.Request.Url.PathAndQuery);
return;
}
base.SendResponse(cont);
}
}

View File

@ -1,28 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="86mm" height="121.25mm" viewBox="0 0 86 121.25" xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape">
<defs>
<svg width="86mm" height="121.25mm" viewBox="0 0 86 121.25" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs id="global-def">
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'DIN145_14H_08.87';
src: url('DIN1451_4H_08.87.woff') format('woff');
font-family: DIN1451;
src: url('din1451m.woff');
}
#marker-icon > g {
display: none;
}
#marker-name tspan {
font-size: 20px;
font-family:'DIN145_14H_08.87';
font-family: DIN1451;
}
]]>
</style>
<style type="text/css">
<![CDATA[
#marker-icon #person {
display: inline;
}
]]>
</style>
</defs>
<g inkscape:groupmode="layer" id="marker-bg" inkscape:label="Marker">
@ -31,13 +27,12 @@
<circle style="fill:#000000;" cx="2" cy="119.25" r="2" />
</g>
<g inkscape:groupmode="layer" id="marker-name" inkscape:label="Name">
<text><tspan x="5" y="20">27/92</tspan></text>
<text><tspan x="5" y="20" id="marker-name-text">27/92</tspan></text>
</g>
<g inkscape:groupmode="layer" id="marker-icon" inkscape:label="Icon">
<g id="person" transform="translate(42.5 45) scale(0.8)">
<defs>
<defs id="people-def">
<style type="text/css">
<![CDATA[
#person-layer-org g {
display: none;
}
@ -52,13 +47,8 @@
}
#person-layer-org rect {
width: 50px;
height: 50px;
y: 0px;
x: 0px;
stroke: black;
stroke-width: 3px;
transform: rotate(45);
}
#person-layer-funct path {
@ -68,23 +58,18 @@
}
#person-layer-rang circle {
r: 3px;
fill: #000000;
}
#person-layer-typ tspan {
x: 0px;
y: 42px;
font-size:20px;
font-family:'DIN 1451 Mittelschrift';
font-family: DIN1451;
text-align:center;
text-anchor:middle;
fill:#ffffff;
}
]]>
</style>
<style type="text/css">
<![CDATA[
#person-layer-org #person-layer-org-thw {
display: inline;
}
@ -97,27 +82,26 @@
#person-layer-typ #person-layer-typ-b1 {
display: inline;
}
]]>
</style>
</defs>
<g inkscape:groupmode="layer" id="person-layer-org" inkscape:label="Organisation">
<g inkscape:groupmode="layer" id="person-layer-org-thw" inkscape:label="THW">
<rect style="fill: #0d468b;" />
<rect style="fill: #0d468b;" height="50" width="50" transform="rotate(45)"/>
</g>
<g inkscape:groupmode="layer" id="person-layer-org-fw" inkscape:label="Feuerwehr">
<rect style="fill: #b41302;" />
<rect style="fill: #b41302;" height="50" width="50" transform="rotate(45)"/>
</g>
<g inkscape:groupmode="layer" id="person-layer-org-hilo" inkscape:label="Hilo">
<rect style="fill: #ffffff;" />
<rect style="fill: #ffffff;" height="50" width="50" transform="rotate(45)"/>
</g>
<g inkscape:groupmode="layer" id="person-layer-org-pol" inkscape:label="Polizei">
<rect style="fill: #2a8626;" />
<rect style="fill: #2a8626;" height="50" width="50" transform="rotate(45)"/>
</g>
<g inkscape:groupmode="layer" id="person-layer-org-fueh" inkscape:label="Führung">
<rect style="fill: #ffdf00;" />
<rect style="fill: #ffdf00;" height="50" width="50" transform="rotate(45)"/>
</g>
<g inkscape:groupmode="layer" id="person-layer-org-sonst" inkscape:label="Sonstig">
<rect style="fill: #ffa13e;" />
<rect style="fill: #ffa13e;" height="50" width="50" transform="rotate(45)"/>
</g>
</g>
<g inkscape:groupmode="layer" id="person-layer-funct" inkscape:label="Funktion">
@ -130,40 +114,40 @@
</g>
<g inkscape:groupmode="layer" id="person-layer-rang" inkscape:label="Rang">
<g inkscape:groupmode="layer" id="person-layer-rang-trupp" inkscape:label="Truppführer">
<circle cx="0" cy="-8" />
<circle cx="0" cy="-8" r="3" />
</g>
<g inkscape:groupmode="layer" id="person-layer-rang-grupp" inkscape:label="Gruppenführer">
<g style="display: inline;">
<circle cx="-4.5" cy="-8" />
<circle cx="4.5" cy="-8" />
<circle cx="-4.5" cy="-8" r="3" />
<circle cx="4.5" cy="-8" r="3" />
</g>
</g>
<g inkscape:groupmode="layer" id="person-layer-rang-zug" inkscape:label="Zugführer">
<g style="display: inline;">
<circle cx="-9" cy="-8" />
<circle cx="0" cy="-8" />
<circle cx="9" cy="-8" />
<circle cx="-9" cy="-8" r="3" />
<circle cx="0" cy="-8" r="3" />
<circle cx="9" cy="-8" r="3" />
</g>
</g>
</g>
<g inkscape:groupmode="layer" id="person-layer-typ" inkscape:label="Typ">
<g inkscape:groupmode="layer" id="person-layer-typ-b1" inkscape:label="B1">
<text><tspan>B1</tspan></text>
<text><tspan y="42" x="0">B1</tspan></text>
</g>
<g inkscape:groupmode="layer" id="person-layer-typ-b2" inkscape:label="B2">
<text><tspan>B2</tspan></text>
<text><tspan y="42" x="0">B2</tspan></text>
</g>
<g inkscape:groupmode="layer" id="person-layer-typ-b" inkscape:label="B">
<text><tspan>B</tspan></text>
<text><tspan y="42" x="0">B</tspan></text>
</g>
<g inkscape:groupmode="layer" id="person-layer-typ-tz-1" inkscape:label="TZ-1">
<text><tspan>TZ-1</tspan></text>
<text><tspan y="42" x="0">TZ-1</tspan></text>
</g>
<g inkscape:groupmode="layer" id="person-layer-typ-tz-2" inkscape:label="TZ-2">
<text><tspan>TZ-2</tspan></text>
<text><tspan y="42" x="0">TZ-2</tspan></text>
</g>
<g inkscape:groupmode="layer" id="person-layer-typ-tz" inkscape:label="TZ">
<text><tspan>TZ</tspan></text>
<text><tspan y="42" x="0">TZ</tspan></text>
</g>
</g>
</g>

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.