Vnořené skupiny elementů v aplikaci

Ve Spectoda Connect lze v Network JSONu udělat strukturu skupina → skupiny → zařízení. Používá se k tomu elementsJson, kde je skupina běžný element s polem childElementIds.

Skupina může obsahovat:

• jiné skupiny,
• koncová zařízení se spectodaId,
• kombinaci obojího.

Hotový kopírovatelný příklad je v GitHub repozitáři: network-nested-element-groups.

Základní princip

Koncové zařízení má vlastní spectodaId a odkaz na jednu nebo více control pages:

{
  "id": "element-stage-left-main",
  "name": "Stage Left Main",
  "spectodaId": 11,
  "controlPageRefs": [
    {
      "id": "DIMMA"
    }
  ]
}

Skupina nemá nutně vlastní spectodaId. Aplikace si při renderu spočítá seznam Spectoda ID z jejích children:

{
  "id": "element-group-stage-left",
  "name": "Stage Left",
  "childElementIds": [
    "element-stage-left-main",
    "element-stage-left-ambient"
  ],
  "controlPageRefs": [
    {
      "id": "DIMMA"
    }
  ]
}

Tím vznikne běžná skupina, kterou lze v aplikaci otevřít a ovládat jako logický celek.

Inline rozbalené children

Pokud má stránka skupiny rovnou ukázat podřízené karty, doplň do příslušného controlPageRefs položku expandedElements:

{
  "id": "element-group-stage",
  "name": "Stage",
  "childElementIds": [
    "element-group-stage-left",
    "element-group-stage-right",
    "element-backdrop-rgb"
  ],
  "controlPageRefs": [
    {
      "id": "DIMMA",
      "expandedElements": [
        {
          "id": "element-group-stage-left",
          "controlPageRef": {
            "id": "DIMMA"
          }
        },
        {
          "id": "element-backdrop-rgb",
          "controlPageRef": {
            "id": "COLOR"
          }
        }
      ]
    }
  ]
}

expandedElements říká, které přímé children se mají zobrazit inline a jakou control page má každé child použít.

Pravidla pro expandedElements

• expandedElements[].id musí být přímé child aktuální skupiny, tedy musí být v childElementIds.
• Skupina nesmí expandovat sama sebe.
• Child musí mít ve vlastním controlPageRefs stejnou stránku, na kterou parent ukazuje přes controlPageRef.id.
• Cílová control page musí existovat v controlPages.
• Pro další úroveň vnoření zopakuj stejný pattern na další group element.

Jinými slovy: parent rozhoduje, které svoje přímé děti ukáže inline; child rozhoduje, jaké control pages opravdu umí.

Control pages

Control page musí existovat v poli controlPages a musí mít eventControlPage nebo component. Pro inline expandované děti používej eventControlPage.

Minimalistická stránka pro jas může vypadat takto:

{
  "id": "DIMMA",
  "name": "Brightness",
  "eventControlPage": {
    "id": "brightness-control-page",
    "config": {
      "columns": 1,
      "maxWidth": "default"
    },
    "eventControls": [
      {
        "id": "brightness-slider",
        "name": "Brightness",
        "type": "slider",
        "EVS": {
          "type": 30,
          "label": "brigh"
        },
        "config": {
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "%",
          "icon": "SunIcon"
        }
      }
    ]
  }
}

U skutečného projektu musí EVS.label odpovídat tomu, co používá firmware a TNGL/Berry logika. Pokud projekt místo brigh používá jiný label, změň ho v control page.

Homepage sekce

Chceš-li skupiny zobrazit rovnou na úvodní obrazovce, přidej do homepage.sections odkaz na group element:

{
  "id": "deco-stage",
  "layout": "grid-tight",
  "source": {
    "type": "element",
    "element": {
      "id": "element-group-stage"
    }
  }
}

Tohle není povinné pro samotnou funkci vnořených groups, ale hodí se pro přehlednou navigaci v aplikaci.

Kontrolní checklist

• Každý id v childElementIds existuje v elementsJson.
• Každý controlPageRefs[].id existuje v controlPages.
• Každý inline child v expandedElements je přímé child dané skupiny.
• Každý inline child má ve vlastním controlPageRefs stránku uvedenou v controlPageRef.id.
• Každý koncový ovladatelný element má spectodaId v rozsahu 0..255.

Celý příklad pro elementsJson, controlPages a homepage najdeš tady: Spectoda examples / network-nested-element-groups.