@startuml(id=devicesTableScreen)
!procedure _devicesTableScreen()
{#
 ** status **        | ** name ** | ** parameters ** | ** location ** | ** action **
<color:blue> online  | device 1   |  23°             | room 1 | [view]
<color:red> offline  | device 2   |  24°             | room 2 | [view]
<color:blue> online  | device 3   | door is open     | room 1 | [view]
}
!endprocedure
@enduml

@startuml(id=devicesCardsScreen)
!procedure _devicesCardsScreen()
{
    ...

    ** device 1 ** <color:blue> online
    23° | [view]

    ...

    device 2 <color:red> offline
      24° | [view]

    ...

    device 3 <color:blue> online
    door is open | [view]
}
!endprocedure
@enduml

@startuml(id=devicesWidgetScreen)
!procedure _devicesWidgetScreen()
{
    ...
    temperature  for room 1 is <color:green>  23°
    ...
    temperature  for room 2 is <color:green>  24°
    ...
   | [Set desired temperature]
}
!endprocedure
@enduml

@startuml(id=doorsWidgetScreen)
!procedure _doorsWidgetScreen()
{
    ...

    ** door 1 **
    <color:green> online
    [Open] |  [Make favorite]

    ...

    ** door 2 **
    <color:green> online
    [Open] | [Make favorite]

}
!endprocedure
@enduml


@startuml
!include devices.screen.puml!devicesTableScreen
!include devices.screen.puml!devicesCardsScreen
!include devices.screen.puml!devicesWidgetScreen
!include devices.screen.puml!doorsWidgetScreen
(*) -down-> "
{{
salt
{
_devicesTableScreen()
_devicesCardsScreen()
_devicesWidgetScreen()
_doorsWidgetScreen()
}
}}
"
@enduml


