I am sharing the code for a circular range gauge. It illustrates the use for graphics context of canvas to create semi complex controls.
CSS
.sap-dennisseah-circular_range_guage{ width:50px; height:50px;
}
.sap-dennisseah-circular_range-guage-input {
position:absolute; width:50px; text-align:center; margin-top:15px; border:0px transparent; background-color: transparent; font-size:1em; font-weight: bold; color: #333; opacity: 0.9; z-index: 2;
}Control (Javascript)
sap.ui.core.Control.extend('sap.dennisseah.CircularRangeGauge', { metadata: { properties: { lowest: {type: 'int', defaultValue: 0}, highest: {type: 'int', defaultValue: 100}, value: {type: 'int', defaultValue: 0}, } }, renderer: function(oRm, oControl) { oRm.write(" this.getHighest()) { val = this.getHighest(); } else if (val < this.getLowest()) { val = this.getLowest(); } return val; }, drawArc: function() { var val = this.getNormalizedValue(); var strokeStyle = 'green'; if (val > 75) { strokeStyle = 'red'; } else if (val > 50) { strokeStyle = 'brown'; } else if (val > 25) { strokeStyle = 'orange'; } var c = this.$().find('canvas')[0]; var ctx= c.getContext("2d"); ctx.clearRect (0, 0, 50, 50); ctx.beginPath(); ctx.arc(25, 25, 20, 0, 2 *Math.PI); ctx.lineWidth = 10; ctx.strokeStyle = '#ccc'; ctx.globalAlpha = 0.4; ctx.stroke(); ctx.beginPath(); ctx.arc(25, 25, 20, 0, (val/this.getHighest()) * 2 *Math.PI); ctx.lineWidth = 10; ctx.strokeStyle = strokeStyle; ctx.globalAlpha = 0.7; ctx.stroke(); }, onAfterRendering: function() { this.drawArc(); var that = this; this.$().find('input').change(function() { if (isNaN(this.value)) { this.value = that.getLowest(); } var val = that.getNormalizedValue(this.value); that.setValue(val); that.drawArc(); }); }
});
And here is an working example, Example where we increase the value of the gauge in an interval of one second.
Actually, the gauge is editable. You can click on the value and change it.