<![CDATA[QML does not update when C++ Abstract Model Updates]]>Hello,

I am working on a control application for an eight channel preamplifier and am having some troubles integrating QML and C++. I have an object representing the unit with eight child objects that represent the individual channels. I am displaying the the channels as a list view, but cannot get the display to update when the channel objects are modified. For example, I have bound a few boolean variables to button checked properties. When I toggle the values in the C++ model (reimplemented QAbstractListModel), the button states do not change until I force the ListView to redraw itself by shrinking the window and re-maximizing it. I originally attempted to use the built-in functionality of the QAbstractListModel to handle the updates, but had not success. To get to the point I am at, I have implemented a series of signals moving up the object tree until a call can be made to the C++ class to change the fields. To make the changes go the other way, I have manually sent signals to the QML and have been able to get the preamp status pane to update real time. Unfortunately I have been unable to do the same for the Channel List View. Below is some of the source for the project. Thanks in advance for any help you can provide!

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <qqmlcontext.h>
#include <qqml.h>
#include <iostream>
#include <QDebug>
#include <QQuickView>
#include <QQmlComponent>
#include <QTimer>
#include "preampmodel.h"

int main(int argc, char *argv[])
{
  QGuiApplication app(argc, argv);
  QTextStream cin(stdin);
  QQmlApplicationEngine engine;
  QQmlContext* context = engine.rootContext();
  PreampModel * preamps = new PreampModel();

  context->setContextProperty("preampModel", preamps);
  engine.load(QUrl(QStringLiteral("qrc:/MainForm.qml")));
  return app.exec();
}

preampmodel.cpp

/* Class: PreampModel
 * Author: JLimbocker
 * Description:  This class inherits QAbstractListModel to present data to the QML user interface.
 *      It contains eight channels and seven configuration fields.  Each of the eight channels has
 *      eleven roles which are accessed through role names.  The seven configuration fields are accessed
 *      through role names regardless of which index is selected.  This class will be updated when changes
 *      are made in QML and when changes are made in C++.  All changes should be reflected both in QML and
 *      in C++.
 */

#include "preampmodel.h"
#include "channel.h"
#include <QAbstractListModel>
#include <string>
#include <QDebug>

PreampModel::PreampModel(QObject * parent) : QAbstractListModel(parent)
{
  preampID = 1;
  online = true;
  clkStatus = false;
  sampleRate = 2;
  clkSource = 1;
  outFormat = 0;
  clkOutSource = 0;
  for(int i = 0; i < 8; i++)
    channelList.append(new Channel((preampID-1)*8+(1+i), QString("Channel_" + (preampID-1)*8+1), true, false, true, true, 1, 23));
}
PreampModel::~PreampModel()
{

}
/* void PreampModel::print()
 * This function prints debug information for the object
 * Returns: void
 * Parameters: none
 */
void PreampModel::print()
{
  qDebug() << "PreampID : ";
  qDebug() << preampID;
  qDebug() << "\nonline     : ";
  qDebug() << online;
  qDebug() << "\nclkStatus  : ";
  qDebug() << clkStatus;
  qDebug() << "\nsampleRate : ";
  qDebug() << sampleRate;
  qDebug() << "\nclkSource  : ";
  qDebug() << clkSource;
  qDebug() << "\noutFormat  : ";
  qDebug() << outFormat;
  qDebug() << "\nclkOutSrc  : ";
  qDebug() << clkOutSource;
  qDebug() << "\n";
}
/* roleNames()
 * This function is reimplemented from QAbstractItemModel.
 * It provides role names to the QML engine.
 * Returns: roles - a Hash relating the role to the role name
 * Parameters: none
 */
QHash<int, QByteArray> PreampModel::roleNames() const
{
  QHash<int, QByteArray> roles;
  roles[idRole]            = "preampID";
  roles[onlineRole]        = "online";
  roles[clkStatusRole]     = "clkStatus";
  roles[sampleRateRole]    = "sampleRate";
  roles[clkSourceRole]     = "clkSource";
  roles[outFormatRole]     = "outFormat";
  roles[clkOutSourceRole]  = "clkOutSource";
  roles[phantomRole]       = "phantom";
  roles[phaseRole]         = "phase";
  roles[ribbonRole]        = "ribbon";
  roles[groupRole]         = "group";
  roles[groupNameRole]     = "groupName";
  roles[gainRole]          = "gain";
  roles[nameRole]          = "name";
  roles[numberRole]        = "number";
  roles[meterLevelRole]    = "meterLevel";
  roles[peakValueRole]     = "peakValue";
  roles[scribbleStripRole] = "scribbleStrip";
  return roles;
}
/* data(index, role)
 * This function is reimplemented from QAbstractItemModel.
 * It provides access to the model data for the QML Engine.
 * If Index is out of range or the chosen role is not supported,
 * it returns an empty QVariant.
 * Returns: A QVariant containing the desired data, if available.
 * Parameters: index - the index of the data to be accessed
 *             role  - the role of the data to be accessed
 */
QVariant PreampModel::data(const QModelIndex &index, int role) const
{
  if(index.row() < channelList.size() && index.row() >= 0)
    switch (role){
      case idRole             : return preampID;
      case onlineRole         : return online;
      case clkStatusRole      : return clkStatus;
      case sampleRateRole     : return sampleRate;
      case clkSourceRole      : return clkSource;
      case outFormatRole      : return outFormat;
      case clkOutSourceRole   : return clkOutSource;
      case phantomRole        : return channelList[index.row()]->getPhantom();
      case phaseRole          : return channelList[index.row()]->getPhase();
      case ribbonRole         : return channelList[index.row()]->getRibbon();
      case groupRole          : return channelList[index.row()]->getGroup();
      case groupNameRole      : return channelList[index.row()]->getGroupName();
      case gainRole           : return channelList[index.row()]->getGain();
      case nameRole           : return channelList[index.row()]->getName();
      case numberRole         : return channelList[index.row()]->getNumber();
      case meterLevelRole     : return channelList[index.row()]->getMeterLevel();
      case peakValueRole      : return channelList[index.row()]->getPeakValue();
      case scribbleStripRole  : return channelList[index.row()]->getScribbleStrip();
      default: return QVariant();
    }
  else
    return QVariant();
}
/* rowCount(index)
 * This function is reimplemented from QAbstractItemModel.
 * It provides a count of the number of rows in the model.
 * In the case of this implementation, there are only eight
 * different indices - one per preamp channel.
 * Returns: 8 - the number of channels in the preamp.
 * Parameters: index - unused
 */
int PreampModel::rowCount(const QModelIndex & index) const
{
    return 8;
}
/* setData(index, value, role)
 * This function is reimplemented from QAbstractItemModel.
 * It provides an interface for the QML engine to set data
 * fields in the object.
 * Returns: True if data has been set, False otherwise.
 * Parameters: index - the index of the data to be set
 *             value - the value to which the data should be set
 *             role  - the role of the data to be set
 */
bool PreampModel::setData(const QModelIndex & index, const QVariant & value, int role)
{
  if(index.row() < channelList.size() && index.row() >= 0)
  {
    switch (role){
      case idRole             : preampID     = value.toInt(); break;
      case onlineRole         : online       = value.toBool();break;
      case clkStatusRole      : clkStatus    = value.toBool();break;
      case sampleRateRole     : sampleRate   = value.toInt();break;
      case clkSourceRole      : clkSource    = value.toInt();break;
      case outFormatRole      : outFormat    = value.toInt();break;
      case clkOutSourceRole   : clkOutSource = value.toInt();break;
      case phantomRole        : channelList[index.row()]->setPhantom(value.toBool());break;
      case phaseRole          : channelList[index.row()]->setPhase(value.toBool());break;
      case ribbonRole         : channelList[index.row()]->setRibbon(value.toBool());break;
      case groupRole          : channelList[index.row()]->setGroup(value.toBool());break;
      case groupNameRole      : channelList[index.row()]->setGroupName(value.toInt());break;
      case gainRole           : channelList[index.row()]->setGain(value.toInt());break;
      case nameRole           : channelList[index.row()]->setName(value.toString());break;
      case numberRole         : channelList[index.row()]->setNumber(value.toInt());break;
      case meterLevelRole     : channelList[index.row()]->setMeterLevel(value.toInt());break;
      case peakValueRole      : channelList[index.row()]->setPeakValue(value.toInt());break;
      case scribbleStripRole  : channelList[index.row()]->setScribbleStrip(value.toString()); break;
      default: return false;
    }
    qDebug() << "emitting datachanged";
    //If data has been changed, send signal to notify QML Engine
    emit dataChanged(index, index);
    return true;
  }
  else
    return false;
}
/* index(row, column, parent)
 * This function is reimplemented from QAbstractItemModel.
 * It created an index for the given row and column.
 * Returns: the index corresponding to the row and column
 * Parameters: row - the row at whic the item is located.
 *             column - the column at which the item is located.
 */
