Properties

• fieldSpacing : int
• inputColor : color
• inputFontBold : bool
• inputFontFamily : string
• inputFontItalic : bool
• inputFontPixelSize : int
• inputFontPointSize : int
• inputFontStrikeout : bool
• inputFontUnderline : bool
• inputText : string
• keyBoardAnimationSpeed : int
• keyHeight : int
• keyTextBold : string
• keyTextColor : string
• keyTextFontSize : int
• keyWidth : int
• keyboardBackGroundImage : url
• labelColor : color
• labelFontBold : bool
• labelFontFamily : string
• labelFontItalic : bool
• labelFontPixelSize : int
• labelFontPointSize : int
• labelFontStrikeout : bool
• labelFontUnderline : bool
• labelText : string
• normalKeyIcon : url
• pressedKeyIcon : url

Detailed Description

The AlphaField type provides an input box with a text label that can be styled using field spacings and font properties. When the input box has focus a keyboard will slide out to allow a user to input text.

Here is a simple AlphaField:

 import QtQuick 1.1
 import "components"

 AlphaField {
     id: alphabetic_field1
     fieldSpacing: 4
     keyTextColor: "#ffffff"
     keyTextBold: false
     keyTextFontSize: 14
     keyboardAnimationSpeed: 100
     inputText: ""
     inputColor: "#ffffff"
     inputFontFamily: "DejaVu Sans"
     inputFontPixelSize: 14
     labelText: "Label"
     labelColor: "#000000"
     labelFontFamily: "DejaVu Sans"
     labelFontPixelSize: 14

     onInputTextChanged: {
         console.debug(inputText);
     }
 }

Property Documentation

Properties

• fieldSpacing : int
• inputColor : color
• inputFontBold : bool
• inputFontFamily : string
• inputFontItalic : bool
• inputFontPixelSize : int
• inputFontPointSize : int
• inputFontStrikeout : bool
• inputFontUnderline : bool
• inputText : string
• keyBoardAnimationSpeed : int
• keyHeight : int
• keyTextBold : string
• keyTextColor : string
• keyTextFontSize : int
• keyWidth : int
• keyboardBackGroundImage : url
• labelColor : color
• labelFontBold : bool
• labelFontFamily : string
• labelFontItalic : bool
• labelFontPixelSize : int
• labelFontPointSize : int
• labelFontStrikeout : bool
• labelFontUnderline : bool
• labelText : string
• normalKeyIcon : url
• pressedKeyIcon : url

Detailed Description

The VerticalAlphaField type provides an input box with a text label that can be styled using field spacings and font properties. When the input box has focus a keyboard will slide out to allow a user to input text.

Here is a simple VerticalAlphaField:

 import QtQuick 1.1
 import "components"

 VerticalAlphaField {
     id: alphabetic_field__vertical1
     fieldSpacing: 4
     inputText: ""
     keyTextColor: "#ffffff"
     inputColor: "#ffffff"
     labelColor: "#000000"
     inputFontPixelSize: 14
     keyboardAnimationSpeed: 100
     inputFontFamily: "DejaVu Sans"
     labelFontFamily: "DejaVu Sans"
     labelFontPixelSize: 14
     labelText: "Label"

     onInputTextChanged: {
         console.debug(inputText);
     }
 }

Property Documentation

Properties

• font : font
• imageOff : url
• imageOn : url
• on : bool
• sliderImage : url
• sliderImageOffX : int
• sliderImageOnX : int
• sliderImageY : int
• textColor : color
• textOff : string
• textOffX : int
• textOn : string
• textOnX : int
• width : int

Detailed Description

The animated switch type provides a switch button with image animation. The control can be created using 2 or 3 images.

