feat: add sheet icons (#7)

* fix: logic for fill colours when no bg img

* feat: add sheet icons

* docs: new version

* docs: update screenshot

* fix: remove console log

* fix: remove "app" icons

* docs: screenshot update

README.md

@@ -1,8 +1,13 @@
 # Qlik Icon Generator (qs-icon-generator)
 
-> **Warning**
+> **Note**
 > This "mashup" can only be deployed onto Qlik Sense client-managed. If you wish to use it with Qlik Cloud, you can use a version hosted [here](https://withdave.github.io/qlik-icon-generator/) or host it yourself.
 
+This script helps you to produce standard, consistent icons for use with Qlik Sense Enterprise client-managed and Qlik Cloud. It uses some simple background images and text which help make it visually easier for users to access their frequent apps.
+
+An example using the provided templates for sheet icons:
+![Default configuration, with a green logo generated](screenshot_sheets.png)
+
 ## Installation
 
 To install:
@@ -23,10 +28,13 @@ Several templates are included by default:
 * qlik_cloud_white - uses a white background image with grey app name text, sized for the card and list views in the Qlik Cloud hub
 * qlik_green - uses a partially green background image with white app name text
 * qlik_white - uses a fully white background image with dark text
+* qlik_app_green - uses a green background with white text (to scale to 140x90px)
+* qlik_app_white - uses a white background with grey text (to scale to 140x90px)
 
 If you wish to change the background of an existing or new template:
 * Suitable format - ideally PNG file, but can be JPG, JPEG or GIF
-* Correct size or aspect, which differs based on your product version
+* Correct size for app icons, which differs based on your product version
   * Qlik Sense client-managed: 164x108 pixels, which is acceptable for both the hub and in-app aspect ratios
-  * Qlik Cloud: 288x180, which is acceptable for both views in the hub, and in-app aspect ratios
+  * Qlik Cloud: 288x180, which is acceptable for the different aspect rations found in the hub home, hub catalog (both grid and list) in-app aspect ratios
   * If you have both products, use the Qlik Cloud sizing
+* Correct size for sheet icons: 140x90 pixels (except when in edit mode, when this is different)

src/qs-icon-generator/config.json

@@ -29,7 +29,7 @@
             "background": {
                 "image": "qlik_cloud_grey.png",
                 "imageAlpha": 1,
-                "colour": "#009844",
+                "colour": "#585a5f",
                 "canvasX": 288,
                 "canvasY": 180
             },
@@ -124,6 +124,81 @@
                 "locX": 10,
                 "locY": 96
             }
+        },
+        "qlik_sheet_green": {
+            "background": {
+                "image": "",
+                "imageAlpha": 1,
+                "colour": "#009845",
+                "canvasX": 280,
+                "canvasY": 180
+            },
+            "appName": {
+                "font": "Sans-Serif",
+                "fontSize": 28,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 15,
+                "locY": 45
+            },
+            "appType": {
+                "font": "Sans-Serif",
+                "fontSize": 14,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 15,
+                "locY": 160
+            }
+        },
+        "qlik_sheet_grey": {
+            "background": {
+                "image": "",
+                "imageAlpha": 1,
+                "colour": "#585a5f",
+                "canvasX": 280,
+                "canvasY": 180
+            },
+            "appName": {
+                "font": "Sans-Serif",
+                "fontSize": 28,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 15,
+                "locY": 45
+            },
+            "appType": {
+                "font": "Sans-Serif",
+                "fontSize": 14,
+                "colour": "#fff",
+                "align": "left",
+                "locX": 15,
+                "locY": 160
+            }
+        },
+        "qlik_sheet_white": {
+            "background": {
+                "image": "",
+                "imageAlpha": 1,
+                "colour": "#fff",
+                "canvasX": 280,
+                "canvasY": 180
+            },
+            "appName": {
+                "font": "Sans-Serif",
+                "fontSize": 28,
+                "colour": "#009844",
+                "align": "left",
+                "locX": 15,
+                "locY": 45
+            },
+            "appType": {
+                "font": "Sans-Serif",
+                "fontSize": 14,
+                "colour": "#009844",
+                "align": "left",
+                "locX": 15,
+                "locY": 160
+            }
         }
     }
 }

