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("<div"); oRm.writeControlData(oControl); oRm.addClass("sap-dennisseah-circular_range-guage"); oRm.writeClasses(); oRm.write('>'); var val = oControl.getNormalizedValue(); oRm.write('<canvas id="' + oControl.getId + '_canvas" width="50" height="50" style="position:absolute"></canvas>'); oRm.write('<input class="sap-dennisseah-circular_range-guage-input" value="' + val + '" />'); oRm.write("</div>"); }, getNormalizedValue : function(val) { val = (val === undefined) ? this.getValue() : parseInt(val); if (val > 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.