HMI Designer
Sahne bir screen kaynağıdır (ADR 0009). Tuval 1920×1080. Ekran başına en fazla 64 widget.
Widget’lar
| kind | Bağlama / davranış |
|---|---|
label | Statik metin |
value | tagId ve/veya expression; style.displayDecimals |
link | screenId — runtime’da gezin |
faceplate | Gömülü ekran (screenId), genişleme ≤4 derinlik |
shape | rect | ellipse |
pen | Polyline noktaları (tag yok) |
flex | direction/gap/padding/childWidgets[] |
symbol | symbolId + slot bağları + animasyonlar |
graphic | Özel SVG + animasyon |
Animasyon: rotate | fill | visible | fillColor.
Sembol kataloğu
Grindstone Visual Toolkit: ~1229 sembol (vt-symbols.generated.json) + çekirdek endüstriyel semboller. symbolId camelCase.
Düzenleyici
Palet, inspector, taşıma/boyut/döndürme, hizalama, dağıtma, snap, katman, grup, z-sırası. Sol tarayıcı: sayfalar, widget’lar, tag’ler (süzgeçli). Pen aracı: tıkla nokta ekle; Enter / çift tık bitir.
Sorgu bağlama ve script bu gövdede yoktur.
mermaid
flowchart LR
Designer[designer.tsx] --> JSON[screen JSON]
JSON --> Engine[hmi-engine expand mount]
Engine --> SVG[SVG düğümleri]
Live[live tags] --> Apply[apply]
Apply --> SVG