digraph AlarmListDialog {
    bgcolor=lightgray
    margin=50
    ordering=out; 

    // Prefix: q - Qt component, d - Diality component, i - image
    // Define the main componenets
    dAlarmListDialog            [shape=box,     label="AlarmListDialog.qml\nModalDialog.qml",           fontsize="30pt"];
    dAlarmListAlarmButtonRow    [shape=box,     label="AlarmButtonRow.qml\nItem",                       fontsize="30pt"];
    dAlarmListMuteButton        [shape=box,     label="MuteButton.qml\nTouchRect.qml",                  fontsize="30pt"];
    dAlarmListAlarmList         [shape=box,     label="IconButton.qml\nTouchRect.qml",                  fontsize="30pt"];
    dAlarmListMinButton         [shape=box,     label="ArrowButton.qml\nTouchRect.qml",                 fontsize="30pt"];
    dAlarmListTimeText          [shape=box,     label="TimeText.qml\nvAlarmStatus.alarm_MuteTimeout",   fontsize="30pt"];

    // screenshots
    iAlarmListDialog                [shape=none,    label="",           image="images/AlarmListDialog.png",         fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListHeaderBar             [shape=none,    label="",           image="images/AlarmListHeaderBar.png",      fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    iAlarmListContent               [shape=none,    label="TouchGrid.qml\nItem",           image="images/AlarmListContent.png",             fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iTouchGridRow                   [shape=none,    label="",           image="images/TouchGridRow.png",            fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iGridID                         [shape=none,    label="",           image="images/GridID.png",                  fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iGridText                       [shape=none,    label="",           image="images/GridText.png",                fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListHeaderIcon            [shape=none,    label="",           image="images/AlarmListHeaderIcon.png",     fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListHeaderText            [shape=none,    label="",           image="images/AlarmListHeaderText.png",     fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListAlarmButtonRow        [shape=none,    label="",           image="images/AlarmListAlarmButtonRow.png", fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListAlarmList             [shape=none,    label="",           image="images/AlarmListList.png",           fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListMinButton             [shape=none,    label="",           image="images/AlarmListMin.png",            fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListMuteButtonSilenced    [shape=none,    label="",           image="images/AlarmListMute.png",           fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListMuteTimeText          [shape=none,    label="",           image="images/AlarmListMuteText.png",       fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListMute                  [shape=none,    label="",           image="images/AlarmListMuteIcon.png",       fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListHour                  [shape=none,    label="",           image="images/AlarmListHour.png",           fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListMinute                [shape=none,    label="",           image="images/AlarmListMinute.png",         fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];
    iAlarmListColon                 [shape=none,    label="",           image="images/AlarmListColon.png",          fontcolor="#00FF21", fontsize="30pt", labelloc=t, imagescale=true];

    // qml types
    qAlarmListTitleBar          [shape=ellipse, label="Rectangle\nid : _titleBar",                  fontsize="30pt"];
    qAlarmListContent           [shape=ellipse, label="Rectangle\nid : _content",                   fontsize="30pt"];
    qTouchGridRow               [shape=ellipse, label="Grid\nRepeater\nTouchRect.qml",              fontsize="30pt"];
    qTouchGridID                [shape=ellipse, label="Text\nvAlarmActiveList.alarmIDs",            fontsize="30pt"];
    qTouchGridText              [shape=ellipse, label="Text\nvAlarmActiveList.alarmTexts",          fontsize="30pt"];
    qAlarmListHeaderIcon        [shape=ellipse, label="Image\n'qrc:/images/iList'",                 fontsize="30pt"];
    qAlarmListHeaderText        [shape=ellipse, label="Text\n'AlarmList'",                          fontsize="30pt"];
    qAlarmListHourText          [shape=ellipse, label="Text\nid : _hourText",                           fontsize="30pt"];
    qAlarmListMinuteText        [shape=ellipse, label="Text\nid : _minuteText",                         fontsize="30pt"];
    qAlarmListColonText         [shape=ellipse, label="Text\nid : _timeSeparator",                      fontsize="30pt"];
    qAlarmListSecondsText       [shape=ellipse, label="Text\nid : _secondText\nvisible = 'false'",      fontsize="30pt"];
    qAlarmListMuteImage         [shape=ellipse, label="Image\nvAlarmStatus.alarm_Flag_alarmsSilenced ?\n'qrc:/images/iBellOff' :\n'qrc:/images/iBellOn'",    fontsize="30pt"];
    qAlarmListAlarmListImage    [shape=ellipse, label="Image\n'qrc:/images/iList' ",                    fontsize="30pt"];
    qAlarmListMinImage          [shape=ellipse, label="Image\n'qrc:/images/iChevronDown' ",             fontsize="30pt"];
    qAlarmListHeaderText        [shape=ellipse, label="Text\nvAlarmStatus.title ",                      fontsize="30pt"];

    // Diagram Layout
    subgraph cluster_one  {
        label="AlarmListDialog"
        fontsize="30pt"
        labeljust=l
        
        dAlarmListDialog -> dAlarmBar [ltail=AlarmBar, lhead=AlarmListDialog, color="blue", fontcolor="blue",  fontsize="40pt", label="ACT: NotificationBar List Pressed"];

        dAlarmDialog -> dAlarmListDialog [ltail=AlarmDialog, lhead=AlarmListDialog, color="blue", fontcolor="blue",  fontsize="40pt", label="ACT: NotificationDialog List Pressed"];
        dAlarmListDialog -> dAlarmDialog [ltail=AlarmListDialog, lhead=AlarmDialog, color="blue", fontcolor="blue",  fontsize="40pt", label="ACT: AlarmList List Pressed"];

        dAlarmListDialog -> iAlarmListDialog
        iAlarmListDialog -> qAlarmListTitleBar -> iAlarmListHeaderBar
        iAlarmListHeaderBar -> qAlarmListHeaderIcon -> iAlarmListHeaderIcon
        iAlarmListHeaderBar -> qAlarmListHeaderText -> iAlarmListHeaderText
        iAlarmListHeaderBar -> dAlarmListAlarmButtonRow -> iAlarmListAlarmButtonRow

        iAlarmListAlarmButtonRow -> dAlarmListMuteButton -> iAlarmListMuteButtonSilenced
        iAlarmListMuteButtonSilenced -> dAlarmListTimeText -> iAlarmListMuteTimeText
        iAlarmListMuteTimeText -> qAlarmListHourText -> iAlarmListHour
        iAlarmListMuteTimeText -> qAlarmListColonText -> iAlarmListColon
        iAlarmListMuteTimeText -> qAlarmListMinuteText -> iAlarmListMinute
        iAlarmListMuteTimeText -> qAlarmListSecondsText
        iAlarmListMuteButtonSilenced -> qAlarmListMuteImage -> iAlarmListMute

        iAlarmListAlarmButtonRow -> dAlarmListAlarmList -> iAlarmListAlarmList -> qAlarmListAlarmListImage
        iAlarmListAlarmButtonRow -> dAlarmListMinButton -> iAlarmListMinButton -> qAlarmListMinImage

        iAlarmListDialog -> qAlarmListContent -> iAlarmListContent -> qTouchGridRow -> iTouchGridRow 
        iTouchGridRow -> qTouchGridID -> iGridID
        iTouchGridRow -> qTouchGridText -> iGridText
    }
}