feature: support large vendor logos (#5573)

These are often wider than icons, with a fallback to icons if the logo is not present
Logos are stored in /html/images/logos
SVG is preferred for HiDPI

doc/Developing/Support-New-OS.md

@@ -38,15 +38,25 @@ discovery:
         - VA-SPE
 ```
 
-#### Icon
+#### Icon and Logo
 
-Put a SVG vector image to **html/images/os/$os.svg**. Legacy PNG bitmaps (32x32 px) are also supported.
-
-- Square icons are prefered to a name.
+Create an SVG image of the icon and logo.  Legacy PNG bitmaps are also supported but look bad on HiDPI.
 - A vector image should not contain padding.  
 - The file should not be larger than 20 Kb. Simplify paths to reduce large files.
+- Use plain SVG without gzip compression.
+
+##### Icon
+- Save the icon SVG to **html/images/os/$os.svg**.
+- Icons should look good when viewed at 32x32 px.
+- Square icons are preferred to full logos with text.
 - Remove small ornaments that are almost not visible when displayed with 32px width (e.g. ® or ™).
-- Use plain SVG without compression.
+
+##### Logo
+- Save the logo SVG to **html/images/logos/$os.svg**.
+- Logos can be any dimension, but often are wide and contain the company name.
+- If a logo is not present, the icon will be used.
+
+##### Hints
 
 Hints for [Inkscape](https://inkscape.org/):
 
@@ -57,8 +67,8 @@ Hints for [Inkscape](https://inkscape.org/):
 - Use `File -> Clean up document` to remove unused gradients, patterns, or markers.
 - Use `File -> Save As -> Plain SVG` to save the final image.
 
-By optimizing the SVG you can shrink the filesize in some cases to less than 20 %.
-[SVG Optimizer](https://github.com/svg/svgo) does a great job.
+By optimizing the SVG you can shrink the file size in some cases to less than 20 %.
+[SVG Optimizer](https://github.com/svg/svgo) does a great job. There is also an [online version](https://jakearchibald.github.io/svgomg/).
 
 #### Discovery OS
 

html/ajax_search.php

@@ -80,7 +80,7 @@ if (isset($_REQUEST['search'])) {
                         'url'             => generate_device_url($result),
                         'colours'         => $highlight_colour,
                         'device_ports'    => $num_ports,
-                        'device_image'    => getImageSrc($result),
+                        'device_image'    => getIcon($result),
                         'device_hardware' => $result['hardware'],
                         'device_os'       => $config['os'][$result['os']]['text'],
                         'version'         => $result['version'],
@@ -217,7 +217,7 @@ if (isset($_REQUEST['search'])) {
                         'app_id'          => $result['app_id'],
                         'device_id'       => $result['device_id'],
                         'colours'         => $highlight_colour,
-                        'device_image'    => getImageSrc($result),
+                        'device_image'    => getIcon($result),
                         'device_hardware' => $result['hardware'],
                         'device_os'       => $config['os'][$result['os']]['text'],
                         'version'         => $result['version'],
@@ -257,7 +257,7 @@ if (isset($_REQUEST['search'])) {
                         'hostname'        => $result['hostname'],
                         'device_id'       => $result['device_id'],
                         'colours'         => $highlight_colour,
-                        'device_image'    => getImageSrc($result),
+                        'device_image'    => getIcon($result),
                         'device_hardware' => $result['hardware'],
                         'device_os'       => $config['os'][$result['os']]['text'],
                         'version'         => $result['version'],

html/images/logos/infoblox.svg

@@ -0,0 +1 @@
+<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="792" height="213" viewBox="0 0 792 213"><path fill="#010101" d="M116.5 94.4v74.2H98.3V99.4c0-6.6-1.2-11.5-3.6-14.6-2.4-3.2-6.1-4.7-11.2-4.7-3.9 0-8 1.1-12.2 3.3-4.2 2.2-8.5 5.5-12.8 10v75.3H40.6V66.4h16.6v13.7c6-5.4 11.5-9.2 16.5-11.5 5-2.3 10.2-3.5 15.5-3.5 8.6 0 15.4 2.6 20.2 7.7 4.7 5 7.1 12.3 7.1 21.6M175.7 27.5v15c-4.3-.3-6-.5-7.5-.6-1.5-.2-2.9-.2-4-.2-4.2 0-7.1 1-8.9 2.9-1.8 1.9-2.7 5.2-2.7 9.7v12.1H175v15.3h-22.3v87h-18V51.8c0-8.4 2.2-14.7 6.6-19.1 4.4-4.4 10.8-6.6 19.2-6.6 1.7 0 3.7.1 5.9.4 2.1.1 4.5.5 9.3 1M221.4 64.6c13.3 0 23.7 4.5 31.1 13.6 7.4 9.1 11.1 21.8 11.1 38.2 0 16.4-3.7 29.2-11.1 38.3-7.4 9.1-17.7 13.7-31.1 13.7-13.3 0-23.7-4.6-31.2-13.7-7.4-9.1-11.2-21.9-11.2-38.3s3.7-29.1 11.2-38.2c7.5-9.1 17.9-13.6 31.2-13.6m0 15.7c-7.8 0-13.7 3.1-17.7 9.2s-6 15.1-6 27c0 12 2 21 6 27.2 4 6.2 9.9 9.2 17.7 9.2 7.7 0 13.6-3.1 17.6-9.2 4-6.2 6.1-15.2 6.1-27 0-11.9-2-21-6-27.1-4-6.3-9.9-9.3-17.7-9.3M380.5 26.3h17.9v142.4h-17.9zM4.2 26.3h17.9v142.4H4.2zM298.1 168.7v-11.1c2.9 3.2 6.1 5.7 9.6 7.4 4.4 2.2 9.4 3.3 15 3.3 12.6 0 22.4-4.6 29.4-13.8 7-9.2 10.6-22.1 10.6-38.6 0-15.7-3.6-28.1-10.9-37.3-7.3-9.2-17-13.8-29.3-13.8-5 0-9.5 1.1-13.7 3.2-4.1 2.1-7.7 5.2-10.8 9.3v-51h-17.9v142.4h18zm39.8-24.8c-4.2 6.2-10.2 9.3-18 9.3-4.1 0-7.9-1-11.5-3.1-3.6-2.1-7.1-5.2-10.4-9.3V91.9c3.3-4 6.7-7.1 10.2-9.1 3.5-2 7.2-3 11-3 8.2 0 14.3 3.2 18.6 9.5 4.2 6.4 6.3 15.6 6.3 27.8.1 11.7-2 20.5-6.2 26.8M458 64.6c13.3 0 23.7 4.5 31 13.6 7.4 9.1 11.1 21.8 11.1 38.2 0 16.4-3.7 29.2-11.1 38.3-7.4 9.1-17.7 13.7-31 13.7s-23.7-4.6-31.1-13.7c-7.4-9.1-11.2-21.9-11.2-38.3s3.7-29.1 11.2-38.2c7.4-9.1 17.7-13.6 31.1-13.6m0 15.7c-7.8 0-13.7 3.1-17.7 9.2s-6 15.1-6 27c0 12 2 21 6 27.2 4 6.2 9.9 9.2 17.7 9.2 7.7 0 13.6-3.1 17.6-9.2 4.1-6.2 6.1-15.2 6.1-27 0-11.9-2-21-6-27.1-4-6.3-10-9.3-17.7-9.3M506.1 64.6h20.7l18.9 34.3 19.1-34.3h19.6l-28.7 49.2 32.4 54.2h-20.9l-21.9-40.3-22.1 40.3h-19.8l32.2-54.2z"/><path fill="#9CCE6F" d="M648 95.4l-30.6-23c-.9-.7-1.4-1.5-1.4-2.3 0-.8.5-1.7 1.4-2.3l30.6-23c2.3-1.8 6.4-1.8 8.8 0l30.6 23c.9.7 1.4 1.5 1.4 2.3 0 .8-.5 1.7-1.4 2.3l-30.6 23c-2.3 1.7-6.4 1.7-8.8 0"/><path fill="#5ECDE2" d="M648 169.6l-30.6-23c-.9-.7-1.4-1.5-1.4-2.3 0-.8.5-1.7 1.4-2.3l30.6-23c2.3-1.8 6.4-1.8 8.8 0l30.6 23c.9.7 1.4 1.5 1.4 2.3 0 .8-.5 1.7-1.4 2.3l-30.6 23c-2.3 1.8-6.4 1.8-8.8 0"/><path fill="#F4EB5A" d="M697.5 58.4l-30.6-23c-.9-.7-1.4-1.5-1.4-2.4 0-.8.5-1.6 1.4-2.3l30.6-23c2.4-1.8 6.5-1.8 8.8 0l30.6 23c.9.7 1.4 1.5 1.4 2.3 0 .8-.5 1.7-1.4 2.4l-30.6 23c-2.3 1.8-6.4 1.8-8.8 0"/><path fill="#4BC5B9" d="M697.5 132.7l-30.6-23c-.9-.7-1.4-1.5-1.4-2.3 0-.8.5-1.7 1.4-2.3l30.6-23c2.4-1.8 6.5-1.8 8.8 0l30.6 23c.9.7 1.4 1.5 1.4 2.3 0 .8-.5 1.7-1.4 2.3l-30.6 23c-2.3 1.7-6.4 1.7-8.8 0"/><path fill="#0081C3" d="M697.5 208.2l-30.6-23c-.9-.7-1.4-1.5-1.4-2.4 0-.8.5-1.7 1.4-2.3l30.6-23c2.4-1.8 6.5-1.8 8.8 0l30.6 23c.9.7 1.4 1.5 1.4 2.3 0 .8-.5 1.7-1.4 2.4l-30.6 23c-2.3 1.8-6.4 1.8-8.8 0"/><path fill="#71C14E" d="M747 95.4l-30.6-23c-.9-.7-1.4-1.5-1.4-2.3 0-.8.5-1.7 1.4-2.3l30.6-23c2.3-1.8 6.4-1.8 8.8 0l30.6 23c.9.7 1.4 1.5 1.4 2.3 0 .8-.5 1.7-1.4 2.3l-30.6 23c-2.3 1.7-6.5 1.7-8.8 0"/><path fill="#009CD8" d="M747 169.6l-30.6-23c-.9-.7-1.4-1.5-1.4-2.3 0-.8.5-1.7 1.4-2.3l30.6-23c2.3-1.8 6.4-1.8 8.8 0l30.6 23c.9.7 1.4 1.5 1.4 2.3 0 .8-.5 1.7-1.4 2.3l-30.6 23c-2.3 1.8-6.5 1.8-8.8 0"/></svg>

html/includes/common/availability-map.inc.php

@@ -229,7 +229,7 @@ if (defined('SHOW_SETTINGS')) {
 
             if ($config['webui']['availability_map_compact'] == 0) {
                 if ($directpage == "yes") {
-                    $deviceIcon = getImage($device);
+                    $deviceIcon = getIconTag($device);
                     $temp_output[] = '
                     <a href="' .generate_device_url($device). '" title="' . $device['hostname'] . " - " . formatUptime($device['uptime']) . '">
                     <div class="device-availability ' . $deviceState . '" style="width:' . $config['webui']['availability_map_box_size'] . 'px;">
@@ -278,7 +278,7 @@ if (defined('SHOW_SETTINGS')) {
 
                 if ($config['webui']['availability_map_compact'] == 0) {
                     if ($directpage == "yes") {
-                        $deviceIcon = getImage($service);
+                        $deviceIcon = getIconTag($service);
                         $temp_output[] = '
                         <a href="' . generate_url(array('page' => 'device', 'tab' => 'services', 'device' => $service['device_id'])) . '" title="' . $service['hostname'] . " - " . $service['service_type'] . " - " . $service['service_desc'] . '">
                             <div class="service-availability ' . $serviceState . '" style="width:' . $config['webui']['availability_map_box_size'] . 'px;">

html/includes/common/worldmap.inc.php

@@ -185,7 +185,7 @@ var greenMarker = L.AwesomeMarkers.icon({
                 $icon = 'redMarker';
                 $z_offset = 10000;  // move marker to foreground
             }
-            $temp_output .= "var title = '<a href=\"" . generate_device_url($map_devices) . "\"><img src=\"".getImageSrc($map_devices)."\" width=\"32\" height=\"32\" alt=\"\"> ".$map_devices['hostname']."</a>';
+            $temp_output .= "var title = '<a href=\"" . generate_device_url($map_devices) . "\"><img src=\"".getIcon($map_devices)."\" width=\"32\" height=\"32\" alt=\"\"> ".$map_devices['hostname']."</a>';
 var tooltip = '".$map_devices['hostname']."';
 var marker = L.marker(new L.LatLng(".$map_devices['lat'].", ".$map_devices['lng']."), {title: tooltip, icon: $icon, zIndexOffset: $z_offset});
 marker.bindPopup(title);

html/includes/device-header.inc.php

@@ -17,14 +17,11 @@ if ($device['disabled'] == '1') {
     $class = 'alert-info';
 }
 
-$type = strtolower($device['os']);
-
-$image = getImage($device);
 $host_id = dbFetchCell("SELECT `device_id` FROM `vminfo` WHERE `vmwVmDisplayName` = ? OR `vmwVmDisplayName` = ?", array($device['hostname'],$device['hostname'].'.'.$config['mydomain']));
 
 echo '
             <tr bgcolor="'.$device_colour.'" class="alert '.$class.'">
-             <td><span class="device-icon-48h">'.$image.'</span></td>
+             <td><span class="device-icon-48h">'.getLogoTag($device).'</span></td>
              <td>';
 if ($host_id > 0) {
     echo '

html/includes/table/devices.inc.php

@@ -153,7 +153,7 @@ foreach (dbFetchRows($sql, $param) as $device) {
 
     $type = strtolower($device['os']);
 
-    $image = getImage($device);
+    $image = getIconTag($device);
 
     if ($device['os'] == 'ios') {
         formatCiscoHardware($device, true);

includes/functions.php

@@ -212,45 +212,79 @@ function interface_errors($rrd_file, $period = '-1d')
     return $errors;
 }
 
-function getImage($device)
+/**
+ * @param $device
+ * @return string the logo image path for this device. Images are often wide, not square.
+ */
+function getLogo($device)
 {
-    $title = $device['icon'] ? str_replace(array('.svg', '.png'), '', $device['icon']) : $device['os'];
-    return '<img src="' . getImageSrc($device) . '" title="' . $title . '"/>';
+    $img = getImageName($device, true, 'images/logos/');
+    if (!starts_with($img, 'generic')) {
+        return 'images/logos/' . $img;
+    }
+
+    return getIcon($device);
 }
 
-function getImageSrc($device)
+/**
+ * @param $device
+ * @return string an image tag with the logo for this device. Images are often wide, not square.
+ */
+function getLogoTag($device)
+{
+    return '<img src="' . getLogo($device) . '" title="' . getImageTitle($device) . '"/>';
+}
+
+/**
+ * @param $device
+ * @return string the path to the icon image for this device.  Close to square.
+ */
+function getIcon($device)
 {
     return 'images/os/' . getImageName($device);
 }
 
-function getImageName($device, $use_database = true)
+/**
+ * @param $device
+ * @return string an image tag with the icon for this device.  Close to square.
+ */
+function getIconTag($device)
+{
+    return '<img src="' . getIcon($device) . '" title="' . getImageTitle($device) . '"/>';
+}
+
+function getImageTitle($device) {
+    return $device['icon'] ? str_replace(array('.svg', '.png'), '', $device['icon']) : $device['os'];
+}
+
+function getImageName($device, $use_database = true, $dir = 'images/os/')
 {
     global $config;
 
-    $device['os'] = strtolower($device['os']);
+    $os = strtolower($device['os']);
 
     // fetch from the database
-    if ($use_database && is_file($config['html_dir'] . '/images/os/' . $device['icon'])) {
+    if ($use_database && is_file($config['html_dir'] . "/$dir" . $device['icon'])) {
         return $device['icon'];
     }
 
     // linux specific handling, distro icons
     $distro = null;
-    if ($device['os'] == "linux") {
+    if ($os == "linux") {
         $features = strtolower(trim($device['features']));
         list($distro) = explode(" ", $features);
     }
 
     $possibilities = array(
         $distro,
-        $config['os'][$device['os']]['icon'],
-        $device['os'],
+        $config['os'][$os]['icon'],
+        $os,
     );
 
     foreach ($possibilities as $basename) {
         foreach (array('.svg', '.png') as $ext) {
             $name = $basename . $ext;
-            if (is_file($config['html_dir'] . '/images/os/' . $name)) {
+            if (is_file($config['html_dir'] . "/$dir" . $name)) {
                 return $name;
             }
         }