Display device names in front of device front/rear images

[candlerb]

Fixes: #6879

Display device names in white text in front of device front/rear background images

[candlerb]

This is a proof-of-concept PR.

It doesn't quite work correctly, because if you have images and then turn them off (which is presumably done via CSS), the text colour may be wrong for the new background:

So it may be necessary to force the text colour to white via CSS only if the image is being shown, rather than forcing the text colour to white in Python as I did here.

It's also a matter for discussion as to whether the text-over-image color needs to be selectable (per image).

[Serazio]

Maybe it would be a better solution to display the names beside of the rack? In our particular case we save devices names as fqdn, which sometimes lead into cut off hostnames in rack view.

[candlerb]

Maybe it would be a better solution to display the names beside of the rack? In our particular case we save devices names as fqdn, which sometimes lead into cut off hostnames in rack view.

I think that should be a different feature request, since the fqdn's will overrun the rack width whether or not you use front/rear images.

[jeremystretch]

You'd still have the same issue on lighter-colored images though. How about adding an outline effect to the text using CSS?

Edit: Something like this might work.

[candlerb]

The outline is ugly with small text. The top one has stroke="black" stroke-width="1px" stroke-linejoin="round" (note: captured on retina macbook, without scaling, so shows double-size here)

And this is adding font-weight="bold"

(This was editing the SVG directly in-situ).

It might be possible to put an opaque background behind the text, but apparently that would require drawing another rectangle:
https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg

That thread also suggests a solution using a second text element to make a "splodge" behind:

<text x="142.0" y="409.0" stroke="#000" stroke-width="0.6em">ldex-l3sw1</text>
<text fill="#ffffff" x="142.0" y="409.0">ldex-l3sw1</text>

renders as

Change the first text stroke to #ccc and stroke-width to 0.3em:

Change second text fill to #000000:

Change the first stroke to #eee:

Adding stroke-linejoin="round" fixes the spike:

Reduce stroke-width to 0.2em:

That's not too bad, although it still looks a bit "art shop". You'd definitely only want to use it when the images are visible. EDIT: it might work if the stroke colour matches the background colour (of the rectangle which is visible when the image is hidden)

[candlerb]

I have pushed a new version. With images on, it looks like this:

With images off:

There's a bit of a blue halo around the text with images on (because the role colour is blue), but I can live with this.

[candlerb]

Example of what the new version looks like with a very dark image (Netgate) and a very light image (Mikrotik)

[candlerb]

This PR now implements separate toggles for Images and Labels:

You still cannot get exactly the same behaviour as before, which was mixed:

• devices with images did not show the label
• devices without images did show the label

However I prefer it this way, as the images-without-labels view is now uncluttered:

Are you OK with this?

Otherwise, it would be possible to get the old behaviour, by not adding the CSS class to labels if there's no image. But then you wouldn't be able to get the uncluttered view. At that point it probably makes sense to change to a 4-way dropdown: images and labels, images or labels, images only, labels only.

[candlerb]

Closing this out as I now have a version for Netbox 3. No point implementing this twice.

[candlerb]

New PR is #6960