Re: [Kimchi-devel] [PATCH V3] UI: Adding widget of gauge

Below is how I can see the widget in the sample file: And then how it is in the proposed new UI: In the proposed new UI we don't have borders - the border and the background has the same color. Also the border is squared and not circled. And in some cases the bar has a different colour in the end. On 16/01/2015 08:05, Wen Wang wrote: > V2 -> V3: > Adding Samples of gauge. > > V1 -> V2: > Change the time of the copyright. > > New widget accept two options: "value" and "color". value varies from 0 > to 100 and color contains "red", "blue", "yellow" and "purple". > > Signed-off-by: Wen Wang&lt;wenwang(a)linux.vnet.ibm.com&gt; > --- > ui/css/theme-default/gauge-flat.css | 45 +++++++++++++ > ui/js/widgets/gauge-flat.js | 109 ++++++++++++++++++++++++++++++++ > ui/js/widgets/samples/gauge-sample.html | 34 ++++++++++ > 3 files changed, 188 insertions(+) > create mode 100755 ui/css/theme-default/gauge-flat.css > create mode 100755 ui/js/widgets/gauge-flat.js > create mode 100644 ui/js/widgets/samples/gauge-sample.html Don't forget the license header for the sample HTML files > diff --git a/ui/css/theme-default/gauge-flat.css b/ui/css/theme-default/gauge-flat.css > new file mode 100755 > index 0000000..535f0a8 > --- /dev/null > +++ b/ui/css/theme-default/gauge-flat.css > @@ -0,0 +1,45 @@ > +/* > + * Project Kimchi > + * > + * Copyright IBM, Corp. 2015 > + * > + * Licensed under the Apache License, Version 2.0 (the 'License'); > + * you may not use this file except in compliance with the License. > + * You may obtain a copy of the License at > + * > + *http://www.apache.org/licenses/LICENSE-2.0 > + * > + * Unless required by applicable law or agreed to in writing, software > + * distributed under the License is distributed on an 'AS IS' BASIS, > + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. > + * See the License for the specific language governing permissions and > + * limitations under the License. > + */ > +.ui-gauge-flat { > + height: 15px; > + width: 100px; > + text-align: left; > + overflow: hidden; > + background: #E6E7E8; > +} > + > +.ui-gauge-flat .ui-gauge-flat-value { > + margin: -1px; > + height: 100%; > +} > + > +.ui-gauge-flat .red { > + background: #D9182D; > +} > + > +.ui-gauge-flat .blue { > + background: #008ABF; > +} > + > +.ui-gauge-flat .yellow { > + background: #FDB813; > +} > + > +.ui-gauge-flat .purple { > + background: #7F1C7D; > +} > \ No newline at end of file > diff --git a/ui/js/widgets/gauge-flat.js b/ui/js/widgets/gauge-flat.js > new file mode 100755 > index 0000000..a212223 > --- /dev/null > +++ b/ui/js/widgets/gauge-flat.js > @@ -0,0 +1,109 @@ > +/* > + * Project Kimchi > + * > + * Copyright IBM, Corp. 2015 > + * > + * Licensed under the Apache License, Version 2.0 (the 'License'); > + * you may not use this file except in compliance with the License. > + * You may obtain a copy of the License at > + * > + *http://www.apache.org/licenses/LICENSE-2.0 > + * > + * Unless required by applicable law or agreed to in writing, software > + * distributed under the License is distributed on an 'AS IS' BASIS, > + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. > + * See the License for the specific language governing permissions and > + * limitations under the License. > + */ > + > +(function( $ ) { > + > +return $.widget( "kimchi.gaugeFlat", { > + version: "@VERSION", > + options: { > + max: 100, > + value: 0, > + color: "red" > + }, > + > + min: 0, > + > + _create: function() { > + this.oldValue = this.options.value = this._constrainedValue(); > + > + this.element > + .addClass( "ui-gauge-flat ui-widget ui-widget-content ui-corner-all" ) > + .attr({ > + role: "gaugeflat", > + "aria-valuemin": this.min > + }); > + > + var color = this.options.color; > + > + this.valueDiv = $( "<div class='ui-gauge-flat-value " + color + " ui-widget-header ui-corner-left'></div>" ) > + .appendTo( this.element ); > + > + this._refreshValue(); > + }, > + > + _destroy: function() { > + this.element > + .removeClass( "ui-gauge-flat ui-widget ui-widget-content ui-corner-all" ) > + .removeAttr( "role" ) > + .removeAttr( "aria-valuemin" ) > + .removeAttr( "aria-valuemax" ) > + .removeAttr( "aria-valuenow" ); > + > + this.valueDiv.remove(); > + }, > + > + value: function( newValue ) { > + if ( newValue === undefined ) { > + return this.options.value; > + } > + > + this.options.value = this._constrainedValue( newValue ); > + this._refreshValue(); > + }, > + > + _constrainedValue: function( newValue ) { > + if ( newValue === undefined ) { > + newValue = this.options.value; > + } > + > + this.indeterminate = newValue === false; > + > + if ( typeof newValue !== "number" ) { > + newValue = 0; > + } > + > + return this.indeterminate ? false : > + Math.min( this.options.max, Math.max( this.min, newValue ) ); > + }, > + > + _setOptions: function( options ) { > + var value = options.value; > + delete options.value; > + > + this._super( options ); > + > + this.options.value = this._constrainedValue( value ); > + this._refreshValue(); > + }, > + > + _percentage: function() { > + return this.indeterminate ? 100 : 100 * ( this.options.value - this.min ) / ( this.options.max - this.min ); > + }, > + > + _refreshValue: function() { > + var value = this.options.value, > + percentage = this._percentage(); > + > + this.valueDiv > + .toggle( this.indeterminate || value > this.min ) > + .toggleClass( "ui-corner-right", value === this.options.max ) > + .width( percentage.toFixed(0) + "%" ); > + } > +}); > + > +})(jQuery); > diff --git a/ui/js/widgets/samples/gauge-sample.html b/ui/js/widgets/samples/gauge-sample.html > new file mode 100644 > index 0000000..bc1dca6 > --- /dev/null > +++ b/ui/js/widgets/samples/gauge-sample.html > @@ -0,0 +1,34 @@ > +<!--Sample code of gauge--> > +<!DOCTYPE html> > +<html> > + <head> > + <meta charset="UTF-8"> > + <title>Gauge Demo</title> > + <script src="../../../libs/jquery-1.10.0.min.js"></script> > + <script src="../../../libs/jquery-ui.min.js"></script> > + <script src="../gauge-flat.js"></script> > + <link rel="stylesheet" href="../../../css/theme-default/gauge-flat.css"> > + <link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css"> > + </head> > + <body> > + <div class="gauge-demo"></div> > + <script> > + $(document).ready(function() { > + console.log("test started1"); > + var gauged = $(".gauge-demo"); > + gauged.gaugeFlat({ > + value: 25, > + color: "red" > + }); > + var gaugeAdd = function() { > + var gaugeValue = gauged.gaugeFlat("value"); > + gauged.gaugeFlat("value", gaugeValue + 1); > + if (gaugeValue < 99) { > + setTimeout(gaugeAdd, 300); > + } > + } > + gaugeAdd(); > + }); > + </script> > + </body> > +</html> > \ No newline at end of file