Here is a simple animated switch using 2 images:

 import QtQuick 1.1
 import "components"

 AnimatedSwitch {
     id: animatedswitch1
     width: 130
     height: 56
     on: false
     imageOn: ""
     textOffX: 78
     sliderImage: "images/knob.svg"
     textOnX: 18
     imageOff: "images/background.svg"
     sliderImageY: 2
     imageOffHeight: 56
     imageOffWidth: 130
     textColor: "#ffffff"
     font.family: "DejaVu Sans"
     font.bold: false
     sliderImageOffX: 78
     textOn: "On"
     sliderImageOnX: 1
     font.pixelSize: 22
     textOff: "Off"

     onOnChanged: {
         console.debug(on);
     }
 }

Here is a simple animated switch using 3 images:

 import QtQuick 1.1
 import "components"

 AnimatedSwitch{
     id: animatedswitch2
     width: 100;
     height: 27;
     on: true
     imageOff: "images/off.png"
     imageOffWidth: 100
     imageOffHeight: 27
     sliderImage: "images/slider.png"
     imageOn: "images/on.png"
     imageOnWidth: 100
     imageOnHeight: 27
     sliderImageOnX: 0
     sliderImageY: 0
     sliderImageOffX: 62
     textOnX: 18
     textOffX: 54
     textColor: "#000000"

     onOnChanged: {
         console.debug(on);
     }

 }

Property Documentation

Properties

• barDatasetSpacing : int
• barShowStroke : bool
• barStrokeWidth : int
• barValueSpacing : int
• data : variant
• height : int
• scaleFontColor : string
• scaleFontFamily : string
• scaleFontSize : int
• scaleFontStyle : string
• scaleGridLineColor : string
• scaleGridLineWidth : int
• scaleLabel : string
• scaleLineColor : string
• scaleLineWidth : int
• scaleOverlay : bool
• scaleOverride : bool
• scaleShowGridLines : bool
• scaleShowLabels : bool
• scaleStartValue : int
• scaleStepWidth : int
• scaleSteps : int
• showLegend : bool
• width : int

Detailed Description

A bar chart is a way of showing data as bars. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. The bar chart has the a very similar data structure to the line chart, and has an array of datasets, each with colours and an array of data. Again, colors are in CSS format. There is an array of labels for display.

 import QtQuick 1.1
 import "components"

 // Here is a simple barchart:
 BarChart {
     id: bar_chart1
     width: 440
     height: 180
     showLegend: true
     scaleShowGridLines: true
     scaleLineWidth: 1
     scaleFontStyle: "normal"
     barStrokeWidth: 2
     scaleOverlay: true
     scaleLabel: "<%=value%>"
     barDatasetSpacing: 1
     scaleLineColor: "rgba(0,0,0,0.1)"
     barShowStroke: true
     scaleFontFamily: "DejaVu Sans"
     scaleShowLabels: true
     scaleFontColor: "#666"
     barValueSpacing: 5
     scaleGridLineColor: "rgba(0,0,0,0.05)"
     scaleFontSize: 10
     scaleGridLineWidth: 1

     data:[{
        labels : ["Jan","Feb","March","April","May","June","July"],
        datasets : [
        {
            text: "Data 1",
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "rgba(220,220,220,1)",
            data : [65,59,90,81,56,55,40]
        },
        {
            text: "Data 2",
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,1)",
            data : [28,48,40,19,96,27,100]
        },
        {
            text: "Data 3",
            fillColor : "rgba(255,0,0,0.7)",
            strokeColor : "rgba(255,0,0,1)",
            data : [18,38,30,100,96,37,100]
        }
        ]

     }]
 }

Property Documentation

Properties

• font : font
• imageChecked : string
• imageHeight : int
• imageUnChecked : string
• imageWidth : int
• model : model
• textColor : string
• values : model

Detailed Description

The HorizontalCheckBoxList type provides a multi-selection check box group that is arranged in a horizontal layout.

Here is a simple HorizontalCheckListBox:

 import QtQuick 1.1
 import "components"


 HorizontalCheckBoxList {
     id: checkbox_list1
     textColor: "#000000"
     font.family: "DejaVu Sans"
     font.bold: false
     font.pixelSize: 16
     imageHeight: 28
     imageWidth: 28
     spacing: 4
     itemSpacing: 8

     model: ListModel {
         ListElement {
             item_value: "1"
             item_text: "check 1"
             item_checked: true
         }

         ListElement {
             item_value: "2"
             item_text: "check 2"
             item_checked: false
         }
     }
     imageUnChecked: "images/checkbox.bmp"
     imageChecked: "images/checkbox_click.bmp"

     onValuesChanged: {
         for (var i=0; i < values.count; i++)
         {
             console.debug(values.get(i).value);
         }
     }
 }

