Overhaul / implement new icons

[dreng]

NetBox version

v.3.4.2

Topology Views version

v3.2.0

Feature type

Change to existing functionality

Proposed functionality

In order to not discuss every single icon in a seperate issue that could possibly be added I created this thread as a single discussion point. Please do not open new issues but contribute here instead.

The goal is to not have suggestions for new icons every few months but to create a concept of what kind of icons we need as a whole and what the design should look like. Since tastes are very individual, we should agree on a complete set of simple icons. Afterwards, everyone has the possibility to replace the existing icons with their own if they do not like the standard icons.

Currently we've got:

• access-switch
• core-switch
• distribution-switch
• internal-switch
• router
• firewall
• wan-network
• wireless-ap
• backup
• circuit
• provider-networks
• isp-cpe-material
• non-racked-devices
• power-feed
• power-panel
• power-units
• server
• storage

Proposed icons:

• patch panel Include icon for patch panels #186
• patch panel for fiber channel
• backhaul Adding icon for backhauls #143
• diverse replacements Replace icons #187
• Modem
• Proxy
• Load balancer
• Power-ups
• Power-pdu
• Power-atc
• Net KVM (single machine)
• KVM switch
• Console server
• Cable doubler
• Empty circle where no icon is mapped to device role

Properties that new icons should have:

• Consistent and modern design (!)
• Sufficient license
• Easy to distinguish
• As little complexity as possible
• Included in draw.io for XML export purposes

We should also consider to use shapes from draw.io if that is sufficient as they are licensed under Creative Commons and that would make this implementation a lot easier #189

Please feel free to contribute to this thread with your opinions. If you feel creative, you might contribute with suggestions for a new design concept.

Use case

A professional and consistent design of all needed icons enhances the product.

External dependencies

No response

[silopolis]

On first thought, I'd add the following to the list:

• Modem
• Proxy
• Load balancer
• Power-ups
• Power-pdu
• Power-atc
• Net KVM (single machine)
• KVM switch
• Console server
• Cable doubler

[etfz]

Here's a set I found a while back and was planning to use myself:
https://github.com/ecceman/affinity
One could perhaps contribute with additional symbols, should one so desire.

[candlerb]

Can I request in the new icon set: for devices where no role icon is mapped, use a plain box or circle, instead of the Roswell alien.

It's the difference between a diagram being usable as-is, versus a case of "oh hell, I need to mess with plugin configuration and install new icons before I can show this to my manager"

[dreng]

@etfz I think that could be good starting point, just because of it's simplicity and unlicense license.

@candlerb You can request anything you like :-) Besides, that's a good point that I've been thinking of myself before. An empty icon or maybe a question mark would look much more professional.

[candlerb]

Empty please. A question mark still looks like "this person doesn't know what they've built" :-)

[ThomasADavis]

When it comes to patch panels, there should be two types - an rj45, and a fiber style. I know if I show a RJ45 patch panel icon for the fiber style, the network people would revolt here..

[candlerb]

That would work if you have separate device roles in Netbox for "fibre patching" and "copper patching".

Doesn't help if you have modular patch panels with mixed MPO and CAT6 modules though :-)

Ultimately, I think the icons needed here are generic (role based). They're not trying to be physical representations of the device, like the Device Type front/rear images. As long as you can upload new icons and assign them to roles, then that's fine - there just needs to be an acceptable base set.

[mattieserver]

The current icons are indeed gathered from multiple sources and adding a bit more consistency might be good;

I found the 'cisco 19' images on an archive: https://web.archive.org/web/20210423035209/https://www.cisco.com/c/en/us/solutions/enterprise/design-zone-smart-business-architecture/cvd.html
These seem to look the most modern and complete but kinda lack the extra color from the current icons.

https://github.com/ecceman/affinity also looks good but maybe a bit basic.

[candlerb]

I found the 'cisco 19' images on an archive

They are also built in to draw.io:

[dreng]

I found the 'cisco 19' images on an archive

They are also built in to draw.io

That is very interesting, because it could be advantageous for #189.

[mattieserver]

So I will probably create a new repo to create my own icons. It seems like Cisco removed the cisco19 icons from their site (only available with an archive).
Other icons 'packs' often lack all the icons we need and using multiple sources ends up with the mismatched icons we have now.

[dreng]

@mattieserver Maybe we can use a pack like Ciscos icon pack and expand it with needed icons. Of course we need to imitate the style of the chosen icon pack.

What I really like about Cisco's Icon Pack (and similar ones) is that it is integrated into draw.io. This makes exporting to draw.io much easier. I think we should not lose sight of this aspect because it is a very strong feature.

[dabiri1377]

Can be a box so we can upload a costume image?

[dreng]

I just updated the original post with your proposals.

What I have learned here is that we will not find a solution that everyone is 100% satisfied with. There are so many and also very specific suggestions that an icon set will always be a bottomless pit.

I now consider it essential that we should use an icon set that is also used by draw.io, as this is the only way to generate an export that looks exactly like what we see in NetBox.

The topic will then be more about determining an icon set from draw.io that looks modern, is versatile and has a suitable license.

That said, we can still develop our own icon set an fulfil any individual wish. However, the effort would be high and we must always be aware that this icon set is worthless for draw.io in an XML export and will never be finished. In my opinion, this is not an ideal solution.

[candlerb]

Of course, if someone wants to create a new icon pack and contribute it to draw.io, that could work too.

It's a shame that the Cisco icons are so ugly.

[dreng]

Okay, I take back (almost) everything: I just played around a bit with draw.io and found out that you can insert your own pictures after all. In this respect, the task should be to design our own set.

By the way, you can still download the icons from the Cisco19 set via a indirect route (provided as a PowerPoint). However, this file indicates that no licence suitable for us is used here.

Here's what I did: Created 3 SVGs and imported them via drag and drop into the scratchpad of draw.io. After that I exported as XML. This is what it looks like:

And this is the XML output:

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2023-03-25T11:47:00.805Z" agent="Mozilla/5.0 (X11; Linux x86_64; rv:102.0) Gecko/20100101 Firefox/102.0" etag="nrkMCTX1myaBbBRNI5am" version="21.1.1" type="device">
  <diagram name="Seite-1" id="oyCyIaOQGy5hMYCPe4An">
    <mxGraphModel dx="478" dy="292" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="200" pageHeight="150" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="5PyBhpG3S0t8aKxmwEZQ-7" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;" edge="1" parent="1" source="5PyBhpG3S0t8aKxmwEZQ-13" target="5PyBhpG3S0t8aKxmwEZQ-16">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="251" y="195" as="sourcePoint" />
            <mxPoint x="210.09090909090912" y="285" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="5PyBhpG3S0t8aKxmwEZQ-10" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;strokeColor=#2ec27e;" edge="1" parent="1" source="5PyBhpG3S0t8aKxmwEZQ-16" target="5PyBhpG3S0t8aKxmwEZQ-11">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="341" y="195" as="sourcePoint" />
            <mxPoint x="271" y="175" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="5PyBhpG3S0t8aKxmwEZQ-11" value="SW01" style="shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;aspect=fixed;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJzdmc1IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzNS40NjU2MzMgMzUuNDY1NjMzIiBoZWlnaHQ9IjM1LjQ2NTYzM21tIiB3aWR0aD0iMzUuNDY1NjMzbW0iPiYjeGE7ICAmI3hhOyAgPGRlZnMgaWQ9ImRlZnMyIi8+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02LjM2MDI0MiwtOTAuNTA3ODA3KSIgc3R5bGU9ImRpc3BsYXk6bm9uZSIgaWQ9ImxheWVyMyI+JiN4YTsgICAgPGcgc3R5bGU9ImRpc3BsYXk6aW5saW5lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODIuMjE3ODYxLDQ4LjQ4NzY2NCkiIGlkPSJnMzkxOCI+JiN4YTsgICAgICA8Y2lyY2xlIHI9IjE3LjA3MTMxOCIgY3k9IjU5Ljc1Mjk2IiBjeD0iMTA2LjMxMDkyIiBpZD0icGF0aDg0Ni0yLTAiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM5Y2M4Zjg7c3Ryb2tlLXdpZHRoOjEuMzIyOTI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3Qgcnk9IjAuMjk5OTA1MjEiIHk9IjUwLjU4MTIyMyIgeD0iOTYuOTczNTAzIiBoZWlnaHQ9IjYuOTE3NzYyMyIgd2lkdGg9IjYuOTE3NzYyMyIgaWQ9InJlY3QxNzk2LTAtNiIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6MS4zMjI5MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cmVjdCByeT0iMC4yOTk5MDUyMSIgeT0iNTAuNTgxMjIzIiB4PSIxMDguNzMwNTgiIGhlaWdodD0iNi45MTc3NjIzIiB3aWR0aD0iNi45MTc3NjIzIiBpZD0icmVjdDE3OTYtNy05LTIiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMxNjg1ZmM7c3Ryb2tlLXdpZHRoOjEuMzIyOTI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3Qgcnk9IjAuMjk5OTA1MjEiIHk9IjYyLjAwNjkzNSIgeD0iOTYuOTczNTAzIiBoZWlnaHQ9IjYuOTE3NzYyMyIgd2lkdGg9IjYuOTE3NzYyMyIgaWQ9InJlY3QxNzk2LTUtMy02IiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDoxLjMyMjkyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDxyZWN0IHJ5PSIwLjI5OTkwNTIxIiB5PSI2Mi4wMDY5MzUiIHg9IjEwOC43MzA1OCIgaGVpZ2h0PSI2LjkxNzc2MjMiIHdpZHRoPSI2LjkxNzc2MjMiIGlkPSJyZWN0MTc5Ni03LTMtNi0xIiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDoxLjMyMjkyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOyAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYuMzYwMjQyLC05MC41MDc4MDcpIiBzdHlsZT0iZGlzcGxheTpub25lIiBpZD0ibGF5ZXIyIj4mI3hhOyAgICA8ZyBzdHlsZT0iZGlzcGxheTppbmxpbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOS43NDE3ODMsLTYuMDYyMDAzMikiIGlkPSJnMzQ1OCI+JiN4YTsgICAgICA8Y2lyY2xlIHI9IjE3LjA3MTMxOCIgY3k9IjExNC4zMDI2MyIgY3g9IjUzLjgzNDg0MyIgaWQ9InBhdGg4NDYtNSIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzljYzhmODtzdHJva2Utd2lkdGg6MS4zMjM7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoMC4yNjQ1ODMzMywwLDAsMC4yNjQ1ODMzMywzLjA4MDk5OCwxLjU3ODM5NzcpIiBkPSJtIDE3OS4yMjk4Nyw0MTcuNjU3ODMgYyAtMi40OTE2MywxLjQzODU0IC0yNC45MTYyOSwtMTEuNTA4MzUgLTI0LjkxNjI5LC0xNC4zODU0MyAwLC0yLjg3NzA5IDIyLjQyNDY2LC0xNS44MjM5NyAyNC45MTYyOSwtMTQuMzg1NDMgMi40OTE2MywxLjQzODU1IDIuNDkxNjMsMjcuMzMyMzIgMCwyOC43NzA4NiB6IiBpZD0icGF0aDIxNjAiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMxNjg1ZmM7c3Ryb2tlLXdpZHRoOjU7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHBhdGggZD0ibSAxNzkuMjI5ODcsNDE3LjY1NzgzIGMgLTIuNDkxNjMsMS40Mzg1NCAtMjQuOTE2MjksLTExLjUwODM1IC0yNC45MTYyOSwtMTQuMzg1NDMgMCwtMi44NzcwOSAyMi40MjQ2NiwtMTUuODIzOTcgMjQuOTE2MjksLTE0LjM4NTQzIDIuNDkxNjMsMS40Mzg1NSAyLjQ5MTYzLDI3LjMzMjMyIDAsMjguNzcwODYgeiIgdHJhbnNmb3JtPSJtYXRyaXgoLTAuMjY0NTgzMzMsMCwwLDAuMjY0NTgzMzMsMTA0LjA5MTEyLDEzLjA1MDMzMikiIGlkPSJwYXRoMjE2MC02IiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDo1O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDxwYXRoIGlkPSJwYXRoMjQ2OCIgZD0ibSA1MC45NDIxMTEsMTA4LjQyNzI4IGMgMjUuMDM0NDA5LDAgLTE2LjUyNDQ0MSwxMS44OTQwOCAtMC4yMzQ1NjIsMTEuNjkzIGwgNS4yOTgyNywtMC4wNjU0IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDoxLjMyMztzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02LjM2MDI0MiwtOTAuNTA3ODA3KSIgc3R5bGU9ImRpc3BsYXk6aW5saW5lIiBpZD0ibGF5ZXI0Ij4mI3hhOyAgICA8ZyBzdHlsZT0iZGlzcGxheTppbmxpbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOS43NDE3ODMsLTYuMDYyMDAzMikiIGlkPSJnMzQ1OC04Ij4mI3hhOyAgICAgIDxnIGlkPSJnNDQ3MSI+JiN4YTsgICAgICAgIDxjaXJjbGUgcj0iMTcuMDcxMzE4IiBjeT0iMTE0LjMwMjYzIiBjeD0iNTMuODM0ODQzIiBpZD0icGF0aDg0Ni01LTciIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM5Y2M4Zjg7c3Ryb2tlLXdpZHRoOjEuMzIzO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggZD0ibSAxNzkuMjI5ODcsNDE3LjY1NzgzIGMgLTIuNDkxNjMsMS40Mzg1NCAtMjQuOTE2MjksLTExLjUwODM1IC0yNC45MTYyOSwtMTQuMzg1NDMgMCwtMi44NzcwOSAyMi40MjQ2NiwtMTUuODIzOTcgMjQuOTE2MjksLTE0LjM4NTQzIDIuNDkxNjMsMS40Mzg1NSAyLjQ5MTYzLDI3LjMzMjMyIDAsMjguNzcwODYgeiIgdHJhbnNmb3JtPSJtYXRyaXgoMC4yNjQ1ODMzMywwLDAsMC4yNjQ1ODMzMywtMC42MTIyODc2MSw3LjQwMjQ2MTcpIiBpZD0icGF0aDIxNjAtOSIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6NTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICAgIDxwYXRoIGQ9Im0gMTc5LjIyOTg3LDQxNy42NTc4MyBjIC0yLjQ5MTYzLDEuNDM4NTQgLTI0LjkxNjI5LC0xMS41MDgzNSAtMjQuOTE2MjksLTE0LjM4NTQzIDAsLTIuODc3MDkgMjIuNDI0NjYsLTE1LjgyMzk3IDI0LjkxNjI5LC0xNC4zODU0MyAyLjQ5MTYzLDEuNDM4NTUgMi40OTE2MywyNy4zMzIzMiAwLDI4Ljc3MDg2IHoiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjI2NDU4MzMzLDAsMCwwLjI2NDU4MzMzLDEwOC4xNTYwOCw3LjQwMjQ2MTcpIiBpZD0icGF0aDIxNjAtNi0yIiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDo1O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggZD0ibSAxNzkuMjI5ODcsNDE3LjY1NzgzIGMgLTIuNDkxNjMsMS40Mzg1NCAtMjQuOTE2MjksLTExLjUwODM1IC0yNC45MTYyOSwtMTQuMzg1NDMgMCwtMi44NzcwOSAyMi40MjQ2NiwtMTUuODIzOTcgMjQuOTE2MjksLTE0LjM4NTQzIDIuNDkxNjMsMS40Mzg1NSAyLjQ5MTYzLDI3LjMzMjMyIDAsMjguNzcwODYgeiIgdHJhbnNmb3JtPSJtYXRyaXgoMCwwLjI2NDU4MzMzLDAuMjY0NTgzMzMsMCwtNTIuOTU3MDQxLDU5Ljc4MzE2NCkiIGlkPSJwYXRoMjE2MC02LTItMiIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6NTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICAgIDxwYXRoIGQ9Im0gMTc5LjIyOTg3LDQxNy42NTc4MyBjIC0yLjQ5MTYzLDEuNDM4NTQgLTI0LjkxNjI5LC0xMS41MDgzNSAtMjQuOTE2MjksLTE0LjM4NTQzIDAsLTIuODc3MDkgMjIuNDI0NjYsLTE1LjgyMzk3IDI0LjkxNjI5LC0xNC4zODU0MyAyLjQ5MTYzLDEuNDM4NTUgMi40OTE2MywyNy4zMzIzMiAwLDI4Ljc3MDg2IHoiIHRyYW5zZm9ybT0ibWF0cml4KDAsLTAuMjY0NTgzMzMsLTAuMjY0NTgzMzMsMCwxNjAuNDQxMjcsMTY4LjQ3NDQzKSIgaWQ9InBhdGgyMTYwLTYtMi0zIiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDo1O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InBhdGg0MzYyIiBkPSJtIDQ3LjQxNjY3MiwxMTQuMzAwOTkgaCAxMi44ODMxMiIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6MS4zMjM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8cGF0aCBpZD0icGF0aDQzNjQiIGQ9Im0gNTMuODc3Mzg5LDEwNy44MzcxNCB2IDEyLjg1MjIzIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDoxLjMyMztzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8L2c+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=;perimeter=ellipsePerimeter;fontSize=10;strokeWidth=1;" vertex="1" parent="1">
          <mxGeometry x="134" y="20" width="35" height="35" as="geometry" />
        </mxCell>
        <mxCell id="5PyBhpG3S0t8aKxmwEZQ-16" value="PP01" style="shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;aspect=fixed;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJzdmc1IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzNS40NjU2MzMgMzUuNDY1NjMzIiBoZWlnaHQ9IjM1LjQ2NTYzM21tIiB3aWR0aD0iMzUuNDY1NjMzbW0iPiYjeGE7ICAmI3hhOyAgPGRlZnMgaWQ9ImRlZnMyIi8+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02LjM2MDI0MiwtOTAuNTA3ODA3KSIgc3R5bGU9ImRpc3BsYXk6aW5saW5lIiBpZD0ibGF5ZXIzIj4mI3hhOyAgICA8ZyBzdHlsZT0iZGlzcGxheTppbmxpbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04Mi4yMTc4NjEsNDguNDg3NjY0KSIgaWQ9ImczOTE4Ij4mI3hhOyAgICAgIDxjaXJjbGUgcj0iMTcuMDcxMzE4IiBjeT0iNTkuNzUyOTYiIGN4PSIxMDYuMzEwOTIiIGlkPSJwYXRoODQ2LTItMCIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzljYzhmODtzdHJva2Utd2lkdGg6MS4zMjI5MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cmVjdCByeT0iMC4yOTk5MDUyMSIgeT0iNTAuNTgxMjIzIiB4PSI5Ni45NzM1MDMiIGhlaWdodD0iNi45MTc3NjIzIiB3aWR0aD0iNi45MTc3NjIzIiBpZD0icmVjdDE3OTYtMC02IiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDoxLjMyMjkyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDxyZWN0IHJ5PSIwLjI5OTkwNTIxIiB5PSI1MC41ODEyMjMiIHg9IjEwOC43MzA1OCIgaGVpZ2h0PSI2LjkxNzc2MjMiIHdpZHRoPSI2LjkxNzc2MjMiIGlkPSJyZWN0MTc5Ni03LTktMiIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6MS4zMjI5MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cmVjdCByeT0iMC4yOTk5MDUyMSIgeT0iNjIuMDA2OTM1IiB4PSI5Ni45NzM1MDMiIGhlaWdodD0iNi45MTc3NjIzIiB3aWR0aD0iNi45MTc3NjIzIiBpZD0icmVjdDE3OTYtNS0zLTYiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMxNjg1ZmM7c3Ryb2tlLXdpZHRoOjEuMzIyOTI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3Qgcnk9IjAuMjk5OTA1MjEiIHk9IjYyLjAwNjkzNSIgeD0iMTA4LjczMDU4IiBoZWlnaHQ9IjYuOTE3NzYyMyIgd2lkdGg9IjYuOTE3NzYyMyIgaWQ9InJlY3QxNzk2LTctMy02LTEiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMxNjg1ZmM7c3Ryb2tlLXdpZHRoOjEuMzIyOTI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgIDwvZz4mI3hhOyAgPC9nPiYjeGE7ICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNi4zNjAyNDIsLTkwLjUwNzgwNykiIHN0eWxlPSJkaXNwbGF5Om5vbmUiIGlkPSJsYXllcjIiPiYjeGE7ICAgIDxnIHN0eWxlPSJkaXNwbGF5OmlubGluZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI5Ljc0MTc4MywtNi4wNjIwMDMyKSIgaWQ9ImczNDU4Ij4mI3hhOyAgICAgIDxjaXJjbGUgcj0iMTcuMDcxMzE4IiBjeT0iMTE0LjMwMjYzIiBjeD0iNTMuODM0ODQzIiBpZD0icGF0aDg0Ni01IiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojOWNjOGY4O3N0cm9rZS13aWR0aDoxLjMyMztzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCgwLjI2NDU4MzMzLDAsMCwwLjI2NDU4MzMzLDMuMDgwOTk4LDEuNTc4Mzk3NykiIGQ9Im0gMTc5LjIyOTg3LDQxNy42NTc4MyBjIC0yLjQ5MTYzLDEuNDM4NTQgLTI0LjkxNjI5LC0xMS41MDgzNSAtMjQuOTE2MjksLTE0LjM4NTQzIDAsLTIuODc3MDkgMjIuNDI0NjYsLTE1LjgyMzk3IDI0LjkxNjI5LC0xNC4zODU0MyAyLjQ5MTYzLDEuNDM4NTUgMi40OTE2MywyNy4zMzIzMiAwLDI4Ljc3MDg2IHoiIGlkPSJwYXRoMjE2MCIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6NTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cGF0aCBkPSJtIDE3OS4yMjk4Nyw0MTcuNjU3ODMgYyAtMi40OTE2MywxLjQzODU0IC0yNC45MTYyOSwtMTEuNTA4MzUgLTI0LjkxNjI5LC0xNC4zODU0MyAwLC0yLjg3NzA5IDIyLjQyNDY2LC0xNS44MjM5NyAyNC45MTYyOSwtMTQuMzg1NDMgMi40OTE2MywxLjQzODU1IDIuNDkxNjMsMjcuMzMyMzIgMCwyOC43NzA4NiB6IiB0cmFuc2Zvcm09Im1hdHJpeCgtMC4yNjQ1ODMzMywwLDAsMC4yNjQ1ODMzMywxMDQuMDkxMTIsMTMuMDUwMzMyKSIgaWQ9InBhdGgyMTYwLTYiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMxNjg1ZmM7c3Ryb2tlLXdpZHRoOjU7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHBhdGggaWQ9InBhdGgyNDY4IiBkPSJtIDUwLjk0MjExMSwxMDguNDI3MjggYyAyNS4wMzQ0MDksMCAtMTYuNTI0NDQxLDExLjg5NDA4IC0wLjIzNDU2MiwxMS42OTMgbCA1LjI5ODI3LC0wLjA2NTQiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMxNjg1ZmM7c3Ryb2tlLXdpZHRoOjEuMzIzO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOyAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYuMzYwMjQyLC05MC41MDc4MDcpIiBzdHlsZT0iZGlzcGxheTpub25lIiBpZD0ibGF5ZXI0Ij4mI3hhOyAgICA8ZyBzdHlsZT0iZGlzcGxheTppbmxpbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOS43NDE3ODMsLTYuMDYyMDAzMikiIGlkPSJnMzQ1OC04Ij4mI3hhOyAgICAgIDxnIGlkPSJnNDQ3MSI+JiN4YTsgICAgICAgIDxjaXJjbGUgcj0iMTcuMDcxMzE4IiBjeT0iMTE0LjMwMjYzIiBjeD0iNTMuODM0ODQzIiBpZD0icGF0aDg0Ni01LTciIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM5Y2M4Zjg7c3Ryb2tlLXdpZHRoOjEuMzIzO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggZD0ibSAxNzkuMjI5ODcsNDE3LjY1NzgzIGMgLTIuNDkxNjMsMS40Mzg1NCAtMjQuOTE2MjksLTExLjUwODM1IC0yNC45MTYyOSwtMTQuMzg1NDMgMCwtMi44NzcwOSAyMi40MjQ2NiwtMTUuODIzOTcgMjQuOTE2MjksLTE0LjM4NTQzIDIuNDkxNjMsMS40Mzg1NSAyLjQ5MTYzLDI3LjMzMjMyIDAsMjguNzcwODYgeiIgdHJhbnNmb3JtPSJtYXRyaXgoMC4yNjQ1ODMzMywwLDAsMC4yNjQ1ODMzMywtMC42MTIyODc2MSw3LjQwMjQ2MTcpIiBpZD0icGF0aDIxNjAtOSIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6NTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICAgIDxwYXRoIGQ9Im0gMTc5LjIyOTg3LDQxNy42NTc4MyBjIC0yLjQ5MTYzLDEuNDM4NTQgLTI0LjkxNjI5LC0xMS41MDgzNSAtMjQuOTE2MjksLTE0LjM4NTQzIDAsLTIuODc3MDkgMjIuNDI0NjYsLTE1LjgyMzk3IDI0LjkxNjI5LC0xNC4zODU0MyAyLjQ5MTYzLDEuNDM4NTUgMi40OTE2MywyNy4zMzIzMiAwLDI4Ljc3MDg2IHoiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjI2NDU4MzMzLDAsMCwwLjI2NDU4MzMzLDEwOC4xNTYwOCw3LjQwMjQ2MTcpIiBpZD0icGF0aDIxNjAtNi0yIiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDo1O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggZD0ibSAxNzkuMjI5ODcsNDE3LjY1NzgzIGMgLTIuNDkxNjMsMS40Mzg1NCAtMjQuOTE2MjksLTExLjUwODM1IC0yNC45MTYyOSwtMTQuMzg1NDMgMCwtMi44NzcwOSAyMi40MjQ2NiwtMTUuODIzOTcgMjQuOTE2MjksLTE0LjM4NTQzIDIuNDkxNjMsMS40Mzg1NSAyLjQ5MTYzLDI3LjMzMjMyIDAsMjguNzcwODYgeiIgdHJhbnNmb3JtPSJtYXRyaXgoMCwwLjI2NDU4MzMzLDAuMjY0NTgzMzMsMCwtNTIuOTU3MDQxLDU5Ljc4MzE2NCkiIGlkPSJwYXRoMjE2MC02LTItMiIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6NTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICAgIDxwYXRoIGQ9Im0gMTc5LjIyOTg3LDQxNy42NTc4MyBjIC0yLjQ5MTYzLDEuNDM4NTQgLTI0LjkxNjI5LC0xMS41MDgzNSAtMjQuOTE2MjksLTE0LjM4NTQzIDAsLTIuODc3MDkgMjIuNDI0NjYsLTE1LjgyMzk3IDI0LjkxNjI5LC0xNC4zODU0MyAyLjQ5MTYzLDEuNDM4NTUgMi40OTE2MywyNy4zMzIzMiAwLDI4Ljc3MDg2IHoiIHRyYW5zZm9ybT0ibWF0cml4KDAsLTAuMjY0NTgzMzMsLTAuMjY0NTgzMzMsMCwxNjAuNDQxMjcsMTY4LjQ3NDQzKSIgaWQ9InBhdGgyMTYwLTYtMi0zIiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDo1O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InBhdGg0MzYyIiBkPSJtIDQ3LjQxNjY3MiwxMTQuMzAwOTkgaCAxMi44ODMxMiIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6MS4zMjM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8cGF0aCBpZD0icGF0aDQzNjQiIGQ9Im0gNTMuODc3Mzg5LDEwNy44MzcxNCB2IDEyLjg1MjIzIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDoxLjMyMztzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8L2c+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=;imageBorder=none;imageBackground=none;perimeter=ellipsePerimeter;fontSize=10;" vertex="1" parent="1">
          <mxGeometry x="31" y="20" width="35" height="35" as="geometry" />
        </mxCell>
        <mxCell id="5PyBhpG3S0t8aKxmwEZQ-17" value="" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=none;endFill=0;strokeColor=#ed333b;" edge="1" parent="1" source="5PyBhpG3S0t8aKxmwEZQ-11" target="5PyBhpG3S0t8aKxmwEZQ-13">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="189" y="80" as="sourcePoint" />
            <mxPoint x="210.09090909090912" y="285" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="5PyBhpG3S0t8aKxmwEZQ-13" value="RT01" style="shape=image;verticalLabelPosition=bottom;verticalAlign=top;imageAspect=0;aspect=fixed;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJzdmc1IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzNS40NjU2MzMgMzUuNDY1NjMzIiBoZWlnaHQ9IjM1LjQ2NTYzM21tIiB3aWR0aD0iMzUuNDY1NjMzbW0iPiYjeGE7ICAmI3hhOyAgPGRlZnMgaWQ9ImRlZnMyIi8+JiN4YTsgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02LjM2MDI0MiwtOTAuNTA3ODA3KSIgc3R5bGU9ImRpc3BsYXk6bm9uZSIgaWQ9ImxheWVyMyI+JiN4YTsgICAgPGcgc3R5bGU9ImRpc3BsYXk6aW5saW5lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODIuMjE3ODYxLDQ4LjQ4NzY2NCkiIGlkPSJnMzkxOCI+JiN4YTsgICAgICA8Y2lyY2xlIHI9IjE3LjA3MTMxOCIgY3k9IjU5Ljc1Mjk2IiBjeD0iMTA2LjMxMDkyIiBpZD0icGF0aDg0Ni0yLTAiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM5Y2M4Zjg7c3Ryb2tlLXdpZHRoOjEuMzIyOTI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3Qgcnk9IjAuMjk5OTA1MjEiIHk9IjUwLjU4MTIyMyIgeD0iOTYuOTczNTAzIiBoZWlnaHQ9IjYuOTE3NzYyMyIgd2lkdGg9IjYuOTE3NzYyMyIgaWQ9InJlY3QxNzk2LTAtNiIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6MS4zMjI5MjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cmVjdCByeT0iMC4yOTk5MDUyMSIgeT0iNTAuNTgxMjIzIiB4PSIxMDguNzMwNTgiIGhlaWdodD0iNi45MTc3NjIzIiB3aWR0aD0iNi45MTc3NjIzIiBpZD0icmVjdDE3OTYtNy05LTIiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMxNjg1ZmM7c3Ryb2tlLXdpZHRoOjEuMzIyOTI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHJlY3Qgcnk9IjAuMjk5OTA1MjEiIHk9IjYyLjAwNjkzNSIgeD0iOTYuOTczNTAzIiBoZWlnaHQ9IjYuOTE3NzYyMyIgd2lkdGg9IjYuOTE3NzYyMyIgaWQ9InJlY3QxNzk2LTUtMy02IiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDoxLjMyMjkyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgIDxyZWN0IHJ5PSIwLjI5OTkwNTIxIiB5PSI2Mi4wMDY5MzUiIHg9IjEwOC43MzA1OCIgaGVpZ2h0PSI2LjkxNzc2MjMiIHdpZHRoPSI2LjkxNzc2MjMiIGlkPSJyZWN0MTc5Ni03LTMtNi0xIiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDoxLjMyMjkyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOyAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYuMzYwMjQyLC05MC41MDc4MDcpIiBzdHlsZT0iZGlzcGxheTppbmxpbmUiIGlkPSJsYXllcjIiPiYjeGE7ICAgIDxnIHN0eWxlPSJkaXNwbGF5OmlubGluZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI5Ljc0MTc4MywtNi4wNjIwMDMyKSIgaWQ9ImczNDU4Ij4mI3hhOyAgICAgIDxjaXJjbGUgcj0iMTcuMDcxMzE4IiBjeT0iMTE0LjMwMjYzIiBjeD0iNTMuODM0ODQzIiBpZD0icGF0aDg0Ni01IiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojOWNjOGY4O3N0cm9rZS13aWR0aDoxLjMyMztzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cGF0aCB0cmFuc2Zvcm09Im1hdHJpeCgwLjI2NDU4MzMzLDAsMCwwLjI2NDU4MzMzLDMuMDgwOTk4LDEuNTc4Mzk3NykiIGQ9Im0gMTc5LjIyOTg3LDQxNy42NTc4MyBjIC0yLjQ5MTYzLDEuNDM4NTQgLTI0LjkxNjI5LC0xMS41MDgzNSAtMjQuOTE2MjksLTE0LjM4NTQzIDAsLTIuODc3MDkgMjIuNDI0NjYsLTE1LjgyMzk3IDI0LjkxNjI5LC0xNC4zODU0MyAyLjQ5MTYzLDEuNDM4NTUgMi40OTE2MywyNy4zMzIzMiAwLDI4Ljc3MDg2IHoiIGlkPSJwYXRoMjE2MCIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6NTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8cGF0aCBkPSJtIDE3OS4yMjk4Nyw0MTcuNjU3ODMgYyAtMi40OTE2MywxLjQzODU0IC0yNC45MTYyOSwtMTEuNTA4MzUgLTI0LjkxNjI5LC0xNC4zODU0MyAwLC0yLjg3NzA5IDIyLjQyNDY2LC0xNS44MjM5NyAyNC45MTYyOSwtMTQuMzg1NDMgMi40OTE2MywxLjQzODU1IDIuNDkxNjMsMjcuMzMyMzIgMCwyOC43NzA4NiB6IiB0cmFuc2Zvcm09Im1hdHJpeCgtMC4yNjQ1ODMzMywwLDAsMC4yNjQ1ODMzMywxMDQuMDkxMTIsMTMuMDUwMzMyKSIgaWQ9InBhdGgyMTYwLTYiIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiMxNjg1ZmM7c3Ryb2tlLXdpZHRoOjU7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgPHBhdGggaWQ9InBhdGgyNDY4IiBkPSJtIDUwLjk0MjExMSwxMDguNDI3MjggYyAyNS4wMzQ0MDksMCAtMTYuNTI0NDQxLDExLjg5NDA4IC0wLjIzNDU2MiwxMS42OTMgbCA1LjI5ODI3LC0wLjA2NTQiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMxNjg1ZmM7c3Ryb2tlLXdpZHRoOjEuMzIzO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICA8L2c+JiN4YTsgIDwvZz4mI3hhOyAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYuMzYwMjQyLC05MC41MDc4MDcpIiBzdHlsZT0iZGlzcGxheTpub25lIiBpZD0ibGF5ZXI0Ij4mI3hhOyAgICA8ZyBzdHlsZT0iZGlzcGxheTppbmxpbmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOS43NDE3ODMsLTYuMDYyMDAzMikiIGlkPSJnMzQ1OC04Ij4mI3hhOyAgICAgIDxnIGlkPSJnNDQ3MSI+JiN4YTsgICAgICAgIDxjaXJjbGUgcj0iMTcuMDcxMzE4IiBjeT0iMTE0LjMwMjYzIiBjeD0iNTMuODM0ODQzIiBpZD0icGF0aDg0Ni01LTciIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM5Y2M4Zjg7c3Ryb2tlLXdpZHRoOjEuMzIzO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggZD0ibSAxNzkuMjI5ODcsNDE3LjY1NzgzIGMgLTIuNDkxNjMsMS40Mzg1NCAtMjQuOTE2MjksLTExLjUwODM1IC0yNC45MTYyOSwtMTQuMzg1NDMgMCwtMi44NzcwOSAyMi40MjQ2NiwtMTUuODIzOTcgMjQuOTE2MjksLTE0LjM4NTQzIDIuNDkxNjMsMS40Mzg1NSAyLjQ5MTYzLDI3LjMzMjMyIDAsMjguNzcwODYgeiIgdHJhbnNmb3JtPSJtYXRyaXgoMC4yNjQ1ODMzMywwLDAsMC4yNjQ1ODMzMywtMC42MTIyODc2MSw3LjQwMjQ2MTcpIiBpZD0icGF0aDIxNjAtOSIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6NTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICAgIDxwYXRoIGQ9Im0gMTc5LjIyOTg3LDQxNy42NTc4MyBjIC0yLjQ5MTYzLDEuNDM4NTQgLTI0LjkxNjI5LC0xMS41MDgzNSAtMjQuOTE2MjksLTE0LjM4NTQzIDAsLTIuODc3MDkgMjIuNDI0NjYsLTE1LjgyMzk3IDI0LjkxNjI5LC0xNC4zODU0MyAyLjQ5MTYzLDEuNDM4NTUgMi40OTE2MywyNy4zMzIzMiAwLDI4Ljc3MDg2IHoiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjI2NDU4MzMzLDAsMCwwLjI2NDU4MzMzLDEwOC4xNTYwOCw3LjQwMjQ2MTcpIiBpZD0icGF0aDIxNjAtNi0yIiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDo1O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggZD0ibSAxNzkuMjI5ODcsNDE3LjY1NzgzIGMgLTIuNDkxNjMsMS40Mzg1NCAtMjQuOTE2MjksLTExLjUwODM1IC0yNC45MTYyOSwtMTQuMzg1NDMgMCwtMi44NzcwOSAyMi40MjQ2NiwtMTUuODIzOTcgMjQuOTE2MjksLTE0LjM4NTQzIDIuNDkxNjMsMS40Mzg1NSAyLjQ5MTYzLDI3LjMzMjMyIDAsMjguNzcwODYgeiIgdHJhbnNmb3JtPSJtYXRyaXgoMCwwLjI2NDU4MzMzLDAuMjY0NTgzMzMsMCwtNTIuOTU3MDQxLDU5Ljc4MzE2NCkiIGlkPSJwYXRoMjE2MC02LTItMiIgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6NTtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICAgIDxwYXRoIGQ9Im0gMTc5LjIyOTg3LDQxNy42NTc4MyBjIC0yLjQ5MTYzLDEuNDM4NTQgLTI0LjkxNjI5LC0xMS41MDgzNSAtMjQuOTE2MjksLTE0LjM4NTQzIDAsLTIuODc3MDkgMjIuNDI0NjYsLTE1LjgyMzk3IDI0LjkxNjI5LC0xNC4zODU0MyAyLjQ5MTYzLDEuNDM4NTUgMi40OTE2MywyNy4zMzIzMiAwLDI4Ljc3MDg2IHoiIHRyYW5zZm9ybT0ibWF0cml4KDAsLTAuMjY0NTgzMzMsLTAuMjY0NTgzMzMsMCwxNjAuNDQxMjcsMTY4LjQ3NDQzKSIgaWQ9InBhdGgyMTYwLTYtMi0zIiBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDo1O3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiLz4mI3hhOyAgICAgICAgPHBhdGggaWQ9InBhdGg0MzYyIiBkPSJtIDQ3LjQxNjY3MiwxMTQuMzAwOTkgaCAxMi44ODMxMiIgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6IzE2ODVmYztzdHJva2Utd2lkdGg6MS4zMjM7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIvPiYjeGE7ICAgICAgICA8cGF0aCBpZD0icGF0aDQzNjQiIGQ9Im0gNTMuODc3Mzg5LDEwNy44MzcxNCB2IDEyLjg1MjIzIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMTY4NWZjO3N0cm9rZS13aWR0aDoxLjMyMztzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxIi8+JiN4YTsgICAgICA8L2c+JiN4YTsgICAgPC9nPiYjeGE7ICA8L2c+JiN4YTs8L3N2Zz4=;perimeter=ellipsePerimeter;fontSize=10;" vertex="1" parent="1">
          <mxGeometry x="81" y="85" width="35" height="35" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

