Purpose
Visualize Data in Design Studio as "Thermometer" in standard installation - without using an SDK development. This thermometer is for percentage values 0 to 100 %.
Basics
This component is created using the tips from my Blog "Painting" with Design Studio via CSS3.
Setting Values
There is no automatic connection to any data source, but you can set the values as shown in attached application.
Set the "base line"
"Base line" is a line which sets some custom value, you can move this between 0 and 100
// baseline between 0 and 100 var valueAsIntegerBetween0and100 = Convert.stringToInt(INPUTFIELD_2.getValue()); // baseline is aline positioned in the scale using bottom margin value PANEL_TH_BASELINE.setBottomMargin(valueAsIntegerBetween0and100 * 2 + 100);
Set the "value"
"Value" is the visualization of the current percentage. Between 0 and 100.
// here the value must be manually calculated
var valueAsIntegerBetween0and100 = Convert.stringToInt(INPUTFIELD_1.getValue());
// the value is visualized by the hight of the corresponding PANEL
PANEL_TH_VALUE.setHeight(valueAsIntegerBetween0and100 * 2);
// assuming the base line is already set, here the "back" calculation from bottom margin to percentage value
var baselineValueBwtween0and100 = PANEL_TH_BASELINE.getBottomMargin();
baselineValueBwtween0and100 = baselineValueBwtween0and100 - 100;
baselineValueBwtween0and100 = baselineValueBwtween0and100 / 2;
// based on the difference between base line and value, different css styles can be set
if(valueAsIntegerBetween0and100 >= baselineValueBwtween0and100) { PANEL_TH_BASE.setCSSClass("th-base th-good"); PANEL_TH_VALUE.setCSSClass("th-value th-good"); PANEL_TH_DOT.setCSSClass("th-dot th-good");
} else { PANEL_TH_BASE.setCSSClass("th-base th-bad"); PANEL_TH_VALUE.setCSSClass("th-value th-bad"); PANEL_TH_DOT.setCSSClass("th-dot th-bad");
}Example
Thermometer with "good" visualization
Thermometer with "good" visualization
Used CSS
.th-border-top { border-top: 1px solid #cccccc;
}
.th-border-top-baseline { border-top: 3px solid black;
}
.th-base {
}
.th-value {
}
.th-dot { border-radius: 40px 40px 40px 40px / 40px 40px 40px 40px; border: 1px solid #cccccc;
}
.th-bad { background-color: red;
}
.th-good { background-color: green;
}Apllication as Example
Example Application can be downloaded from GitHub:
- ZIP Version of Repository: Release Add of Paint and Thermometer Applications · KarolKalisz/DesignStudioBiAppRepository · GitHub
- Source Code: DesignStudioBiAppRepository/SCN_THERMOMETER at master · KarolKalisz/DesignStudioBiAppRepository · GitHub
I hope you have fun with this component.