Index: sources/gui/qml/components/RangeSlider.qml =================================================================== diff -u -r7d94ca3afb7db039014cfda226a5bc708fa02db9 -r605815f54dfac948ada786080f55d1b6e7a0d47b --- sources/gui/qml/components/RangeSlider.qml (.../RangeSlider.qml) (revision 7d94ca3afb7db039014cfda226a5bc708fa02db9) +++ sources/gui/qml/components/RangeSlider.qml (.../RangeSlider.qml) (revision 605815f54dfac948ada786080f55d1b6e7a0d47b) @@ -21,7 +21,11 @@ import "qrc:/globals" /*! - * \brief Denali project ProgressBar + * \brief Denali project RangeSlider + * \details This Component contains two handler for minimum and maximum + * which cannot pass each other. + * Can be used to adjust the minimum and maximum of a range. + * */ RangeRect { id: _root enum HandlerOption { @@ -30,29 +34,29 @@ Max } - property alias minValue : _rangeRect.lowerBound - property alias maxValue : _rangeRect.upperBound - property int curValue : RangeSlider.HandlerOption.None + property alias minValue : _rangeRect.lowerBound ///< value of the minimum slider handler + property alias maxValue : _rangeRect.upperBound ///< value of the maximum slider handler - property real step : 1 - property bool stepSnap : false + property int curHandler : RangeSlider.HandlerOption.None ///< current active slider handler - property bool ticks : false + property real step : 1 ///< each step difference + property bool stepSnap : false ///< values within steps are not selectable if true - property alias color : _rangeRect.color - property alias bgColor : _root.color + property bool ticks : false ///< visible the tick marks - property alias handler : _handlerRight + property alias color : _rangeRect.color ///< the within range sliding color + property alias bgColor : _root.color ///< the out of range sliding color + /// root attributes + clip : false - clip: false height : Variables.progressbarHeight touchMargin : 25 minimum : 0 maximum : 0 - // real-time bound change should effect the current set value + /// real-time bound change should effect the current set value onMinimumChanged: { if (minValue < minimum ) minValue = minimum @@ -66,24 +70,36 @@ maxValue = maximum } + /// Lable of the minimum of range minText { visible : true anchors.topMargin: Variables.sliderTextMargin font.pixelSize : Fonts.fontPixelSliderMarker font.bold : false } + ///< Lable of the maximum of range maxText { visible : true anchors.topMargin: Variables.sliderTextMargin font.pixelSize : Fonts.fontPixelSliderMarker font.bold : false } + + /// + /// \brief calculate the value by position x + /// \param x : x cordinate + /// function getValueOfX(x) { return ( x * ( maximum - minimum ) ) / width + minimum } + /// + /// \brief calculate the value by position x of the handler + /// \details calculates the current value withing the range of minimum and maximum regarding the x cordinate of the active slider. + /// \param x : the active slider x cordinate. + /// function setValue(x) { var value = 0 if ( x < 0 ) { value = minimum; return value; } @@ -103,33 +119,38 @@ return value; } + /// + /// \brief updates correct lower or upper bound value regarding the x position + /// \details regarding the current mouse x position selects the correct handler and updated the bound value. + /// \param x : mouse x position. function setBound(x) { var value = setValue(x) var minDiff = Math.abs(minValue - value) var maxDiff = Math.abs(maxValue - value) - console.log(minDiff , minValue , value , maxValue , maxDiff , curValue) + if (minDiff === maxDiff) { - if (curValue === RangeSlider.HandlerOption.Max) { + if (curHandler === RangeSlider.HandlerOption.Max) { maxValue = value } else { - curValue = RangeSlider.HandlerOption.Min + curHandler = RangeSlider.HandlerOption.Min minValue = value } } else { if (minDiff < maxDiff) { - curValue = RangeSlider.HandlerOption.Min + curHandler = RangeSlider.HandlerOption.Min minValue = value } else { - curValue = RangeSlider.HandlerOption.Max + curHandler = RangeSlider.HandlerOption.Max maxValue = value } } } + /// The main range rectangle bar RangeRect { id: _rangeRect property alias lowerBound : _rangeRect.minimum property alias upperBound : _rangeRect.maximum @@ -142,7 +163,10 @@ radius: 0 decimal: _root.decimal - minText.visible: true + minText { + visible: true + anchors.topMargin: -25 + } maxText.visible: true // propagation is not working on drag ! @@ -157,8 +181,9 @@ // used loader for performance since it may not always be required. // and can be a heavy Component + /// Tick mark on the slider regarding the defined step within minimum and maximum in the range Loader { id: _ticksLoader - active : ticks + active : _root.ticks anchors.fill : parent sourceComponent : TickMarks { decimal : _root.decimal @@ -177,28 +202,29 @@ setBound(vMouseEvent.x) } - minText.text: qsTr("LOW") - Rectangle { id : minVEdge - visible: true - color: bgColor - anchors.right: _root.left - anchors.top: _root.top - anchors.topMargin: - (height/2 - _rangeRect.height/2) - width: 2 - height: 30 + /// Left most maximum range vertical edge + Rectangle { id : minVerticalEdge + visible : true + color : bgColor + anchors.right : _root.left + anchors.top : _root.top + anchors.topMargin : - (height/2 - _rangeRect.height/2) + width : 2 + height : 30 } - maxText.text: qsTr("HIGH") - Rectangle { id : maxVEdge - visible: true - color: bgColor - anchors.left: _root.right - anchors.top: _root.top - anchors.topMargin: - (height/2 - _rangeRect.height/2) - width: 2 - height: 30 + /// Right most minimum range vertical edge + Rectangle { id : maxVerticalEdge + visible : true + color : bgColor + anchors.left : _root.right + anchors.top : _root.top + anchors.topMargin : - (height/2 - _rangeRect.height/2) + width : 2 + height : 30 } + /// Left most handler Rectangle { id: _handlerLeft property real diameter : Variables.progressbarHandler @@ -210,24 +236,25 @@ radius : diameter color : Colors.highlightProgressBar border { - width: 4 - color: "white" + width : 4 + color : "white" } } + /// Right most handler Rectangle { id: _handlerRight - property real diameter : Variables.progressbarHandler + property real diameter : Variables.progressbarHandler - anchors.verticalCenter : parent.verticalCenter - anchors.horizontalCenter: _rangeRect.right + anchors.verticalCenter : parent.verticalCenter + anchors.horizontalCenter : _rangeRect.right width : diameter height : diameter radius : diameter color : Colors.highlightProgressBar border { - width: 4 - color: "white" + width : 4 + color : "white" } } }