[dreng]

I have now started creating an icon set. I am not a designer, but I nevertheless tried to make the set look as professional as possible. I have worked according to these criteria:

• NetBox logo colors #1685fc and #9cc8f8 only
• Round base shape (in order to make connections look good from all sides)
• Keep it simple
• Homogeneous look (same line width, corner radius, content size, ...)

Here's a preview of what it will look like:

Hope you like it!

[dreng]

I have now created an icon set with the icons listed above and a whole bunch of new icons. I think there will be one or two changes before release but overall it's close to the final version.

Preview Card:

Some thoughts:

• I wonder if we should use SVG instead of PNG. Unfortunately SVGs are not displayed in the current version, but vis-network can do that in principle. This would also have the advantage that SVG is saved as a text file, making it easier to diff.
• I had to do a "manage-py collectstatic --no-input" after I copied the files into my developing environment. Not sure if this is necessary in a new release as well.
• I have changed the name "power feed" to "pdu".
• I removed "non-racked-devices.png" because I didn't understand the point of it and also didn't have a suitable idea for an icon. A device that is not in the rack nevertheless has a role. I mean, if you take a racked server out of the rack, it still remains a server and is not suddenly a non-racked device.
• I also removed "isp-cpe-material.png" because that could mean anything. A typical device here would be a router given by the ISP for the duration of the contract. However, the role is then not "ISP-CPE-Material" but "Router". However, it could also be any other device handed over, which makes it difficult to find a suitable symbol for it.
• Last but not least, I removed the "internal-switch.png", as I could not imagine anything about it. Perhaps a virtual switch in a Hyper-V environment is meant? But this kind of switch is not supported by NetBox. Instead, I created a generic icon for switches (in addition to core, distribution and access switches).

