Display device names in front of device front/rear images

Fixes #6879

Author: candlerb

netbox/dcim/elevations.py

@@ -89,10 +89,9 @@ def _draw_device_front(self, drawing, device, start, end, text):
         )
         link.set_desc(self._get_device_description(device))
         link.add(drawing.rect(start, end, style='fill: #{}'.format(color), class_='slot'))
-        hex_color = '#{}'.format(foreground_color(color))
-        link.add(drawing.text(str(name), insert=text, fill=hex_color))
 
         # Embed front device type image if one exists
+        text_color = '#{}'.format(foreground_color(color))
         if self.include_images and device.device_type.front_image:
             image = drawing.image(
                 href=device.device_type.front_image.url,
@@ -103,11 +102,14 @@ def _draw_device_front(self, drawing, device, start, end, text):
             image.fit(scale='slice')
             link.add(image)
 
+        link.add(drawing.text(str(name), insert=text, stroke='#{}'.format(color),
+                 stroke_width='0.2em', stroke_linejoin='round', class_='device-label'))
+        link.add(drawing.text(str(name), insert=text, fill=text_color, class_='device-label'))
+
     def _draw_device_rear(self, drawing, device, start, end, text):
         rect = drawing.rect(start, end, class_="slot blocked")
         rect.set_desc(self._get_device_description(device))
         drawing.add(rect)
-        drawing.add(drawing.text(str(device), insert=text))
 
         # Embed rear device type image if one exists
         if self.include_images and device.device_type.rear_image:
@@ -120,6 +122,10 @@ def _draw_device_rear(self, drawing, device, start, end, text):
             image.fit(scale='slice')
             drawing.add(image)
 
+        drawing.add(drawing.text(str(device), insert=text, stroke='white',
+                    stroke_width='0.2em', stroke_linejoin='round', class_='device-label'))
+        drawing.add(drawing.text(str(device), insert=text, class_='device-label'))
+
     @staticmethod
     def _draw_empty(drawing, rack, start, end, text, id_, face_id, class_, reservation):
         link = drawing.add(

netbox/project-static/js/rack_elevations.js

@@ -11,3 +11,16 @@ $('button.toggle-images').click(function() {
     $(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline');
     return false;
 });
+// Toggle the display of device labels within an SVG rack elevation
+$('button.toggle-labels').click(function() {
+    var selected = $(this).attr('selected');
+    var rack_elevation = $(".rack_elevation");
+    if (selected) {
+        $('.device-label', rack_elevation.contents()).addClass('hidden');
+    } else {
+        $('.device-label', rack_elevation.contents()).removeClass('hidden');
+    }
+    $(this).attr('selected', !selected);
+    $(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline');
+    return false;
+});

netbox/templates/dcim/rack.html

@@ -40,6 +40,9 @@
   <button class="btn btn-sm btn-default toggle-images" selected="selected">
     <span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
   </button>
+  <button class="btn btn-sm btn-default toggle-labels" selected="selected">
+    <span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Labels
+  </button>
   {{ block.super }}
 {% endblock %}
 

netbox/templates/dcim/rack_elevation_list.html

@@ -7,6 +7,9 @@
     <button class="btn btn-default toggle-images" selected="selected">
         <span class="mdi mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
     </button>
+    <button class="btn btn-default toggle-labels" selected="selected">
+        <span class="mdi mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Labels
+    </button>
     <div class="btn-group" role="group">
         <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='front' %}" class="btn btn-default{% if rack_face == 'front' %} active{% endif %}">Front</a>
         <a href="{% url 'dcim:rack_elevation_list' %}{% querystring request face='rear' %}" class="btn btn-default{% if rack_face == 'rear' %} active{% endif %}">Rear</a>