Commit 95385f5f authored by NICLAUSSE Nicolas's avatar NICLAUSSE Nicolas

preliminary version of dtkDistributed slides

parent 03a424a6
The MIT License (MIT)
Copyright (c) 2014 Julien Wintz
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
This diff is collapsed.
/* QChart.qml ---
*
* Author: Julien Wintz
* Created: Thu Feb 13 20:59:40 2014 (+0100)
* Version:
* Last-Updated: jeu. mars 6 12:55:14 2014 (+0100)
* By: Julien Wintz
* Update #: 69
*/
/* Change Log:
*
*/
import QtQuick 2.0
import "QChart.js" as Charts
Canvas {
id: canvas;
// ///////////////////////////////////////////////////////////////
property var chart;
property var chartData;
property int chartType: 0;
property bool chartAnimated: true;
property alias chartAnimationEasing: chartAnimator.easing.type;
property alias chartAnimationDuration: chartAnimator.duration;
property int chartAnimationProgress: 0;
property bool dirty: false;
// /////////////////////////////////////////////////////////////////
// Callbacks
// /////////////////////////////////////////////////////////////////
onPaint: {
if(!chart || dirty) {
switch(chartType) {
case Charts.ChartType.BAR:
chart = new Charts.Chart(canvas, canvas.getContext("2d")).Bar(chartData);
break;
case Charts.ChartType.DOUGHNUT:
chart = new Charts.Chart(canvas, canvas.getContext("2d")).Doughnut(chartData);
break;
case Charts.ChartType.LINE:
chart = new Charts.Chart(canvas, canvas.getContext("2d")).Line(chartData);
break;
case Charts.ChartType.PIE:
chart = new Charts.Chart(canvas, canvas.getContext("2d")).Pie(chartData);
break;
case Charts.ChartType.POLAR:
chart = new Charts.Chart(canvas, canvas.getContext("2d")).PolarArea(chartData);
break;
case Charts.ChartType.RADAR:
chart = new Charts.Chart(canvas, canvas.getContext("2d")).Radar(chartData);
break;
default:
console.log('Chart type should be specified.');
}
dirty = false;
chart.init();
if (chartAnimated)
chartAnimator.start();
else
chartAnimationProgress = 100;
}
chart.draw(chartAnimationProgress/100);
}
onHeightChanged: {
requestPaint();
}
onWidthChanged: {
requestPaint();
}
onChartAnimationProgressChanged: {
requestPaint();
}
// /////////////////////////////////////////////////////////////////
// Functions
// /////////////////////////////////////////////////////////////////
function repaint() {
dirty = true;
chartAnimationProgress = 0;
chartAnimator.start();
}
// /////////////////////////////////////////////////////////////////
// Internals
// /////////////////////////////////////////////////////////////////
PropertyAnimation {
id: chartAnimator;
target: canvas;
property: "chartAnimationProgress";
to: 100;
duration: 500;
easing.type: Easing.InOutElastic;
}
}
// QChartGallery.js ---
//
// Author: Julien Wintz
// Created: Thu Feb 13 23:43:13 2014 (+0100)
// Version:
// Last-Updated:
// By:
// Update #: 13
//
// Change Log:
//
//
// /////////////////////////////////////////////////////////////////
// Line Chart Data Sample
// /////////////////////////////////////////////////////////////////
var ChartLineData = {
labels: ["January","February","March","April","May","June","July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#ffffff",
data: [65,59,90,81,56,55,40]
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#ffffff",
data: [28,48,40,19,96,27,100]
}]
}
// /////////////////////////////////////////////////////////////////
// Polar Chart Data Sample
// /////////////////////////////////////////////////////////////////
var ChartPolarData = [{
value: 30,
color: "#D97041"
}, {
value: 90,
color: "#C7604C"
}, {
value: 24,
color: "#21323D"
}, {
value: 58,
color: "#9D9B7F"
}, {
value: 82,
color: "#7D4F6D"
}, {
value: 8,
color: "#584A5E"
}]
// /////////////////////////////////////////////////////////////////
// Radar Chart Data Sample
// /////////////////////////////////////////////////////////////////
var ChartRadarData = {
labels: ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65,59,90,81,56,55,40]
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28,48,40,19,96,27,100]
}]
}
// /////////////////////////////////////////////////////////////////
// Pie Chart Data Sample
// /////////////////////////////////////////////////////////////////
var ChartPieData = [{
value: 30,
color: "#F38630"
}, {
value: 50,
color: "#E0E4CC"
}, {
value: 100,
color: "#69D2E7"
}]
// /////////////////////////////////////////////////////////////////
// Doughnut Chart Data Sample
// /////////////////////////////////////////////////////////////////
var ChartDoughnutData = [{
value: 30,
color: "#F7464A"
}, {
value: 50,
color: "#E2EAE9"
}, {
value: 100,
color: "#D4CCC5"
}, {
value: 40,
color: "#949FB1"
}, {
value: 120,
color: "#4D5360"
}]
// /////////////////////////////////////////////////////////////////
// Bar Chart Data Sample
// /////////////////////////////////////////////////////////////////
var ChartBarData = {
labels: ["January","February","March","April","May","June","July"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65,59,90,81,56,55,40]
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
data: [28,48,40,19,96,27,100]
}]
}
/* QChartGallery.qml ---
*
* Author: Julien Wintz
* Created: Thu Feb 13 23:41:59 2014 (+0100)
* Version:
* Last-Updated: Fri Feb 14 12:58:42 2014 (+0100)
* By: Julien Wintz
* Update #: 5
*/
/* Change Log:
*
*/
import QtQuick 2.0
import "."
import "QChart.js" as Charts
import "QChartGallery.js" as ChartsData
Rectangle {
property int chart_width: 300;
property int chart_height: 300;
property int chart_spacing: 20;
property int text_height: 80;
property int row_height: 8;
color: "#ffffff";
width: chart_width*3 + 2*chart_spacing;
height: chart_height*2 + chart_spacing + 2*row_height + text_height;
// /////////////////////////////////////////////////////////////////
// Header
// /////////////////////////////////////////////////////////////////
Rectangle { color: "#282b36"; width: parent.width/1.0; height: row_height; }
Rectangle { color: "#f33e6f"; width: parent.width/3.0; height: row_height; x: 0*width; y: height; }
Rectangle { color: "#46bfbd"; width: parent.width/3.0; height: row_height; x: 1*width; y: height; }
Rectangle { color: "#fbd45c"; width: parent.width/3.0; height: row_height; x: 2*width; y: height; }
Text {
y: 2*row_height;
width: parent.width;
height: text_height;
text: "QChart.js";
font.pointSize: 32;
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
Rectangle {
id: button;
anchors.top: parent.top;
anchors.topMargin: (parent.height-parent.font.pointSize)/2;
anchors.right: parent.right;
anchors.rightMargin: (parent.height-parent.font.pointSize)/2;
width: 100;
height: 32;
color: "#2d91ea";
radius: 8;
Text {
anchors.centerIn: parent;
color: "#ffffff";
text: "Repaint";
font.bold: true;
}
MouseArea {
anchors.fill: parent;
onPressed: {
button.color = "#1785e6"
}
onReleased: {
button.color = "#2d91ea"
chart_bar.repaint();
chart_doughnut.repaint();
chart_line.repaint();
chart_pie.repaint();
chart_polar.repaint();
chart_radar.repaint();
}
}
}
}
// /////////////////////////////////////////////////////////////////
// Body
// /////////////////////////////////////////////////////////////////
Grid {
id: layout;
x: 0;
y: 2*row_height + text_height;
width: parent.width;
height: parent.height - 2*row_height - text_height;
columns: 3;
spacing: chart_spacing;
Chart {
id: chart_line;
width: chart_width;
height: chart_height;
chartAnimated: true;
chartAnimationEasing: Easing.InOutElastic;
chartAnimationDuration: 2000;
chartData: ChartsData.ChartLineData;
chartType: Charts.ChartType.LINE;
}
Chart {
id: chart_polar;
width: chart_width;
height: chart_height;
chartAnimated: true;
chartAnimationEasing: Easing.InBounce;
chartAnimationDuration: 2000;
chartData: ChartsData.ChartPolarData;
chartType: Charts.ChartType.POLAR;
}
Chart {
id: chart_radar;
width: chart_width;
height: chart_height;
chartAnimated: true;
chartAnimationEasing: Easing.OutBounce;
chartAnimationDuration: 2000;
chartData: ChartsData.ChartRadarData;
chartType: Charts.ChartType.RADAR;
}
Chart {
id: chart_pie;
width: chart_width;
height: chart_height;
chartAnimated: true;
chartAnimationEasing: Easing.Linear;
chartAnimationDuration: 2000;
chartData: ChartsData.ChartPieData;
chartType: Charts.ChartType.PIE;
}
Chart {
id: chart_bar;
width: chart_width;
height: chart_height;
chartAnimated: true;
chartAnimationEasing: Easing.OutBounce;
chartAnimationDuration: 2000;
chartData: ChartsData.ChartBarData;
chartType: Charts.ChartType.BAR;
}
Chart {
id: chart_doughnut;
width: chart_width;
height: chart_height;
chartAnimated: true;
chartAnimationEasing: Easing.OutElastic;
chartAnimationDuration: 2000;
chartData: ChartsData.ChartDoughnutData;
chartType: Charts.ChartType.DOUGHNUT;
}
}
}
# QChart.js
*QML bindings for Charts.js, a simple HTML5 Charts javascript library
using the canvas element* -
[chartjs.org](http://www.chartjs.org).
To give QChart.js a try, just clone this repository and use qmlscene.
```Shell
$ qmlscene QChartGallery.qml
```
![Screenshot](http://jwintz.me/images/qchart.png)
## Dependencies
Qt >= 5.0.
## Setup
This shows how to integrate QChart.js as a ``jbQuick.Charts`` submodule into your git project.
```Shell
$ cd /path/to/project/root/
$ mkdir -p qml/jbQuick
$ git submodule add git://github.com/jwintz/qchart.js.git qml/jbQuick/Charts
$ git commit -a -m "Added QChart.js as a submodule."
```
When cloning a repository with submodules, use:
```Shell
$ git clone git://your/project/repository.git
$ git submodule init
$ git submodule update
```
To update your local submodule, use:
```Shell
$ git submodule update
```
## Usage
Assuming ``jbQuick`` is in your qml import path:
```QML
import jbQuick.Charts 1.0
```
QChart.js qmldir provides:
* ``Chart`` QML item inheriting ``Canvas``
* ``Charts`` Javascript library
In addition, ``Chart`` provides the following properties:
* ``chartAnimated``: whether chart data should be animated on initialization
* ``chartAnimationEasing``: an easing type enumeration provided to a PropertyAnimation
* ``chartAnimationDuration``: the length (ms) of the animation
* ``chartData``: a javascript construct of the data set, see Chart.js documentation
* ``chartType``: a value amongst:
* ``Charts.chartType.BAR`` for a bar chart
* ``Charts.chartType.DOUGHNUT`` for a doughnut chart
* ``Charts.chartType.LINE`` for a line chart
* ``Charts.chartType.PIE`` for a pie chart
* ``Charts.chartType.POLAR`` for a polar chart
* ``Charts.chartType.RADAR`` for a radar chart
The following snippet creates a line chart.
```QML
Chart {
id: chart_line;
width: 400;
height: 400;
chartAnimated: true;
chartAnimationEasing: Easing.InOutElastic;
chartAnimationDuration: 2000;
chartType: Charts.ChartType.LINE;
Component.onCompleted: {
chartData = ...;
}
}
```
## Documentation
You can find Charts.js documentation at
[chartjs.org/docs](http://www.chartjs.org/docs).
## License
QChart.js, just as Charts.js, is available under the [MIT license]
(http://opensource.org/licenses/MIT).
### qmldir ---
##
## Author: Julien Wintz
## Created: Thu Feb 13 14:36:00 2014 (+0100)
## Version:
## Last-Updated:
## By:
## Update #: 45
######################################################################
##
### Change Log:
##
######################################################################
module jbQuick.Charts
Chart 1.0 QChart.qml
Charts 1.0 QChart.js
......@@ -23,6 +23,8 @@ message(STATUS "Using Qt5 binary dir: ${QT5_BINARY_DIR}")
message(STATUS "Using dtk binary doc: ${DTK_QDOC_EXECUTABLE}")
message(STATUS "Using Qt5 binary qhg: ${QT5_QDOC_EXECUTABLE}")
add_subdirectory("slides")
## ###################################################################
## dtk
## ###################################################################
......
add_subdirectory(dtkDistributed)
### CMakeLists.txt ---
##
## Author: Nicolas Niclausse
## Copyright (C) 2012 - Nicolas Niclausse, Inria.
######################################################################
project(dtkDistributedSlides)
## #################################################################
## Sources
## #################################################################
set(${PROJECT_NAME}_SOURCES
main.cpp)
set(${PROJECT_NAME}_RESOURCES
dtkDistributedSlides.qrc)
## #################################################################
## Build rules
## #################################################################
qt5_add_RESOURCES(${PROJECT_NAME}_SOURCES_QRC ${${PROJECT_NAME}_RESOURCES})
add_executable(${PROJECT_NAME}
${${PROJECT_NAME}_SOURCES_QRC}
${${PROJECT_NAME}_SOURCES})
target_link_libraries(${PROJECT_NAME}
dtkDistributed
dtkLog
)
target_link_libraries(${PROJECT_NAME} Qt5::Core)
target_link_libraries(${PROJECT_NAME} Qt5::Network)
target_link_libraries(${PROJECT_NAME} Qt5::Gui)
target_link_libraries(${PROJECT_NAME} Qt5::Quick)
## #################################################################
## Source file layout in development environments like Visual Studio
## #################################################################
SOURCE_GROUP("Header Files" REGULAR_EXPRESSION .*\\.h\$)
## #################################################################
## Installation
## #################################################################
install(TARGETS ${PROJECT_NAME}
BUNDLE DESTINATION bin
RUNTIME DESTINATION bin)
import Qt.labs.presentation 1.0
import QtQuick 2.3
import QtQuick.Controls 1.1
import QtMultimedia 5.3
import QtWebKit 3.0
ApplicationWindow {
title: "DTK Distributed"
visible: true
OpacityTransitionPresentation
/* Presentation */
{
id: presentation
width: parent.width
height: parent.height
/* width: 1280 */
/* height: 720 */
showNotes: true
Keys.forwardTo: [video]
SlideCounter {}
/* Clock {} */
Image {
id: background
source: "images/Arc-Brave.png"
opacity: 0.5
width: parent.width
height: parent.height
anchors.centerIn: parent
}
Image {
id: dtklogo
source: "images/dtk-logo.png"
opacity: 0.7
anchors.top: parent.top
anchors.right: parent.right
anchors.margins: 10
}
Image {
id: inriaLogo
mipmap: true
source: "images/inria-transparent.png"
width: 404 / 1.5
height: 145 / 1.5
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.margins: 0
}
Slide {
title: "DREAM-Tech - DTK Distributed"
centeredText: "Nicolas Niclausse / Thibaud Kloczko"
}
Slide {
title: "Plan"
content: [
"Motivations",
"Management des ressources",
"Application distribuées",
"Conteneurs distribués"
]
}
Slide {
title: "Contexte"
content: [
"ADT DTK (depuis 2012) ",
" architecture modulaire, plugins",
" Multi Plateforme, C++, Qt",
" num3sis, axel, medInria, enas, carbonQuant, pib, inalgae",
"Layers:",
" dtkCore",
" dtkComposer",
" dtkPlot",
" dtkLinearAlgebraSparse",
" <b>dtkDistributed</b>",
]