[mattieserver]

Hi,

Thanks for all the work you do on this plugin.
If possible, SVG would be the choice as we can than make changes more easily.

The collect static command will indeed be needed.

The 3 device roles are legacy roles we used in our setup, so I understand that there is no icon for it.

[candlerb]

I agree with pretty much everything @dreng said.

Regarding CPE, I guess it could be considered an "access router" analogous to access switch, and you could even have core/distribution/access routers, but maybe that's going too far and it would be hard to distinguish the icons anyway. Still, being able to distinguish a customer edge router from a core network device would be nice.

I would prefer "Fibre Patch Panel" to "FC Patch Panel", because FC is a specific type of legacy connector, and I generally see LC or occasionally SC. But then someone will argue Fibre versus Fiber :-) I guess "FO" (for fibre optic) would work.

If these icons are intended for Device Roles, then I can't see when I'd use "WAN Network" or "Provider Networks" - but I'm sure this icon set will find wider uses outside of Netbox.

[dreng]

Thanks for all the work you do on this plugin. If possible, SVG would be the choice as we can than make changes more easily.

You're welcome. You've laid a great foundation here and it's totally worth it making this plugin even better.
As for SVG, I try to find a way to make it work before creating a PR for the icons. In addition to single SVG icons I planned to publish my "source" SVG. It's an SVG containing all the icons which makes it easier to work on it and to do batch processing. I think this SVG shouldn't reside in the same directory as the single icons as it makes no sense to package them. Any suggestions where to put that file?

