From e54a8ae92be2ed9cb2bd01819e2eb1df2e21f166 Mon Sep 17 00:00:00 2001
From: Juan Cruz Viotti <jv@jviotti.com>
Date: Tue, 17 Oct 2017 10:47:14 +0100
Subject: [PATCH] fix(GUI): improve usbboot USB device branding (#1780)

- Add a loading SVG icon while usbboot is running
- Make the device description more user friendly

Signed-off-by: Juan Cruz Viotti <jv@jviotti.com>
---
 lib/gui/assets/loading.svg                    | 37 +++++++++++++++++++
 .../assets/{device-types => }/raspberrypi.svg |  0
 .../templates/drive-selector-modal.tpl.html   |  2 +-
 lib/shared/sdk/usbboot/index.js               |  6 +--
 lib/shared/sdk/usbboot/usb.js                 | 26 -------------
 5 files changed, 41 insertions(+), 30 deletions(-)
 create mode 100644 lib/gui/assets/loading.svg
 rename lib/gui/assets/{device-types => }/raspberrypi.svg (100%)

diff --git a/lib/gui/assets/loading.svg b/lib/gui/assets/loading.svg
new file mode 100644
index 00000000..0e2dbcb4
--- /dev/null
+++ b/lib/gui/assets/loading.svg
@@ -0,0 +1,37 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="44" height="44" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#5793db">
+    <g fill="none" fill-rule="evenodd" stroke-width="2">
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                begin="0s" dur="1.8s"
+                values="1; 20"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.165, 0.84, 0.44, 1"
+                repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                begin="0s" dur="1.8s"
+                values="1; 0"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.3, 0.61, 0.355, 1"
+                repeatCount="indefinite" />
+        </circle>
+        <circle cx="22" cy="22" r="1">
+            <animate attributeName="r"
+                begin="-0.9s" dur="1.8s"
+                values="1; 20"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.165, 0.84, 0.44, 1"
+                repeatCount="indefinite" />
+            <animate attributeName="stroke-opacity"
+                begin="-0.9s" dur="1.8s"
+                values="1; 0"
+                calcMode="spline"
+                keyTimes="0; 1"
+                keySplines="0.3, 0.61, 0.355, 1"
+                repeatCount="indefinite" />
+        </circle>
+    </g>
+</svg>
diff --git a/lib/gui/assets/device-types/raspberrypi.svg b/lib/gui/assets/raspberrypi.svg
similarity index 100%
rename from lib/gui/assets/device-types/raspberrypi.svg
rename to lib/gui/assets/raspberrypi.svg
diff --git a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
index deb52d98..63557206 100644
--- a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
+++ b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
@@ -11,7 +11,7 @@
       ng-click="modal.toggleDrive(drive)">
         <img class="list-group-item-section" alt="Drive device type logo"
           ng-if="drive.icon"
-          ng-src="./assets/device-types/{{drive.icon}}.svg"
+          ng-src="./assets/{{drive.icon}}.svg"
           width="25"
           height="30">
         <div class="list-group-item-section list-group-item-section-expanded">
diff --git a/lib/shared/sdk/usbboot/index.js b/lib/shared/sdk/usbboot/index.js
index 8c243bff..ccfb365b 100644
--- a/lib/shared/sdk/usbboot/index.js
+++ b/lib/shared/sdk/usbboot/index.js
@@ -328,12 +328,14 @@ exports.scan = (options) => {
 
     device.device = idPair
     device.displayName = 'Initializing device'
+    device.description = 'Compute Module'
     device.raw = idPair
     device.size = null
     device.mountpoints = []
     device.protected = false
     device.system = false
     device.disabled = true
+    device.icon = 'loading'
     device.adaptor = exports.name
 
     // We need to open the device in order to access _configDescriptor
@@ -362,9 +364,7 @@ exports.scan = (options) => {
 
     const endpoint = deviceInterface.endpoint(addresses.endpoint)
 
-    return usb.getDeviceName(device).then((deviceName) => {
-      device.description = `${deviceName.manufacturer} ${deviceName.product}`
-    }).then(() => {
+    return Bluebird.try(() => {
       const serialNumberIndex = device.deviceDescriptor.iSerialNumber
       debug(`Serial number index: ${serialNumberIndex}`)
 
diff --git a/lib/shared/sdk/usbboot/usb.js b/lib/shared/sdk/usbboot/usb.js
index 1b35e123..5f09f2a4 100644
--- a/lib/shared/sdk/usbboot/usb.js
+++ b/lib/shared/sdk/usbboot/usb.js
@@ -142,29 +142,3 @@ exports.performControlTransfer = (device, options) => {
     )
   })
 }
-
-/**
- * @summary Get a human friendly name for a USB device
- * @function
- * @public
- *
- * @description
- * This function assumes the device is open.
- *
- * @param {Object} device - usb device
- * @fulfil {String} - device name
- * @returns {Promise}
- *
- * @example
- * usb.getDeviceName({ ... }).then((name) => {
- *   console.log(name)
- * })
- */
-exports.getDeviceName = (device) => {
-  return Bluebird.props({
-    manufacturer: exports.getDeviceStringFromIndex(device, device.deviceDescriptor.iManufacturer),
-    product: exports.getDeviceStringFromIndex(device, device.deviceDescriptor.iProduct)
-  }).tap((properties) => {
-    return `${properties.manufacturer} ${properties.product}`
-  })
-}