Template talk:Calculator

Develop of this tool

Was funded by Wiki Project Med and is taking place primarily at mdwiki:Template:Calculator. If you have suggestions for improvements or which to join in the efforts please reach out. Doc James (talk · contribs · email) 00:07, 26 September 2024 (UTC)[reply]

Text appears out of table

Text appears outside, before table: "Add a calculator widget to the page. Like a spreadsheet you can refer to other widgets in the same page." Uwappa (talk) 18:18, 17 October 2024 (UTC)[reply]

Right align fallback?

Float fallback text right so it is in the same spot as the calculator would have been? Uwappa (talk) 08:16, 19 October 2024 (UTC)[reply]

new parameter: Tabindex?

Could input fields have a tabindex parameter?

This would be useful at Template:Body_roundness_index/sandbox:

tab from height in cm to waist in cm
tab from height inches to waist inches.

Uwappa (talk) 10:28, 20 October 2024 (UTC)[reply]

tabindex is not something that is allowed in normal wikitext (except for the special value 0). It can also globally affect the tab order for the entire page, which can be quite confusing if the calculator is in the middle of the page. I'm a bit reluctant to add things that cannot be done in normal wikitext without clear consensus from technical editors. Bawolff (talk) 22:06, 29 October 2024 (UTC)[reply]

OK, I'll cancel request.

Funny: request is outdated.

Trashed all unit related input today.

Now unitless height and unitless waist are nicely next to each other. Uwappa (talk) 22:14, 29 October 2024 (UTC)[reply]

ifLower, ifLowerOrEqual, ifEqualOrGreater, ifGreater?

It is currently possible to use a max followed by ifEqual to derive:

ifLower
ifBelowOrEqual
ifEqualOrGreater
ifGreater

This works but is a bit troublesome. How about adding the 4 functions above, with parameters similar to the current ifequal? Uwappa (talk) 12:57, 23 October 2024 (UTC)[reply]

There is a new version of gadget that adds these (I used ifless and ifgreater). Just waiting for an iadmin to update the gadget. Bawolff (talk) 06:50, 30 October 2024 (UTC)[reply]

ifPositive is confusing

The current name ifPositive is confusing, as it yields true for zero. Uwappa (talk) 08:16, 23 October 2024 (UTC)[reply]

not?

It is currently possible to have a not function on a boolean using opposite = 1 - boolean. It looks a bit incomprehensible in the code. How about adding a not function? Uwappa (talk) 10:09, 23 October 2024 (UTC)[reply]

There is a new version of gadget that adds these. Just waiting for an iadmin to update the gadget. Bawolff (talk) 06:50, 30 October 2024 (UTC)[reply]

and?

It is currently possible to have a AND function on two booleans using both = boolean1 * boolean 2. It looks a bit incomprehensible in the code. How about adding a and function?

I have not yet run into an 'or' situation yet, but that is likely to happen sooner or later. Uwappa (talk) 10:09, 23 October 2024 (UTC)[reply]

There is a new version of gadget that adds these . Just waiting for an iadmin to update the gadget. Bawolff (talk) 06:50, 30 October 2024 (UTC)[reply]

Could a set of radio buttons be processed as one variable?

The Calculator implementation of radio buttons is different than I expected:

A collection of HTML radio buttons that share the same name are like one variable, the value of the selected radio button.
Each HTML radio button has its own value and a boolean, true if checked
Only one radio button of a set can have the selected status. Selecting one automatically deselects all others.
The set of radio buttons work like one input field, yield one value, the value of the checked radio button.

The calculator radio buttons do generate HTML radio buttons, but with some severe limitations:

Individual radio buttons can have a value 1 for checked, 0 for unchecked.
Individual radio buttons can not have an own value, independent from the checked status
There is no variable for the set of radio buttons.
It is possible to uncheck all radio buttons using formulas.

Suggestion:

Change the current parameter 'name' for radio buttons to 'setid'. Yes this is different from 'name' in HTML, so be it. The concept of an 'id' is too important in the Calculator world.
The setid will be an id, for an automatically generated new variable type: radioset. There is no way to explicitly define a radio set. It is automatically derived from its radio buttons. The setid will be the id of the set variable. That id can be used just like for any other type. For radio buttons the setid (current name) is mandatory, so each radio button is always part of a set, which always has at least one member. This is similar to several labels for one checkbox.
Change the concept of value for radio buttons. Forget the current concept of a boolean for checked status. Instead, individual radio buttons have a numeric value, just like the other types. Several radio buttons within a set can have the same value, just like two other variables can share the same value. Values of radio buttons can be used in other formulas, even when the radio button is not checked.
The value of the set variable equals the value of the selected radio button.
Radio buttons can have a default value, just like other types.
One radio button can be the 'default' for its set, when its setDefault parameter equals 1. The radio buttons default value will make the radio buttun selected so its own default value will be the default value of the set. A set variable always has a value. If no default value is given, the first radio button is selected.
A (hidden) radio button can provide a (default) value of NAN until a valid set value is set.
The set variable can be set with a formula, just like other types. But the implementation is different, [[Polymorphism_(computer_science)|like polymorphism in Object Oriented Programming. A formula will only yield effect if that value equals the value of its radio buttons. It will check that radio button, automatically deselecting other radio buttons within the set. Such a selected radio button will update the value of the set variable, which mimics the behaviour of other variable types. It will be like an automatically generated formula at work that copies a value from one variable to another.
When a set formula does not match a value of any of its radio buttons, that formula value is lost. This allows value validation. It is impossible to use an unknown value for a set value.
Each radio button will still have a checked status, which is irrelevant to the Wikipedia editor. But the checked status is still available in HTML so CSS can use that :checked status to hide and show fields. The checked status is also available for javascript, but this is limited to personal user pages, business as usual on Wikipedia.
Radio buttons can have formulas too. That will always set the value of the radio button, even if not checked. Only if the radio button is currently checked, the value is copied to the set variable.
For the Wikipedia editor, programing set variables will be just like any other type. Its value can be used and set with formulas.

In short this will

allow radio buttons to have numeric values which can be used in formulas
allows value validation, invalid formula results values will be trashed, have no effect
introduces easy use of mutually exclusive values.

It will be just too easy to implement concepts like NICE WHtR health risk levels in a Body Roundness Calculator

show always one health level risk,
with only 3 texts possible: 'no increased health risks', 'increased health risks' and 'further increased health risks'.
texts shown and hidden by CSS, reacting to :checked status of hidden radio buttons, which define allowed values 0, 0.4, 0.5 and 0.6
and one radio button defining the et variable default to 0.4 for 'no increased health risks'.

Uwappa (talk) 19:46, 24 October 2024 (UTC)[reply]

ifBetween?

How about an ifBetween function? — Preceding unsigned comment added by Uwappa (talk • contribs) 21:35, 24 October 2024 (UTC)[reply]

There is a new version of gadget that adds these. Just waiting for an iadmin to update the gadget. Bawolff (talk) 06:53, 30 October 2024 (UTC)[reply]

bug, propagation limit exceeded?

Current workaround for "is WHtR between 0.4 and 0.5" requires a lot of formulas, which might cross some propagation limit.

OK when crossing from 0.49 to 0.5.
OK when going from WHtR 0.48 to 0.49 (default height 178, waist up from 87 to 88), no change in WHtR versus NICE limits.
OK when going from 0.49 down and back up to 0.49 again, same story, no cross of NICE limit
also OK when crossing from 0.49 to 0.5. The checkbox for 'greater than 0.4' does not change value.
NOK when going from WHtR 0.5 down to 0.49, range above 0.5 does no longer apply, triggering a sequence of formula propagation as "between 0.4 and 0.5" must be reevaluated if going below 0.5.

See ~~Template:Body_roundness_index/sandbox#Bug:_risk_text_does_not_show_for_88~~

Template_talk:Body_roundness_index#Sandbox_Bug:_risk_text_does_not_show_for_88 for list of propagated formulas.

Uwappa (talk) 21:35, 24 October 2024 (UTC)[reply]

This is fixed in the newest version of the gadget. Just waiting for an iadmin to update the gadget on wikipedia. Bawolff (talk) 06:53, 30 October 2024 (UTC)[reply]

Wow, ha ha ha, those are the best bugs, which have already been solved. I will hide the hidden fields again. Uwappa (talk) 07:29, 30 October 2024 (UTC)[reply]

style= for debugging hidden fields?

The current style argument allows a CSS style specific to one element, which generates a style= parameter in HTML.

Could all types have a new argument called "class". Such a parameter will generate a class= parameter in HTML.

This can be useful for debugging, e.g. class=public for fields that should always be publicly visible class=protected for fields that developers want to see during debugging.

A developer could change the visibility of protected fields by changing the definition in the CSS file:

.protected {opacity: 0.5;}; the element is visible during debugging, distinguishable from public fields
.protected {display: none;}; the normal setting, protected fields not publicly visible

Uwappa (talk) 02:59, 25 October 2024 (UTC)[reply]

This is fixed in the newest version of the gadget. Just waiting for an iadmin to update the gadget on wikipedia. Bawolff (talk) 06:53, 30 October 2024 (UTC)[reply]

The idea is similar to tr.protected in Template:Body_roundness_index/sandbox/bmi.css which applies to a whole row of protected fields, not requiring a style= parameter for one specific element. — Preceding unsigned comment added by Uwappa (talk • contribs) 02:59, 25 October 2024 (UTC)[reply]

Autofocus parameter?

Could one element have the default focus, which generates the HTML autofocus for none or just one element?

Example

Please select in your preferences: Enables javascript Calculator template to see a working calculator.

the cursor is automatically at ~~waist~~ height in cm
In a application for medics the height and waist would have values from a database.
The height of people does not change often, the waist is the variable than people can impact
The reader will play with several waist sizes to find a healthy waist size
the majority of the world uses the metric system.

The GP would just have to input one thing: current waist. That would require 2 keystrokes, about 200-300 milliseconds each, so max total time required: 0.6 seconds. Uwappa (talk) 07:39, 25 October 2024 (UTC)[reply]

Though that might work on a dedicated calculator page, if it's on a general article, that disables scrolling the page using the arrow keys, page up/down or space (which I find more efficient than the mouse).

In this particular example, the field which automatically gets focus should be first, i.e. Waist is on top. cmɢʟee⎆τaʟκ 21:01, 25 October 2024 (UTC)[reply]

Sorry, I was wrong, will update the example.

The height must be the focus, as that will be the first input. And yes, that is the first field for the exact reason you mentioned.

But after that the user will enter current waist size, play with waist sizes till the healthy waist size is found. Uwappa (talk) 02:39, 26 October 2024 (UTC)[reply]

I'm a bit nervous about allowing autofocus in a wikitext template. Autofocusing elements can often be unwanted and might have accessibility concerns. At the very least I think this would require consensus on some technical forum. Bawolff (talk) 22:02, 29 October 2024 (UTC)[reply]

OK, understand.

autofocus may also scroll the page when opened and cause conflict if multiple input fields request autofocus.

Will cancel request. Uwappa (talk) 22:11, 29 October 2024 (UTC)[reply]

And yes, a workaround, a simple deep link to a field, for example to

Body_roundness_index#calculator-field-heightfeet

only one focus for one field possible
different focusses possible, with different hyperlinks on different pages
no clash with other deeplinks possible

Uwappa (talk) 17:49, 30 October 2024 (UTC)[reply]

Dynamically change numeric template parameter?

Request cancelled.

Probably possible already with current calculator after all, see User_talk:Cmglee#Dot_embedded_in_3_divs?

Uwappa (talk) 08:52, 27 October 2024 (UTC)[reply]

Prototype posted at: Template_talk:Body_roundness_index#Moving_dot_on_graphic_for_version_5.0? with:

a silhouette iso red dot
NICE health risk level below silhouette

Uwappa (talk) 06:24, 28 October 2024 (UTC)[reply]

This is largely not possible. However the newer version of the gadget (not yet live) does allow getting calculator values in CSS with var() which might open up new opportunities here. Bawolff (talk) 06:54, 30 October 2024 (UTC)[reply]

This has been a puzzle that is going through my mind for weeks.

And... Don't be fooled by 'moving'. It will be just like the unit input fields used to be in the BRI calculator: several available in the dom, only one showing at the time.

That would give a crazy amount of checkboxes for all positions of dots in the chart for every (x,y) combination, but I think there is a solution to that, with still many dots, but a limited number of checkboxes see:

[User_talk:Cmglee#Position_silhouette_to_cm_accuracy_by_split_to_m,_dm,_cm?]

And no not sure if this will work. It will be for a future version of BRI calculator. No worries yet, but good hopes. Cancelled request. Uwappa (talk) 07:27, 30 October 2024 (UTC)[reply]

Probably an impossible request, but still, maybe somebody else does see a solution.

Have a new field type called 'parameter', which can change the value of a numeric template parameter.

The parameter only works in templates, immediately after a '=', for example:

| x = {{calculator|id=graphHorizontal|type=parameter|default=385|formula=waist/123+4}}

The 'parameter' type is very much like a 'plain' type but:

Generates no HTML around it, just its value
Knows some 'magic' trick to change the value in the generated HTML, despite it can not have any 'own' HTML around its value as identificationfor javascript.

Example, a dynamic red dot on a BRI chart that moves as height or waist input changes (no, the dot below does not):

Height 178 Waist 155 BRI 13.0210

This would be based on the following wikicode: {{Superimpose | base = Body_roundness_index_graph.svg | base_width = 500px | float = Red pog.svg | float_width = 10px | x = {{calculator|id=x|type=parameter|default=385|formula=waist/12 +34}} | y = {{calculator|id=y|type=parameter|default=90|formula=height/56-7}} }} Height {{calculator|id=height|type=number|size=5|default=178|min=140|max=200}} Waist {{calculator|id=waist|type=number|size=5|default=155|min=50|max=180}} [[Body_roundness_index|BRI]] {{calculator|id=bri|default=13.0210|type=plain|decimals=4|formula=364.2-365.5×pow(1-(pow(waist/6.28318,2)/pow(0.5×height,2)),0.5)|NaN-text=Please come back after birth}}

This looks like impossible to me, but might work with:

only in combination with SVG charts, where elements have and id equal to the id of the calculator parameter field?
specific templates only that superimpose objects on images?

all numeric parameters in all templates?

Uwappa (talk) 14:03, 25 October 2024 (UTC)[reply]

That would be ideal but I'm unsure if it's possible without reworking much of Mediawiki. For instance, use the browser's Inspector (usually F12) to inspect these popular templates. The parameter given is often buried deep in the DOM hierarchy, which would be difficult for Calculator to reach into. cmɢʟee⎆τaʟκ 21:04, 25 October 2024 (UTC)[reply]

Yes, exactly, buried deep in the DOM without any identifcation as it is just fixed text at the moment. But... for this example an update of template Superimpose would probably suffice. Uwappa (talk) 03:01, 26 October 2024 (UTC)[reply]

@Uwappa: A limited version of this should be possible now

Height 178 Waist 155

The code is a little complex, but could probably be made into a template. Bawolff (talk) 13:03, 11 November 2024 (UTC)[reply]

Wooooohaaaaa! Uwappa (talk) 14:34, 11 November 2024 (UTC)[reply]

user:Bawolff, do I understand this correctly:

Compute x and y in hidden variables
use those x and y as parameters in CSS to position the dot?

Is that all?

Where is the complex bit that needs simplification? Uwappa (talk) 14:40, 11 November 2024 (UTC)[reply]

Yes that is pretty much it. I just meant some of the html could maybe be hid behind a template. I made {{Calculator-superimpose}} for that purpose. Bawolff (talk) 14:54, 11 November 2024 (UTC)[reply]

My mind is now to busy with the usability tests for version 4.

Eager to jump on this one, but resisting the temptation.

User:Bawolff, what you can do for version 4:

don't change the user interface, as that will f*** up the usability tests, slow me down.
simplify the complex stuff under the hood using new calc field types
that will give me an example of working code
update the calc documentation. Provide examples of code and result
Go and ask medics: what about below 0.4 WHtR? Where is the danger zone at the low end of the WHtR scale? Where is Anorexia_nervosa. Where is Emaciated? What is lowest WHtR of living human? WHtR 0 is dead for sure, ashes to ahses, but where is the border between life and death, the skinny counterpart of morbid obesity, morbid skinny?

What you can do, preparing version 5:, with the moving dot

Use chart that shows both WHtR and BRI, with WHtR colours. Ask user:Cmglee to cooperate
draw a horizontal thin, semi transparent line at current height of dot, easy to see where it hits green WHtR values
Make height a vertical slider along the y-axes
Make waist a horizontal slider along the x-axes

Feel welcome to use Template:WaistHeightRatio_to_BodyRoundnessIndex_converter

It will be just too deadly... Uwappa (talk) 15:55, 11 November 2024 (UTC)[reply]

Use template multiple times

Please select in your preferences: Enables javascript Calculator template to see a working calculator.

The current documentation claims: "You can use this template multiple times on a page to make input widgets, with some of the widgets having formulas based on other widgets, like a spreadsheet."

If widgets of several calculators share a common id, only the last widget works, which due to a flow right, may seem the first one.

I am not sure what the solution should be. Uwappa (talk) 03:42, 26 October 2024 (UTC)[reply]

The doc just means you can use the {{Calculator}} template multiple times (with different ids), not that you can repeat ids.

If the template was entirely made with lua, i guess you could try and generate a random number and append it to all calculator ids within the template. If this really becomes an issue, the gadget could maybe be changed to look for some container div, and scope the calculator widgets within the container, so that separate templates don't interfere with each other. Bawolff (talk) 21:57, 29 October 2024 (UTC)[reply]

Not an issue for now. I came across it on pages that had these two during development:

Please select in your preferences: Enables javascript Calculator template to see a working calculator.

WHtR to BRI converter

pi = $π$	3.141592653589793
${\text{BRI}}=364.2-365.5{\sqrt {1-{\Big (}{\frac {\text{waist}}{\;\;\pi \;\;\times \;\,{\text{height}}}}{\Big )}^{2}}}$	3.3588109427631707
${\text{WHtR}}={\frac {\text{waist}}{\text{height}}}$	0.5
Waist	80
Waist diameter = Waist / pi	25.464790894703256
Height	160

Please select in your preferences: Enables javascript Calculator template to see a working calculator.

It can be a feature too, 2 calculators sharing fields.

I'll cancel the question. Uwappa (talk) 22:08, 29 October 2024 (UTC)[reply]

I implemented a scoping thing in the newest version of gadget (not yet live). If you put all the calculator widgets inside a div with class calculator-container, then they will be compartmentalized to that div. Bawolff (talk) 06:55, 30 October 2024 (UTC)[reply]

Great, that should be in the documentation for everybody to know! Uwappa (talk) 07:17, 30 October 2024 (UTC)[reply]

I'm just waiting on an IAdmin to update the gadget. I don't want to confuse people with info on stuff that isn't live yet, and sometimes there can be a bit of a delay for editprotected requests to gadgets to be processed. Bawolff (talk) 20:42, 30 October 2024 (UTC)[reply]

No worries, current live version does not have the problem.

And the sandbox version will take some more time to mature.

Did you see the sweet autofocus workaround? Uwappa (talk) 20:48, 30 October 2024 (UTC)[reply]

Decimal comma

Result of a usability test:

Knowledgable, high IQ, paramedic tried to enter 4,5 as WHtR value, with a decimal comma. Goal: Have optimal waist computed by calculator, the question to be answered. The smartphone did not allow it, usability test aborted, failure to reach goal.
Managed to avoid a 'rapid dental rearrangement', paramedic refused to measure waist as that would be a waste of time, not relevant. To know the optimal healthy waist, the input of a height and WHtR 4,5 should suffice. Eh... That paramedic nailed it... The idea of using a decimal dot did not occur, as a dot is a thousands-separator in the local way of formatting numbers.
type=number field did not show spin buttons as expected by mobile simulation for Wikipedians. So, paramedic could not use spin buttons to step up/down with steps of 0.025.
for type=number there was a numeric keyboard on bottom part of display, no cursor up down buttons to step up/down WHtR values.

I am not sure how to solve this.

It is probably something specific to the browser on the smartphone and depending on language settings. Other smartphones may show spin buttons
Other language settings may allow a decimal comma, don't know much about smartphones myself. Stubbornly refuse to have one.
I am not sure what would have happened when hitting a cursor-up or cursor-down field. Those keys did not exist on the shown numerical keyboard.
I've asked smartphone users how they normally enter numbers with decimals on other websites. No one has been able to give me an answer yet, inputting numbers with decimals seems very exceptional.
Use a text field? Hmm, that take away the nice spin buttons? And... that allows a comma, but the values seems a NaN for numbers, just to add to the confusion.
Create a tailored solution with JavaScript? Hmm, that might work, but will create a learning curve, something new to learn for this application only, which will be confusing as it will be specifically work on this application only, cause confusion, create more trouble than it tries to solve.

I myself refuse to own a smartphone, find the user interface utterly repulsive, a flawed design.

It is madness to waist half the precious screen real estate showing a keyboard
It is madness to throw away the excellent touch of human fingers. A good physical keyboard provides tactile feedback to the finger tips, confirming a speed typist that a key has been pressed successfully, no need to look at the screen, touch suffices, allowing extremely fast Touch_typing.
It is madness to have the fingers blocking the view to the screen. You can't even see what you're doing. Great... no visual feedback either. You have to remove your finger to see if the keypress succeeded.
There was no audio feedbaci for a successful key press. What a mess. Smartphones were meant for 'consuming', browsing, not for serious work, input values.

I do have a solution in mind, which is a redesign of smartphone hardware

put the Touchpad at the BACK of the damned thing.
Use the strong thumb, ring finger, pink, to hold the damn thing. Have 2 excellent fingers, index and middle finger available for moving the mouse with high precision.
One hand will suffice, other hand can be used to do other things
It will allow the comeback of the mouse pointer, just like on a laptop with a touchpad. Move the mouse while looking at the screen, nobody looks at the touchpad, so why not have it at the back?
Moving the mouse pointer will allow the comeback of tooltips, a great way and fast way to explore things, e.g. learn: "What does WHtR stand for"?
a screen hit can be a click, where it now is a silly jump of the cursor

This is not going to happen before December or any time soon. Uwappa (talk) 22:53, 6 November 2024 (UTC)[reply]

Lost values after back from sidestep to WHtR

Result of usability test:

test subject did not know WHtR, clicked on WHtR Field prompt using smartphone. No alternative available as tooltips on mouseover do not exist in the mobile world.
quickly understood the WHtR concept, o just a simple ratio, just from scanning the lede text
went back to calculator and continued input of value for WHtR, not realizing that the height input was trashed as it 'refreshed' to default value.

I am not sure this is a calculator problem, might be a generic flow of smartphone browser, don't know. Uwappa (talk) 23:02, 6 November 2024 (UTC)[reply]

Step at a time displays

In case anyone is interested, here are some experiments with trying step at a time instruction (Based on suggestions from Dimitri131 and Cmglee):

A major issue right now is that abusing <label> as a button is not accessible, but that can probably be fixed in the next version of the gadget. I'd be curious if anyone has any ideas for other places where such an approach would be useful. Bawolff (talk) 16:24, 12 November 2024 (UTC)[reply]

I also experimented with making a demo of Bubble sort at User:Bawolff/bubble Bawolff (talk) 19:14, 21 November 2024 (UTC)[reply]

Units	Metric	Imperial
Height	160 cm	5 ft 3 in
Waist	72 cm	28 in
WHtR	0.45
BRI	2.46

Units	Metric	Imperial
Height	160 cm	5 ft 3 in
Waist	72 cm	28 in
WHtR	0.45
BRI	2.46

Units	Metric	Imperial
Height	160 cm	5 ft 3 in
Waist	72 cm	28 in
WHtR	0.45
BRI	2.46

hidden	<0.4 >=0.4	>=0.5	>=0.6
Sandbox 4.1 Body Roundness
Dimensions	Height	Waist
Dimensions	180 +3 183cm=6′0″ +2 182cm=5′12″ +1 181cm=5′11″ 180cm=5′11″ -1 179cm=5′10″ -2 178cm=5′10″ -3 177cm=5′10″	81 185 180 175 170 165 160 155 150 145 140 135 130 125 120 115 110 105 100 95 90 85 80 75 70 65 60 55 50 45 40 35 30 25 20 15 10 05
WHtR	81/180 = 0.45 ≈ 0.45 0.600.700.800.901.00 0.500.55 0.400.45 0.300.35
Roundness	0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
rounded bounded silhouette index, hidden	5
silhouette index, hidden	5.876404494382022
hidden	0.4 0 1	0.4494 0	0.4494 0 72 90 108
Risk	01 0 0Unspecified for WHtR below 0.4no increased health risksincreased health risksfurther increased health risks
BRI	2.376055806162810 ≈ 2.38