QModelIndex PreampModel::index(int row, int column, const QModelIndex &parent) const
{
  return QAbstractItemModel::createIndex(row, column);
}
/* setProperty(_index, name, value)
 * This function provides manual property setting from QML.
 * Returns: True if successful, false if unsuccessful.
 * Parameters: _index - the row to be accessed
 *             name - the role name to be accessed
 *             value - the value to write
 */
bool PreampModel::setProperty( const QVariant _index, const QString name, const QVariant value)
{
  QModelIndex index = PreampModel::index(_index.toInt(), 0, QModelIndex());
  qDebug() << index.row() << " " << name << " " << value << channelList.size();

  if(index.row() < channelList.size() && index.row() >= 0)
  {
    if(name == QString::fromUtf8("idRole"))
    {
      preampID = value.toInt();
    }
    else if(name == QString::fromUtf8("onlineRole"))
    {
      online = value.toBool();
    }
    else if(name == QString::fromUtf8("clkStatusRole"))
    {
      clkStatus = value.toBool();
    }
    else if(name == QString::fromUtf8("sampleRateRole"))
    {
      sampleRate = value.toInt();
    }
    else if(name == QString::fromUtf8("clkSourceRole"))
    {
      clkSource = value.toInt();
    }
    else if(name == QString::fromUtf8("outFormatRole"))
    {
      outFormat = value.toInt();
    }
    else if(name == QString::fromUtf8("clkOutSourceRole"))
    {
      clkOutSource = value.toInt();
    }
    else if(name == QString::fromUtf8("phantomRole"))
    {
      channelList[index.row()]->setPhantom(value.toBool());
    }
    else if(name ==  QString::fromUtf8("phaseRole"))
    {
      channelList[index.row()]->setPhase(value.toBool());
    }
    else if(name ==  QString::fromUtf8("groupRole"))
    {
      channelList[index.row()]->setGroup(value.toBool());
    }
    else if(name ==  QString::fromUtf8("ribbonRole"))
    {
      channelList[index.row()]->setRibbon(value.toBool());
    }
    else if(name ==  QString::fromUtf8("groupNameRole"))
    {
      channelList[index.row()]->setGroupName(value.toInt());
    }
    else if(name ==  QString::fromUtf8("gainRole"))
    {
      channelList[index.row()]->setGain(value.toInt());
    }
    else if(name ==  QString::fromUtf8("nameRole"))
    {
      channelList[index.row()]->setName(value.toString());
    }
    else if(name ==  QString::fromUtf8("scribbleStripRole"))
    {
      channelList[index.row()]->setScribbleStrip(value.toString());
    }
    else
    {
      qDebug() << "Property Set Failed: Unknown Role";
      return false;
    }
    emit dataChanged(index, index);
    qDebug() << name << " changed";
    return true;
  }
  else
  {
    qDebug() << "Property Set Failed: Index out of Bounds";
    return false;
  }
}
/* flags(index)
 * This function is reimplemented from QAbstractItemModel.
 * It tells the qml that all items are editable and selectable.
 * Returns: An OR combination of the necessary flags.
 * Parameters: index - unused.
 */
Qt::ItemFlags PreampModel::flags(const QModelIndex &index) const
{
  return Qt::ItemIsEditable | Qt::ItemIsSelectable;
}

channel.cpp

Channel::Channel(QObject *parent) : QObject(parent)
{
  phantom = false;
  phase = true;
  ribbon = false;
  group = false;
  groupName = 0;
  gain = 49;
  name = "Channel";
  number = 0;
  meterLevel = 0;
  peakValue = 0;
  scribbleStrip = "";

}
Channel::Channel(int chNum, QString chName, QObject *parent) : QObject(parent)
{
  number = chNum;
  name = chName;
  meterLevel = 0;
  peakValue = 0;
  scribbleStrip = "";
  phantom = false;
  phase = true;
  ribbon = false;
  group = false;
  groupName = 0;
  gain = 49;
}
Channel::Channel(int chNum, QString chName, bool phant, bool pha, bool rib, bool grp, int grpNam, int gn, QObject *parent) : QObject(parent)
{
  number = chNum;
  name = chName;
  meterLevel = 0;
  peakValue = 0;
  scribbleStrip = "";
  phantom = phant;
  phase = pha;
  ribbon = rib;
  group = grp;
  groupName = grpNam;
  gain = gn;
}

//Setters
void Channel::setPhantom(bool newPhantom)
{
  phantom = newPhantom;
  emit phantomChanged();
}
void Channel::setPhase(bool newPhase)
{
  phase = newPhase;
  qDebug() << "Phase changed at channel level";
  emit phaseChanged();
}
void Channel::setRibbon(bool newRibbon)
{
  ribbon = newRibbon;
  emit ribbonChanged();
}
void Channel::setGroup(bool newGroup)
{
  group = newGroup;
  emit groupChanged();
}
void Channel::setGroupName(int newGroupName)
{
  groupName = newGroupName;
  emit groupNameChanged();
}
void Channel::setGain(int newGain)
{
  gain = newGain;
  emit gainChanged();
}
void Channel::incrementGain()
{
  gain++;
  emit gainChanged();
}
void Channel::decrementGain()
{
  gain--;
  emit gainChanged();
}
void Channel::setName(QString newName)
{
  name = newName;
  emit nameChanged();
}
void Channel::setNumber(int newNumber)
{
  number = newNumber;
  emit numberChanged();
}
void Channel::setMeterLevel(int newLevel)
{
  meterLevel = newLevel;
  emit meterLevelChanged();
}
void Channel::setPeakValue(int newValue)
{
  peakValue = newValue;
  emit peakValueChanged();
}
void Channel::setScribbleStrip(QString newString)
{
  scribbleStrip = newString;
  emit scribbleStripChanged();
}
void Channel::setAll()
{
}
//Getters
bool Channel::getPhantom()
{
  return phantom;
}
bool Channel::getPhase()
{
  return phase;
}
bool Channel::getRibbon()
{
  return ribbon;
}
bool Channel::getGroup()
{
  return group;
}
int Channel::getGroupName()
{
  return groupName;
}
int Channel::getGain()
{
  return gain;
}
QString Channel::getName()
{
  return name;
}
int Channel::getNumber()
{
  return number;
}
int Channel::getMeterLevel()
{
  return meterLevel;
}
int Channel::getPeakValue()
{
  return peakValue;
}
QString Channel::getScribbleStrip()
{
  return scribbleStrip;
}

QML in follow-up post

JL

]]>https://forum.qt.io/topic/69614/qml-does-not-update-when-c-abstract-model-updatesRSS for NodeThu, 16 Jul 2026 19:31:20 GMTTue, 26 Jul 2016 01:09:37 GMT60<![CDATA[Reply to QML does not update when C++ Abstract Model Updates on Tue, 26 Jul 2016 16:14:53 GMT]]>@cjmdaixi
It was my understanding that this operation only needs to occur when the size of the model is being changed, i.e. when rows are being added to the structure. In this case, I simply want to access data members in the model. I will implement the begin/endInsertRows and see if it makes a difference.
It is also worth mentioning that I am able to confirm that changes are being made to the C++ model. The problem seems to be that the QML is not seeing the updates. I believe a solution would be to find a way to manually update the delegates in the ListView, but there doesn't seem to be a straightforward way to do this.

]]>https://forum.qt.io/post/339387https://forum.qt.io/post/339387Tue, 26 Jul 2016 16:14:53 GMT<![CDATA[Reply to QML does not update when C++ Abstract Model Updates on Tue, 26 Jul 2016 09:34:53 GMT]]>according to the Qt Doc, when you want to modify the model, you'd better call the "beginInsertRows" and "endInsertRows" .

]]>https://forum.qt.io/post/339326https://forum.qt.io/post/339326Tue, 26 Jul 2016 09:34:53 GMT<![CDATA[Reply to QML does not update when C++ Abstract Model Updates on Tue, 26 Jul 2016 01:28:15 GMT]]>Last one. I imagine there is a better way to share the contents of a project, but I am not sure what that would be in this case.

Preamp_status.qml

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

