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

Wen Wang wenwang at linux.vnet.ibm.com
Tue Jan 20 03:26:20 UTC 2015


V3 -> V4:
1) Add comments of how to use the widget.
2) Minor style changes.

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 at linux.vnet.ibm.com>
---
 ui/css/theme-default/gauge-flat.css     |  52 +++++++++++++
 ui/js/widgets/gauge-flat.js             | 127 ++++++++++++++++++++++++++++++++
 ui/js/widgets/samples/gauge-sample.html |  34 +++++++++
 3 files changed, 213 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

diff --git a/ui/css/theme-default/gauge-flat.css b/ui/css/theme-default/gauge-flat.css
new file mode 100755
index 0000000..f5b52e5
--- /dev/null
+++ b/ui/css/theme-default/gauge-flat.css
@@ -0,0 +1,52 @@
+/*
+ * 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;
+	border: 0 none;
+	border-radius: 0;
+}
+
+.ui-gauge-flat .ui-gauge-flat-value {
+	margin: -1px;
+	height: 100%;
+	border-radius: 0;
+}
+
+.ui-gauge-flat .red {
+	background: #D9182D;
+	border:1px solid #D9182D;
+}
+
+.ui-gauge-flat .blue {
+	background: #008ABF;
+	border:1px solid #008ABF;
+}
+
+.ui-gauge-flat .yellow {
+	background: #FDB813;
+	border:1px solid #FDB813;
+}
+
+.ui-gauge-flat .purple {
+	background: #7F1C7D;
+	border:1px solid #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..c073a2f
--- /dev/null
+++ b/ui/js/widgets/gauge-flat.js
@@ -0,0 +1,127 @@
+/*
+ * 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.
+ */
+
+/*
+ * How to use:
+ * $(".selector").gaugeFlat({
+ *     value: 25,  // Value that you the gauge is going to show, varies from 0 to 100.
+ *     color: "red" // Color showed, currently only "red", "yellow", "blue" and "purple" are supported.
+ * });
+ *
+ * Set value:
+ * $(".selector").gaugeFlat("value", <value>); // Replace <value> with the value that is going to be showed.
+ *
+ * Get value:
+ * $(".selector").gaugeFlat("value"); // This returns the value of gauge.
+ *
+ */
+
+(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;
+		if(color != "red" && color != "yellow" && color != "blue" && color != "purple") {
+			color = "red";
+		}
+		
+
+		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..971d9a8
--- /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="../../../libs/themes/base/jquery-ui.min.css">
+        <link rel="stylesheet" href="../../../css/theme-default/gauge-flat.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
-- 
2.1.0




More information about the Kimchi-devel mailing list