Property Documentation

Properties

• font : font
• imageChecked : string
• imageHeight : int
• imageUnChecked : string
• imageWidth : int
• model : model
• textColor : string
• values : model

Detailed Description

The VerticalCheckBoxList type provides a multi-selection check box group that is arranged in a vertical layout.

Here is a simple VerticalCheckListBox:

 import QtQuick 1.1
 import "components"

 VerticalCheckBoxList {
     id: checkbox_list1
     textColor: "#000000"
     font.family: "DejaVu Sans"
     font.bold: false
     font.pixelSize: 16
     imageHeight: 28
     imageWidth: 28
     spacing: 4
     itemSpacing: 8

     model: ListModel {
         ListElement {
             item_value: "1"
             item_text: "check 1"
             item_checked: true
         }

         ListElement {
             item_value: "2"
             item_text: "check 2"
             item_checked: false
         }
     }
     imageUnChecked: "images/checkbox.bmp"
     imageChecked: "images/checkbox_click.bmp"

     onValuesChanged: {
         for (var i=0; i < values.count; i++)
         {
             console.debug(values.get(i).value);
         }
     }
 }

Property Documentation

Properties

• backgroundColor : string
• borderColor : string
• borderRadius : int
• borderWidth : int
• buttonBackgroundColor : string
• buttonFont.bold : bool
• buttonFont.family : string
• buttonFont.pixelSize : int
• buttonFontColor : string
• caption : string
• captionFont.bold : bool
• captionFont.family : string
• captionFont.pixelSize : int
• captionFontColor : string
• dateFont.bold : bool
• dateFont.family : string
• dateFont.pixelSize : int
• dateFontColor : string
• day : int
• fieldSpacing : int
• inputColor : color
• inputFontBold : bool
• inputFontFamily : string
• inputFontItalic : bool
• inputFontPixelSize : int
• inputFontStrikeout : bool
• inputFontUnderline : bool
• keyBoardAnimationSpeed : int
• keyboardBackGroundImage : url
• labelColor : color
• labelFontBold : bool
• labelFontFamily : string
• labelFontItalic : bool
• labelFontPixelSize : int
• labelFontStrikeout : bool
• labelFontUnderline : bool
• labelText : string
• maxYear : int
• minYear : int
• month : int
• spacing : int
• year : int

Detailed Description

The DateField type provides an input box with a text label that can be styled using field spacings and font properties. When the input box has focus a date picker will slide out to allow a user to input a date.

Here is a simple DateField:

 import QtQuick 1.1
 import "components"

 DateField {
     width: 160
     height: 36
     year: 2015
     minYear: 2000
     maxYear: 2030
     month: 1
     day: 1
     dateMask: "mon dd yyyy"
     labelText: "Date"
     labelFontPixelSize: 15
     labelFontBold: false
     labelFontFamily: "DejaVu Sans"
     inputFontFamily: "DejaVu Sans"
     inputFontPixelSize: 15
     fieldSpacing: 8
     borderColor: "#ffffff"
     borderWidth: 2
     borderRadius: 4
     backgroundColor: "#424242"
     caption: "System Date"
     captionFont.bold: true
     captionFont.family: "DejaVu Sans"
     captionFontColor: "#ffffff"
     captionFont.pixelSize: 20
     dateFontColor: "#000000"
     dateFont.family: "DejaVu Sans"
     dateFont.pixelSize: 18
     dateFont.bold: true
     spacing: 10
     buttonBackgroundColor: "#bbb7bb"
     buttonFont.bold: false
     buttonFontColor: "#000000"
     buttonFont.family: "DejaVu Sans"
     buttonFont.pixelSize: 15
 }