Rectangle {
  id: rectangle2
  width: 174
  height: 399
  color: "#00000000"
  property bool clkStatus: false;
  property bool online: false;
  property int clkSource
  property int clkOutSource: 0;
  property int outFormat: 0;
  property int sampleRate
  property int devID: 0;
  DropShadow {
    id : adcShadow
    color: qsTr("#df000000")
    source: adc
    horizontalOffset: 2
    verticalOffset: 4
    samples: 6
    radius: 3
    cached: true
    anchors.fill: adc
    visible: adc.visible
  }
  Rectangle {
    id: adc
    color: "#496c88"
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    anchors.top: status.bottom
    anchors.leftMargin: 0
    anchors.bottomMargin: 0
    anchors.rightMargin: 0
    anchors.topMargin: 12
    width: parent.width
    Text {
      id: adcLabel
      height: 22
      color: "#ffffff"
      text: qsTr("ADC")
      verticalAlignment: Text.AlignVCenter
      font.bold: true
      anchors.left: parent.left
      anchors.leftMargin: 6
      anchors.top: parent.top
      anchors.topMargin: 6
      font.pixelSize: 24
    }
    Rectangle {
      id: srRect
      height: 55
      color: "#333240"
      anchors.right: parent.right
      anchors.rightMargin: 6
      anchors.left: parent.left
      anchors.leftMargin: 6
      anchors.top: adcLabel.bottom
      anchors.topMargin: 6
      Text {
        id: srLabel
        color: "#ffffff"
        text: qsTr("Sample Rate")
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.top: parent.top
        anchors.topMargin: 3
        font.pixelSize: 14
      }
      ComboBox {
        id: srCombo
        anchors.right: parent.right
        anchors.rightMargin: 6
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
        anchors.top: srLabel.bottom
        anchors.topMargin: 3
        model: srModel
        currentIndex: sampleRate
        Keys.onPressed:
        {
          if(event.key == Qt.Key_Enter || event.key == Qt.Key_Return)
          {
           srCombo.focus = false
          }
        }
        contentItem: Text {
          color : "#ffffff"
          text: srCombo.displayText
          font.family: "Arial";
          font.pixelSize: 14;
          verticalAlignment: Text.AlignVCenter;
          horizontalAlignment: Text.AlignLeft;
        }
        background: Rectangle{
          color: "#424251"
        }
        indicator: Rectangle { }
        delegate: ItemDelegate {
          x: 0
          y: 0
          width:srCombo.width
          contentItem: Text {
            text:modelData;
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            font.family: "Arial";
            font.pixelSize: 14;
            color: "#ffffff"
          }
          onClicked:
          {
            sampleRate = index
            srCombo.focus = false
          }
        }
        popup: Popup {
          id: srPopup
          width: srCombo.width
          height:srView.contentHeight 
          margins: 0
          background: Rectangle { color: "#424251" }
          contentItem: ListView {
            id: srView
            anchors.fill: parent
            model:srCombo.model
            boundsBehavior: Flickable.StopAtBounds
            highlight: Rectangle { color: "#69697C" }
            spacing: 0
            highlightFollowsCurrentItem: true
            currentIndex:sampleRate
            delegate:srCombo.delegate
          }
          enter: Transition {
            SequentialAnimation {
              PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: 0; to: srView.contentHeight }
              PropertyAction { properties: "contentItem.visible"; value: true }
            }
          }
          exit: Transition {
            SequentialAnimation{
              PropertyAction { properties: "contentItem.visible"; value: false }
              PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: srView.contentHeight; to: 0 }
            }
          }
        }
        textRole: "key"
        ListModel
        {
          id: srModel
          ListElement { key: "44.1 kHz"; }
          ListElement { key: "48 kHz"; }
          ListElement { key: "88.2 kHz"; }
          ListElement { key: "96 kHz"; }
          ListElement { key: "176.4 kHz"; }
          ListElement { key: "196 kHz"; }
        }
      }
    }
    Rectangle {
      id: clkSrcRect
      height: 55
      color: "#333240"
      anchors.top: srRect.bottom
      anchors.topMargin: 6
      anchors.right: parent.right
      anchors.rightMargin: 6
      anchors.left: parent.left
      anchors.leftMargin: 6
      Text {
        id: clkSrcLabel
        color: "#ffffff"
        text: qsTr("Clock Source")
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.top: parent.top
        anchors.topMargin: 3
        font.pixelSize: 14
      }
      ComboBox {
        id: clkSrcCombo
        anchors.right: parent.right
        anchors.rightMargin: 6
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
        anchors.top: clkSrcLabel.bottom
        anchors.topMargin: 3
        model:clkSrcModel
        currentIndex: clkSource
        Keys.onPressed:
        {
          if(event.key == Qt.Key_Enter || event.key == Qt.Key_Return)
          {
           clkSrcCombo.focus = false
          }
        }
        contentItem: Text {
          color : "#ffffff"
          text: clkSrcCombo.displayText
          font.family: "Arial";
          font.pixelSize: 14;
          verticalAlignment: Text.AlignVCenter;
          horizontalAlignment: Text.AlignLeft;
        }
        background: Rectangle{
          color: "#424251"
        }
        indicator: Rectangle { }
        delegate: ItemDelegate {
          width:clkSrcCombo.width
          contentItem: Text {
            text:modelData;
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            font.family: "Arial";
            font.pixelSize: 14;
            color: "#ffffff"
          }
          onClicked:
          {
            clkSource = index;
            clkSrcCombo.focus = false
          }
        }
        popup: Popup {
          id:clkSrcPopup
          width: clkSrcCombo.width
          height: clkSrcView.contentHeight 
          margins: 0
          background: Rectangle { color: "#424251" }
          contentItem: ListView {
            id: clkSrcView
            anchors.fill: parent
            model:clkSrcCombo.model
            boundsBehavior: Flickable.StopAtBounds
            highlight: Rectangle { color: "#69697C" }
            spacing: 0
            highlightFollowsCurrentItem: true
            currentIndex:clkSource
            delegate:clkSrcCombo.delegate
          }
          enter: Transition {
            SequentialAnimation {
              PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: 0; to: clkSrcView.contentHeight }
              PropertyAction { properties: "contentItem.visible"; value: true }
            }
          }
          exit: Transition {
            SequentialAnimation{
              PropertyAction { properties: "contentItem.visible"; value: false }
              PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: clkSrcView.contentHeight; to: 0 }
            }
          }
        }
        textRole: "key"
        ListModel
        {
          id:clkSrcModel
          ListElement { key: "Internal"; }
          ListElement { key: "Word"; }
          ListElement { key: "Word - 75Ω"; }
          ListElement { key: "Dante"; }
        }
      }
    }
    Rectangle {
      id: outRect
      height: 55
      color: "#333240"
      anchors.right: parent.right
      anchors.rightMargin: 6
      anchors.left: parent.left
      anchors.leftMargin: 6
      anchors.top: clkSrcRect.bottom
      anchors.topMargin: 6
      Text {
        id: outLabel
        color: "#ffffff"
        text: qsTr("Output Format")
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.top: parent.top
        anchors.topMargin: 3
        font.pixelSize: 14
      }
      ComboBox {
        id: outCombo
        anchors.right: parent.right
        anchors.rightMargin: 6
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
        anchors.top: outLabel.bottom
        anchors.topMargin: 3
        model:outModel
        currentIndex: outFormat
        Keys.onPressed:
        {
          if(event.key == Qt.Key_Enter || event.key == Qt.Key_Return)
          {
           outCombo.focus = false
          }
        }
        contentItem: Text {
          color : "#ffffff"
          text: outCombo.displayText
          font.family: "Arial";
          font.pixelSize: 14;
          verticalAlignment: Text.AlignVCenter;
          horizontalAlignment: Text.AlignLeft;
        }
        background: Rectangle{
          color: "#424251"
        }
        indicator: Rectangle { }
        delegate: ItemDelegate {
          width:outCombo.width
          contentItem: Text {
            text:modelData;
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            font.family: "Arial";
            font.pixelSize: 14;
            color: "#ffffff"
          }
          onClicked:
          {
            outFormat = index
            outCombo.focus = false
          }
        }
        popup: Popup {
          id:outPopup
          width: outCombo.width
          height : outView.contentHeight /*parent.height*parent.count*/
          margins: 0
          background: Rectangle { color: "#424251" }
          contentItem: ListView {
            id: outView
            anchors.fill: parent
            model:outCombo.model
            boundsBehavior: Flickable.StopAtBounds
            highlight: Rectangle { color: "#69697C" }
            spacing: 0
            highlightFollowsCurrentItem: true
            currentIndex:outFormat
            delegate:outCombo.delegate
          }
          enter: Transition {
            SequentialAnimation {
              PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: 0; to:outView.contentHeight }
              PropertyAction { properties: "contentItem.visible"; value: true }
            }
          }
          exit: Transition {
            SequentialAnimation{
              PropertyAction { properties: "contentItem.visible"; value: false }
              PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from:outView.contentHeight; to: 0 }
            }
          }
        }
        textRole: "key"
        ListModel
        {
          id:outModel
          ListElement { key: "Professional"; }
          ListElement { key: "Consumer"; }
        }
      }
    }
    Rectangle {
      id: clkOutRect
      height: 55
      color: "#333240"
      anchors.right: parent.right
      anchors.rightMargin: 6
      anchors.left: parent.left
      anchors.leftMargin: 6
      anchors.top: outRect.bottom
      anchors.topMargin: 6
      Text {
        id: clkOutLabel
        color: "#ffffff"
        text: qsTr("Clock Out Source")
        anchors.top: parent.top
        anchors.topMargin: 3
        anchors.left: parent.left
        anchors.leftMargin: 6
        font.pixelSize: 14
      }
      ComboBox {
        id: clkOutCombo
        anchors.right: parent.right
        anchors.rightMargin: 6
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
        anchors.top: clkOutLabel.bottom
        anchors.topMargin: 3
        model:clkOutModel
        currentIndex: clkOutSource
        Keys.onPressed:
        {
          if(event.key == Qt.Key_Enter || event.key == Qt.Key_Return)
          {
           clkOutCombo.focus = false;
          }
        }
        contentItem: Text {
          color : "#ffffff"
          text: clkOutCombo.displayText
          font.family: "Arial";
          font.pixelSize: 14;
          verticalAlignment: Text.AlignVCenter;
          horizontalAlignment: Text.AlignLeft;
        }
        background: Rectangle{
          color: "#424251"
        }
        indicator: Rectangle { }
        delegate: ItemDelegate {
          width:clkOutCombo.width
          contentItem: Text {
            text:modelData;
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            font.family: "Arial";
            font.pixelSize: 14;
            color: "#ffffff"
          }
          onClicked:
          {
            clkOutSource = index
            clkOutCombo.focus = false
          }
        }
        popup: Popup {
          id: clkOutPopup
          width: clkOutCombo.width
          height: clkOutView.contentHeight /*parent.height*parent.count*/
          //implicitHeight:clkOutView.contentHeight
          margins: 0
          background: Rectangle { color: "#424251" }
          contentItem: ListView {
            id:clkOutView
            anchors.fill: parent

            model:clkOutCombo.model
            boundsBehavior: Flickable.StopAtBounds
            highlight: Rectangle { color: "#69697C" }
            spacing: 0
            highlightFollowsCurrentItem: true
            currentIndex:clkOutSource
            delegate:clkOutCombo.delegate
          }
          enter: Transition {
            SequentialAnimation {
              PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: 0; to: clkOutView.contentHeight }
              PropertyAction { properties: "contentItem.visible"; value: true }
            }
          }
          exit: Transition {
            SequentialAnimation{
              PropertyAction { properties: "contentItem.visible"; value: false }
              PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: clkOutView.contentHeight; to: 0 }
            }
          }
        }
        textRole: "key"
        ListModel
        {
          id:clkOutModel
          ListElement { key: "Internal"; }
          ListElement { key: "External"; }
        }
      }
    }
    Rectangle {
      id: clkStatusRect
      height: 30
      color: "#333240"
      anchors.top: clkOutRect.bottom
      anchors.topMargin: 6
      anchors.right: parent.right
      anchors.rightMargin: 6
      anchors.left: parent.left
      anchors.leftMargin: 6
      Text {
        id: clkStatusLabel
        color: "#ffffff"
        text: qsTr("Clock Status")
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.verticalCenter: parent.verticalCenter
        font.pixelSize: 14
      }
      Rectangle {
        id: clkStatusIndicator
        x: 86
        y: 8
        width: 16
        height: 16
        color: clkStatus ? "#00ff00" : "#767676"
        radius: 8
        anchors.right: parent.right
        anchors.rightMargin: 16
        anchors.verticalCenter: parent.verticalCenter
      }
    }
  }
  DropShadow {
    id : statusShadow
    color: qsTr("#df000000")
    source: status
    horizontalOffset: 2
    verticalOffset: 4
    samples: 6
    radius: 3
    anchors.rightMargin: 0
    anchors.bottomMargin: 0
    anchors.leftMargin: 0
    anchors.topMargin: 0
    cached: true
    anchors.fill: status
    visible: status.visible
  }
  Rectangle {
    id: status
    height: 73
    color: "#496c88"
    anchors.top: parent.top
    anchors.topMargin: 0
    anchors.right: parent.right
    anchors.rightMargin: 0
    anchors.left: parent.left
    anchors.leftMargin: 0
    Rectangle {
      id: statusRect
      y: 39
      color: "#333240"
      anchors.left: statusLabel.right
      anchors.leftMargin: 6
      anchors.bottom: parent.bottom
      anchors.bottomMargin: 6
      anchors.top: parent.top
      anchors.right: parent.right
      anchors.topMargin: 6
      anchors.rightMargin: 6
      Rectangle {
        id: onlineIndicator
        x: 138
        y: 16
        width: 16
        height: 16
        color: online ? "#00ff00" : "#767676"
        radius: 8
        anchors.verticalCenter: onlineLabel.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 6
        Layout.maximumHeight: 16
        Layout.maximumWidth: 16
        Layout.minimumHeight: 16
        Layout.minimumWidth: 16
        Layout.preferredHeight: 16
        Layout.preferredWidth: 16
      }
      Text {
        id: onlineLabel
        y: 0
        color: "#ffffff"
        text: qsTr("Online")
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
        anchors.right: onlineIndicator.left
        anchors.rightMargin: 6
        verticalAlignment: Text.AlignVCenter
        Layout.columnSpan: 6
        Layout.rowSpan: 1
        Layout.fillHeight: true
        font.pixelSize: 18
      }
      Text {
        id: preampID
        y: 0
        color: "#ffffff"
        text: devID
        anchors.verticalCenterOffset: -15
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: idLabel.right
        anchors.leftMargin: 6
        verticalAlignment: Text.AlignVCenter
        Layout.columnSpan: 3
        Layout.rowSpan: 1
        Layout.fillHeight: true
        font.pixelSize: 18
      }
      Text {
        id: idLabel
        color: "#ffffff"
        text: qsTr("ID:")
        anchors.top: parent.top
        anchors.topMargin: 6
        anchors.verticalCenterOffset: -15
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: 5
        verticalAlignment: Text.AlignVCenter
        Layout.columnSpan: 3
        Layout.fillHeight: true
        font.pixelSize: 18
      }
    }
    Text {
      id: statusLabel
      width: 72
      height: 25
      color: "#ffffff"
      text: "Status"
      anchors.top: parent.top
      anchors.topMargin: 6
      anchors.left: parent.left
      anchors.leftMargin: 6
      font.bold: true
      verticalAlignment: Text.AlignVCenter
      font.pixelSize: 22
    }
    Button {
      id: pkClearButton
      anchors.right: statusRect.left
      anchors.rightMargin: 6
      anchors.top: statusLabel.bottom
      anchors.topMargin: 6
      anchors.bottom: parent.bottom
      anchors.bottomMargin: 6
      anchors.left: parent.left
      anchors.leftMargin: 6
      background: pkClearBackgroundLoader.item
      contentItem: Text {
        color: "#ffffff"
        text: "Peak Clear"
        font.pixelSize: 12
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
      }

      Loader {
        id: pkClearBackgroundLoader
        sourceComponent: pkClearButton.pressed ? pkClearClicked : pkClearNormal
      }
      Component {
        id: pkClearNormal
        Rectangle { gradient: Gradient { GradientStop { position: 0.0; color: "#69697C" } GradientStop { position: 1.0; color: "#424251" } } }
      }
      Component {
        id: pkClearClicked
        Rectangle { gradient: Gradient { GradientStop { position: 0.0; color: "#3e3e46" } GradientStop { position: 1.0; color: "#1f1f24" } } }
      }

    }
  }
}
]]>https://forum.qt.io/post/339275https://forum.qt.io/post/339275Tue, 26 Jul 2016 01:28:15 GMT<![CDATA[Reply to QML does not update when C++ Abstract Model Updates on Tue, 26 Jul 2016 01:22:45 GMT]]>Channel.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

