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 <wenwang@linux.vnet.ibm.com> --- 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