Property Documentation

Properties

• backgroundColor : string
• borderColor : string
• borderRadius : int
• borderWidth : int
• buttonBackgroundColor : string
• buttonFont.bold : bool
• buttonFont.family : string
• buttonFont.pixelSize : int
• buttonFontColor : string
• caption : string
• captionFont.bold : bool
• captionFont.family : string
• captionFont.pixelSize : int
• captionFontColor : string
• dateFont.bold : bool
• dateFont.family : string
• dateFont.pixelSize : int
• dateFontColor : string
• day : int
• fieldSpacing : int
• inputColor : color
• inputFontBold : bool
• inputFontFamily : string
• inputFontItalic : bool
• inputFontPixelSize : int
• inputFontStrikeout : bool
• inputFontUnderline : bool
• keyBoardAnimationSpeed : int
• keyboardBackGroundImage : url
• labelColor : color
• labelFontBold : bool
• labelFontFamily : string
• labelFontItalic : bool
• labelFontPixelSize : int
• labelFontStrikeout : bool
• labelFontUnderline : bool
• labelText : string
• maxYear : int
• minYear : int
• month : int
• spacing : int
• year : int

Detailed Description

The VerticalDateField type provides an input box with a text label that can be styled using field spacings and font properties. When the input box has focus a date picker will slide out to allow a user to input a date.

Here is a simple VerticalDateField:

 import QtQuick 1.1
 import "components"

 VerticalDateField {
     year: 2015
     minYear: 2000
     maxYear: 2030
     month: 1
     day: 1
     dateMask: "mon dd yyyy"
     labelText: "Date"
     labelFontPixelSize: 15
     labelFontBold: false
     labelFontFamily: "DejaVu Sans"
     inputFontFamily: "DejaVu Sans"
     inputFontPixelSize: 15
     fieldSpacing: 8
     borderColor: "#ffffff"
     borderWidth: 2
     borderRadius: 4
     backgroundColor: "#424242"
     caption: "System Date"
     captionFont.bold: true
     captionFont.family: "DejaVu Sans"
     captionFontColor: "#ffffff"
     captionFont.pixelSize: 20
     dateFontColor: "#000000"
     dateFont.family: "DejaVu Sans"
     dateFont.pixelSize: 18
     dateFont.bold: true
     spacing: 10
     buttonBackgroundColor: "#bbb7bb"
     buttonFont.bold: false
     buttonFontColor: "#000000"
     buttonFont.family: "DejaVu Sans"
     buttonFont.pixelSize: 15
 }

Property Documentation

Properties

• data : variant
• height : int
• innerCutoutColor : string
• legendFontColor : string
• legendFontFamily : string
• legendFontSize : int
• legendFontStyle : string
• percentageInnerCutout : real
• segmentShowStroke : bool
• segmentStrokeColor : string
• segmentStrokeWidth : int
• showLegend : bool
• width : int

Detailed Description

The DoughnutChart type provides a visual chart divided into segments, the arc of each segment shows a the proportional value of each piece of data.

 import QtQuick 1.1
 import "components"

 // Here is a simple doughnut chart:

 DoughnutChart {
     id: doughnut_chart1
     width: 200
     height: 200
     legendFontColor: "#000"
     percentageInnerCutout: 50
     segmentStrokeColor: "#ffffff"
     legendFontSize: 10
     legendFontFamily: "DejaVu Sans"
     segmentStrokeWidth: 2
     legendFontStyle: "normal"
     segmentShowStroke: true
     showLegend: true
     innerCutoutColor: "#ffffff"

     data : [
     {
         text: "Series 1",
         value: 30,
         color:"#F7464A"
     },
     {
         text: "Series 2",
         value : 50,
         color : "#E2EAE9"
     },
     {
         text: "Series 3",
         value : 100,
         color : "#D4CCC5"
     },
     {
         text: "Series 4",
         value : 40,
         color : "#949FB1"
     },
     {
         text: "Series 5",
         value : 120,
         color : "#4D5360"
     }

 ]
 }