Rectangle {
  id: channel
  property var gainVal: 49
  property var gainDisp: valToDisp(gainVal)
  property var channelID: "#"
  property var channelName: "ChannelName"
  property var peakValue: false
  property var groupName
  property var group
  property var ribbon
  property var phantom
  property var phase
  property var meterLevel
  property var scribbleStrip

  onPhantomChanged: console.log("Delegate Phantom Changed")
  onPhaseChanged:   console.log("Delegate Phase Changed")
  onGroupChanged:   console.log("Group Changed")
  onRibbonChanged:  console.log("Ribbon Changed")
  onGroupNameChanged: console.log("Group Name Changed")
  onGainValChanged: console.log("Gain Changed")
  function valToDisp(val)
  {
    return (val*1 <= 0) ?  -6: val*1+1
  }
  function updateGain(change)
  {
    gainVal = gainVal + change;
    if(gainVal > 68)
      gainVal = 68;
    if(gainVal < 0)
      gainVal = 0;
    gainSlider.value = gainVal;
  }
  function updateGainValue(value)
  {
    if(value*1 > 68)
      gainVal = 68;
    else if(value*1 < 0)
      gainVal = 0;
    else
      gainVal = value;
    gainSlider.value = gainVal;
  }
  DropShadow {
    id : channelShadow
    color: qsTr("#df000000")
    source: channel
    horizontalOffset: 2
    verticalOffset: 4
    samples: 6
    radius: 3
    cached: true
    anchors.fill: channel
    visible: channel.visible
  }
  width: 174
  height: 399
  color: "#00000000"
  Rectangle {
    id: rectangle1
    x: 212
    y: 133
    width: 174
    height: 344
    color:  "#496c89"
    anchors.rightMargin: 0
    anchors.fill: parent

    GridView {
      id: gridView1
      anchors.right: parent.right
      anchors.rightMargin: 0
      anchors.left: parent.left
      anchors.leftMargin: 0
      anchors.bottom: parent.bottom
      anchors.bottomMargin: 0
      anchors.top: parent.top
      anchors.topMargin: 0
      cellHeight: 70
      cellWidth: 70

      Rectangle {
        id: channelRect
        width: 120
        height: 74
        color: "#333240"
        anchors.top: parent.top
        anchors.topMargin: 6
        anchors.right: meterRect.left
        anchors.rightMargin: 6
        anchors.left: parent.left
        anchors.leftMargin: 6

        Text {
          id: channelIDField
          height: 31
          color: "#ffffff"
          text: channelID
          anchors.right: parent.right
          anchors.rightMargin: 6
          anchors.left: channelNameField.left
          anchors.leftMargin: 6
          anchors.top: parent.top
          anchors.topMargin: 6
          font.pixelSize: 30
          font.bold: true
          horizontalAlignment: Text.AlignLeft
          verticalAlignment: Text.AlignVCenter
        }
        TextField {
          id: channelNameField
          text: channelName
          font.bold: false
          anchors.right: parent.right
          anchors.rightMargin: 3
          anchors.left: parent.left
          anchors.leftMargin: 3
          anchors.bottom: parent.bottom
          anchors.bottomMargin: 6
          anchors.top: channelIDField.bottom
          anchors.topMargin: 0
          font.pixelSize: 15
          selectByMouse: true
          verticalAlignment: TextInput.AlignVCenter
          horizontalAlignment: TextInput.AlignLeft
          validator: RegExpValidator { regExp: /([A-Za-z0-9-_]{1,11})/; }
          background: channelNameBackgroundLoader.item
          color: focus ? "#26c9ff" : "#ffffff"
          selectionColor: "#26c9ff"
          selectedTextColor: "#ffffff"
          Component {
            id: nameFieldNormal
            Rectangle { color: "#333240" }
          }
          Component {
            id: nameFieldSelected
            Rectangle { color: "#636378" }
          }
          Loader {
            id: channelNameBackgroundLoader
            sourceComponent: nameFieldNormal
          }
          onFocusChanged:
          {
            if(focus)
            {
              selectAll();
              channelNameBackgroundLoader.sourceComponent = nameFieldSelected
            }
            else
            {
              channelNameBackgroundLoader.sourceComponent = nameFieldNormal
            }
          }
          onEditingFinished:
          {
            channelName = text;
            text: channelName;
            focus = false;
            channelNameBackgroundLoader.sourceComponent = nameFieldNormal
          }
        }
      }
      Rectangle {
        id: gainRect
        x: 7
        height: 153
        color: "#333240"
        anchors.top: channelRect.bottom
        anchors.topMargin: 6
        anchors.rightMargin: 0
        anchors.leftMargin: 0
        anchors.right: channelRect.right
        anchors.left: channelRect.left

        Text {
          id: gainLabel
          width: 40
          color: "#ffffff"
          text: "Gain"
          anchors.bottom: gainUp.top
          anchors.bottomMargin: 6
          font.pixelSize: 20
          horizontalAlignment: Text.AlignHCenter
          verticalAlignment: Text.AlignVCenter
          anchors.left: parent.left
          anchors.leftMargin: 6
          anchors.top: parent.top
          anchors.topMargin: 6
        }
        TextField {
          id: gainDisplay
          text: gainDisp
          echoMode: TextInput.Normal
          anchors.left: gainLabel.right
          anchors.leftMargin: 6
          anchors.right: parent.right
          anchors.rightMargin: 6
          anchors.bottom: gainUp.top
          anchors.bottomMargin: 6
          anchors.top: parent.top
          anchors.topMargin: 6
          horizontalAlignment: Text.AlignHCenter
          verticalAlignment: TextInput.AlignVCenter
          font.pixelSize: 28
          selectByMouse:true
          validator: IntValidator { bottom: -6; top: 69} //TODO Change behavior on entered fields
          background: gainDisplayBackgroundLoader.item
          color: focus ? "#26c9ff" : "#ffffff";
          selectionColor: "#26c9ff"
          selectedTextColor: "#ffffff"
          Loader {
            id: gainDisplayBackgroundLoader
            sourceComponent: gainDisplayNormal
          }
          Component {
            id: gainDisplayNormal
            Rectangle { color: "#333240"; }
          }
          Component {
            id: gainDisplaySelected
            Rectangle { color: "#636378"; }
          }
          onFocusChanged:
          {
            if(focus)
            {
              selectAll();
              gainDisplayBackgroundLoader.sourceComponent = gainDisplaySelected
              gainSlider.visible = true;
            }
            else
            {
              gainDisplayBackgroundLoader.sourceComponent = gainDisplayNormal;
            }
          }
          onEditingFinished:
          {
            gainSlider.visible = false;
            if(gainDisplay.text*1 < 0)
            {
              updateGainValue(0);
            }
            else if (gainDisplay.text*1 < 2)
            {
              updateGainValue(1);
            }
            else
              updateGainValue(gainDisplay.text*1 - 1);
            focus = false;
            gainDisplayBackgroundLoader.sourceComponent = gainDisplayNormal
          }
        }
        Button {
          id: gainUp
          y: 57
          width: 90
          height: 40
          anchors.left: parent.left
          anchors.leftMargin: 6
          anchors.horizontalCenterOffset: 0
          anchors.horizontalCenter: parent.horizontalCenter
          background: gainUpBackgroundLoader.item
          contentItem: gainUpContentLoader.item
          Loader {
            id: gainUpBackgroundLoader
            sourceComponent: gainUpNormal
          }
          Loader {
            id: gainUpContentLoader
            sourceComponent: upArrow
          }
          Component {
            id: gainUpNormal
            Rectangle { gradient: Gradient { GradientStop { position: 0.0; color: "#69697C" } GradientStop { position: 1.0; color: "#424251" } } }
          }
          Component {
            id: gainUpClicked
            Rectangle { gradient: Gradient { GradientStop { position: 0.0; color: "#3e3e46" } GradientStop { position: 1.0; color: "#1f1f24" } } }
          }
          Component {
            id: upArrow
            Image {
              source: "Images/upArrow.png"
              width: 27
              height: 20
              fillMode: Image.Pad
            }
          }
          Component {
            id: upArrowClicked
            Image {
              source: "Images/upArrowClicked.png"
              fillMode: Image.Pad
            }
          }
          Timer {
            id: gainUpLongpress
            repeat: false
            running: false
            interval: 500
            onTriggered: { gainUpRepeat.restart() }
          }
          Timer {
            id: gainUpRepeat
            repeat: true
            running: false
            interval: 250
            onTriggered: { updateGain(1);  }
          }
          MouseArea {
            id: mouseArea1
            x: 18
            y: 16
            anchors.fill: parent
            hoverEnabled: true
            onPressed:
            {
              updateGain(1);
              gainUpLongpress.restart();
              gainUpBackgroundLoader.sourceComponent = gainUpClicked
              gainUpContentLoader.sourceComponent = upArrowClicked
            }
            onReleased:
            {
              gainUpLongpress.stop();
              gainUpRepeat.stop();
              gainUpBackgroundLoader.sourceComponent = gainUpNormal
              gainUpContentLoader.sourceComponent = upArrow
            }
            onExited:
            {
              gainUpLongpress.stop();
              gainUpRepeat.stop();
              gainUpBackgroundLoader.sourceComponent = gainUpNormal
              gainUpContentLoader.sourceComponent = upArrow
            }
            onCanceled:
            {
              gainUpLongpress.stop();
              gainUpRepeat.stop();
              gainUpBackgroundLoader.sourceComponent = gainUpNormal
              gainUpContentLoader.sourceComponent = upArrow
            }
          }
        }
        Button {
          id: gainDown
          width: 90
          height: 40
          anchors.top: gainUp.bottom
          anchors.topMargin: 6
          anchors.left: parent.left
          anchors.leftMargin: 6
          anchors.horizontalCenterOffset: 0
          anchors.horizontalCenter: parent.horizontalCenter
          contentItem: gainDownContentLoader.item
          background: gainDownBackgroundLoader.item
          Loader {
            id: gainDownBackgroundLoader
            sourceComponent: gainDownNormal
          }
          Loader {
            id: gainDownContentLoader
            sourceComponent: downArrow
          }
          Component {
            id: gainDownNormal
            Rectangle { gradient: Gradient { GradientStop { position: 0.0; color: "#69697C" } GradientStop { position: 1.0; color: "#424251" } } }
          }
          Component {
            id: gainDownClicked
            Rectangle { gradient: Gradient { GradientStop { position: 0.00; color: "#3e3e46"; } GradientStop { position: 1.00; color: "#1f1e24"; } } }
          }
          Component {
            id: downArrow
            Image {
              source: "Images/downArrow.png"
              width: 27
              height: 20
              fillMode: Image.Pad
            }
          }
          Component {
            id: downArrowClicked
            Image {
              source: "Images/downArrowClicked.png"
              fillMode: Image.Pad
            }
          }
          Timer {
            id: gainDownLongpress
            repeat: false
            running: false
            interval: 500
            onTriggered: { gainDownRepeat.restart() }
          }
          Timer {
            id: gainDownRepeat
            repeat: true
            running: false
            interval: 250
            onTriggered: { updateGain(-1) }
          }
          MouseArea {
            id: mouseArea2
            anchors.rightMargin: 0
            anchors.bottomMargin: -1
            anchors.leftMargin: 0
            anchors.topMargin: 1
            anchors.fill: parent
            hoverEnabled: true
            onPressed:
            {
              updateGain(-1);
              gainDownLongpress.restart();
              gainDownBackgroundLoader.sourceComponent = gainDownClicked
              gainDownContentLoader.sourceComponent = downArrowClicked
            }
            onReleased:
            {
              gainDownLongpress.stop();
              gainDownRepeat.stop();
              gainDownBackgroundLoader.sourceComponent = gainDownNormal
              gainDownContentLoader.sourceComponent = downArrow
            }
            onExited:
            {
              gainDownLongpress.stop();
              gainDownRepeat.stop();
              gainDownBackgroundLoader.sourceComponent = gainDownNormal
              gainDownContentLoader.sourceComponent = downArrow
            }
            onCanceled:
            {
              gainDownLongpress.stop();
              gainDownRepeat.stop();
              gainDownBackgroundLoader.sourceComponent = gainDownNormal
              gainDownContentLoader.sourceComponent = downArrow
            }
          }
        }
      }
      Rectangle {
        id: groupRect
        y: 293
        height: 43
        color: "#333240"
        anchors.right: parent.right
        anchors.rightMargin: 6
        anchors.left: channelRect.left
        anchors.leftMargin: 0
        Button {
          id: btnGroup
          y: 3
          width: 55
          height: 33
          text: qsTr("")
          checkable: true
          checked: group
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.leftMargin: 6
          background: groupLoader.item
          contentItem: Text {
            color: "#ffffff"
            text: "group"
            font.pixelSize: 16
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
          }
          onCheckedChanged:
          {
            if(checked)
              groupLoader.sourceComponent = grpStyleON
            else
              groupLoader.sourceComponent = grpStyleOFF
          }
          onClicked:
          {
            group = !group;
          }
          Loader {
            id: groupLoader
            sourceComponent: grpStyleOFF
          }
          Component {
            id: grpStyleON
            Rectangle { gradient: Gradient { GradientStop { position: 1; color: "#2db201" } GradientStop { position: 0; color: "#238c01" } } }
          }
          Component {
            id: grpStyleOFF
            Rectangle { gradient: Gradient { GradientStop { position: 0; color: "#69697C" } GradientStop { position: 1; color: "#424251" } } }
          }
        }
        ComboBox {
          id: groupSelect
          y: 3
          width: 85
          height: 33
          model: groupList
          currentIndex: groupName
          anchors.verticalCenter: parent.verticalCenter
          anchors.right: parent.right
          anchors.rightMargin: 6
          anchors.left: btnGroup.right
          anchors.leftMargin: 6
          Keys.onPressed:
          {
            if(event.key == Qt.Key_Enter || event.key == Qt.Key_Return)
            {
              groupSelect.focus = false
            }
          }
          contentItem: Text {
            color : "#ffffff"
            text: parent.displayText
            font.family: "Arial";
            font.pixelSize: 16;
            verticalAlignment: Text.AlignVCenter;
            horizontalAlignment: Text.AlignLeft;
          }
          background: Rectangle{
            color: "#424251"
          }
          indicator: Rectangle { }
          delegate: ItemDelegate {
            width: groupSelect.width
            contentItem: Text {
              text:modelData;
              horizontalAlignment: Text.AlignHCenter
              verticalAlignment: Text.AlignVCenter
              font.family: "Arial";
              font.pixelSize: 16;
              color: "#ffffff"
            }
            onClicked:
            {
              groupName = index
              groupSelect.focus = false
            }
          }
          popup: Popup {
            id: groupPopup
            width: groupSelect.width
            height:listview.contentHeight 
            margins: 0
            background: Rectangle { color: "#424251" }
            contentItem: ListView {
              id: listview
              anchors.fill: parent
              model: groupSelect.model
              boundsBehavior: Flickable.StopAtBounds
              highlight: Rectangle { color: "#69697C" }
              spacing: 0
              highlightFollowsCurrentItem: true
              currentIndex: groupSelect.highlightedIndex
              delegate: groupSelect.delegate
            }
            enter: Transition {
              SequentialAnimation {
                PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: 0; to: listview.contentHeight }
                PropertyAction { properties: "contentItem.visible"; value: true }
              }
            }
            exit: Transition {
              SequentialAnimation{
                PropertyAction { properties: "contentItem.visible"; value: false }
                PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: listview.contentHeight; to: 0 }
              }
            }
          }
          textRole: "key"
          ListModel
          {
            id: groupList
            ListElement { key: "Group 1"; }
            ListElement { key: "Group 2"; }
            ListElement { key: "Group 3"; }
          }
        }
      }
      Rectangle {
        id: configRect
        height: 44
        color: "#333240"
        anchors.bottom: groupRect.top
        anchors.bottomMargin: 6
        anchors.right: parent.right
        anchors.rightMargin: 6
        anchors.left: parent.left
        anchors.leftMargin: 6
        Row {
          id: configRow
          spacing: 6
          anchors.right: parent.right
          anchors.rightMargin: 6
          anchors.left: parent.left
          anchors.leftMargin: 6
          anchors.top: parent.top
          anchors.topMargin: 6
          anchors.bottom: parent.bottom
          anchors.bottomMargin: 6
          Button {
            id: btnPhantom
            width: (parent.width-parent.spacing*2)/3
            text: qsTr("")
            checkable: true
            checked: phantom
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            background: phantomLoader.item
            contentItem: Text {
              color: "#ffffff"
              text: "48V"
              font.pixelSize: 16
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignHCenter
            }
            Loader {
              id: phantomLoader
              sourceComponent: phantomStyleOFF
            }
            onCheckedChanged:
            {
              if(checked)
                phantomLoader.sourceComponent = phantomStyleON
              else
                phantomLoader.sourceComponent = phantomStyleOFF
            }
            onClicked:
            {
             phantom = !phantom;
             checked = phantom;
            }
            Component {
              id: phantomStyleON 
              Rectangle { gradient: Gradient { GradientStop { position: 1; color: "#d93600" } GradientStop { position: 0; color: "#8c2300" } } }
            }
            Component {
              id: phantomStyleOFF
              Rectangle { gradient: Gradient { GradientStop { position: 0; color: "#69697C" } GradientStop { position: 1; color: "#424251" } } }
            }
          }
          Button {
            id: btnPhase
            width: (parent.width-parent.spacing*2)/3
            text: qsTr("")
            state: "OFF"
            checkable: true
            checked: phase
            anchors.bottom: parent.bottom
            anchors.top: parent.top
            anchors.bottomMargin: 0
            anchors.topMargin: 0
            contentItem: Text {
              color: "#ffffff"
              text: "Ø"
              font.pixelSize: 16
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignHCenter
            }
            background: phaseLoader.item
            Loader{
              id: phaseLoader
              sourceComponent: phaseStyleOFF
            }
            onCheckedChanged:
            {
              if(checked)
                phaseLoader.sourceComponent = phaseStyleON
              else
                phaseLoader.sourceComponent = phaseStyleOFF
            }
            onClicked:
            {
              phase = !phase;
              checked: phase;
            }
            Component {
              id: phaseStyleON
              Rectangle { gradient: Gradient { GradientStop { position: 1; color: "#d9a300" } GradientStop { position: 0; color: "#8c6900" } } }
            }
            Component {
              id: phaseStyleOFF
              Rectangle { gradient: Gradient { GradientStop { position: 0; color: "#69697C" } GradientStop { position: 1; color: "#424251" } } }
            }
          }
          Button {
            id: btnRibbon
            width: (parent.width-parent.spacing*2)/3
            text: qsTr("")
            checkable: true
            checked: ribbon
            anchors.bottom: parent.bottom
            anchors.top: parent.top
            anchors.bottomMargin: 0
            anchors.topMargin: 0
            background: ribbonLoader.item
            contentItem: Text {
              color: "#ffffff"
              text: "RBN"
              font.pixelSize: 16
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignHCenter
            }
            Loader {
              id: ribbonLoader
              sourceComponent: ribbonStyleOFF
            }
            onCheckedChanged:
            {
              if(checked)
                ribbonLoader.sourceComponent = ribbonStyleON
              else
                ribbonLoader.sourceComponent = ribbonStyleOFF
            }
            onClicked:
            {
              ribbon = !ribbon;
              checked: ribbon;
            }
            Component {
              id: ribbonStyleON
              Rectangle { gradient: Gradient { GradientStop { position: 1; color: "#006dd9" } GradientStop { position: 0; color: "#00468c" } } }
            }
            Component {
              id: ribbonStyleOFF
              Rectangle { gradient: Gradient { GradientStop { position: 0; color: "#69697C" } GradientStop { position: 1; color: "#424251" } } }
            }
          }
        }
      }
      Rectangle {
        id: meterRect
        width: 46
        color: "#333240"
        anchors.topMargin: 6
        anchors.rightMargin: 6
        anchors.left: gainRect.right
        anchors.leftMargin: 6
        anchors.bottom: gainRect.bottom
        anchors.top: parent.top
        anchors.right: parent.right
        Meter {
          id: meter
          color: "#333240"
          anchors.topMargin: 0
          anchors.fill: parent
        }
      }
      DropShadow {
        id : sliderShadow
        color: qsTr("#df000000")
        source: gainSlider
        horizontalOffset: 3
        verticalOffset: 6
        samples: 16
        radius: 8
        cached: true
        anchors.fill: gainSlider
        visible: gainSlider.visible
      }
      Slider {
        id: gainSlider
        visible: false
        focusPolicy: Qt.NoFocus
        width: 55
        height: 300
        anchors.top: channelRect.bottom
        anchors.topMargin: 0
        anchors.leftMargin: 6
        anchors.bottomMargin: 10
        snapMode: Slider.SnapAlways
        stepSize: 1
        from: 0
        to: 68
        orientation: Qt.Vertical
        background:  Rectangle {
          x: gainSlider.leftPadding
          y: gainSlider.topPadding
          implicitWidth: 50
          implicitHeight: 300
          width: gainSlider.availableWidth
          height: gainSlider.availableHeight
          color: "#333240"; border.width: 3; border.color: "#898989";
          Rectangle{
            color: "#898989"
            //height: parent.height
            width: 6
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.topMargin: 12
            anchors.bottomMargin: 12
          }
        }
        handle:  Image {
          x: gainSlider.leftPadding + gainSlider.availableWidth/2 - width/2
          y: gainSlider.topPadding + gainSlider.visualPosition * (gainSlider.availableHeight - height)
          source: "/Images/fader_vert_png.png"; height: 26; width: 33
        }
        Component.onCompleted:
        {
          value = gainVal
        }
        onPositionChanged:
        {
          value = Math.floor(value)
          updateGainValue(Math.floor(gainSlider.position*69));
        }
      }
      Rectangle {
        id: rectangle2
        color: "#333240"
        z: -1
        anchors.left: parent.left
        anchors.leftMargin: 6
        anchors.right: parent.right
        anchors.rightMargin: 6
        anchors.top: groupRect.bottom
        anchors.topMargin: 6
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 6
        TextArea {
          id: scribbleBox
          x: 41
          y: 32
          width: 80
          height: 20
          color: focus ? "#26c9ff" : "#ffffff";
          bottomPadding: 3
          rightPadding: 3
          topPadding: 3
          leftPadding: 3
          wrapMode: Text.NoWrap
          clip: false
          selectionColor: "#26c9ff"
          selectedTextColor: "#ffffff"
          placeholderText: qsTr("notes...")
          anchors.rightMargin: 3
          anchors.leftMargin: 3
          anchors.bottomMargin: 3
          anchors.topMargin: 3
          anchors.fill: parent
          background: scribbleBackgroundLoader.item
          selectByMouse:true
          font.pixelSize: 14
          text: scribbleStrip
          Loader {
            id: scribbleBackgroundLoader
            sourceComponent: scribbleNormal
          }
          onFocusChanged:
          {
            if(focus)
            {
              selectAll();
              scribbleBackgroundLoader.sourceComponent = scribbleSelected
            }
            else
            {
              color: "#ffffff";
              scribbleBackgroundLoader.sourceComponent = scribbleNormal
            }
          }
          Keys.onPressed:
          {
            if(event.key == Qt.Key_Enter || event.key == Qt.Key_Return)
            {
              console.log("Enter")
              if(lineCount == 2)
              {
                console.log("Line count = 2")
                event.accepted = true
              }
            }
          }
          onEditingFinished:
          {
            focus = false;
            scribbleBackgroundLoader.sourceComponent = scribbleNormal;
            scribbleStrip = text;
          }
          Component {
            id: scribbleNormal
            Rectangle { anchors.fill: parent; color: "#333240"; }
          }
          Component {
            id: scribbleSelected
            Rectangle { anchors.fill: parent; color: "#636378"; }
          }
        }
      }
    }
  }
}
]]>https://forum.qt.io/post/339273https://forum.qt.io/post/339273Tue, 26 Jul 2016 01:22:45 GMT<![CDATA[Reply to QML does not update when C++ Abstract Model Updates on Tue, 26 Jul 2016 01:15:06 GMT]]>Preamp.qml

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0

