Code Monkey home page Code Monkey logo

qml-gantt's Introduction

QML Gantt library

Linux Windows
Build Status Build status

An efficient implementation of a gantt chart library for qml. The library provides a custom View element which handles lazy loading of items according to its viewport. Items are loaded from a model which can easily be implemented according to custom specifications.

  • Version: 0.1.0
  • License: LPGL
  • Library requirements: Qt5 or higher
  • Sample project requirements: Qt5.3 or higher

A fully editable gantt chart element is provided in the associated sample project:

Gantt sample screen shot

Usage

The project can be used as an externally linked library or by including the source files directly. (The first option would be the preferred one).

Compiling the library

  • Download the source code
  • Run the following command within the project directory to generate the library:
    cd build
    qmake -r ..
    make (or nmake)
  • The library will be available within the build directory. You can run the associated gantt example project from the sample directory:
	sample/./sample	
  • Or you can link to the library from your own project and implement the model data:
    INCLUDEPATH += $$GANTTLIBPATH/include
	
    LIBS += -L$$GANTTLIBPATH/lib -lqmlgantt

Manually including the source files

  • Download the source code
  • Include the following files into your project:
    • qganttglobal
    • qabstractrangemodel.h
    • qabstractrangemodel.cpp
    • qrangeview.h
    • qrangeview.cpp
    • qganttmodel.h
    • qganttmodel.cpp
    • qganttmodelitem.h
    • qganttmodelitem.cpp
  • Implement the model data and you're ready to go

Implementing the model data

There are two ways to add custom data through the model:

  • Adding a QGanntModel item (the easy way)
  • Implementing your own model by extending the QAbstractRangeModel (the custom way and also the bit more difficult one)

Adding a QGanntModel data item

The QGanttModel class is an already implemented version of the QAbstractRangeModel class, therefore provides all the methods required to communicate with the RangeView element. It's child items contain 3 properites: the position and length, which are used by the model to keep items sorted for easy access, and the data property, which is a variant type customizable by the user. It can contain any qml value type, or a reference to a QObject subclass, which can further extend the number of properties available.

In the associated sample subproject, I've included the QGanttData class, which adds a color and label property to each gantt item. The QGanttModel class is assigned a QGanttData object whenever a new QGanttModelItem is created and inserted in the model. This is done internally by the model by calling a configured data factory function whenever an insertion is triggered. The function is configured by using the QGanttModelItem::setItemDataFactoryFunction setter. The factory function is defined in the sample/src/main.cpp file.

To assign a different data item:

class CustomData : public QObject{

    Q_OBJECT
    Q_PROPERTY(QString property1...)
    ...

}

we register the type to qml:

qmlRegisterType<CustomData>("Gantt", 1, 0, "CustomData");

then define the item factory function:

QVariant createModelData(){
    return QVariant::fromValue(new CustomData);
}

and register the function to our model:

QGanttModel* model = new QanttModel;
model->setItemDataFactoryFunction(&createModelData);

then, whenever we invoke a new insertion, a CustomData type object will be set in the data field:

model->insertItem(10, 10);

Which, in our delegate, can be accessed through the modelData property:

RangeView{
    ...
    delegate: Component{
        Text{ text: modelData.property1 }
    }
} 

The properties are set through simple assignments:

RangeView{
    ...
    delegate: Component{
        Rectangle{
            width: 200; height: 40;
            Text{ text: modelData.property1 }
            MouseArea{ anchors.fill: parent; onClicked: modelData.property1 = "new value"; }
        }
    }
} 

The sample/resource/GanttLine.qml file provides a full example on assignments and other item handling.

Implementing the QAbstractRangeModel

The QAbstractRangeModel and QAbstractRangeModelIterator provide the implementation requirements used by the QRangeView to work with the model data. The section is treated separately here.

qml-gantt's People

Contributors

dinusv avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.