Property Documentation

Properties

• borderColor : string
• borderWidth : int
• color : string
• height : int
• penColor : string
• penWidth : int
• width : int

Detailed Description

The DrawArea type provides a way to capture drawings with the mouse or touch.

 import QtQuick 1.1
 import "components"

 // Here is a simple draw area:

 DrawArea {
     id: draw_area1
     width: 400
     height: 200
     color: "#ffffff"
     penWidth: 2
     borderColor: "#000000"
     penColor: "#000000"
     borderWidth: 4
 }

Property Documentation

Properties

• calculateIntensity : bool
• height : int
• intensity : real
• max : int
• min : int
• radius : int
• width : int

Detailed Description

A heat map is a graphical representation of data where the values taken by a variable in a two-dimensional map are represented as colors.

 import QtQuick 1.1
 import "components"

 // Here is a simple heat map:

 HeatMap {
     id: heatmap
     width: 400
     height: 200
     radius: 20
     max: 20
     min: 0
     calculateIntensity: true
     intensity: 0
 }

 // The data model is as follows:
 // x and y are the coordinates in relation to the center of the heat map.
 // count is the data that is to be used if the intensity is to be calculated.

 ListModel {
     id: data
     ListElement {
         x: 10
         y: 20
         count: 18
     }

     ListElement {
         x: 25
         y: 50
         count: 14
     }

     ListElement {
         x: -50
         y: -10
         count: 10
     }

     ListElement {
         x: 12
         y: 22
         count: 16
     }

     ListElement {
         x: 1
         y: 2
         count: 4
     }
 }

 // This is an example function to populate the data model of the heatmap.
 function populateHeatMap()
 {
     heatmap.model.clear();
     var xMin = -heatmap.width/2;
     var xMax = heatmap.width/2;
     var yMin = -heatmap.height/2;
     var yMax = heatmap.height/2;

     for (var i=0; i < 200; i++)
     {
         var data = {"x": getRandomInt(xMin, xMax), "y": getRandomInt(yMin, yMax), "count": getRandomInt(heatmap.min, heatmap.max)};
         heatmap.model.append(data);
     }

 }

 function getRandomInt(min, max) {
     return Math.floor(Math.random() * (max - min + 1)) + min;
 }

Property Documentation

Properties

• autoRepeat : bool
• autoRepeatInterval : bool
• disabled : bool
• font : font
• height : int
• imageDown : url
• imageUp : url
• text : string
• textColor : string
• width : int

Detailed Description

The ImageButton type provides a button with a text label that can be styled using images.

Here is a simple ImageButton:

 import QtQuick 1.1
 import "components"

     ImageButton {
         id: image_button1
         width: 60
         height: 40
         text: "Test"
         imageUp: "images/internal_button_up.bmp"
         font.pixelSize: 18
         textColor: "#000000"
         imageDown: "images/internal_button_dn.bmp"
         font.bold: false
         font.family: "DejaVu Sans"
         onButtonClick: console.debug("clicked");
         onButtonPress: console.debug("pressed");
         onButtonRelease: console.debug("released");
 }

Property Documentation

Properties

• add : bool
• font : font
• height : int
• hintBackgroundColor : string
• hintBorderColor : string
• hintBorderWidth : int
• hintFontColor : string
• hintFontFamily : string
• hintFontPixelSize : string
• hintHeight : int
• hintRadius : int
• hintWidth : int
• imageBase : url
• imageBaseHeight : int
• imageBaseWidth : int
• imageNeedle : url
• imageNeedleHeight : int
• imageNeedleWidth : int
• initialIndex : int
• knobValue : real
• mouseAreaHeight : int
• mouseAreaWidth : int
• remove : bool
• showHint : bool
• textColor : string
• value : real
• width : int

Detailed Description

The Knob type provides a visual dial that is styled using images.