Rectangle {
  id: pre
  property var devName: "preamp";
  property int devID: 0;
  property int clkSource
  property int clkOutSource
  property int outFormat
  property int sampleRate
  property bool online
  property bool clkStatus
  property variant channelModel
  property int startChNum: (devID-1)*8 + 1;

  signal channelChange(var index, var prop, var value)

  height: 410
  width: parent.width
  color: "#00000000"
  ListView {
    Component.onCompleted:
    {
      currentIndex = 0;
    }
    id: channelView
    anchors.left: parent.left
    anchors.right: status.left
    anchors.rightMargin: 12
    contentWidth: 1488
    contentHeight: 400
    boundsBehavior: Flickable.StopAtBounds
    flickableDirection: Flickable.AutoFlickIfNeeded
    orientation: ListView.Horizontal
    interactive: true
    spacing: 12
    delegate: Channel {
      id: ch
      channelID: model.number;
      channelName: model.name;
      gainVal: model.gain;
      phantom: model.phantom;
      phase: model.phase;
      ribbon: model.ribbon;
      group: model.group;
      groupName: model.groupName;
      meterLevel: model.meterLevel;
      scribbleStrip: model.scribbleStrip;
      onPhantomChanged:
      {
        pre.channelChange(model.modelIndex, "phantomRole", phantom)
        channelView.currentIndex = index;
      }
      onPhaseChanged:
      {
        pre.channelChange(index, "phaseRole", phase)
        channelView.currentIndex = index;
      }
      onGroupChanged:
      {
        pre.channelChange(index, "groupRole", group)
        channelView.currentIndex = index;
      }
      onRibbonChanged:
      {
        pre.channelChange(index, "ribbonRole", ribbon)
        channelView.currentIndex = index;
      }
      onGroupNameChanged:
      {
        pre.channelChange(index, "groupNameRole", groupName)
        channelView.currentIndex = index;
      }
      onGainValChanged:
      {
        pre.channelChange(index, "gainRole", gainVal)
        channelView.currentIndex = index;
      }
      onChannelNameChanged:
      {
        pre.channelChange(index, "nameRole", channelName)
        channelView.currentIndex = index;
      }
      onScribbleStripChanged:
      {
        pre.channelChange(index, "scribbleStripRole", scribbleStrip)
        channelView.currentIndex = index;
      }
    }
    model: channelModel
    ScrollBar.horizontal: ScrollBar {
    }
  }
  Preamp_status {
    id: status
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.rightMargin: 6
    anchors.leftMargin: 12
    online: parent.online
    clkStatus: parent.clkStatus
    clkSource: parent.clkSource
    clkOutSource: parent.clkOutSource
    sampleRate: parent.sampleRate
    outFormat: parent.outFormat
    devID: parent.devID
    onSampleRateChanged:
    {
      pre.channelChange(channelView.CurrentIndex, "sampleRateRole", sampleRate)
    }
    onOnlineChanged:
    {
      pre.channelChange(channelView.currentIndex, "onlineRole", online)
    }
    onClkStatusChanged:
    {
      pre.channelChange(channelView.currentIndex, "clkStatusRole", clkStatus)
    }
    onClkSourceChanged:
    {
      pre.channelChange(channelView.currentIndex, "clkSourceRole", clkSource)
    }
    onClkOutSourceChanged:
    {
      pre.channelChange(channelView.currentIndex, "clkOutSourceRole", clkOutSource)
    }
    onOutFormatChanged:
    {
      pre.channelChange(channelView.currentIndex, "outFormatRole", outFormat)
    }
  }
}

