Page 3 of 3 FirstFirst 123
Results 41 to 54 of 54

Thread: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

  1. #41
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    Quote Originally Posted by Nizars View Post
    I used a QSignalMaper and a QHash to map the different network replies to their requests.
    Working solution but probably more complicated than necessary.

    The thing you need is a way to associate a QNetworReply with a Card ID, so that when the reply is finished you know which card to update.
    Your cardMID is an int, you can simply store that on the reply object as a dynamic property
    Qt Code:
    1. QNetworkReply *reply = manager->get(...)
    2. reply->setProperty("cardId", cardMID);
    To copy to clipboard, switch view to plain text mode 
    and retrieve in the slot connected to the manager's replyFinished signal

    Qt Code:
    1. void MyClass::onReplyFinished(QNetworkReply *reply)
    2. {
    3. int cardMID = reply->property("cardId").toInt();
    4. }
    To copy to clipboard, switch view to plain text mode 

    Cheers,
    _

  2. The following user says thank you to anda_skoa for this useful post:

    Nizars (15th January 2017)

  3. #42
    Join Date
    Dec 2016
    Posts
    46
    Thanks
    20
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    I have a question and I need a suggestion on how to approach the small problem it concerns.

    When I add a Card to an Album, I have a temporary placeholder card that occupies the space until the Card is ready. A transition animation is triggered when the Card object has been updated with the information it needs from the remote API. It's all nice and good so far but there is a small inconsistency that is bothering me.

    The transition animation doesn't start once the QML has finished downloading the Image of the Card. It starts when the card has been updated with information about it's imag URL. This inconsistency is noticeable because sometime the cards would load faster or slower than usual. The problem here is that QML Image doesn't have an onImageLoaded() signal, it only has a Component.onCompleted() as far as I have been able to tell and it's not the same thing.

    I have been trying to find different ways to time the animation start with when the Image has been downloaded. I tried Canvas, requestPaint() and makeDirty() but there is a problem I had using them. The state seems to affect all the cards in the GridView. I want the animation to show only once and only when a card has just been added, not every time the card is shown. I also found out about Image provider classes but it seems like it might be complicated. What do you think a suitable solution for this could be?

    Here is how mechanism for adding a card looks like right now:


  4. #43
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    Quote Originally Posted by Nizars View Post
    The problem here is that QML Image doesn't have an onImageLoaded() signal
    It has a "status" property, each property has a changed signal and for each signal there is a signal handler.

    So
    Qt Code:
    1. onStatusChanged: if (status == Image.Ready) console.log("image loading completed");
    To copy to clipboard, switch view to plain text mode 

    Cheers,
    _

  5. The following user says thank you to anda_skoa for this useful post:

    Nizars (16th January 2017)

  6. #44
    Join Date
    Dec 2016
    Posts
    46
    Thanks
    20
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    Ok so I have tried this method but it didn't really work well for my case because when I switch the albums and back again the images start reloading again. It seems that they get removed from the catch and are download again which triggers the onStatusChanged signal for all of them. I would have ideally wanted the loading animation to show only the first time a card is added to an album and have all the cards remain cached even when switching between albums.

    The interesting thing here is that the cards that are loaded from the C++ don't get affected by this cache issue. Basically, in my app.cpp, which initialized the models and the connections, I have a few lines of code in the constructor that add a few cards to the albums. I have them there just so that I have some cards in the albums when I run the app so that I don't have to add cards every time I run the program. Those cards don't behave in the same way as the ones that I add after the program has started.

    I don't really know why this is the case or if it is even a cache issue but I would prefer if all the cards act that way. I have tried using states, conditional functions, timers and what not to work around this but I never really reached the result I wanted. So what I am wondering now is, why are those cards acting differently? Would adding an image provider class solve this problem for me?

    Edit: I basically want the cards to remain "cached" when switching between albums. Currently, the cards added in the App constructor stay cached when switching albums. Cards added after the program has "started" disappear after switching albums and then start to reappear when I switch back to their album as if they are being downloaded again. I would like to have all the cards remain "cached" if possible even when switching between albums. And by cards I mean card images.
    Last edited by Nizars; 16th January 2017 at 19:46.

  7. #45
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,229
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    Sounds to me like your AlbumsManager or whatever is responsible for maintaining the "current album" is inappropriately telling the CardsManager to remove the card when the current album changes.

    As for the dynamic card download - this implies your app will be unusable if the user doesn't have a live internet connection (or the card server is down, or whatever). With all the work you've done, why not also add a SQLite database backend to persistently store the cards locally? Then you only need to go out to the web when the user adds a new card that isn't in the DB.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  8. The following user says thank you to d_stranz for this useful post:

    Nizars (17th January 2017)

  9. #46
    Join Date
    Dec 2016
    Posts
    46
    Thanks
    20
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    I like your approach. I will give it a shot.

  10. #47
    Join Date
    Dec 2016
    Posts
    46
    Thanks
    20
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    Some progress! I have taught myself som SQL stuff. Add SQL Models and an ImageProvider.
    I still have some stuff that needs to be ironed out. All the Albums show all the cards, for example, the signals aren't properly organized which doesn't stop the cards from the appearing on time.
    I have also modified a nice little loading spinner with After effects.
    By the way, I am using OpenSSL and have added the needed library files to the project. Is it safe to have them on GitHub if I want to share the project source code?
    Forgive my poor music taste:


    Edit: Here is a design of the classes interacting:
    Last edited by Nizars; 22nd January 2017 at 20:36.

  11. #48
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,229
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    Edit: Here is a design of the classes interacting:
    I'm not sure what you're trying to add here, but none of the numerous times you've tried to post something this way I never see anything in my browser. Maybe it is something with my browser (Firefox) and the security settings I use, but whatever it is all I ever see is "Here is a design of the classes interacting:" followed by nothing.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  12. #49
    Join Date
    Dec 2016
    Posts
    46
    Thanks
    20
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    Strange, I will be adding the links then from now on.
    Here is the image link: http://i.imgur.com/3GUgPOv.jpg

  13. #50
    Join Date
    Dec 2016
    Posts
    46
    Thanks
    20
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    I Have made some more progress. Redisign, borderless, better organization, sliding full menu sidebar. Added a QSqlRelationalTabelModel, search, filtering and an RSS News feed reader. As well as better overall document structuring.



    Here is the way I have used the implemented the project in case anybody wants to do something similar:

    PokeUI2.pro

    Qt Code:
    1. QT += qml sql quick widgets network
    2.  
    3. LIBS += -LC:/OpenSSL-Win64/lib -llibeay32
    4. LIBS += -LC:/OpenSSL-Win64/lib -lssleay32
    5. INCLUDEPATH += C:/OpenSSL-Win64/include
    6.  
    7. CONFIG += c++11
    8.  
    9. SOURCES += main.cpp \
    10. cardsmodel.cpp \
    11. pokeapp.cpp \
    12. albumsmodel.cpp \
    13. albummodel.cpp \
    14. proxymodel.cpp
    15.  
    16. RESOURCES += qml.qrc
    17.  
    18. RC_ICONS = appIcon.ico
    19.  
    20. # Additional import path used to resolve QML modules in Qt Creator's code model
    21. QML_IMPORT_PATH =
    22.  
    23. # Additional import path used to resolve QML modules just for Qt Quick Designer
    24. QML_DESIGNER_IMPORT_PATH =
    25.  
    26. # The following define makes your compiler emit warnings if you use
    27. # any feature of Qt which as been marked deprecated (the exact warnings
    28. # depend on your compiler). Please consult the documentation of the
    29. # deprecated API in order to know how to port your code away from it.
    30. DEFINES += QT_DEPRECATED_WARNINGS
    31.  
    32. # You can also make your code fail to compile if you use deprecated APIs.
    33. # In order to do so, uncomment the following line.
    34. # You can also select to disable deprecated APIs only up to a certain version of Qt.
    35. #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
    36.  
    37. # Default rules for deployment.
    38. qnx: target.path = /tmp/$${TARGET}/bin
    39. else: unix:!android: target.path = /opt/$${TARGET}/bin
    40. !isEmpty(target.path): INSTALLS += target
    41.  
    42. HEADERS += \
    43. cursorposprovider.h \
    44. cardsmodel.h \
    45. pokeapp.h \
    46. albumsmodel.h \
    47. albummodel.h \
    48. proxymodel.h
    To copy to clipboard, switch view to plain text mode 

    main.cpp

    Qt Code:
    1. #include <QGuiApplication>
    2. #include <QApplication>
    3. #include <QQmlApplicationEngine>
    4. #include <QQmlContext>
    5. #include <QDebug>
    6. #include <QSqlError>
    7. #include "cursorposprovider.h"
    8. #include "pokeapp.h"
    9.  
    10. int main(int argc, char *argv[])
    11. {
    12. QCoreApplication::setAttribute(Qt::AA_EnableHighDp iScaling);
    13. QApplication app(argc, argv);
    14.  
    15. QQmlApplicationEngine engine;
    16.  
    17. qmlRegisterType<PokeApp>("PokeApp.Classes.Core", 1, 0, "PokeApp");
    18. PokeApp pokeApp;
    19.  
    20. CursorPosProvider mousePosProvider;
    21. QQmlContext *ctxt0 = engine.rootContext();
    22. ctxt0->setContextProperty("pokeApp", &pokeApp);
    23. QQmlContext *ctxt1 = engine.rootContext();
    24. ctxt1->setContextProperty("mousePosition", &mousePosProvider);
    25. QQmlContext *ctxt2 = engine.rootContext();
    26. ctxt2->setContextProperty("albumsModel", pokeApp.getAlbumsModel());
    27. QQmlContext *ctxt3 = engine.rootContext();
    28. ctxt3->setContextProperty("cardsModel", pokeApp.getCardsModel());
    29. QQmlContext *ctxt4 = engine.rootContext();
    30. ctxt4->setContextProperty("proxyModel", pokeApp.getProxyModel());
    31.  
    32. engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    33. return app.exec();
    34. }
    To copy to clipboard, switch view to plain text mode 

    albumsmodel.h

    Qt Code:
    1. #ifndef ALBUMSMODEL_H
    2. #define ALBUMSMODEL_H
    3. #include <QSqlRelationalTableModel>
    4.  
    5. class AlbumsModel : public QSqlRelationalTableModel
    6. {
    7. Q_OBJECT
    8. Q_PROPERTY( int count READ rowCount() NOTIFY countChanged())
    9.  
    10. public:
    11.  
    12. explicit AlbumsModel(const AlbumsModel &other, QObject *parent = 0);
    13.  
    14. explicit AlbumsModel(QObject *parent = 0, QSqlDatabase db = QSqlDatabase());
    15.  
    16. ~AlbumsModel();
    17.  
    18. Q_INVOKABLE QVariant data(const QModelIndex &index, int role=Qt::DisplayRole ) const;
    19.  
    20. virtual void setTable ( const QString &table_name );
    21.  
    22. virtual QHash<int, QByteArray> roleNames() const;
    23.  
    24. void generateRoleNames();
    25. signals:
    26. void countChanged();
    27.  
    28. private:
    29. int count;
    30. QHash<int, QByteArray> roles;
    31. };
    32.  
    33. #endif // ALBUMSMODEL_H
    To copy to clipboard, switch view to plain text mode 

    albumsmodel.cpp
    Qt Code:
    1. #include "albumsmodel.h"
    2.  
    3.  
    4. AlbumsModel::AlbumsModel(const AlbumsModel &other, QObject *parent)
    5. : QSqlRelationalTableModel(parent,other.database())
    6. {
    7.  
    8. }
    9.  
    10. AlbumsModel::AlbumsModel(QObject *parent, QSqlDatabase db)
    11. {
    12.  
    13. }
    14.  
    15. AlbumsModel::~AlbumsModel()
    16. {
    17.  
    18. }
    19.  
    20. QVariant AlbumsModel::data( const QModelIndex & index, int role ) const
    21. {
    22.  
    23. if(index.row() >= rowCount())
    24. {
    25. return QString("");
    26. }
    27. if(role < Qt::UserRole)
    28. {
    29. return QSqlRelationalTableModel::data(index, role);
    30. }
    31.  
    32. QModelIndex modelIndex = this->index(index.row(), role - Qt::UserRole - 1 );
    33. return QSqlQueryModel::data(modelIndex, Qt::EditRole);
    34. }
    35.  
    36. void AlbumsModel::generateRoleNames()
    37. {
    38. roles.clear();
    39. for (int i = 0; i < columnCount(); i++)
    40. {
    41. roles[Qt::UserRole + i + 1] = QVariant(headerData(i, Qt::Horizontal).toString()).toByteArray();
    42. }
    43. }
    44.  
    45. QHash<int, QByteArray> AlbumsModel::roleNames() const
    46. {
    47. return roles;
    48. }
    49.  
    50.  
    51. void AlbumsModel::setTable ( const QString &table_name )
    52. {
    53. QSqlRelationalTableModel::setTable(table_name);
    54. generateRoleNames();
    55. }
    To copy to clipboard, switch view to plain text mode 

    cardsmodel.h


    Qt Code:
    1. #ifndef CARDSMODEL_H
    2. #define CARDSMODEL_H
    3. #include <QSqlRelationalTableModel>
    4.  
    5. class CardsModel : public QSqlRelationalTableModel
    6. {
    7. Q_OBJECT
    8. Q_PROPERTY( int count READ rowCount() NOTIFY countChanged())
    9.  
    10. public:
    11.  
    12. explicit CardsModel(const CardsModel &other, QObject *parent = 0);
    13.  
    14. explicit CardsModel(QObject *parent = 0, QSqlDatabase db = QSqlDatabase());
    15.  
    16. ~CardsModel();
    17.  
    18. Q_INVOKABLE QVariant data(const QModelIndex &index, int role=Qt::DisplayRole ) const;
    19.  
    20. virtual void setTable ( const QString &table_name );
    21.  
    22. virtual QHash<int, QByteArray> roleNames() const;
    23.  
    24. void generateRoleNames();
    25.  
    26. signals:
    27. void countChanged();
    28.  
    29. private:
    30. int count;
    31. QHash<int, QByteArray> roles;
    32. };
    33.  
    34. #endif // CARDSMODEL_H
    To copy to clipboard, switch view to plain text mode 


    cardsmodel.cpp

    Qt Code:
    1. #include "cardsmodel.h"
    2.  
    3. CardsModel::CardsModel(const CardsModel &other, QObject *parent)
    4. : QSqlRelationalTableModel(parent,other.database())
    5. {
    6.  
    7. }
    8.  
    9. CardsModel::CardsModel(QObject *parent, QSqlDatabase db)
    10. {
    11.  
    12. }
    13.  
    14. CardsModel::~CardsModel()
    15. {
    16.  
    17. }
    18.  
    19. QVariant CardsModel::data( const QModelIndex & index, int role ) const
    20. {
    21.  
    22. if(index.row() >= rowCount())
    23. {
    24. return QString("");
    25. }
    26. if(role < Qt::UserRole)
    27. {
    28. return QSqlRelationalTableModel::data(index, role);
    29. }
    30.  
    31. QModelIndex modelIndex = this->index(index.row(), role - Qt::UserRole - 1 );
    32. return QSqlQueryModel::data(modelIndex, Qt::EditRole);
    33. }
    34.  
    35. void CardsModel::generateRoleNames()
    36. {
    37. roles.clear();
    38. for (int i = 0; i < columnCount(); i++)
    39. {
    40. roles[Qt::UserRole + i + 1] = QVariant(headerData(i, Qt::Horizontal).toString()).toByteArray();
    41. }
    42. }
    43.  
    44. QHash<int, QByteArray> CardsModel::roleNames() const
    45. {
    46. return roles;
    47. }
    48.  
    49. void CardsModel::setTable ( const QString &table_name )
    50. {
    51. QSqlRelationalTableModel::setTable(table_name);
    52. generateRoleNames();
    53. }
    To copy to clipboard, switch view to plain text mode 

    cursorposprovider.h

    Qt Code:
    1. #ifndef CURSORPOSPROVIDER_H
    2. #define CURSORPOSPROVIDER_H
    3. #include <Qobject>
    4. #include <QPointF>
    5. #include <QCursor>
    6.  
    7.  
    8. class CursorPosProvider : public QObject
    9. {
    10. Q_OBJECT
    11. public:
    12. explicit CursorPosProvider(QObject *parent = nullptr) : QObject(parent)
    13. {
    14. }
    15. virtual ~CursorPosProvider() = default;
    16.  
    17. Q_INVOKABLE QPointF cursorPos()
    18. {
    19. return QCursor::pos();
    20. }
    21. };
    22.  
    23. #endif // CURSORPOSPROVIDER_H
    To copy to clipboard, switch view to plain text mode 

    pokeapp.h

    Qt Code:
    1. #ifndef POKEAPP_H
    2. #define POKEAPP_H
    3. #include <QtQml>
    4. #include <QSqlError>
    5. #include <QObject>
    6. #include <QDebug>
    7. #include <QPixmap>
    8. #include <QSqlRelationalTableModel>
    9. #include <QSortFilterProxyModel>
    10. #include "cardsmodel.h"
    11. #include "albumsmodel.h"
    12. #include "proxymodel.h"
    13.  
    14. class PokeApp: public QObject
    15. {
    16. Q_OBJECT
    17.  
    18. // Models
    19. Q_PROPERTY(AlbumsModel *albumsModel READ getAlbumsModel)
    20. Q_PROPERTY(CardsModel *cardsModel READ getCardsModel)
    21. Q_PROPERTY(ProxyModel *proxyModel READ getProxyModel)
    22.  
    23. public:
    24. explicit PokeApp(QObject *parent = 0);
    25. ~PokeApp();
    26.  
    27. // Getters
    28. AlbumsModel* getAlbumsModel() const;
    29. CardsModel* getCardsModel() const;
    30. ProxyModel* getProxyModel() const;
    31.  
    32. private:
    33. AlbumsModel* albumsModel;
    34. CardsModel* cardsModel;
    35. ProxyModel* proxyModel;
    36.  
    37. };
    38.  
    39. #endif // !POKEAPP_H
    To copy to clipboard, switch view to plain text mode 

    pokeapp.cpp

    Qt Code:
    1. #include "pokeapp.h"
    2.  
    3. PokeApp::PokeApp(QObject *parent): QObject(parent)
    4. {
    5.  
    6. // Register Types
    7. qmlRegisterType<AlbumsModel>("PokeApp.Classes.Core", 1, 0, "AlbumsModel");
    8. qmlRegisterType<CardsModel>("PokeApp.Classes.Core", 1, 0, "CardsModel");
    9. qmlRegisterType<ProxyModel>("PokeApp.Classes.Core", 1, 0, "ProxyModel");
    10.  
    11. // Database
    12. QString serverName = "LOCALHOST\\SQLEXPRESS";
    13. QString dbName = "pokeManager";
    14. this->db = QSqlDatabase::addDatabase("QODBC");
    15. this->db.setConnectOptions();
    16. QString dsn = QString("DRIVER={SQL SERVER};SERVER=%1;DATABASE=%2;Trusted_Connection=Yes;").arg(serverName).arg(dbName);
    17. db.setDatabaseName(dsn);
    18. if(db.open())
    19. {
    20. qDebug() << "Connection to database opened.";
    21. }
    22. else
    23. {
    24. qDebug() << "ERROR: Couldn't connect to database!\n" << db.lastError();
    25. }
    26.  
    27. // ProxyModel
    28. this->proxyModel = new ProxyModel();
    29.  
    30. // AlbumsModel
    31. this->albumsModel = new AlbumsModel(0,db.database());
    32. this->albumsModel->setTable("Albums2");
    33. this->albumsModel->select();
    34.  
    35. // CardsModel
    36. this->cardsModel = new CardsModel(0,db.database());
    37. this->cardsModel->setTable("Cards3");
    38. this->cardsModel->setRelation(1, QSqlRelation("Albums2", "ID", "albumName"));
    39. this->cardsModel->select();
    40. }
    41.  
    42. AlbumsModel* PokeApp::getAlbumsModel() const
    43. {
    44. return albumsModel;
    45. }
    46.  
    47. CardsModel* PokeApp::getCardsModel() const
    48. {
    49. return cardsModel;
    50. }
    51.  
    52. ProxyModel* PokeApp::getProxyModel() const
    53. {
    54. return proxyModel;
    55. }
    56.  
    57. PokeApp::~PokeApp()
    58. {
    59. this->db.close();
    60. qDebug() << "Connection to database closed.";
    61. }
    To copy to clipboard, switch view to plain text mode 

    proxymodel.h

    Qt Code:
    1. #ifndef PROXYMODEL_H
    2. #define PROXYMODEL_H
    3. #include <QtCore/qsortfilterproxymodel.h>
    4. #include <QtQml/qqmlparserstatus.h>
    5. #include <QtQml/qjsvalue.h>
    6.  
    7. class ProxyModel : public QSortFilterProxyModel, public QQmlParserStatus
    8. {
    9. Q_OBJECT
    10. Q_INTERFACES(QQmlParserStatus)
    11.  
    12. Q_PROPERTY(int count READ count NOTIFY countChanged)
    13. Q_PROPERTY(QObject *source READ source WRITE setSource)
    14.  
    15. Q_PROPERTY(QByteArray sortRole READ sortRole WRITE setSortRole)
    16. Q_PROPERTY(Qt::SortOrder sortOrder READ sortOrder WRITE setSortOrder)
    17.  
    18. Q_PROPERTY(QByteArray filterRole READ filterRole WRITE setFilterRole)
    19. Q_PROPERTY(QString filterString READ filterString WRITE setFilterString)
    20. Q_PROPERTY(FilterSyntax filterSyntax READ filterSyntax WRITE setFilterSyntax)
    21.  
    22. Q_ENUMS(FilterSyntax)
    23.  
    24. public:
    25. explicit ProxyModel(QObject *parent = 0);
    26.  
    27. QObject *source() const;
    28. void setSource(QObject *source);
    29.  
    30. QByteArray sortRole() const;
    31. void setSortRole(const QByteArray &role);
    32.  
    33. void setSortOrder(Qt::SortOrder order);
    34.  
    35. QByteArray filterRole() const;
    36. void setFilterRole(const QByteArray &role);
    37.  
    38. QString filterString() const;
    39. void setFilterString(const QString &filter);
    40.  
    41. enum FilterSyntax {
    42. RegExp,
    43. Wildcard,
    44. FixedString
    45. };
    46.  
    47. FilterSyntax filterSyntax() const;
    48. void setFilterSyntax(FilterSyntax syntax);
    49.  
    50. int count() const;
    51. Q_INVOKABLE QJSValue get(int index) const;
    52.  
    53. void classBegin();
    54. void componentComplete();
    55.  
    56. signals:
    57. void countChanged();
    58.  
    59. protected:
    60. int roleKey(const QByteArray &role) const;
    61. QHash<int, QByteArray> roleNames() const;
    62. bool filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const;
    63.  
    64. private:
    65. bool m_complete;
    66. QByteArray m_sortRole;
    67. QByteArray m_filterRole;
    68. };
    69.  
    70. #endif // PROXYMODEL_H
    To copy to clipboard, switch view to plain text mode 

    proxymodel.cpp

    Qt Code:
    1. #include "proxymodel.h"
    2. #include <QtDebug>
    3. #include <QtQml>
    4.  
    5. ProxyModel::ProxyModel(QObject *parent) : QSortFilterProxyModel(parent), m_complete(false)
    6. {
    7. connect(this, SIGNAL(rowsInserted(QModelIndex,int,int)), this, SIGNAL(countChanged()));
    8. connect(this, SIGNAL(rowsRemoved(QModelIndex,int,int)), this, SIGNAL(countChanged()));
    9. }
    10.  
    11. int ProxyModel::count() const
    12. {
    13. return rowCount();
    14. }
    15.  
    16. QObject *ProxyModel::source() const
    17. {
    18. return sourceModel();
    19. }
    20.  
    21. void ProxyModel::setSource(QObject *source)
    22. {
    23. setSourceModel(qobject_cast<QAbstractItemModel *>(source));
    24. }
    25.  
    26. QByteArray ProxyModel::sortRole() const
    27. {
    28. return m_sortRole;
    29. }
    30.  
    31. void ProxyModel::setSortRole(const QByteArray &role)
    32. {
    33. if (m_sortRole != role) {
    34. m_sortRole = role;
    35. if (m_complete)
    36. QSortFilterProxyModel::setSortRole(roleKey(role));
    37. }
    38. }
    39.  
    40. void ProxyModel::setSortOrder(Qt::SortOrder order)
    41. {
    42. QSortFilterProxyModel::sort(0, order);
    43. }
    44.  
    45. QByteArray ProxyModel::filterRole() const
    46. {
    47. return m_filterRole;
    48. }
    49.  
    50. void ProxyModel::setFilterRole(const QByteArray &role)
    51. {
    52. if (m_filterRole != role) {
    53. m_filterRole = role;
    54. if (m_complete)
    55. QSortFilterProxyModel::setFilterRole(roleKey(role));
    56. }
    57. }
    58.  
    59. QString ProxyModel::filterString() const
    60. {
    61. return filterRegExp().pattern();
    62. }
    63.  
    64. void ProxyModel::setFilterString(const QString &filter)
    65. {
    66. setFilterRegExp(QRegExp(filter, filterCaseSensitivity(), static_cast<QRegExp::PatternSyntax>(filterSyntax())));
    67. }
    68.  
    69. ProxyModel::FilterSyntax ProxyModel::filterSyntax() const
    70. {
    71. return static_cast<FilterSyntax>(filterRegExp().patternSyntax());
    72. }
    73.  
    74. void ProxyModel::setFilterSyntax(ProxyModel::FilterSyntax syntax)
    75. {
    76. setFilterRegExp(QRegExp(filterString(), filterCaseSensitivity(), static_cast<QRegExp::PatternSyntax>(syntax)));
    77. }
    78.  
    79. QJSValue ProxyModel::get(int idx) const
    80. {
    81. QJSEngine *engine = qmlEngine(this);
    82. QJSValue value = engine->newObject();
    83. if (idx >= 0 && idx < count()) {
    84. QHash<int, QByteArray> roles = roleNames();
    85. QHashIterator<int, QByteArray> it(roles);
    86. while (it.hasNext()) {
    87. it.next();
    88. value.setProperty(QString::fromUtf8(it.value()), data(index(idx, 0), it.key()).toString());
    89. }
    90. }
    91. return value;
    92. }
    93.  
    94. void ProxyModel::classBegin()
    95. {
    96. }
    97.  
    98. void ProxyModel::componentComplete()
    99. {
    100. m_complete = true;
    101. if (!m_sortRole.isEmpty())
    102. QSortFilterProxyModel::setSortRole(roleKey(m_sortRole));
    103. if (!m_filterRole.isEmpty())
    104. QSortFilterProxyModel::setFilterRole(roleKey(m_filterRole));
    105. }
    106.  
    107. int ProxyModel::roleKey(const QByteArray &role) const
    108. {
    109. QHash<int, QByteArray> roles = roleNames();
    110. QHashIterator<int, QByteArray> it(roles);
    111. while (it.hasNext()) {
    112. it.next();
    113. if (it.value() == role)
    114. return it.key();
    115. }
    116. return -1;
    117. }
    118.  
    119. QHash<int, QByteArray> ProxyModel::roleNames() const
    120. {
    121. if (QAbstractItemModel *source = sourceModel())
    122. return source->roleNames();
    123. return QHash<int, QByteArray>();
    124. }
    125.  
    126. bool ProxyModel::filterAcceptsRow(int sourceRow, const QModelIndex &sourceParent) const
    127. {
    128. QRegExp rx = filterRegExp();
    129. if (rx.isEmpty())
    130. return true;
    131. QAbstractItemModel *model = sourceModel();
    132. if (filterRole().isEmpty()) {
    133. QHash<int, QByteArray> roles = roleNames();
    134. QHashIterator<int, QByteArray> it(roles);
    135. while (it.hasNext()) {
    136. it.next();
    137. QModelIndex sourceIndex = model->index(sourceRow, 0, sourceParent);
    138. QString key = model->data(sourceIndex, it.key()).toString();
    139. if (key.contains(rx))
    140. return true;
    141. }
    142. return false;
    143. }
    144. QModelIndex sourceIndex = model->index(sourceRow, 0, sourceParent);
    145. if (!sourceIndex.isValid())
    146. return true;
    147. QString key = model->data(sourceIndex, roleKey(filterRole())).toString();
    148. return key.contains(rx);
    149. }
    To copy to clipboard, switch view to plain text mode 

    qml.qrc

    Qt Code:
    1. <RCC>
    2. <qresource prefix="/">
    3. <file>main.qml</file>
    4. </qresource>
    5. <qresource prefix="/Pages">
    6. <file>AlbumsPage.qml</file>
    7. <file>CardsPage.qml</file>
    8. <file>HomePage.qml</file>
    9. </qresource>
    10. <qresource prefix="/Items">
    11. <file>ItemCard.qml</file>
    12. <file>MainBar.qml</file>
    13. <file>QuickNav.qml</file>
    14. <file>SideBar.qml</file>
    15. <file>TitleBar.qml</file>
    16. </qresource>
    17. <qresource prefix="/Delegates">
    18. <file>CardDelegate.qml</file>
    19. <file>CardItems.qml</file>
    20. <file>NewsDelegate.qml</file>
    21. </qresource>
    22. <qresource prefix="/Config">
    23. <file>qtquickcontrols2.conf</file>
    24. </qresource>
    25. <qresource prefix="/Icons">
    26. <file>Icons/fontawesome-webfont.ttf</file>
    27. </qresource>
    28. <qresource prefix="/Cards">
    29. <file>gui/cards/1.png</file>
    30. <file>gui/cards/2.png</file>
    31. <file>gui/cards/3.png</file>
    32. <file>gui/cards/12.png</file>
    33. <file>gui/cards/13.png</file>
    34. <file>gui/cards/14.png</file>
    35. <file>gui/cards/15.png</file>
    36. <file>gui/cards/21.png</file>
    37. </qresource>
    38. </RCC>
    To copy to clipboard, switch view to plain text mode 

    main.qml

    Qt Code:
    1. import QtQuick 2.8
    2. import QtQuick.Controls 2.1
    3. import QtQuick.Layouts 1.0
    4. import QtQuick.Window 2.0
    5. import QtGraphicalEffects 1.0
    6. import Qt.labs.platform 1.0
    7. import "./Pages"
    8. import "./Items"
    9.  
    10. ApplicationWindow {
    11. id: applicationWindow
    12. visible: true
    13. width: 1280
    14. height: 880
    15. flags: (Qt.Window | Qt.FramelessWindowHint);
    16. title: qsTr("PokéManager")
    17. color: "Transparent"
    18. property int indexC: 0
    19. property int receivedValue: 0
    20. signal message(int indexC)
    21.  
    22. FontLoader {
    23. id: fontAwesome;
    24. source: "qrc:/Icons/Icons/fontawesome-webfont.ttf"
    25. }
    26.  
    27. Rectangle {
    28. id: bottomBorder
    29. color: "#474747"
    30. height: 1
    31. width: parent.width
    32. anchors.bottom: parent.bottom
    33. z:40
    34. }
    35. Rectangle {
    36. id: leftBorder
    37. color: "#474747"
    38. width: 1
    39. anchors.left: parent.left
    40. anchors.top: titleBar.bottom
    41. anchors.bottom: bottomBorder.top
    42. z:40
    43. }
    44. Rectangle {
    45. id: rightBorder
    46. color: "#474747"
    47. width: 1
    48. anchors.right: parent.right
    49. anchors.top: titleBar.bottom
    50. anchors.bottom: bottomBorder.top
    51. z:40
    52. }
    53.  
    54. TitleBar {
    55. id: titleBar
    56. height: 20
    57. container: applicationWindow
    58. }
    59.  
    60.  
    61. Page {
    62. id: window
    63. property int sideBarWidth: 300
    64. property int sideBarPos: -sideBarWidth
    65. property int currentPage: 0
    66.  
    67. anchors.top: titleBar.bottom
    68. anchors.left: parent.left
    69. anchors.right: parent.right
    70. anchors.bottom: bottomBorder.top
    71.  
    72. function showSideBar(i)
    73. {
    74. if(i === 0)
    75. {
    76. window.sideBarPos = -window.sideBarWidth
    77. viewMouseArea.zIndex = 1;
    78. }
    79. else
    80. {
    81. window.sideBarPos = 0
    82. viewMouseArea.zIndex = 3;
    83. }
    84. }
    85.  
    86. MainBar
    87. {
    88. id: mainBar
    89. color: "#FFFFFF"
    90. height: 60
    91. width: parent.width
    92. anchors.top: parent.top
    93. z:3
    94. }
    95. DropShadow {
    96. anchors.fill: mainBar
    97. horizontalOffset: 0
    98. verticalOffset: 1
    99. radius: 8.0
    100. samples: 17
    101. color: "#22000000"
    102. source: mainBar
    103. z: 2
    104. }
    105.  
    106. // SIDEBAR
    107. SideBar
    108. {
    109. id: sideBar
    110. anchors.top: parent.top
    111. anchors.bottom: parent.bottom
    112. width: window.sideBarWidth
    113. visible: true
    114. x: window.sideBarPos
    115. z:50
    116. MouseArea {
    117. anchors.fill: parent
    118. onClicked: window.showSideBar(1)
    119. }
    120.  
    121. // ANIMATION
    122. Behavior on x { NumberAnimation { duration: 300; easing.type: Easing.OutQuart } }
    123. }
    124. // Top shadow
    125. DropShadow {
    126. anchors.top: sideBar.top
    127. anchors.right: sideBar.right
    128. anchors.bottom: mainBar.bottom
    129. anchors.left: sideBar.left
    130. horizontalOffset: 1
    131. verticalOffset: 0
    132. radius: 5.0
    133. samples: 17
    134. color: "#22000000"
    135. source: sideBar
    136. z: 8
    137. }
    138. // Bottom shadow
    139. DropShadow {
    140. anchors.top: mainBar.bottom
    141. anchors.right: sideBar.right
    142. anchors.bottom: sideBar.bottom
    143. anchors.left: sideBar.left
    144. horizontalOffset: 2
    145. verticalOffset: 1
    146. radius: 8.0
    147. samples: 17
    148. color: "#22000000"
    149. source: sideBar
    150. z: 5
    151. }
    152.  
    153. // PAGE WINDOW
    154. Rectangle {
    155. id: view
    156. z:1
    157. color: "#F6F7FB"
    158. anchors.top: mainBar.bottom
    159. anchors.bottom: parent.bottom
    160. anchors.left: parent.left
    161. anchors.right: parent.right
    162. width: parent.width
    163. MouseArea {
    164. id: viewMouseArea
    165. property int zIndex: 1
    166. anchors.fill: parent
    167. onClicked: window.showSideBar(0);
    168. z:viewMouseArea.zIndex;
    169. }
    170.  
    171.  
    172. // QUICK NAV
    173. QuickNav{
    174. id: quickNav
    175. color: "Transparent"
    176. height: 30
    177. anchors.top: parent.top
    178. anchors.left: parent.left
    179. anchors.right: parent.right
    180. }
    181.  
    182. // SWIPVIEW
    183. SwipeView {
    184. id: swipeView
    185. signal message(int indexC)
    186. anchors.top: view.top
    187. anchors.left: view.left
    188. anchors.right: view.right
    189. anchors.bottom: view.bottom
    190. anchors.topMargin: 10
    191. currentIndex: window.currentPage
    192. z:2
    193.  
    194. // PAGE 0: HOMEPAGE
    195. HomePage {
    196. id: homePage
    197. }
    198.  
    199. // PAGE 1: ALBUMS
    200. AlbumsPage {
    201. id: albumsPage
    202. }
    203.  
    204. // PAGE 2: CARDS
    205. CardsPage {
    206. id: cardsPage
    207. }
    208. }
    209. PageIndicator{
    210. id: pageIndicator
    211. currentIndex: swipeView.currentIndex
    212. onCurrentIndexChanged: {
    213. applicationWindow.indexC = currentIndex
    214. message(applicationWindow.indexC)
    215. }
    216. }
    217. }
    218.  
    219. }
    220. // Connection
    221. Connections {
    222. id: applicationWindowConnection
    223. target: quickNav
    224. onMessage: {
    225. swipeView.currentIndex = quickNav.indexC
    226.  
    227. }
    228. }
    229. }
    To copy to clipboard, switch view to plain text mode 

    HomePage.qml

    Qt Code:
    1. import QtQuick 2.7
    2. import QtGraphicalEffects 1.0
    3. import QtQuick.XmlListModel 2.0
    4. import QtQuick.Window 2.1
    5. import QtCharts 2.2
    6. import "../Delegates"
    7.  
    8. // PAGE 0: HOMEPAGE
    9. Rectangle {
    10. id: homePage
    11. color: "#F6F7FB"
    12. z: 2
    13.  
    14. // STATS CARD
    15. Rectangle {
    16. id: stats
    17. color: "#FFFFFF"
    18. anchors.top: parent.top
    19. anchors.left: parent.left
    20. anchors.topMargin: 80
    21. anchors.leftMargin: 50
    22. width: 700
    23. height: 400
    24. radius: 2
    25. z:2
    26. Text {
    27. id: statsIconA
    28. text: "\uf200"
    29. color: "#777777"
    30. font.pointSize: 10
    31. font.family: fontAwesome.name
    32. anchors.top: parent.top
    33. anchors.topMargin: 8
    34. anchors.left: parent.left
    35. anchors.leftMargin: 20
    36. }
    37. Text {
    38. id: statsIconText
    39. text: "Quick stats"
    40. color: "#777777"
    41. font.pointSize: 10
    42. font.family: "Quicksand"
    43. anchors.top: parent.top
    44. anchors.topMargin: 4
    45. anchors.left: statsIconA.right
    46. anchors.leftMargin: 6
    47. }
    48. Rectangle {
    49. id: statsCardSplitter
    50. height: 1
    51. anchors.left: parent.left
    52. anchors.right: parent.right
    53. anchors.leftMargin: 20
    54. anchors.rightMargin: 20
    55. anchors.top: parent.top
    56. anchors.topMargin: 24
    57. color: "#d6d6d6"
    58. }
    59. ChartView {
    60. anchors.top: parent.top
    61. anchors.topMargin: 20
    62. width: 300
    63. height: 200
    64. theme: ChartView.ChartThemeBlueNcs
    65. plotAreaColor: "#F6F7FB"
    66. antialiasing: true
    67.  
    68. StackedBarSeries {
    69.  
    70. id: pieSeries
    71. axisX: BarCategoryAxis { categories: ["Base", "Gen", "Origins", "Sun & Moon"] }
    72. BarSet { label: "Base Set"; values: [2, 2, 3, 4, 5, 6] }
    73. BarSet { label: "Generations"; values: [5, 1, 2, 4, 1, 7] }
    74. BarSet { label: "Ancient Origins"; values: [3, 5, 8, 13, 5, 8] }
    75. BarSet { label: "Sun & Moon"; values: [2, 1, 3, 5, 1, 6] }
    76. }
    77. }
    78. }
    79. DropShadow {
    80. anchors.fill: stats
    81. horizontalOffset: 0
    82. verticalOffset: 1
    83. radius: 5.0
    84. samples: 17
    85. color: "#22000000"
    86. source: stats
    87. z: 2
    88. }
    89.  
    90. // NEWS CARD
    91. Rectangle {
    92. id: quickFeed
    93. color: "#FFFFFF"
    94. anchors.top: parent.top
    95. anchors.right: parent.right
    96. anchors.left: stats.right
    97. anchors.leftMargin: 30
    98. anchors.topMargin: 80
    99. anchors.rightMargin: 50
    100. height: 400
    101. radius: 2
    102. z:2
    103. Text {
    104. id: newsIconA
    105. text: "\uf1ea"
    106. color: "#777777"
    107. font.pointSize: 10
    108. font.family: fontAwesome.name
    109. anchors.top: parent.top
    110. anchors.topMargin: 8
    111. anchors.left: parent.left
    112. anchors.leftMargin: 20
    113. }
    114. Text {
    115. id: newsIconText
    116. text: "News feed"
    117. color: "#777777"
    118. font.pointSize: 10
    119. font.family: "Quicksand"
    120. anchors.top: parent.top
    121. anchors.topMargin: 4
    122. anchors.left: newsIconA.right
    123. anchors.leftMargin: 6
    124. }
    125. Rectangle {
    126. id: newsFeedCardSplitter
    127. height: 1
    128. anchors.left: parent.left
    129. anchors.right: parent.right
    130. anchors.leftMargin: 20
    131. anchors.rightMargin: 20
    132. anchors.top: parent.top
    133. anchors.topMargin: 24
    134. color: "#d6d6d6"
    135. }
    136. ListView {
    137. id: newsList
    138.  
    139. anchors.left: parent.left
    140. anchors.right: parent.right
    141. anchors.top: parent.top
    142. anchors.bottom: parent.bottom
    143. anchors.topMargin: 24
    144. anchors.leftMargin: 20
    145. anchors.rightMargin: 20
    146. anchors.bottomMargin: 10
    147. clip: true
    148. model: feedModel
    149. header: Rectangle{ width: parent.width; height: 10; color: "Transparent"}
    150. delegate: NewsDelegate {}
    151. }
    152. XmlListModel {
    153. id: feedModel
    154. source: "http://pokemondb.net/news/feed"
    155. query: "/rss/channel/item"
    156. XmlRole { name: "title"; query: "title/string()" }
    157. XmlRole { name: "link"; query: "link/string()" }
    158. }
    159.  
    160. }
    161. DropShadow {
    162. anchors.fill: quickFeed
    163. horizontalOffset: 0
    164. verticalOffset: 1
    165. radius: 5.0
    166. samples: 17
    167. color: "#22000000"
    168. source: quickFeed
    169. z: 2
    170. }
    171.  
    172. // ALBUMS SCROLL
    173. Rectangle {
    174. width: 47
    175. anchors.left: parent.left
    176. anchors.top: quickFeed.bottom
    177. height: scrollFeed.height
    178. color: "#F6F7FB"
    179. z: 3
    180. }
    181. Rectangle {
    182. width: 47
    183. anchors.right: parent.right
    184. anchors.top: quickFeed.bottom
    185. height: scrollFeed.height
    186. color: "#F6F7FB"
    187. z: 3
    188. }
    189. Rectangle{
    190. id: scrollFeed
    191. width: parent.width
    192. anchors.top: quickFeed.bottom
    193. anchors.left: parent.left
    194. anchors.right: parent.right
    195. anchors.topMargin: 30
    196. height: 250
    197. color: "transparent"
    198. clip: true
    199. z:2
    200.  
    201. ListView {
    202. z:2
    203. width: parent.width
    204. height: 150
    205. spacing: 200
    206. orientation: ListView.Horizontal
    207. model: CardItems {}
    208. delegate: CardDelegate {}
    209. header: Rectangle{
    210. color: "transparent"
    211. width: 50
    212. }
    213. footer: Rectangle{
    214. color: "transparent"
    215. width: 230
    216. }
    217. }
    218. }
    219. }
    To copy to clipboard, switch view to plain text mode 

    AlbumsPage.qml

    Qt Code:
    1. import QtQuick 2.7
    2. import QtQuick.Controls 1.4
    3. import PokeApp.Classes.Core 1.0
    4.  
    5. Rectangle {
    6. color: "transparent"
    7. Rectangle {
    8. id: searchToolBar
    9. color: "lightBlue"
    10. anchors.top: parent.top
    11. anchors.left: parent.left
    12. anchors.right: parent.right
    13. anchors.topMargin: 80
    14. anchors.rightMargin: 50
    15. anchors.leftMargin: 50
    16. TextField {
    17. id: searchBox
    18.  
    19. placeholderText: "Search..."
    20. inputMethodHints: Qt.ImhNoPredictiveText
    21.  
    22. width: 400
    23. anchors.right: parent.right
    24. anchors.verticalCenter: parent.verticalCenter
    25. }
    26. }
    27. TableView {
    28. id: albumsTableView
    29. objectName: "albumsModel"
    30. frameVisible: false
    31. sortIndicatorVisible: true
    32.  
    33. anchors.top: searchToolBar.bottom
    34. anchors.bottom: parent.bottom
    35. anchors.left: parent.left
    36. anchors.right: parent.right
    37. anchors.topMargin: 30
    38. anchors.rightMargin: 50
    39. anchors.leftMargin: 50
    40. anchors.bottomMargin: 30
    41.  
    42. TableViewColumn {
    43. role: "albumName"
    44. title: "Name"
    45. width: 180
    46. }
    47. TableViewColumn {
    48. role: "albumAdded"
    49. title: "Added on"
    50. width: 180
    51. }
    52. TableViewColumn {
    53. role: "albumEdited"
    54. title: "Last edited"
    55. width: 180
    56. }
    57. model: ProxyModel {
    58. id: albumsProxyModel
    59. source: albumsModel.count > 0 ? albumsModel : null
    60.  
    61. sortOrder: albumsTableView.sortIndicatorOrder
    62. sortCaseSensitivity: Qt.CaseInsensitive
    63. sortRole: albumsModel.count > 0 ? albumsTableView.getColumn(albumsTableView.sortIndicatorColumn).role : ""
    64.  
    65. filterString: "*" + searchBox.text + "*"
    66. filterSyntax: ProxyModel.Wildcard
    67. filterCaseSensitivity: Qt.CaseInsensitive
    68. }
    69.  
    70. }
    71. }
    To copy to clipboard, switch view to plain text mode 

    CardsPage.qml
    Qt Code:
    1. import QtQuick 2.7
    2. import QtQuick.Controls 1.4
    3. import PokeApp.Classes.Core 1.0
    4.  
    5. Rectangle {
    6. color: "transparent"
    7. Rectangle {
    8. id: searchToolBar
    9. color: "lightBlue"
    10. anchors.top: parent.top
    11. anchors.left: parent.left
    12. anchors.right: parent.right
    13. anchors.topMargin: 80
    14. anchors.rightMargin: 50
    15. anchors.leftMargin: 50
    16. TextField {
    17. id: searchBox
    18.  
    19. placeholderText: "Search..."
    20. inputMethodHints: Qt.ImhNoPredictiveText
    21.  
    22. width: 400
    23. anchors.right: parent.right
    24. anchors.verticalCenter: parent.verticalCenter
    25. }
    26. }
    27. TableView {
    28. id: albumsTableView
    29. objectName: "albumsModel"
    30. frameVisible: false
    31. sortIndicatorVisible: true
    32.  
    33. anchors.top: searchToolBar.bottom
    34. anchors.bottom: parent.bottom
    35. anchors.left: parent.left
    36. anchors.right: parent.right
    37. anchors.topMargin: 30
    38. anchors.rightMargin: 50
    39. anchors.leftMargin: 50
    40. anchors.bottomMargin: 30
    41.  
    42. TableViewColumn {
    43. role: "albumName"
    44. title: "Name"
    45. width: 180
    46. }
    47. TableViewColumn {
    48. role: "albumAdded"
    49. title: "Added on"
    50. width: 180
    51. }
    52. TableViewColumn {
    53. role: "albumEdited"
    54. title: "Last edited"
    55. width: 180
    56. }
    57. model: ProxyModel {
    58. id: albumsProxyModel
    59. source: albumsModel.count > 0 ? albumsModel : null
    60.  
    61. sortOrder: albumsTableView.sortIndicatorOrder
    62. sortCaseSensitivity: Qt.CaseInsensitive
    63. sortRole: albumsModel.count > 0 ? albumsTableView.getColumn(albumsTableView.sortIndicatorColumn).role : ""
    64.  
    65. filterString: "*" + searchBox.text + "*"
    66. filterSyntax: ProxyModel.Wildcard
    67. filterCaseSensitivity: Qt.CaseInsensitive
    68. }
    69.  
    70. }
    71. }
    To copy to clipboard, switch view to plain text mode 

    ItemCard.qml

    Qt Code:
    1. import QtQuick 2.7
    2. import QtGraphicalEffects 1.0
    3.  
    4. Item {
    5. Rectangle {
    6. id: card
    7. color: "#FFFFFF"
    8. height: 240
    9. width: 180
    10. radius: 2
    11. z:2
    12. MouseArea {
    13. id: cardMouseArea
    14. anchors.fill: parent
    15. hoverEnabled: true
    16. onEntered: cardAlbumMenuIcon.visible = true
    17. onExited: cardAlbumMenuIcon.visible = false
    18. }
    19.  
    20. Text {
    21. id: cardAlbumName
    22. text: model.name
    23. font.family: "Quicksand"
    24. color: "Black"
    25. font.pixelSize: 16
    26. anchors.top: parent.top
    27. anchors.topMargin: 10
    28. anchors.horizontalCenter: parent.horizontalCenter
    29. }
    30. Text {
    31. id: cardAlbumMenuIcon
    32. text: "\uf142"
    33. color: "#777777"
    34. visible: false
    35. font.pointSize: 12
    36. font.family: fontAwesome.name
    37. anchors.top: parent.top
    38. anchors.topMargin: 16
    39. anchors.right: parent.right
    40. anchors.rightMargin: 20
    41. }
    42. Rectangle {
    43. id: cardInfoTopSplitter
    44. height: 1
    45. anchors.left: parent.left
    46. anchors.right: parent.right
    47. anchors.leftMargin: 20
    48. anchors.rightMargin: 20
    49. anchors.top: parent.top
    50. anchors.topMargin: 40
    51. color: "#d6d6d6"
    52. }
    53. Rectangle {
    54. id: albumThumbs
    55. anchors.top: cardInfoTopSplitter.bottom
    56. anchors.topMargin: 10
    57. anchors.left: parent.left
    58. anchors.right: parent.right
    59. anchors.leftMargin: 20
    60. anchors.rightMargin: 20
    61. height: 90
    62. color: "transparent"
    63. Image {
    64. id: thumb1
    65. anchors.top: parent.top
    66. anchors.topMargin: 2
    67. anchors.left: parent.left
    68. anchors.leftMargin: 2
    69. height: 42
    70. width: 30
    71. mipmap: true
    72. source: "qrc:/Cards/gui/cards/1.png"
    73. fillMode: Image.PreserveAspectFit
    74. }
    75. Image {
    76. id: thumb1b
    77. anchors.top: parent.top
    78. anchors.topMargin: 2
    79. anchors.left: thumb1.right
    80. anchors.leftMargin: 5
    81. height: 42
    82. width: 30
    83. mipmap: true
    84. source: "qrc:/Cards/gui/cards/2.png"
    85. fillMode: Image.PreserveAspectFit
    86. }
    87. Image {
    88. id: thumb2
    89. anchors.top: parent.top
    90. anchors.topMargin: 2
    91. anchors.right: parent.right
    92. anchors.rightMargin: 2
    93. height: 42
    94. width: 30
    95. mipmap: true
    96. source: "qrc:/Cards/gui/cards/3.png"
    97. fillMode: Image.PreserveAspectFit
    98. }
    99. Image {
    100. id: thumb2b
    101. anchors.top: parent.top
    102. anchors.topMargin: 2
    103. anchors.right: thumb2.left
    104. anchors.rightMargin: 5
    105. height: 42
    106. width: 30
    107. mipmap: true
    108. source: "qrc:/Cards/gui/cards/12.png"
    109. fillMode: Image.PreserveAspectFit
    110. }
    111. Image {
    112. id: thumb3
    113. anchors.top: thumb1.bottom
    114. anchors.topMargin: 5
    115. anchors.left: parent.left
    116. anchors.leftMargin: 2
    117. height: 42
    118. width: 30
    119. mipmap: true
    120. source: "qrc:/Cards/gui/cards/13.png"
    121. fillMode: Image.PreserveAspectFit
    122. }
    123. Image {
    124. id: thumb3b
    125. anchors.top: thumb1.bottom
    126. anchors.topMargin: 5
    127. anchors.left: thumb3.right
    128. anchors.leftMargin: 5
    129. height: 42
    130. width: 30
    131. mipmap: true
    132. source: "qrc:/Cards/gui/cards/14.png"
    133. fillMode: Image.PreserveAspectFit
    134. }
    135. Image {
    136. id: thumb4
    137. anchors.top: thumb2.bottom
    138. anchors.topMargin: 5
    139. anchors.right: parent.right
    140. anchors.rightMargin: 2
    141. height: 42
    142. width: 30
    143. mipmap: true
    144. source: "qrc:/Cards/gui/cards/15.png"
    145. fillMode: Image.PreserveAspectFit
    146. }
    147. Image {
    148. id: thumb4b
    149. anchors.top: thumb2.bottom
    150. anchors.topMargin: 5
    151. anchors.right: thumb4.left
    152. anchors.rightMargin: 5
    153. height: 42
    154. width: 30
    155. mipmap: true
    156. source: "qrc:/Cards/gui/cards/21.png"
    157. fillMode: Image.PreserveAspectFit
    158. }
    159.  
    160. }
    161.  
    162. Rectangle {
    163. id: cardInfoBotSplitter
    164. height: 1
    165. anchors.left: parent.left
    166. anchors.right: parent.right
    167. anchors.leftMargin: 20
    168. anchors.rightMargin: 20
    169. anchors.top: parent.top
    170. anchors.topMargin: 154
    171. color: "#d6d6d6"
    172. }
    173.  
    174. Rectangle {
    175. id: thumbs
    176.  
    177. }
    178. Text {
    179. id: cardInfoTitle
    180. text: " Total cards in album:"
    181. font.family: "Quicksand"
    182. color: "grey"
    183. font.pixelSize: 10
    184. anchors.left: parent.left
    185. anchors.leftMargin: 20
    186. anchors.top: parent.top
    187. anchors.topMargin: 170
    188. }
    189. }
    190. DropShadow {
    191. anchors.fill: card
    192. horizontalOffset: 0
    193. verticalOffset: 1
    194. radius: 5.0
    195. samples: 17
    196. color: "#22000000"
    197. source: card
    198. z: 2
    199. }
    200. }
    To copy to clipboard, switch view to plain text mode 

    MainBar.qml

    Qt Code:
    1. import QtQuick 2.7
    2. import QtGraphicalEffects 1.0
    3.  
    4. // MAIN BAR
    5. Rectangle {
    6. id: mainBar
    7. color: "Transparent"
    8. Rectangle {
    9. id: mainBarArea
    10. color: "#FFFFFF"
    11. height: 60
    12. width: parent.width
    13. anchors.top: parent.top
    14. z:3
    15. Text {
    16. anchors.centerIn: parent
    17. text: "PokéManager"
    18. font.pointSize: 16
    19. font.family: "Quicksand"
    20. }
    21. Text {
    22. id: menuButton
    23. text: "\uf0c9"
    24. color: "#777777"
    25. font.pointSize: 10
    26. font.family: fontAwesome.name
    27. anchors.left: parent.left
    28. anchors.leftMargin: 20
    29. anchors.verticalCenter: parent.verticalCenter
    30. MouseArea {
    31. hoverEnabled: true
    32. anchors.fill: parent
    33. onClicked: window.showSideBar(1);
    34. }
    35. }
    36. }
    37.  
    38. }
    To copy to clipboard, switch view to plain text mode 

    SideBar.qml

    Qt Code:
    1. import QtQuick 2.0
    2.  
    3. Item {
    4. id: sideBar
    5. anchors.top: parent.top
    6. anchors.bottom: parent.bottom
    7. width: parent.width
    8. z: 5
    9.  
    10. // Sub Header
    11. Rectangle {
    12. id: subHeader
    13. property int subHeaderAnimDuration: 500
    14. property int subHeaderWidth: 300
    15. property int subHeaderSeizurWidth: 15
    16. anchors.fill: parent
    17. color: "#FFFFFF"
    18. z: 5
    19. }
    20. }
    To copy to clipboard, switch view to plain text mode 

    TitleBar.qml

    Qt Code:
    1. import QtQuick 2.0
    2. import QtQuick.Window 2.0
    3.  
    4. Rectangle {
    5. id: customWindowFrame
    6. color: "#474747"
    7. height: 20
    8. anchors.top: parent.top
    9. anchors.left: parent.left
    10. anchors.right: parent.right
    11. radius: 5
    12. property QtObject container
    13. MouseArea {
    14. id: titleBarMouseRegion
    15. property var clickPos
    16. anchors.fill: parent
    17. onPressed: {
    18. clickPos = { x: mouse.x, y: mouse.y }
    19. }
    20. onPositionChanged: {
    21. container.x = mousePosition.cursorPos().x - clickPos.x
    22. container.y = mousePosition.cursorPos().y - clickPos.y
    23. }
    24. }
    25.  
    26. Rectangle {
    27. id: customWindowFrameBottom
    28. color: "#474747"
    29. height: customWindowFrame.radius
    30. anchors.left: parent.left
    31. anchors.right: parent.right
    32. anchors.bottom: parent.bottom
    33. z:0
    34. }
    35. Rectangle {
    36. id: closeWindowButton
    37. anchors.top: parent.top
    38. anchors.bottom: parent.bottom
    39. anchors.right: parent.right
    40. anchors.topMargin: 2
    41. anchors.rightMargin: 8
    42. anchors.bottomMargin: 2
    43. color: "transparent"
    44. width: 18
    45.  
    46. Text {
    47. id: closeWindowButtonIcon
    48. text: "\uf2d3"
    49. color: "#c4c4c4"
    50. font.pointSize: 10
    51. font.family: fontAwesome.name
    52. anchors.centerIn: parent
    53. }
    54. MouseArea {
    55. id: closeWindowButtonMouseArea
    56. anchors.fill: parent
    57. hoverEnabled: true
    58. onEntered: closeWindowButtonIcon.color = "#FFFFFF";
    59. onExited: closeWindowButtonIcon.color = "#c4c4c4";
    60. onClicked: {
    61. applicationWindow.close();
    62. }
    63. }
    64. }
    65. Rectangle {
    66. id: resizeWindowButton
    67. anchors.top: parent.top
    68. anchors.bottom: parent.bottom
    69. anchors.right: closeWindowButton.left
    70. anchors.topMargin: 2
    71. anchors.rightMargin: 2
    72. anchors.bottomMargin: 2
    73. color: "transparent"
    74. width: 18
    75. Text {
    76. id: resizeWindowButtonIcon
    77. text: "\uf2d0"
    78. color: "#c4c4c4"
    79. font.pointSize: 10
    80. font.family: fontAwesome.name
    81. anchors.centerIn: parent
    82. }
    83. MouseArea {
    84. id: resizeWindowButtonMouseArea
    85. anchors.fill: parent
    86. hoverEnabled: true
    87. onEntered: resizeWindowButtonIcon.color = "#FFFFFF";
    88. onExited: resizeWindowButtonIcon.color = "#c4c4c4";
    89. onClicked: {
    90. if(applicationWindow.visibility === Window.FullScreen)
    91. {
    92.  
    93. applicationWindow.visibility = Window.Windowed;
    94.  
    95. }
    96. else if(applicationWindow.visibility === Window.Windowed)
    97. {
    98. applicationWindow.visibility = Window.FullScreen;
    99.  
    100. }
    101. }
    102. }
    103. }
    104. Rectangle {
    105. id: minimizeWindowButton
    106. anchors.top: parent.top
    107. anchors.bottom: parent.bottom
    108. anchors.right: resizeWindowButton.left
    109. anchors.topMargin: 2
    110. anchors.rightMargin: 2
    111. anchors.bottomMargin: 2
    112. color: "transparent"
    113. width: 18
    114. Text {
    115. id: minimizeWindowButtonIcon
    116. text: "\uf2d1"
    117. color: "#c4c4c4"
    118. font.pointSize: 10
    119. font.family: fontAwesome.name
    120. anchors.centerIn: parent
    121. }
    122. MouseArea {
    123. id: minimizeWindowButtonMouseArea
    124. anchors.fill: parent
    125. hoverEnabled: true
    126. onClicked: applicationWindow.visibility = Window.Minimized;
    127. onEntered: minimizeWindowButtonIcon.color = "#FFFFFF";
    128. onExited: minimizeWindowButtonIcon.color = "#c4c4c4";
    129. }
    130. }
    131. }
    To copy to clipboard, switch view to plain text mode 

    NewsDelegat.qml

    Qt Code:
    1. import QtQuick 2.7
    2.  
    3. Column {
    4. id: delegate
    5. width: delegate.ListView.view.width
    6. spacing: 8
    7.  
    8. Item { height: 0; width: delegate.width }
    9.  
    10. Row {
    11. width: parent.width
    12. spacing: 10
    13.  
    14. Text {
    15. id: newsIcon
    16. text: "\uf0f6"
    17. color: "#777777"
    18. font.pointSize: 8
    19. font.family: fontAwesome.name
    20. anchors.top: parent.top
    21. anchors.topMargin: 6
    22. }
    23. Text {
    24. id: titleText
    25. textFormat: Text.RichText
    26. text: "<style>a:link { text-decoration: none; color: #777777;} a:hover { text-decoration: underline; }</style><a href=\"" + link + "\">" + title + "</a>"
    27. width: delegate.width - newsIcon.width
    28. wrapMode: Text.WordWrap
    29. color: "#777777"
    30. font.pointSize: 10
    31. font.family: "Quicksand"
    32. linkColor : "#777777"
    33. onLinkActivated: {
    34. Qt.openUrlExternally(link)
    35. }
    36. MouseArea {
    37. anchors.fill: parent
    38. hoverEnabled: true
    39. onEntered: newsIcon.text = "\uf15c"
    40. onExited: newsIcon.text = "\uf0f6"
    41. onClicked: Qt.openUrlExternally(link)
    42. }
    43. }
    44. }
    45. }
    To copy to clipboard, switch view to plain text mode 

    The following are not completed, they are just placeholder for the UI but they can be easily connected to the models which I will do the next time I do more work on the project

    CardItems.qml
    Not complete
    Qt Code:
    1. import QtQuick 2.0
    2.  
    3. ListModel {
    4. ListElement
    5. {
    6. name: "My Favorites"
    7. }
    8. ListElement
    9. {
    10. name: "Duplicates"
    11. }
    12. ListElement
    13. {
    14. name: "Old Cards"
    15. }
    16. ListElement
    17. {
    18. name: "Wish List"
    19. }
    20. ListElement
    21. {
    22. name: "New Cards"
    23. }
    24. ListElement
    25. {
    26. name: "Cards to Sell"
    27. }
    28. ListElement
    29. {
    30. name: "Special Cards"
    31. }
    32. }
    To copy to clipboard, switch view to plain text mode 

    CardDelegate.qml
    Not complete
    Qt Code:
    1. import QtQuick 2.0
    2. import "../Items"
    3.  
    4. Component {
    5. id: cardsDelegate
    6. ItemCard {
    7. anchors.centerIn: parent.Center
    8. }
    9. }
    To copy to clipboard, switch view to plain text mode 

    Forgot to add the QuickNav file, it is complete.

    QuickNav.qml (part 1)

    Qt Code:
    1. import QtQuick 2.7
    2. import QtGraphicalEffects 1.0
    3.  
    4. Rectangle {
    5. id: quickNav
    6. color: "Transparent"
    7. height: 30
    8. anchors.topMargin: 30
    9. anchors.top: parent.top
    10. anchors.left: parent.left
    11. anchors.right: parent.right
    12. z: 4
    13. property int receivedValue: 0
    14. property int currentPage: 0
    15. property int indexC: 0
    16. signal message(int indexC)
    17. function toggleIcons(i)
    18. {
    19. quickNav.currentPage = i;
    20. if(quickNav.currentPage == 0)
    21. {
    22. myRect1.active = false;
    23. myRect2.active = false;
    24. }
    25. if(quickNav.currentPage == 1)
    26. {
    27. myRect1.active = true;
    28. myRect2.active = false;
    29. }
    30. if(quickNav.currentPage == 2)
    31. {
    32. myRect1.active = false;
    33. myRect2.active = true;
    34. }
    35. }
    36.  
    37. Row {
    38. id: quickNavRow
    39. anchors.horizontalCenter: parent.horizontalCenter
    40. spacing: 0
    41. z: 4
    42.  
    43.  
    44. // ALBUMS BUTTON
    45. Rectangle {
    46. id: myRect1
    47. property bool active: false
    48. height: 30
    49. width: 120
    50. color: "Transparent"
    51. z: 7
    52. Rectangle {
    53. id: roundRect
    54. color: myRect1.active == true? "#d6d6d6" : "#FFFFFF"
    55. height: 30
    56. width: 120
    57. radius: 2
    58. z: 7
    59. Text {
    60. id: albumsIconA
    61. text: "\uf02d"
    62. color: "#474747"
    63. font.pointSize: 12
    64. font.family: fontAwesome.name
    65. anchors.top: parent.top
    66. anchors.topMargin: 6
    67. anchors.left: parent.left
    68. anchors.leftMargin: 20
    69. }
    70. Text {
    71. id: albumsIconText
    72. text: "Albums"
    73. color: "#474747"
    74. font.pointSize: 12
    75. font.family: "Quicksand"
    76. anchors.top: parent.top
    77. anchors.topMargin: 2
    78. anchors.left: albumsIconA.right
    79. anchors.leftMargin: 6
    80. }
    81. MouseArea{
    82. anchors.fill: parent
    83. hoverEnabled: true
    84. onClicked: {
    85. quickNav.indexC = 1;
    86. message(quickNav.indexC)
    87. quickNav.toggleIcons(1);
    88. }
    89. }
    90. }
    91. DropShadow {
    92. anchors.fill: roundRect
    93. horizontalOffset: 0
    94. verticalOffset: 1
    95. radius: 5.0
    96. samples: 17
    97. color: "#22000000"
    98. source: roundRect
    99. visible: !myRect1.active
    100. z: 2
    101. }
    102. Rectangle {
    103. id: squareRect
    104. color: myRect1.active == true? "#d6d6d6" : "#FFFFFF"
    105. width: roundRect.radius
    106. anchors.bottom: roundRect.bottom
    107. anchors.top: roundRect.top
    108. anchors.right: roundRect.right
    109. z: 7
    110.  
    111. MouseArea{
    112. anchors.fill: parent
    113. onClicked: {
    114. quickNav.indexC = 1;
    115. message(quickNav.indexC)
    116. quickNav.toggleIcons(1);
    117. }
    118. }
    119. }
    120. DropShadow {
    121. anchors.fill: squareRect
    122. horizontalOffset: 0
    123. verticalOffset: 1
    124. radius: 5.0
    125. samples: 17
    126. color: "#22000000"
    127. source: squareRect
    128. visible: !myRect1.active
    129. z: 2
    130. }
    131. }
    132.  
    133. // CARDS BUTTON
    134. Rectangle {
    135. id: myRect2
    136. property bool active: false
    137. height: 30
    138. width: 120
    139. color: "Transparent"
    140. z: 7
    141. Rectangle {
    142. id: roundRect2
    143. color: myRect2.active == true? "#d6d6d6" : "#FFFFFF"
    144. height: 30
    145. width: 120
    146. radius: 2
    147. z: 7
    148. Text {
    149. id: cardsIconA
    150. text: "\uf00a"
    151. color: "#474747"
    152. font.pointSize: 10
    153. font.family: fontAwesome.name
    154. anchors.top: parent.top
    155. anchors.topMargin: 8
    156. anchors.left: parent.left
    157. anchors.leftMargin: 25
    158. transform: Rotation { origin.x: (cardsIconA.width/2); origin.y: (cardsIconA.height/2); angle: 90}
    159. }
    160. Text {
    161. id: cardsIconText
    162. text: "Cards"
    163. color: "#474747"
    164. font.pointSize: 12
    165. font.family: "Quicksand"
    166. anchors.top: parent.top
    167. anchors.topMargin: 2
    168. anchors.left: cardsIconA.right
    169. anchors.leftMargin: 6
    170. }
    171. MouseArea{
    172. anchors.fill: parent
    173. hoverEnabled : true
    174. onClicked: {
    175. quickNav.indexC = 2;
    176. message(quickNav.indexC)
    177. quickNav.toggleIcons(2);
    178. }
    179. }
    180. }
    181. DropShadow {
    182. anchors.fill: roundRect2
    183. horizontalOffset: 0
    184. verticalOffset: 1
    185. radius: 5.0
    186. samples: 17
    187. color: "#22000000"
    188. source: roundRect2
    189. visible: !myRect2.active
    190. z: 2
    191. }
    192. Rectangle {
    193. id: squareRect2
    194. color: myRect2.active == true? "#d6d6d6" : "#FFFFFF"
    195. width: roundRect2.radius
    196. anchors.bottom: roundRect2.bottom
    197. anchors.top: roundRect2.top
    198. anchors.left: roundRect2.left
    199. z: 7
    200. MouseArea{
    201. anchors.fill: parent
    202. onClicked: {
    203. quickNav.indexC = 2;
    204. message(quickNav.indexC)
    205. quickNav.toggleIcons(2);
    206. }
    207. }
    208. }
    209. DropShadow {
    210. anchors.fill: squareRect2
    211. horizontalOffset: 0
    212. verticalOffset: 1
    213. radius: 5.0
    214. samples: 17
    215. color: "#22000000"
    216. source: squareRect2
    217. visible: !myRect2.active
    218. z: 2
    219. }
    220. }
    221. }
    To copy to clipboard, switch view to plain text mode 


    Added after 7 minutes:


    QuickNav.qml (part 2)

    Qt Code:
    1. // HOMEPAGE BUTTON
    2. Rectangle {
    3. id: leftNav
    4. anchors.top: parent.top
    5. anchors.left: parent.left
    6. anchors.leftMargin: 50
    7. color: "#FFFFFF"
    8. height: 30
    9. width: 100
    10. radius: 2
    11. z: 7
    12. Text {
    13. id: homeIconA
    14. text: "\uf015"
    15. color: "#474747"
    16. font.pointSize: 12
    17. font.family: fontAwesome.name
    18. anchors.top: parent.top
    19. anchors.topMargin: 7
    20. anchors.left: parent.left
    21. anchors.leftMargin: 14
    22. }
    23. Text {
    24. id: homeIconText
    25. text: "Home"
    26. color: "#474747"
    27. font.pointSize: 12
    28. font.family: "Quicksand"
    29. anchors.top: parent.top
    30. anchors.topMargin: 2
    31. anchors.left: homeIconA.right
    32. anchors.leftMargin: 10
    33. }
    34.  
    35. MouseArea {
    36. hoverEnabled: true
    37. anchors.fill: parent
    38. onClicked: swipeView.currentIndex = 0;
    39. }
    40. }
    41. DropShadow {
    42. anchors.fill: leftNav
    43. horizontalOffset: 0
    44. verticalOffset: 1
    45. radius: 5.0
    46. samples: 17
    47. color: "#22000000"
    48. source: leftNav
    49. z: 3
    50. }
    51.  
    52.  
    53. // ADD NEW BUTTON
    54. Rectangle {
    55. id: rightNav
    56. color: "#FFFFFF"
    57. anchors.top: parent.top
    58. anchors.right: parent.right
    59. anchors.rightMargin: 50
    60. height: 30
    61. width: 100
    62. radius: 2
    63. z: 7
    64. Text {
    65. id: newIconA
    66. text: "\uf067"
    67. color: "#474747"
    68. font.pointSize: 12
    69. font.family: fontAwesome.name
    70. anchors.top: parent.top
    71. anchors.topMargin: 7
    72. anchors.left: parent.left
    73. anchors.leftMargin: 20
    74. }
    75. Text {
    76. id: newIconText
    77. text: "New"
    78. color: "#474747"
    79. font.pointSize: 12
    80. font.family: "Quicksand"
    81. anchors.top: parent.top
    82. anchors.topMargin: 2
    83. anchors.left: newIconA.right
    84. anchors.leftMargin: 10
    85. }
    86. MouseArea {
    87. hoverEnabled: true
    88. anchors.fill: parent
    89. }
    90. }
    91. DropShadow {
    92. anchors.fill: rightNav
    93. horizontalOffset: 0
    94. verticalOffset: 1
    95. radius: 5.0
    96. samples: 17
    97. color: "#22000000"
    98. source: rightNav
    99. z: 3
    100. }
    101. // Connection
    102. Connections {
    103. id: quickNavConnecttion
    104. target: pageIndicator
    105. onCurrentIndexChanged: {
    106. quickNav.receivedValue = applicationWindow.indexC
    107. quickNav.toggleIcons(applicationWindow.indexC)
    108. }
    109. }
    110. }
    To copy to clipboard, switch view to plain text mode 

    Next:

    I want to make the Quick stats page show useful stats. Provide different views for the Cards and Albums models and let the user change the size of the thumbnails for example.
    I also want to use this new loading spinner while the images are retreived from a network request:
    http://i.imgur.com/fcJPrZo.gif
    fcJPrZo.gif

    I will also add my previously built network class, imageprovider, CardManager and AlbumManager classes.
    Last edited by Nizars; 28th January 2017 at 17:04.

  14. #51
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,229
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    Nice. A lot of work here.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  15. #52
    Join Date
    Dec 2016
    Posts
    46
    Thanks
    20
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    Thanks! I wouldn't have gotten far at all without your and anda_skoa's help. I will add the other classes later on too. Learning how to work with Sql was really fun and extremely rewarding. I really love using it now.

  16. #53
    Join Date
    Dec 2016
    Posts
    46
    Thanks
    20
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    How difficult would be to implement something like this for my project?
    Basically have program read the card name/id from the camera or a picture and convert it into a string that is then used by the app to add the card.

    http://www.pyimagesearch.com/2015/11...ssport-images/

  17. #54
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    5,229
    Thanks
    302
    Thanked 864 Times in 851 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Integration: Nested Tree Parent Child C++ Classes with Models/Delegates for QML

    How difficult would be to implement something like this for my project?
    Probably way more work than it would be worth. You'd have to deal with good, crappy, out-of-focus, different resolution, skewed, upside-down, sideways, cropped, and any other combination of photo you can think of, just to get a name or ID that the user could pretty much type in with nearly 100% reliability.

    You can already download good card images from a web site - if that site has a search mechanism, look the card up by asking the user to type the official ID or name. If there isn't a match, you can always let the user add their own photo as the image.

    Google may already have a public API for image searching - it would probably be easier to use that and interpret the matches (tags or urls) Google sends back than to try to OCR images yourself. If you get a url that contains something recognizable (like the url for your Pokemon card server), use it.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

  18. The following user says thank you to d_stranz for this useful post:

    Nizars (29th January 2017)

Similar Threads

  1. Nested Models
    By Dan7 in forum Qt Programming
    Replies: 1
    Last Post: 26th August 2015, 21:31
  2. Models and Delegates
    By bgeller in forum Newbie
    Replies: 13
    Last Post: 4th March 2010, 05:46
  3. QStandardItemModel, parent / child to form tree structure
    By Nightfox in forum Qt Programming
    Replies: 2
    Last Post: 8th January 2010, 18:01
  4. Nested delegates in a QListWidget
    By youkai in forum Qt Programming
    Replies: 9
    Last Post: 7th April 2009, 09:48
  5. Models, delegates or views and how?
    By maddogg in forum Newbie
    Replies: 3
    Last Post: 9th November 2007, 14:59

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.