Here is a simple Knob:

 import QtQuick 1.1
 import "components"

 Knob {
     id: knob1
     width: 180
     height: 180
     hintBorderColor: "#000000"
     imageNeedleHeight: 108
     imageBase: "images/dialbase.png"
     showHint: true
     hintBorderWidth: 2
     hintFontFamily: "DejaVu Sans"
     imageNeedle: "images/dialneedle.png"
     hintBackgroundColor: "#ffffff"
     hintFontColor: "#000000"
     hintFontPixelSize: 16
     remove: false
     initialIndex: 0
     mouseAreaWidth: 77
     mouseAreaHeight: 77
     textColor: "#ffffff"
     imageNeedleWidth: 108
     font.family: "Arial"
     imageBaseHeight: 108
     font.bold: false
     hintRadius: 9
     imageBaseWidth: 108
     hintWidth: 40
     add: false
     hintHeight: 40
     font.pixelSize: 16
     model:  ListModel{
         id: data
         ListElement{
             index: 0
             value: 0
         }
         ListElement{
             index: 1
             value: 1
         }
         ListElement{
             index: 2
             value: 2
         }
         ListElement{
             index: 3
             value: 3
         }
         ListElement{
             index: 4
             value: 4
         }
         ListElement{
             index: 5
             value: 5
         }
     }

     onKnobValueChanged: console.debug(knobValue);
 }

Property Documentation

Properties

• filedSpacing : int
• font : font
• height : int
• imageOff : url
• imageOn : url
• label : string
• on : bool
• textColor : color
• textPosition : font
• width : int

Detailed Description

The LEDLight type provides a visual on and off state. The control has an on and off state that is styled with two images and text.

 import QtQuick 1.1
 import "components"

 // Here is a simple led light using 2 images:

 LEDLight {
     id: led_light1
     x: 291
     y: 148
     width: 60
     height: 60
     on: false
     font.pixelSize: 12
     textColor: "#000000"
     textPosition: "bottom"
     label: "Label"
     fieldSpacing: 6
     font.bold: false
     font.family: "DejaVu Sans"
     imageOff: "images/ledoff.png"
     imageOn: "images/ledon.png"

     onOnChanged: {
         console.debug(on);
     }
 }

Property Documentation

Properties

• height : int
• hintFontBold : bool
• hintFontColor : string
• hintFontFamily : string
• hintFontItalic : bool
• hintFontPixelSize : string
• hintFontPointSize : string
• hintFontStrikeout : bool
• hintFontUnderLine : bool
• imageBase : url
• imageOverlay : url
• increment : int
• maxValue : int
• minValue : int
• showHint : bool
• value : int
• width : int

Detailed Description

The HorizontalLevelIndicator type provides a horizontal component that can be styled with a background image and an overlay image. The component is used to show a single data point value between a min and a max value.

Here is a simple HorizontalLevelIndicator:

 import QtQuick 1.1
 import "components"

 HorizontalLevelIndicator {
     id: level_indicator___horizontal1
     width: 200
     height: 20
     minValue: 0
     maxValue: 50
     value: 0
     increment: 4
     startPosition: "left"
     imageBase: "images/tank.png"
     imageOverlay: "images/tank_overlay.png"
     showHint: true
     hintFontFamily: "DejaVu Sans"
     hintFontPixelSize: 14
     hintFontColor: "#000000"

     onValueChanged: {
         console.debug(value);
     }
 }

Property Documentation

Properties

• height : int
• hintFontBold : bool
• hintFontColor : string
• hintFontFamily : string
• hintFontItalic : bool
• hintFontPixelSize : string
• hintFontPointSize : string
• hintFontStrikeout : bool
• hintFontUnderLine : bool
• imageBase : url
• imageOverlay : url
• increment : int
• maxValue : int
• minValue : int
• showHint : bool
• startPosition : string
• symbol : string
• value : int
• valueScale : int
• width : int

Detailed Description

The VerticalLevelIndicator type provides a vertical component that can be styled with a background image and an overlay image. The component is used to show a single data point value between a min and a max value.