src/qs-icon-generator/index.html

@@ -37,8 +37,8 @@
   <main role="main" class="container">
 
     <div class="qsi-header">
-      <h1>Qlik Icon Generator v3.0.0</h1>
-      <p class="lead">This tool is designed to help you produce standardised, consistent app icons.</p>
+      <h1>Qlik Icon Generator v3.1.0</h1>
+      <p class="lead">This tool is designed to help you produce standardised, consistent icons.</p>
     </div>
 
     <div id="qsi-error" class="alert alert-danger" role="alert">
@@ -51,11 +51,11 @@ <h1>Qlik Icon Generator v3.0.0</h1>
         <form id="qsi-config">
           <h3>Icon Config</h3>
           <div class="qsi-formgroup">
-            <label for="qsi-appname">Application Name</label>
+            <label for="qsi-appname">Icon Title</label>
             <input type="text" name="qsi-appname" id="qsi-appname" class="form-control" />
           </div>
           <div class="qsi-formgroup">
-            <label for="qsi-apptype">Application Type</label>
+            <label for="qsi-apptype">Icon Subtitle</label>
             <select name="qsi-apptype" id="qsi-apptype" class="form-control">
               <option value="">N/A (blank)</option>
               <option value="Dashboard">Dashboard</option>

src/qs-icon-generator/js/script.js

@@ -59,9 +59,7 @@
         // Determine which config has been selected 
         // There's no error checking so if the config is invalid it'll error or look odd
         var iconTemplate = $("#qsi-template").val();
-
-        console.log(templateList.templates[iconTemplate].appName);
-
+
         // Get app icon config from the form
         var appName = $("#qsi-appname").val();
         var fileName = "AppIcon_" + appName.replace(/[^a-zA-Z0-9]+/g, "");
@@ -72,7 +70,11 @@
         var backgroundAlpha = templateList.templates[iconTemplate].background.imageAlpha;
         var backgroundColour = templateList.templates[iconTemplate].background.colour;
         var backgroundImg = new Image();
-        backgroundImg.src = "backgrounds/" + templateList.templates[iconTemplate].background.image;
+        if (templateList.templates[iconTemplate].background.image.length > 0) {
+            backgroundImg.src = "backgrounds/" + templateList.templates[iconTemplate].background.image;
+        } else {
+            backgroundImg.src = "backgrounds/empty.png";
+        }
 
         // App Name
         var appNameFont = templateList.templates[iconTemplate].appName.font;
@@ -108,17 +110,19 @@
 
         // Prep for background image and load it in
         backgroundImg.onload = function () {
-
+            
             // Work out the aspect ratio of the canvas and draw the background image this size in the centre
             var hRatio = canvas.width / backgroundImg.width;
             var vRatio = canvas.height / backgroundImg.height;
             var ratio = Math.min(hRatio, vRatio);
             var centreShift_x = (canvas.width - backgroundImg.width * ratio) / 2;
             var centreShift_y = (canvas.height - backgroundImg.height * ratio) / 2;
-            context.clearRect(0, 0, canvas.width, canvas.height);
             context.globalAlpha = backgroundAlpha;
-            context.drawImage(backgroundImg, 0, 0, backgroundImg.width, backgroundImg.height,
-                centreShift_x, centreShift_y, backgroundImg.width * ratio, backgroundImg.height * ratio);
+
+            if (templateList.templates[iconTemplate].background.image.length > 0) {
+                context.drawImage(backgroundImg, 0, 0, backgroundImg.width, backgroundImg.height,
+                    centreShift_x, centreShift_y, backgroundImg.width * ratio, backgroundImg.height * ratio);
+            }
             context.globalAlpha = 1;
 
             // Overlay the text for App Name