oh-icon component improvements, Iconify icon support (#1149)

This allows the oh-icon to display both from more sources than the OH icon servlet; bundled Framework7/Material icons can also be displayed by this component (use `f7:` or `material:` prefixes). Specifying no prefix will assume an OH icon for backward compatibility. This also introduces Iconify (https://icon-sets.iconify.design) as an icon source, allowing access to 100,000+ icons from various icon sets, to display them in widgets like cards or floorplan markers. The Iconify option requires Internet connectivity on the client to access the external API but the underlying library will cache the icons in local/session storage to limit the requests and speed up the rendering. Update/fix documentation and plan marker default icon registration. Signed-off-by: Yannick Schaus <[email protected]>
openhab · Aug 29, 2021 · 01cee7b · 01cee7b
1 parent f3fe725
commit 01cee7b
Show file tree

Hide file tree

Showing 33 changed files with 23,077 additions and 83 deletions.
diff --git a/bundles/org.openhab.ui/doc/components/oh-cell.md b/bundles/org.openhab.ui/doc/components/oh-cell.md
@@ -51,7 +51,7 @@ A regular or expandable cell
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="color" label="Highlight Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-colorpicker-cell.md b/bundles/org.openhab.ui/doc/components/oh-colorpicker-cell.md
@@ -51,7 +51,7 @@ A cell expanding to a color picker
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="color" label="Highlight Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-colorpicker-item.md b/bundles/org.openhab.ui/doc/components/oh-colorpicker-item.md
@@ -46,7 +46,7 @@ Display a color picker in a list
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="iconColor" label="Icon Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-icon.md b/bundles/org.openhab.ui/doc/components/oh-icon.md
@@ -30,49 +30,47 @@ Display an openHAB icon
 <PropGroup label="General">
 <PropBlock type="BOOLEAN" name="icon" label="Icon">
   <PropDescription>
-    <a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>
+    <code>oh:iconName</code> or <code>iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
-<PropBlock type="TEXT" name="width" label="Width">
-</PropBlock>
-<PropBlock type="TEXT" name="inputmode" label="Input Mode">
+<PropBlock type="TEXT" name="width" label="Width" context="item">
   <PropDescription>
-    Type of data that might be entered: see <a class="external text-color-blue" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">MDN docs</a>
+    Width of the icon in pixels
   </PropDescription>
 </PropBlock>
-<PropBlock type="TEXT" name="placeholder" label="Placeholder">
+<PropBlock type="TEXT" name="height" label="Height" context="item">
   <PropDescription>
-    Placeholder text
+    Height of the icon in pixels
   </PropDescription>
 </PropBlock>
-<PropBlock type="BOOLEAN" name="clearButton" label="Clear button">
+<PropBlock type="TEXT" name="color" label="Color">
   <PropDescription>
-    Display input clear button
+    Color of the icon (for F7/Material icons, a <a class="external text-color-blue" target="_blank" href="https://v5.framework7.io/docs/color-themes.html#colors">Framework7 color theme</a>, for Iconify icons, a CSS color). Not applicable to OH icons.
   </PropDescription>
 </PropBlock>
-<PropBlock type="BOOLEAN" name="outline" label="Outline">
+<PropBlock type="BOOLEAN" name="inline" label="Inline">
   <PropDescription>
-    Makes input outline
+    Display the icon inline (for Iconify icons only)
   </PropDescription>
 </PropBlock>
-<PropBlock type="BOOLEAN" name="required" label="Required">
+<PropBlock type="TEXT" name="rotate" label="Rotate">
   <PropDescription>
-    Display an error message if left empty
+    Rotate the icon (for Iconify icons only; use a CSS value e.g. 90deg)
   </PropDescription>
 </PropBlock>
-<PropBlock type="TEXT" name="item" label="Item">
+<PropBlock type="BOOLEAN" name="horizontalFlip" label="Horizontal Flip">
   <PropDescription>
-    Link the input value to the state of this item
+    Flips the icon horizontally (for Iconify icons only)
   </PropDescription>
 </PropBlock>
-<PropBlock type="TEXT" name="value" label="Value">
+<PropBlock type="BOOLEAN" name="verticalFlip" label="Vertical Flip">
   <PropDescription>
-    Value when not found in item state or variable
+    Flips the icon vertically (for Iconify icons only)
   </PropDescription>
 </PropBlock>
-<PropBlock type="TEXT" name="variable" label="Variable">
+<PropBlock type="BOOLEAN" name="state" label="State">
   <PropDescription>
-    Name of the variable to set when the input changes
+    State of the icon (usually the state of an item) to use dynamic icons
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-input-item.md b/bundles/org.openhab.ui/doc/components/oh-input-item.md
@@ -46,7 +46,7 @@ Display an input field in a list
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="iconColor" label="Icon Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-knob-cell.md b/bundles/org.openhab.ui/doc/components/oh-knob-cell.md
@@ -51,7 +51,7 @@ A cell expanding to a knob control
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="color" label="Highlight Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-label-card.md b/bundles/org.openhab.ui/doc/components/oh-label-card.md
@@ -237,7 +237,7 @@ Display the state of an item in a card
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="iconColor" label="Icon Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-label-cell.md b/bundles/org.openhab.ui/doc/components/oh-label-cell.md
@@ -51,7 +51,7 @@ A cell with a big label to show a short item state value
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="color" label="Highlight Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-label-item.md b/bundles/org.openhab.ui/doc/components/oh-label-item.md
@@ -57,7 +57,7 @@ Display the state of an item in a list
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="iconColor" label="Icon Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-list-item.md b/bundles/org.openhab.ui/doc/components/oh-list-item.md
@@ -46,7 +46,7 @@ A list item
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="iconColor" label="Icon Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-plan-marker.md b/bundles/org.openhab.ui/doc/components/oh-plan-marker.md
@@ -51,7 +51,7 @@ A marker on a floor plan
 <PropGroup name="icon" label="Icon">
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="BOOLEAN" name="iconUseState" label="Icon depends on state">
@@ -76,7 +76,7 @@ A marker on a floor plan
 </PropBlock>
 <PropBlock type="TEXT" name="iconColor" label="Icon Color">
   <PropDescription>
-    Color of the icon (for Framework7/Material icons); use expression for dynamic colors
+    Color of the icon (for Framework7/Material/certain Iconify icons); use expression for dynamic colors
   </PropDescription>
 </PropBlock>
 </PropGroup>

diff --git a/bundles/org.openhab.ui/doc/components/oh-player-item.md b/bundles/org.openhab.ui/doc/components/oh-player-item.md
@@ -46,7 +46,7 @@ Display player controls in a list
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="iconColor" label="Icon Color">

diff --git a/bundles/org.openhab.ui/doc/components/oh-rollershutter-cell.md b/bundles/org.openhab.ui/doc/components/oh-rollershutter-cell.md
@@ -51,7 +51,7 @@ A cell expanding to rollershutter controls
 </PropBlock>
 <PropBlock type="TEXT" name="icon" label="Icon">
   <PropDescription>
-    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>) or <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>)
+    Use <code>oh:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://www.openhab.org/link/icons">openHAB icon</a>), <code>f7:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://framework7.io/icons/">Framework7 icon</a>), <code>material:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://jossef.github.io/material-design-icons-iconfont/">Material icon</a>) or <code>iconify:iconSet:iconName</code> (<a class="external text-color-blue" target="_blank" href="https://icon-sets.iconify.design">Iconify icon</a>, requires being online if not in cache)
   </PropDescription>
 </PropBlock>
 <PropBlock type="TEXT" name="color" label="Highlight Color">