Attribute Display Widget¶

The widget displays the value of a certain attribute, it can display the raw value, or in case of DevEnum types, it can also display the correspondent label The widget displays the value of a certain attribute; it can display the raw value, or in the case of DevEnum types, it can also display the correspondent label.

Widget options¶

Input value	Description
Precision	Integer for defining significative numbers of value
Format	It allows to format a number. Please refer to the section below for more details.
Show Unit	Boolean for displaying unit, if available
Device Name	Boolean for displaying device name
Attribute Display	Label, Name or None
Align text on center	Boolean to align text on center or not
Align value on right	Boolean to align value on right or not
Scientific Notation	Boolean for displaying scientific notation
Show Enum Labels	Boolean for displaying enum labels
Show Attr Quality	Boolean for displaying the attribute value quality
Text color	Color to be apllied to text
Background color	Color to be apllied to background
Text size in units	1 corresponds to 1em text size
Font type	Default or Monospaced
Custom CSS	Custom CSS to be apllied to widget

JSON¶

If the attribute you’re viewing is a JSON, Taranta automatically applies proper formatting. By default, the JSON is collapsed and the user can navigate the tree, but you can expand it entirely by unchecking ‘JSON collapsed’ in the Inspector panel.

It is also possible to view specific parts of the JSON using XPath. The XPath should be specified in the ‘Format’ field of the Inspector panel. Let’s consider the following JSON as an example

{: “routes”:[ 0:{ “src”:{ “channel”:96 } “dst”:{ “port”:3 } } 1:{ “src”:{ “channel”:235 } “dst”:{ “port”:16 } } ]

}

Using the following xPath it is possibile to see filter the output.

Format	Result
routes[0].src.channel	96
routes[0]	{“src”:{“channel”:96},”dst”:{“port”:12}}

It is possible to manipulate data. For example it is possible to concat strings as the following example.

Format	Result
routes[0].src.channel & ‘ ‘ &routes[1].src.channel	96 235
routes[0].src.channel + routes[1].src.channel	{“src”:{“channel”:96},”dst”:{“port”:12}}

More detail are avaible in the JSONAta documentation

In the event that the XPath expression yields no results, you will see the message ‘No result evaluating JSON expression,’ whereas if the expression is syntactically incorrect, you will encounter the message ‘Error evaluating JSON expression.’

Formatting a number¶

If a user wants to apply specific formatting to numbers, specifying, for example, the notation type to use and how many decimal places to display, they can use the ‘Format’ field. The ‘Format’ field is only valid if the data is of numeric type; otherwise, it will be ignored.

By default, it has no value, and therefore, the number will be displayed as it comes from the data source. If it is populated, it will override the configurations defined in ‘Precision’ and ‘Scientific Notation.’

There are two possible format styles. One is based on “placeholders,” using a number or character to represent significant digits and special characters to represent decimals, percentages, and so on. The other style is based on C-like syntax.

The following tables demonstrate how to use the ‘Format’ field to format a number

C-like style

To use the c-like style format, start the string using the special char ‘%’ and add a char following the list:

b — yields an integer as a binary number
c — yields an integer as the character with that ASCII value
d or i — yields an integer as a signed decimal number
e — yields a float using scientific notation
u — yields an integer as an unsigned decimal number
f or g — yields a float as is;
o — yields an integer as an octal number
t — yields true or false
x — yields an integer as a hexadecimal number (lower-case)
X — yields an integer as a hexadecimal number (upper-case)
s - yields a number as a sexagesimal

If you use sexagesimal conversion, you can specify the precision in the Inspector precision field.

Examples

Number	Format	String
-187	%b	11011001
255	%c	!
-242.05	%d	-242
-116.22	%e	-1.1622268769557515e+2
-87.56	%u	87
201.73	%d	201.7306321011084
255	%f or %g	!
170	%o	253
250	%x	fa
250	%X	FA
10.4	%s	10:54:0.0.00

Manipulattion

There are basic functions introduced in case you need to manipulate with final data (add offset, change to kilo- or mili-).

Number	Format	String
1000	.add(100)	1100
1000	.subtract(100)	900
1000	.multiply(100)	1000000
1000	.divide(100)	10

PLACEHOLDER STYLE

Number

Number	Format	String
10000	‘0,0.0000’	10,000.0000
10000.23	‘0,0’	10,000
10000.23	‘+0,0’	+10,000
-10000	‘0,0.0’	-10,000.0
10000.1234	‘0.000’	10000.123
100.1234	‘00000’	00100
1000.1234	‘000000,0’	001,000
10	‘000.00’	010.00
10000.1234	‘0[.]00000’	10000.12340
-10000	‘(0,0.0000)’	(10,000.0000)
-0.23	‘.00’	-.23
-0.23	‘(.00)’	(.23)
0.23	‘0.00000’	0.23000
0.23	‘0.0[0000]’	0.23
1230974	‘0.0a’	1.2m
1460	‘0 a’	1 k
-104000	‘0a’	-104k
1	‘0o’	1st
100	‘0o’	100th

Currency

Number	Format	String
1000.234	‘$0,0.00’	$1,000.23
1000.2	‘0,0[.]00 $’	1,000.20 $
1001	‘$ 0,0[.]00’	$ 1,001
-1000.234	‘($0,0)’	($1,000)
-1000.234	‘$0.00’	-$1000.23
1230974	‘($ 0.00 a)’	$ 1.23 m

Bytes

Number	Format	String
100	‘0b’	100B
1024	‘0b’	1KB
2048	‘0 ib’	2 KiB
3072	‘0.0 b’	3.1 KB
7884486213	‘0.00b’	7.88GB
3467479682787	‘0.000 ib’	3.154 TiB

Percentages

Number	Format	String
1	‘0%’	100%
0.974878234	‘0.000%’	97.488%
-0.43	‘0 %’	-43 %
0.43	‘(0.000 %)’	43.000 %

Time

Number	Format	String
25	‘00:00:00’	0:00:25
238	‘00:00:00’	0:03:58
63846	‘00:00:00’	17:44:06

Exponential

Number	Format	String
1123456789	‘0,0e+0’	1e+9
12398734.202	‘0.00e+0’	1.24e+7
0.000123987	‘0.000e+0’	1.240e-4

Attribute Display Widget¶

Widget setting¶

Widget options¶

JSON¶

Formatting a number¶

Applying CSS to widget¶