Allow to use front or rear image of device

[Gaming4LifeDE]

NetBox version

v3.7.5

Topology Views version

v3.9.0

Feature type

New functionality

Proposed functionality

I would like the topology view to automatically pull the front or rear image of each device (if it exists) and default to the icons if none is available.

Use case

I think this would make it easier to understand at first glance.

External dependencies

No response

[dreng]

No bad idea at all. We have to talk about that feature request though.

1. First of all this would have to be an optional feature because it has got some downsides:

   • The more objects there are on the screen, the more confusing it becomes if you use device type images instead of icons
   • With big images of different shapes it's sometimes hard to tell if a cable is going right through an image or if it connects to that image. Have a look at the screenshots below. One of the cables is going right through SW018 and one connects to it.

2. How would you the images' size expect to be? Should it be resized to the size of the current icons? Or would you leave the size as it is? This could generate a very messy result as the original size could be anything.

As a very quick proof-of-concept I added a single line to the code that prefers a device type image over a role image:

--- a/netbox_topology_views/views.py
+++ b/netbox_topology_views/views.py
@@ -230,6 +230,7 @@ def create_node(
     node["shape"] = "image"
     node["href"] = device.get_absolute_url()
     node["image"] = get_image_for_entity(device)
+    if device.device_type.front_image: node["image"] = device.device_type.front_image.url

[Gaming4LifeDE]

I'd say draw an invisible box and resize the image (while preserving the aspect ratio) until it fits in the box. Another way to go about this might be to show the front and rear image in the tooltip instead

[dreng]

I'd say draw an invisible box and resize the image

So you would resize it in a way that it's the same size as the icons?

Another way to go about this might be to show the front and rear image in the tooltip instead

Okay, but which one would you prefer?

[Gaming4LifeDE]

How much effort would it be to make a POC of both?

I think ma mix of both: front image in place of the icons, rear image in the tooltip. Or maybe a button to switch between the two.

Do you know the UniFi network application? They have device images implemented in their topology. Let me know if you need some screenshots of that.

[dreng]

How much effort would it be to make a POC of both?

Not a big deal. Here's what it could look like: Front image in place of the icons and both (front and rear) in the tooltip.

Personally I don't see any benefit from rear images in the topology view at all. So I'd suggest to just use front images. As I played around a bit I found it quite useless to have images in the tooltip. Nobody wants to hover over each node in order to see images, IMO. If you don't mind I'd llike to stick to front images that overrides the role icons if the displayed device type has got an image. So basically like the screenshot above but without images in the tooltip. Any complaints?

Do you know the UniFi network application?

Yes, I'm familiar with it.

[dreng]

One last note: If you display a few more nodes, it might look like this:

You can see that there are 2 different pictures, one for patch panels and one for switches. This is hard to see at first sight (and this topology hasn't got very much nodes btw). But since assume to make this feature an option, that doesn't seem to be a big problem. I think the real benefit comes into play when non-racked devices with different shapes are shown.

[Gaming4LifeDE]

Looks good, although i think there should be a way to limit the size of the images. Basically you could have an invisible square around the image and have an option to specify the maximum size. That would mean that the longer dimension (length or height) of the image would be affected.

[dreng]

I already limited the size in the code (just compare to the screenshot in my first post). We can make it even smaller of cause, but what's the benefit if you're not able to identify the device type anymore?

Just for the record: NetBox itself limits the size. I used images of different size and NetBox made them equal in width.

Which size (width) would you suggest compared to the current images in the screenshot?

Feel free to post some images or links to images. I can use them and show a concrete example.

[Gaming4LifeDE]

I think this is good as a default, but you should make the configurable in the settings. Some people might like it smaller or bigger.

[dreng]

I think you're right. Unfortunately I am not able to set the icons to a certain size in the topology view. The engine (vis.network) seems to resize objects itself. When I played around with some images of different sizes, some images has been resized while others hasn't. I don't see any algorithm here.

This is a screenshot of some devices with the following dimensions: SW019, SW021: 3046 x 313 SW005: 313 x 3046 SW008: 535 x 535

The dimensions of SW008 doesn't fit the other images at all. I also tried with a full HD picture which where displayed bigger than all other images together.

I'm afraid it leads to a very bad user experience if images with different dimensions are used.

It's not a problem to give the images a certain size for the tooltip because that's HTML and each image can be modified with CSS.

[dreng]

Closing this because it's not possible to define an image size.