Here is a simple VerticalLevelIndicator:

 import QtQuick 1.1
 import "components"

 VerticalLevelIndicator {
     id: level_indicator___vertical1
     width: 28
     height: 160
     value: 0
     minValue: 0
     maxValue: 18
     increment: 9
     imageBase: "images/level.png"
     imageOverlay: "images/level_overlay.png"
     startPosition: "bottom"
     showHint: true
     hintFontFamily: "DejaVu Sans"
     hintFontPixelSize: 14
     hintFontColor: "#000000"

     onValueChanged: {
         console.debug(value);
     }
 }

Property Documentation

Properties

• bezierCurve : bool
• data : variant
• datasetFill : bool
• datasetStroke : bool
• datasetStrokeWidth : int
• height : int
• pointDot : bool
• pointDotRadius : int
• pointDotStrokeWidth : int
• scaleFontColor : string
• scaleFontFamily : string
• scaleFontSize : int
• scaleFontStyle : string
• scaleGridLineColor : string
• scaleGridLineWidth : int
• scaleLineColor : string
• scaleLineWidth : int
• scaleOverlay : bool
• scaleOverride : bool
• scaleShowGridLines : bool
• scaleShowLabels : bool
• scaleStartValue : int
• scaleStepWidth : int
• showLegend : bool
• width : int

Detailed Description

The line chart has the a very similar data structure to the bar chart, and has an array of datasets, each with colours and an array of data. Again, colors are in CSS format. There is an array of labels for display.

 import QtQuick 1.1
 import "components"

 // Here is a simple linechart:

 LineChart {
     id: line_chart1
     x: 18
     y: 84
     width: 440
     height: 180
     showLegend: true
     scaleShowGridLines: true
     datasetStroke: true
     datasetStrokeWidth: 2
     datasetFill: true
     scaleLineWidth: 1
     scaleFontStyle: "normal"
     pointDotStrokeWidth: 2
     scaleOverlay: true
     scaleLabel: "<%=value%>"
     pointDot: true
     scaleLineColor: "rgba(0,0,0,0.1)"
     pointDotRadius: 4
     scaleFontFamily: "DejaVu Sans"
     scaleShowLabels: true
     scaleFontColor: "#666"
     bezierCurve: true
     scaleGridLineColor: "rgba(0,0,0,0.05)"
     scaleFontSize: 10
     scaleGridLineWidth: 1

     data: [{
         labels : ["Jan","Feb","March","April","May","June","July"],
         datasets : [
             {
                 text: "Data 1",
                 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]
             },
             {
                 text: "Data 2",
                 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]
             }
         ]

     }]

 }

Property Documentation

Properties

• backgroundColor : string
• borderColor : string
• borderRadius : int
• borderWidth : int
• caption : string
• captionFont.bold : bool
• captionFont.family : string
• captionFont.pixelSize : int
• captionFontColor : string
• fieldSpacing : int
• inputColor : color
• inputFontBold : bool
• inputFontFamily : string
• inputFontItalic : bool
• inputFontPixelSize : int
• inputFontStrikeout : bool
• inputFontUnderline : bool
• keyBoardAnimationSpeed : int
• keyboardBackGroundImage : url
• labelColor : color
• labelFontBold : bool
• labelFontFamily : string
• labelFontItalic : bool
• labelFontPixelSize : int
• labelFontStrikeout : bool
• labelFontUnderline : bool
• labelText : string
• listFont.bold : bool
• listFont.family : string
• listFont.pixelSize : int
• listFontColor : string
• listItemHeight : int
• model : model
• scrollbarWidth : int
• spacing : int
• value : int

Detailed Description

The ListField type provides an input box with a text label that can be styled using field spacings and font properties. When the input box has focus a list picker will slide out to allow a user to choose an item.

