Enter Numbers in Scientific Notation

Product Suggestions
,
1

I would like to see the ability to record numbers in scientific notation. I have seen this come up when certain instruments only output sample results in scientific notation, and right now the user cannot enter it in how they see it on the instrument.

2

The preference will be to implement this in line with an ISO or other standard, which I’m having a hard time turning up. In the meantime, can you clarify which, if any, of these formats would be acceptable this case:

Superscript: 3.14 x 102

E notation: 3.14e2

Carat: 3.14 X 10^2

3

For this use case, superscript would be ideal.

4

Hey @japrice,

This is a little bit of a tricky thing to implement on the engineering side for a few reasons:

  1. Scientific notation is represented as text, and right now Tulip Inputs are Text or Number, not a Number, but entered as text. Right now, the Number input will only allow numerical input, and that would have to change to support scientific notation input. This is problem usually addressed by taking a text input, then converting it to a number in the background. Right now this is a tricky thing to do with traditional triggers.
  2. Superscript input isn’t something we support in text inputs right now. This down to limitations of the html text input type not supporting exponential notation. Again, something that could be resolved by making our own input type that supports this, but its not a small ask. In that regard, E Notation or Carat notation are significantly easier to implement.

Here is the good news…
Over the last 3 months we have been testing a new feature called Custom Widgets where users can extend the edges of the platform to fit their needs. Our team is developing tons of widgets as part of the library that can just be downloaded and used, and coming in r230 (releases at the end of the week) the ability to make your own custom widgets will be coming to all enterprise customers.

I spent about 10 minutes and made this, It supports carat and e notation-

I will write up a feature request to support this functionality natively , but I struggle some to understand the right way to natively support this without adding another input type.

If you want to use this widget, I can share it with our library team and get it added to a future release.

Pete

5

Hi @Pete_Hartnett can you please share this Custom Widget?
Thanks

6

Yes! Here it is

HTML:

<div id='container'>
    <input type='text' id = 'imp'>
</div>

JS:

$( "#imp" ).on('input', function() {
    let str = $( "#imp" ).val();
    value = new Number(str);
    setValue("Variable",value)
});

CSS:

body {
	background-color: transparent;
	font-family: Sans-Serif;
	font-size: 40px;
	padding: 10px;
}

button {
	background-color: #3A89EB;
	border-radius: 4px;
	border-width: 0;
	color: #fff;
	cursor: pointer;
	font-size: 24px;
	padding: 16px;
}

button:active {
	background-color: rgb(3, 106, 214);
}

input {
	border: 1px solid #DFE1E5;
	border-radius: 3px;
	color: #182339;
	font-size: 40px;
	padding: 8px;
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' class='sc-fznWqX bsCTUN'%3E%3Cpath d='M7 10l5 5 5-5z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: auto 55%;
	border: 1px solid #DFE1E5;
	border-radius: 3px;
	color: #182339;
	font-size: 40px;
	padding: 15px;
	padding-right: 45px;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 24px;
	text-align: left;
}

th {
	color: #47556C;
	background-color: #FAFBFC;
	border: 1px solid #DFE1E5;
	font-weight: 400;
	padding: 4px;
}

td {
	border: 1px solid #DFE1E5;
	padding: 12px 4px;
}

Pete

7

Hello @Pete_Hartnett, I have an app that I’m currently building for our quality team and have tried using this but it seems to not be working on my end, I’ve copied and pasted the HTML,JS, And CSS sections of the custom widgets but the widget seems to not be updating in the app. Any help on this would be greatly appreciated.

8

Hey @allan.calito -

What input are you seeing failure with?

My previous approach was relying on the jQuery external library which will need to be enabled on a new widget for my code above to work

image
image3024×770 158 KB

OR I just refactored the javascript part of the widget to not require jquery

New JS:

document.getElementById("imp").addEventListener("input", function() {
    const str = this.value.trim();
    let value;

    if (str === "") {
        value = NaN; // Handle empty input
    } else {
        value = Number(str); // Convert to a number, including scientific notation
    }

    if (!isNaN(value)) {
        setValue("Variable", value); // Call setValue only if it's a valid number
    } else {
        console.error("Invalid number format:", str);
    }
});

Let me knows if this works for you
Pete

2 Likes
9

@Pete_Hartnett I was missing the jQuery! Your the man!!! Both ways worked thank you so much, only issue I’m running into now is on the app side of things, If I were to enter 1.36e-8 it displays 0. The custom widget itself runs great.

1 Like
10

I got it! :smiley: Thank for the help again @Pete_Hartnett

1 Like