From e88457abe5934f557bdb99d2b221c2fba835d3a9 Mon Sep 17 00:00:00 2001
From: Kazuki Nakanishi <kazuki.nakanishi.mg@hitachi.com>
Date: Tue, 1 Aug 2017 14:31:49 +0900
Subject: [PATCH] Created Design: Changeable node icon (markdown)

---
 Design:-Changeable-node-icon.md | 91 +++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 Design:-Changeable-node-icon.md

diff --git a/Design:-Changeable-node-icon.md b/Design:-Changeable-node-icon.md
new file mode 100644
index 0000000..4f5fd65
--- /dev/null
+++ b/Design:-Changeable-node-icon.md
@@ -0,0 +1,91 @@
+User can deploy multiple nodes with a same type on a workspace.  Although all of those nodes show a same icon, a user may want to change an icon for each node in some cases.
+This is the design note to realize the above requirement.
+
+## Use Cases
+### Use case 1: Change the icon of mqtt node to the picture of an actual device so that a user can recognize which device sends data to the mqtt node at a glance.
+- similar nodes: http, websocket, tcp/udp
+
+**Before**
+
+<img src="https://github.com/Kazuki-Nakanishi/node-red/wiki/changeable_node_icon/mqtt_before.png" width=80% height=80% alt="mqtt before">
+
+
+**After** (Although this image uses the icons of Font Awesome, I want to use a picture of actual devices.)
+
+<img src="https://github.com/Kazuki-Nakanishi/node-red/wiki/changeable_node_icon/mqtt_after.png" width=80% height=80% alt="mqtt after">
+
+### Use case 2: Use icons with different colors for comment nodes to express which one is important and which one is not.
+
+**Before**
+
+<img src="https://github.com/Kazuki-Nakanishi/node-red/wiki/changeable_node_icon/comment_before.png" width=60% height=60% alt="comment before">
+
+**After** 
+
+<img src="https://github.com/Kazuki-Nakanishi/node-red/wiki/changeable_node_icon/comment_after.png" width=60% height=60% alt="comment after">
+
+
+### Use case 3: The icons of all function nodes on a workspace are same although each function node does a different thing.  A user can choose an appropriate icon for each node with this feature.
+- similar nodes: template, subflow
+
+## Design (How to install/specify icon files)
+There are two proposals of how to install/specify icon files.
+
+### Proposal 1: Create npm packages to install icon files
+Necessary actions to realize this proposal:
+- Contributor
+  - creates an npm package that contains (only) icon files.
+  - publishes the npm package in the same way of node package.
+- Node-RED user
+  - installs an npm package that contains icon files.
+  - chooses an icon with the interface below on an edit node dialog.
+    - Proposal 1a: **"Manage palette" interface**
+
+    <img src="https://github.com/Kazuki-Nakanishi/node-red/wiki/changeable_node_icon/select_icon_1.png" width=70% height=70% alt="select icon">
+
+    - Proposal 1b: **Icon tile**
+
+    <img src="https://github.com/Kazuki-Nakanishi/node-red/wiki/changeable_node_icon/select_icon_2.png" width=30% height=30% alt="select icon">
+
+pros/cons
+- pros: A user can install icon files in the same way of node installation.
+- cons: A lot of npm packages that contain only icon files may be published.
+
+
+### Proposal 2: Specify URL of icon file
+Necessary actions to realize this proposal:
+- Contributor
+  - deploys icon files somewhere on the Internet.
+- Node-RED user
+  - specifies **URL** of an icon file on an edit node dialog.
+
+pros/cons
+- pros: A user needs to do nothing for preparation.
+- cons: Node-RED server must be able to connect to the Internet.
+
+## Design (UI)
+### Where does a user specify an icon?
+1. Add an input element in a "port labels" tab, and change the name of "port labels" to "appearances".
+  - pros: Keep the number of tabs on a node setting dialog.
+  - cons: The current UI of "port labels" tab needs to be changed.
+
+<img src="https://github.com/Kazuki-Nakanishi/node-red/wiki/changeable_node_icon/node_properties_1.png" width=70% height=70% alt="UI design 1">
+
+2. Add a new "appearances" tab side by side with "node properties" and "port labels".
+  - pros: This feature does not affect the current "port labels" tab.
+  - cons: A number of tabs becomes larger.
+
+<img src="https://github.com/Kazuki-Nakanishi/node-red/wiki/changeable_node_icon/node_properties_2.png" width=70% height=70% alt="UI design 2">
+
+## Design (miscellaneous)
+- Naming rule for npm packages that contain only icon files
+  - node-red-contrib-*
+  - node-red-icon-contrib-*
+- Add "enableIconChange" parameter in settings.js to enable/disable this feature.
+  - Default value is true.
+
+## Candidates of enhancement
+- Changeable node color
+- Show a node type:
+  - during mouse over
+  - in a small icon or string