nooLight/resources/qml/LightGroup.qml

import QtQuick 2.0
import QtQuick.Controls 2.2

Item {
    id: root

    property string title: ""
    property QtObject lights: undefined

    signal channelClicked(int channelId)

    Column {
        width: root.width

        spacing: 5

        GradientButton {
            width: root.width
            height: 40

            visible: Boolean(root.title)
            radius: 5

            Label {
                anchors.centerIn: parent
                text: root.title
            }

            Image {
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.margins: 5
                width: height

                source: "/images/off.png"
            }
        }

        Row {
            id: buttonsRow

            width: root.width
            height: childrenRect.height

            spacing: 5

            Repeater {
                model: root.lights

                width: root.width

                GradientButton {
                    id: button

                    width: (root.width - buttonsRow.spacing * (root.lights.count - 1)) / root.lights.count
                    height: width / 2
                    radius: 5

                    Column {
                        anchors.centerIn: parent

                        Image {
                            height: button.height * 0.5
                            width: height
                            anchors.horizontalCenter: parent.horizontalCenter
                            source: "/images/lamp.png"
                        }

                        Label {
                            anchors.horizontalCenter: parent.horizontalCenter
                            horizontalAlignment: Qt.horizontalCenter
                            text: name
                        }
                    }

                    onClicked: {
                        root.channelClicked(id)
                    }
                }
            }
        }
    }
}