Skip to content

feat: add OID display mode toggle for Blockly editor#2172

Merged
GermanBluefox merged 3 commits intoioBroker:masterfrom
Eistee82:feat/blockly-oid-display-modes
Apr 10, 2026
Merged

feat: add OID display mode toggle for Blockly editor#2172
GermanBluefox merged 3 commits intoioBroker:masterfrom
Eistee82:feat/blockly-oid-display-modes

Conversation

@Eistee82
Copy link
Copy Markdown
Contributor

@Eistee82 Eistee82 commented Apr 10, 2026

Summary

  • Add 4 switchable display modes for OID fields in the Blockly editor: Name (default), Name path (parent names joined with dots), State ID (last segment), Full ID (complete object ID)
  • Add toolbar dropdown button with custom gift-tag SVG icons (blue for name modes, orange for ID modes)
  • Add optional object icon display before OID field text, resolved from the object hierarchy (closest icon wins, adapter icon as fallback)
  • Workspace context menu entries as alternative to toolbar button
  • All labels translated in 11 ioBroker languages
  • Persisted in localStorage, only affects visual display — generated JavaScript code is unchanged

Menu:
image
Namepath:
image
Full ID:
image

Changes

  • src-editor/public/google-blockly/own/field_oid.js — Display mode logic, icon rendering via SVG <image> in Blockly field, async parent object fetching for names and icons
  • src-editor/public/google-blockly/own/blocks_words.js — Translation keys for display mode labels and "Show icon"
  • src-editor/src/Editor.tsx — Toolbar dropdown button with tag icons, divider + checkbox for icon toggle
  • src-editor/src/Components/BlocklyEditor.tsx — Context menu entries via configureContextMenu
  • src-editor/src/Components/BlocklyEditorTS.tsx — Same context menu entries (TS variant)
  • src-editor/src/Components/blockly-plugins/index.ts — FieldOID type definitions
  • src-editor/src/assets/oid-*.svg — 4 custom gift-tag SVG icons
  • src-editor/src/i18n/*.json — "OID display mode" tooltip translation

Test plan

  • Open Blockly editor, place blocks with OID fields
  • Click toolbar tag icon → dropdown shows 4 modes with icons and translated labels
  • Select each mode → OID field text updates accordingly, block resizes correctly
  • Enable "Show icon" checkbox → adapter/device icons appear before text
  • Right-click workspace → context menu shows same 4 modes with checkmark
  • Reload browser → selected mode and icon setting persist
  • Switch to JavaScript view → generated code is unchanged regardless of display mode
  • npm run build passes
  • npm run test — 41 tests pass
  • npm run lint — no new errors

🤖 Generated with Claude Code

Add 4 switchable display modes for OID fields in the Blockly editor:
- Name: show object common.name (default, current behavior)
- Name path: show all parent names joined with dots
- ID: show last segment of object ID
- Full ID: show complete object ID

Features:
- Toolbar dropdown button with custom gift-tag SVG icons
  (blue for name modes, orange for ID modes, filled for path variants)
- Workspace context menu entries as alternative
- Persisted in localStorage across sessions
- Translated labels in all 11 ioBroker languages
- Only affects visual display, not generated JavaScript code

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@Eistee82 Eistee82 force-pushed the feat/blockly-oid-display-modes branch from c82d3d5 to a316ad0 Compare April 10, 2026 09:45
Copy link
Copy Markdown
Contributor

@GermanBluefox GermanBluefox left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@GermanBluefox GermanBluefox merged commit 87f5591 into ioBroker:master Apr 10, 2026
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants