How to "paint" a Thermometer Component

[Karol-K]

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;

}

Scripts for Data Binding

Read from data and convert to Integer

// here the value must be manually calculated

var dataValue = DS_1.getData("4FW8RN37GL043NF22OTQFXYL3", {

  "0BC_PERS1": "00020"

});

// read the value from the data cell

var dataValueFull = dataValue.value;

// use formatting to get the number w/o decimal places

var dataValueString = Convert.floatToString(dataValueFull,  "###");

// convert to integer and save

var valueAsIntegerBetween0and100Original = Convert.stringToInt(dataValueString);

// calculate

var valueAsIntegerBetween0and100 = valueAsIntegerBetween0and100Original;

valueAsIntegerBetween0and100 = valueAsIntegerBetween0and100 * 2;

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 · Gi...

Update: use the newest version to have the application updated by two new buttons:

Link to ZIP: Release 1.1.1: Updating thermometer Example by Data Binding · KarolKalisz/DesignStudioBiAppRepositor...

You need to change of course the query.

I hope you have fun with this component.