Skip to content

Instantly share code, notes, and snippets.

@abesh abesh/colorcircle.css
Last active Aug 29, 2015

Embed
What would you like to do?
ColorCircle - Traffic Lights in SAPUI5
.circlered-text {
width:50%;
}
.circlered-text:after {
content: "";
display: block;
width: 100%;
height:0;
padding-bottom: 100%;
background: #FF0000;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circlered-text div {
float:left;
width:100%;
padding-top:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
font-weight:bold;
color:white;
font-size: 75%;
}
.circlegreen-text {
width:50%;
}
.circlegreen-text:after {
content: "";
display: block;
width: 100%;
height:0;
padding-bottom: 100%;
background: #32CD32;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circlegreen-text div {
float:left;
width:100%;
padding-top:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
font-weight:bold;
color:white;
font-size: 75%;
}
.circleyellow-text {
width:50%;
}
.circleyellow-text:after {
content: "";
display: block;
width: 100%;
height:0;
padding-bottom: 100%;
background: #FFD700;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.circleyellow-text div {
float:left;
width:100%;
padding-top:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
font-weight:bold;
color:white;
font-size: 75%;
}
sap.ui.core.Control.extend("com.fujitsu.custom.ColorCircle", {
metadata : {
properties : {
"value" : {type: "int", defaultValue: "0"},
"size" : {type: "sap.ui.core.CSSSize", defaultValue: "50px"},
"asc" : {type: "boolean", defaultValue: true},
"rlimit" : {type: "int", defaultValue: "90"},
"glimit" : {type: "int", defaultValue: "75"}
}
},
renderer : function(oRm, oControl) {
oRm.write("<div");
oRm.writeControlData(oControl);
oRm.addStyle("width", oControl.getSize());
oRm.addStyle("height", oControl.getSize());
oRm.writeStyles();
if(oControl.getAsc()){
if(oControl.getValue() > oControl.getRlimit()){
oRm.addClass("circlered-text");
}else if((oControl.getValue() <= oControl.getRlimit()) && (oControl.getValue() > oControl.getGlimit())){
oRm.addClass("circleyellow-text");
}else{
oRm.addClass("circlegreen-text");
}
}else{
if(oControl.getValue() <= oControl.getRlimit()){
oRm.addClass("circlered-text");
}else if((oControl.getValue() > oControl.getRlimit()) && (oControl.getValue() < oControl.getGlimit())){
oRm.addClass("circleyellow-text");
}else{
oRm.addClass("circlegreen-text");
}
}
oRm.writeClasses();
oRm.write(">");
oRm.write("<div>");
oRm.write(oControl.getValue());
oRm.write("</div>");
oRm.write("</div>");
}
});
# CSS courtesy Jose Vargas : http://codeitdown.com/css-circles/
# Related blog can be found of SAP Community Network : http://scn.sap.com/community/developer-center/front-end/blog/2014/03/12/traffic-lights-with-custom-controls-in-sapui5
@PaulSenkel

This comment has been minimized.

Copy link

commented Apr 13, 2015

Thanks for sharing Abesh!
Here is an alternative colorcircle.css which displays the different colors (red, yellow/orange, green) as different shapes (rounded rectangle, triange, circle).
This makes them clearer to read especially for color-blind folks.
Tested in Chrome and IE10.
https://gist.github.com/PaulSenkel/c1863657176bd59c6c47

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.