[blockly] Add block to get hue, saturation and brightness from Color …

…Item (#2210) Small extension to retrieve Hue, Saturation or Brightness from a color Item. Signed-off-by: Stefan Höhn <mail@stefanhoehn.com>
openhab · Dec 10, 2023 · 8cc9e4b · 8cc9e4b
1 parent 7ca7e84
commit 8cc9e4b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-color.js b/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-color.js
@@ -5,6 +5,7 @@
 
 import Blockly from 'blockly'
 import { javascriptGenerator } from 'blockly/javascript'
+import { blockGetCheckedInputType } from '@/assets/definitions/blockly/utils.js'
 
 export default function (f7, isGraalJs) {
   /*
@@ -35,6 +36,48 @@ export default function (f7, isGraalJs) {
     return [code, 0]
   }
 
+  Blockly.Blocks['oh_color_item'] = {
+    init: function () {
+      const dropDown = new Blockly.FieldDropdown([
+        ['hue', 'Hue'],
+        ['saturation', 'Saturation'],
+        ['brightness', 'Brightness']
+      ])
+      this.appendValueInput('item')
+        .setCheck(['oh_itemtype', 'oh_item'])
+        .appendField(dropDown, 'attributeName')
+        .appendField(' of ')
+
+      this.setInputsInline(false)
+      let thisBlock = this
+      this.setTooltip(function () {
+        const operand = thisBlock.getFieldValue('attributeName')
+        switch (operand) {
+          case 'Hue': return 'Return Hue of the color item'
+          case 'Saturation': return 'Return Saturation of a color item'
+          case 'Brightness': return 'Return Brightness of a color item'
+        }
+      })
+      this.setHelpUrl('https://www.openhab.org/docs/configuration/blockly/rules-blockly-standard-ext.html#item-color')
+      this.setOutput(true, 'Number')
+      this.setColour('%{BKY_COLOUR_HUE}')
+    }
+  }
+
+  javascriptGenerator['oh_color_item'] = function (block) {
+    const theItem = javascriptGenerator.valueToCode(block, 'item', javascriptGenerator.ORDER_ATOMIC)
+    const inputType = blockGetCheckedInputType(block, 'item')
+    let attributeName = block.getFieldValue('attributeName')
+
+    let code = ''
+    if (isGraalJs) {
+      code = (inputType === 'oh_item') ? `items.getItem(${theItem}).rawState.get${attributeName}()` : `${theItem}.rawState.get${attributeName}()`
+    } else {
+      code = (inputType === 'oh_item') ? `itemRegistry.getItem(${theItem}).getRawState().get${attributeName}()` : `${theItem}.getRawState().get${attributeName}()`
+    }
+    return [code, 0]
+  }
+
   /*
   * converts rgb to hsb (thanks to https://www.30secondsofcode.org/js/s/rgb-to-hsb)
   */

diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/blockly-editor.vue b/bundles/org.openhab.ui/web/src/components/config/controls/blockly-editor.vue
@@ -394,6 +394,15 @@
             </shadow>
           </value>
         </block>
+        <block type="oh_color_item">
+          <value name="item">
+            <shadow type="oh_getitem">
+              <value name="itemName">
+                <shadow type="oh_item" />
+              </value>
+            </shadow>
+          </value>
+        </block>
       </category>
 
       <category name="openHAB" colour="0" :expanded="$f7.device.desktop">