Qt Quick TableViews examples - Pixelator

The Pixelator example shows how a QML TableView and a delegate can be used for custom table models.

Running the Example

To run the example from Qt Creator , open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

class ImageModel(QAbstractTableModel):

    Q_OBJECT
    Q_PROPERTY(QString source READ source WRITE setSource NOTIFY sourceChanged)
    QML_ELEMENT
# public
    ImageModel(QObject parent = None)
    source = QString()
    def setSource(source):
    rowCount = int(QModelIndex parent = QModelIndex())
    columnCount = int(QModelIndex parent = QModelIndex())
    data = QVariant(QModelIndex index, int role = Qt.DisplayRole)
    headerData(int = QVariant()
                        role) = int()
signals:
    def sourceChanged():
# private
    m_source = QString()
    m_image = QImage()

We only require a simple, read-only table model. Thus, we need to implement functions to indicate the dimensions of the image and supply data to the TableView . We use the Qt Property System and a source property as QString to set the path of the image. We also add the QML_ELEMENT macro to expose the model to QML.

def setSource(self, source):

    if (m_source == source)
        return
    beginResetModel()
    m_source = source
    m_image.load(m_source)
    endResetModel()

Here we load the image when the source path is set. When the source path has changed, we need to call beginResetModel() before. After the image has been loaded, we need to call endResetModel().

def rowCount(self, QModelIndex parent):

    if (parent.isValid())
        return 0
    return m_image.height()

def columnCount(self, QModelIndex parent):

    if (parent.isValid())
        return 0
    return m_image.width()

The row and column count is set to image height and width, respectively.

def data(self, QModelIndex index, int role):

    if (not index.isValid() or role not = Qt.DisplayRole)
        def QVariant():
    def qGray(m_image.pixel(index.column(),index.row())):

This overloaded function allows us to access the pixel data from the image. When we call this function with the display role, we return the pixel’s gray value.

Component {
    id: pixelDelegate

    Item {
        required property real display

        readonly property real gray: display / 255.0
        readonly property real size: 16

        implicitWidth: size
        implicitHeight: size

Each pixel in the TableView is displayed via a delegate component. It contains an item that has an implicit height and width defining the cell size of the table. It also has a property for the gray value of the pixel that is retrieved from the model.

Rectangle {
    id: rect
    anchors.centerIn: parent
    color: "#09102b"
    radius: parent.size - parent.gray * parent.size
    implicitWidth: radius
    implicitHeight: radius

Inside the Item, there is a rounded Rectangle with the size and radius according to the pixel’s gray value.

MouseArea {
    anchors.fill: parent
    hoverEnabled: true
    onEntered: rect.color = "#cecfd5"
    onExited: colorAnimation.start()
}

For a little bit of interaction, we place a MouseArea inside the Item and change the Rectangle’s color on mouse over.

ColorAnimation on color {
    id: colorAnimation
    running: false
    to: "#41cd52"
    duration: 1500
}

The Rectangle also has a short color animation to fade between the colors when it is changed.

TableView {
    id: tableView
    anchors.fill: parent
    model: ImageModel {
        source: ":/qt.png"
    }

    delegate: pixelDelegate
}

The TableView spans over the whole window and has an instance of our custom ImageModel attached.

Example project @ code.qt.io