MainForm.qml

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
Window {
  id:top
  visible: true
  Connections
  {
    target: preampModel
    onDataChanged:{
      preamp1.devID = preampModel.preampID;
      preamp1.devName = "";
      preamp1.clkSource = preampModel.clkSource
      preamp1.clkOutSource = preampModel.clkOutSource
      preamp1.outFormat =preampModel.outFormat
      preamp1.sampleRate = preampModel.sampleRate
      preamp1.online = preampModel.online
      preamp1.clkStatus = preampModel.clkStatus
      preamp1.channelModel = preampModel
      preamp1.updated();
    }
  }
  Rectangle {
    id: main
    objectName: "mainRect"
    anchors.fill: parent
    color: "#505050"
    Rectangle {
      id: navBar
      anchors.top: parent.top
      width: parent.width*(7/12)
      height: 60
      z: 10
      color: "#000000"
      Row {
        id: row1
        x: parent.x
        y: parent.y
        width: parent.width
        height: parent.height
        Rectangle {
          id: preampsBtn
          width: parent.width/3
          height: parent.height
          color: parent.parent.color
          Text {
            id: preampTxt
            x: 40
            y: 9
            width: 240
            height: 43
            color: "#ffffff"
            text: qsTr("Preamp")
            font.pixelSize: 26
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
          }
          MouseArea {
            id: mouseArea_preamps
            width: 100
            height: 100
            anchors.fill: parent
          }
        }
        Rectangle {
          id: mixerBtn
          width: parent.width/3
          height: parent.height
          color: parent.parent.color
          Text {
            id: mixerTxt
            x: 40
            y: 9
            width: 240
            height: 43
            color: "#ffffff"
            text: "Mixer"
            font.pixelSize: 26
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
          }
          MouseArea {
            id: mouseArea_mixer
            width: 100
            height: 100
            anchors.fill: parent
          }
        }
        Rectangle {
          id: setupBtn
          width: parent.width/3
          height: parent.height
          color: parent.parent.color
          Text {
            id: setupTxt
            x: 40
            y: 9
            width: 240
            height: 43
            color: "#ffffff"
            text: qsTr("Setup")
            font.pixelSize: 26
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
          }
          MouseArea {
            id: mouseArea_setup
            width: 100
            height: 100
            anchors.fill: parent
          }
        }
      }
    }
    Rectangle {
      id: presetBar
      x: parent.width - width
      y: 0
      width: parent.width *(5/12)-20
      height: 60
      z:10
      color: "#000000"
      Row {
        id: row2
        x: 268
        y: 24
        width: 200
        height: 400
        anchors.fill: parent
        Rectangle {
          id: rectangle1
          width: parent.width*(3/14)
          height: parent.height
          color: parent.parent.color
          Text {
            id: text4
            color: "#ffffff"
            text: qsTr("Preset")
            font.pixelSize: 26
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors.fill: parent
          }
        }
        Rectangle {
          id: rectangle2
          width: parent.width*(5/14)
          height: parent.height
          color: parent.parent.color
          ComboBox {
            id: presetBox
            y: 3
            model: presetList
            anchors.fill:parent
            anchors.margins: 3
            Keys.onPressed:
            {
              if(event.key == Qt.Key_Enter || event.key == Qt.Key_Return)
              {
                presetBox.focus = false
              }
            }
            contentItem: Text {
              color : "#496c89"
              text: presetBox.displayText
              font.family: "Arial";
              font.pixelSize: 26;
              verticalAlignment: Text.AlignVCenter;
              horizontalAlignment: Text.AlignHCenter;
            }
            background: Rectangle{
              color: "#16161d"
            }
            indicator: Rectangle { }
            delegate: ItemDelegate {
              width: presetBox.width
              contentItem: Text {
                text: modelData;
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.family: "Arial";
                font.pixelSize: 26;
                color: "#7a9cb8"
              }
              onClicked:
              {
                presetBox.currentIndex = index
                preamplistview.currentIndex = index
                presetBox.focus = false
              }
            }
            popup: Popup {
              id: preampPopup
              width: parent.width
              height: preamplistview.contentHeight
              margins: 0
              background: Rectangle { color: "#16161d" }
              contentItem: ListView {
                id: preamplistview
                anchors.fill: parent
                model: presetBox.model
                boundsBehavior: Flickable.StopAtBounds
                highlight: Rectangle { color: "#69697C" }
                spacing: 0
                highlightFollowsCurrentItem: true
                currentIndex: presetBox.highlightedIndex
                delegate: presetBox.delegate
              }
              enter: Transition {
                PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: 0; to: preampPopup.parent.height*preampPopup.parent.count }
              }
              exit: Transition {
                PropertyAnimation { properties: "height"; easing.type: Easing.OutSine; duration: 250; from: preampPopup.parent.height*preampPopup.parent.count; to: 0 }
              }
            }
            textRole: "key"
            ListModel
            {
              id: presetList
              ListElement { key: "Defaults"; }
              ListElement { key: "Preset 1"; }
              ListElement { key: "Preset 2"; }
            }
          }
        }
        Rectangle {
          id: rectangle3
          width: parent.width*(3/14)
          height: parent.height
          color: parent.parent.color
          Text {
            id: text5
            x: 277
            y: 23
            color: "#ffffff"
            text: qsTr("store")
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            anchors.fill: parent
            font.pixelSize: 26
          }
        }
        Rectangle {
          id: rectangle4
          width: parent.width*(3/14)
          height: parent.height
          color: parent.parent.color
          Text {
            id: text6
            color: "#ffffff"
            text: qsTr("recall")
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 26
          }
        }
      }
    }
    function updateModel(index, role, value)
    {
      preampModel.setProperty(index, role, value)
      //console.log("Model Updated")
    }
    Preamp {
      id: preamp1
      devID: preampModel.preampID;
      devName: "";
      clkSource: preampModel.clkSource
      clkOutSource: preampModel.clkOutSource
      outFormat:preampModel.outFormat
      sampleRate: preampModel.sampleRate
      online: preampModel.online
      clkStatus: preampModel.clkStatus
      channelModel: preampModel
      anchors.right: parent.right
      anchors.rightMargin: 0
      anchors.left: parent.left
      anchors.leftMargin: 6
      anchors.top: navBar.bottom
      anchors.topMargin: 6
      anchors.bottom: parent.bottom
      anchors.bottomMargin: 6
      onChannelChange:
      {
          main.updateModel(index, prop, value)
      }
    }
  }
}
]]>https://forum.qt.io/post/339272https://forum.qt.io/post/339272Tue, 26 Jul 2016 01:15:06 GMT