⚙️ Symcon Modul Helfer (Symcon Module Helper)

Deutsch DE

Symcon Modul Helfer

Der Symcon Module Helper ist eine Visual Studio Code Extension für Symcon-Modulentwicklung, die das Erstellen, Testen und Pflegen von form.json-Konfigurationen massiv beschleunigt. Sie bietet: schnelles Einfügen von Formular-Elementen und automatisch generierte JSON-Snippets mit korrekter Syntax, eine Sidebar zur Anzeige und Bearbeitung aller Eigenschaften eines ausgewählten Elements, Unterstützung der Standard-Elementtypen des Symcon PHP-SDK sowie komfortables Handling der Formulardaten (Live-Bearbeitung ohne viel Tipparbeit).

Zusätzlich enthält der Symcon Modul Helfer eine Echtzeit-Vorschau (Live Preview) – Theme, Größe, HTML und Payload werden sofort in einem eingebetteten Webview aktualisiert — inklusive persistenter Preview-Einstellungen pro Workspace, Inline-Patch des Module-HTMLs und sicherer CSP-/Ressourcensteuerung.

Ergänzende Features: Kontextmenü-Erweiterung zum Übersetzten von Texten aus form.json in locale.json, ein Kommando zum Auslesen und Registrieren aller Property-Variablen in der Create()-Methode der module.php, sowie einfache Speicherung und Wiederherstellung von Preview-JSON.

Hauptfunktionen

• Schnelles Einfügen von Symcon Formular-Elementen per Klick
• Automatisch erzeugte, korrekt formatierte JSON-Snippets
• Sidebar-Editor: alle Eigenschaften eines Elements anzeigen & bearbeiten
• Unterstützung aller Standard-Elementtypen des Symcon PHP-SDK
• Live Preview: sofortige Visualisierung von HTML, JSON, Theme und Größe im Webview
• Persistente Preview-Einstellungen (Theme, Breite, Höhe) pro Workspace
• Preview-JSON speichern/laden, live an das iFrame senden (postMessage)
• Kontextmenü zum Übersetzen direkt aus form.json in locale.json
• Kommando zum Extrahieren von Property-Variablen und Registrieren in Create()

Installation

• Verfügbar im Visual Studio Marketplace
• Alternativ: Manuelle Installation der .vsix Datei via Extensions: Install from VSIX...

Verwendung

1. Formulare
2. Übersetzungen
3. Registrierungen
4. Live Vorschau

1. Formulare

• Öffne eine forms.json Datei im Projekt

• Die Symcon Form Sidebar wird automatisch angezeigt

  

• Positioniere den Cursor an die gewünschte Stelle im JSON (z.B. nach einer schließenden Klammer eines Elements)

• Wähle in der Sidebar ein Formular-Element aus

  

• Fülle die Eigenschaften im Formular aus

• Klicke auf „Element einfügen“

• Fertig — das Element wird korrekt und formatiert im JSON eingefügt

  

2. Übersetzungen

• Markiere den zu übersetzenden Text in der form.json Datei und aktiviere das Kontext-Menü (rechte Maustaste)

  

• Klicke auf "Übersetzung zur locale.json hinzufügen"

• Gib deine Übersetzung in den Dialog ein ...

  

• Fertig — eine neue Zeile wurde zur locale.json hinzugefügt!

3. Registrierungen

• Wechseln in die module.php Datei und drücke (Strg + Umschalt + P)

  

• Wähle "Füge RegisterProperty-Aufrufe in Create() ein." aus!

• Fertig – für alle in form.json definierten Eigenschaften wird ein RegisterProperty-Aufruf in die create-Methode von module.php eingefügt!

4. Live Vorschau

• Öffne die Erweiterungseinstellungen nimm die entsprechenden Einstellungen vor

  

• Wechseln zur Datei „module.html“ und drücken (Strg + Umschalt + P).

  

• Oder öffnen Sie das Kontextmenü (Rechtsklick)

  

• Fertig – die Symcon-Live-Vorschau wird angezeigt.

  

Zielgruppe

Diese Extension richtet sich an Entwickler von Symcon Modulen, die das PHP SDK nutzen.

English EN

Symcon Module Helper

The Symcon Module Helper is a Visual Studio Code extension for Symcon module development that makes creating, testing, and maintaining form.json configuration files faster and more convenient. It allows you to quickly insert form elements with a single click, generates correctly formatted JSON snippets automatically, and provides a sidebar editor to view and edit the properties of any selected element.

It supports all standard element types from the Symcon PHP SDK and simplifies handling form data without tedious manual typing. The Symcon Module Helper also includes a real-time live preview — instantly updating your Webview as you modify HTML, JSON, themes, or dimensions. Preview settings (theme, width, height) are saved per workspace for a consistent workflow.

Additional features include inline HTML patching with secure CSP handling, context menu integration to translate texts from form.json to locale.json, and commands to extract and register property variables in the Create() method of your module.php.

Main Features

• One-click insertion of Symcon form elements
• Automatically generated and properly formatted JSON snippets
• Sidebar editor to view and modify all properties of selected elements
• Full support for all standard element types from the Symcon PHP SDK
• Live Preview: real-time visualization of HTML, JSON, theme, and dimensions in the Webview
• Persistent preview settings (theme, width, height) stored per workspace
• Save and load preview payloads, with instant postMessage updates to the preview frame
• Context menu option to translate text from form.json into locale.json
• Command to extract property variables and register them in the Create() method

Installation

• Available on the Visual Studio Marketplace
• Alternatively, install manually from the .vsix file using Extensions: Install from VSIX...

Usage

1. Forms
2. Translation
3. Registration
4. Live Preview

1. Forms

• Open a forms.json file in your project

• The Symcon form sidebar appears automatically

  

• Place the cursor where you want to insert a new element (e.g., after a closing brace of the previous element)

• Select a form element in the sidebar

  

• Fill out the properties in the form

• Click the "Insert Element" button

• Done — the element is inserted correctly formatted in the JSON

  

2. Translation

• Select the text you want to translate in the form.json file and open the context menu (right-click)

  

• Click on "Add translation to locale.json"

• Enter your translation in the input dialog ...

  

• Done — a new line has been added to locale.json!

3. Registration

• Switch to the module.php file and press (Ctrl + Shift + P).

  

4. Live Preview

• Open the extension settings and configure the appropriate settings.

  

• Switch to the file ‘module.html’ and press (Ctrl + Shift + P).

  

• Or open the context menu (right-click)

  

• Done – the Symcon live preview is displayed.

  

Target Audience

This extension is targeted at developers of Symcon modules using the PHP SDK.

Feedback & Contributions

Contributions and feedback are very welcome! Feel free to open issues or pull requests on the GitHub repository.

👨‍💻 About me

I’ve been passionate about home automation for over 10 years. Lately, I’ve been actively contributing to the IP-Symcon community with various scripts and modules. You can find me there under @pitti ;-)

This extension is a small way for me to share some of that experience with the community.

💰 Donate

This software is free to use for non-commercial purposes. If you enjoy using it and would like to support ongoing development, a small donation would be sincerely appreciated.

©️ Lizenz

© Wilkware, 2025. Licensed under CC BY-NC-SA 4.0.
You may share and adapt this work non-commercially with attribution and under the same license.