Still, being able to distinguish a customer edge router from a core network device would be nice.

Then I suggest a second router icon that looks like the first one but with a circle in the middle (like I did for the core switch). Then we have a core router icon and a generic one that might be used as edge router.

I would prefer "Fibre Patch Panel" to "FC Patch Panel", because FC is a specific type of legacy connector, and I generally see LC or occasionally SC. But then someone will argue Fibre versus Fiber :-) I guess "FO" (for fibre optic) would work.

I've got no preferences here. It's just a name and I don't mind to change it. Generally speaking, we shouldn't stick our minds to any names. They are just a suggestion and they show how the icons were meant to be used. Since icon names doesn't show in the topology, everybody should feel free to use or abuse any of the icons for their own needs. In the current version of NTV, everyone can assign the icons with the GUI as they wish.

If these icons are intended for Device Roles, then I can't see when I'd use "WAN Network" or "Provider Networks" - but I'm sure this icon set will find wider uses outside of Netbox.

I don't see any use either. I just worked down the list ;-). Maybe it's helpful to anyone in any way.

[mattieserver]

Hi, Yes the SVG format for the images was just so we can change it easily. Maybe if we have a script that converts everything to png then that is also good. But the SVG in the actual front-end might give better results. I will check what is possible. As for the names, I don't think we need to spend much time on it. With the option to select what image you want to use for the device roles people can just change it in image selector menu.

…

________________________________ From: Mario ***@***.***> Sent: Saturday, April 1, 2023 11:46:47 AM To: mattieserver/netbox-topology-views ***@***.***> Cc: mattieserver ***@***.***>; Mention ***@***.***> Subject: Re: [mattieserver/netbox-topology-views] Overhaul / implement new icons (Issue #240) Thanks for all the work you do on this plugin. If possible, SVG would be the choice as we can than make changes more easily. You're welcome. You've laid a great foundation here and it's totally worth it making this plugin even better. As for SVG, I try to find a way to make it work before creating a PR for the icons. In addition to single SVG icons I planned to publish my "source" SVG. It's an SVG containing all the icons which makes it easier to work on it and to do batch processing. I think this SVG shouldn't reside in the same directory as the single icons as it makes no sense to package them. Any suggestions where to put that file? Still, being able to distinguish a customer edge router from a core network device would be nice. Then I suggest a second router icon that looks like the first one but with a circle in the middle (like I did for the core switch). Then we have a core router icon and a generic one that might be used as edge router. I would prefer "Fibre Patch Panel" to "FC Patch Panel", because FC is a specific type of legacy connector<https://en.wikipedia.org/wiki/FC_connector>, and I generally see LC or occasionally SC. But then someone will argue Fibre versus Fiber :-) I guess "FO" (for fibre optic) would work. I've got no preferences here. It's just a name and I don't mind to change it. Generally speaking, we shouldn't stick our minds to any names. They are just a suggestion and they show how the icons were meant to be used. Since icon names doesn't show in the topology, everybody should feel free to use or abuse any of the icons for their own needs. In the current version of NTV, everyone can assign the icons with the GUI as they wish. If these icons are intended for Device Roles, then I can't see when I'd use "WAN Network" or "Provider Networks" - but I'm sure this icon set will find wider uses outside of Netbox. I don't see any use either. I just worked down the list ;-). Maybe it's helpful to anyone in any way. — Reply to this email directly, view it on GitHub<#240 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAXITDG6OXRKQLJKJDG34ODW672QPANCNFSM6AAAAAATS5J55E>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[dreng]

Hi, Yes the SVG format for the images was just so we can change it easily. Maybe if we have a script that converts everything to png then that is also good. But the SVG in the actual front-end might give better results. I will check what is possible.

I just tried to reproduce the issue with SVGs on another computer (with the same browser). The result was that there isn't any problem. This is kinda strange. I have to check on the other computer what the real problem is.

[dreng]

It turned out, that I used a test SVG file that had some kind of problem itself. I copied the new icons as SVG into two different environments and had no problems at all, so we're ready to go.

[dreng]

Just created a new repository at https://github.com/dreng/netbox-topology-views-icons and a PR.

[nogaff]

@dreng Nice icons! Commenting here since your repo doesn't appear to be accepting issues.

• I have changed the name "power feed" to "pdu".

I'm not sure this particular change makes much sense because, as I understand it, a Power Feed represents a single discrete power circuit which can only be attached to a single Device's Power Port. If multiple Devices are to draw power from the same Feed then they must do so via a separate PDU which must itself be modelled as a Device (with a Power Port and multiple Power Outlets).

Therefore the chain would go: Power Panel > Power Feed > PDU (Device) > Other Devices.

As such, the PDU icon should be assigned to a Device role, which means there should still be a separate icon for a Power Feed which should not depict multiple outlets.

That also begs the question, what's the difference between "PDU" and "Power Unit"? I don't really see a distinction there, so maybe one of the two should be removed (in which case, the multi-outlet icon probably makes more sense to keep than the single-outlet icon)?

Finally, just a suggestion for future consideration: the monochromatic icons are great, but it might be cool to also offer a second pack of full colour icons to make it easier to zoom in on specific object types in large topologies.

[dreng]

Hi nogaff,

thanks for contributing. You are right, it's well explained in the NetBox docs: https://demo.netbox.dev/static/docs/core-functionality/power/

Would you mind to file a bug report with some draft suggestions?

Regarding the file names we already stated, that they are just suggestions in order to make the intention clear. You can use all icons for any purpose you like.

When you say "full colour icons", are you talking about e.g. different background colors or multiple colors on a single icon? The first one is easy to achieve. The second one is not likely to take place because it was one of the criterias to only use NetBox colors and to keep it simple. But hey, it's an open license and everbody can fork the repo and change whatever he likes. You are also free to open a feature request and to provide a pull request, if it will be accepted.