frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Destroyed Design: Changeable node icon (markdown)

Kazuki Nakanishi 2017-08-01 16:44:36 +09:00
parent e88457abe5
commit 26c122308d
1 changed files with 0 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
Design:-Changeable-node-icon.md

@ -1,91 +0,0 @@
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