Here is a simple ListField:

 import QtQuick 1.1
 import "components"

 ListField {
     width: 160
     height: 36
     value: 1
     labelText: "Label"
     labelFontFamily: "DejaVu Sans"
     labelFontPixelSize: 15
     labelFontBold: false
     inputFontFamily: "DejaVu Sans"
     inputFontPixelSize: 15
     fieldSpacing: 8
     backgroundColor: "#424242"
     borderWidth: 2
     borderRadius: 4
     borderColor: "#ffffff"
     spacing: 10
     listItemHeight: 32
     scrollBarWidth: 10
     caption: "Set List"
     captionFontColor: "#ffffff"
     captionFont.family: "DejaVu Sans"
     captionFont.pixelSize: 20
     captionFont.bold: true
     listFontColor: "#000000"
     listFont.family: "DejaVu Sans"
     listFont.bold: true
     listFont.pixelSize: 18

     model: ListModel {
         ListElement {
             text: "Choice 1"
             value: 1
         }

         ListElement {
             text: "Choice 2"
             value: 2
         }

         ListElement {
             text: "Choice 3"
             value: 3
         }

         ListElement {
             text: "Choice 4"
             value: 4
         }

         ListElement {
             text: "Choice 5"
             value: 5
         }

         ListElement {
             text: "Choice 6"
             value: 6
         }

         ListElement {
             text: "Choice 7"
             value: 7
         }

         ListElement {
             text: "Choice 8"
             value: 8
         }

         ListElement {
             text: "Choice 9"
             value: 9
         }

         ListElement {
             text: "Choice 10"
             value: 10
         }
     }
 }

Property Documentation

Properties

• backgroundColor : string
• borderColor : string
• borderRadius : int
• borderWidth : int
• caption : string
• captionFont.bold : bool
• captionFont.family : string
• captionFont.pixelSize : int
• captionFontColor : string
• fieldSpacing : int
• inputColor : color
• inputFontBold : bool
• inputFontFamily : string
• inputFontItalic : bool
• inputFontPixelSize : int
• inputFontStrikeout : bool
• inputFontUnderline : bool
• keyBoardAnimationSpeed : int
• keyboardBackGroundImage : url
• labelColor : color
• labelFontBold : bool
• labelFontFamily : string
• labelFontItalic : bool
• labelFontPixelSize : int
• labelFontStrikeout : bool
• labelFontUnderline : bool
• labelText : string
• listFont.bold : bool
• listFont.family : string
• listFont.pixelSize : int
• listFontColor : string
• listItemHeight : int
• model : model
• scrollbarWidth : int
• spacing : int
• value : int

Detailed Description

The VerticalListField type provides an input box with a text label that can be styled using field spacings and font properties. When the input box has focus a list picker will slide out to allow a user to choose an item.

Here is a simple VerticalListField:

 import QtQuick 1.1
 import "components"

 VerticalListField {
     value: 1
     labelText: "Label"
     labelFontFamily: "DejaVu Sans"
     labelFontPixelSize: 15
     labelFontBold: false
     inputFontFamily: "DejaVu Sans"
     inputFontPixelSize: 15
     fieldSpacing: 8
     backgroundColor: "#424242"
     borderWidth: 2
     borderRadius: 4
     borderColor: "#ffffff"
     spacing: 10
     listItemHeight: 32
     scrollBarWidth: 10
     caption: "Set List"
     captionFontColor: "#ffffff"
     captionFont.family: "DejaVu Sans"
     captionFont.pixelSize: 20
     captionFont.bold: true
     listFontColor: "#000000"
     listFont.family: "DejaVu Sans"
     listFont.bold: true
     listFont.pixelSize: 18

     model: ListModel {
         ListElement {
             text: "Choice 1"
             value: 1
         }

         ListElement {
             text: "Choice 2"
             value: 2
         }

         ListElement {
             text: "Choice 3"
             value: 3
         }

         ListElement {
             text: "Choice 4"
             value: 4
         }

         ListElement {
             text: "Choice 5"
             value: 5
         }

         ListElement {
             text: "Choice 6"
             value: 6
         }

         ListElement {
             text: "Choice 7"
             value: 7
         }

         ListElement {
             text: "Choice 8"
             value: 8
         }

         ListElement {
             text: "Choice 9"
             value: 9
         }

         ListElement {
             text: "Choice 10"
             value: 10
         }
     }
 }