jneilliii / OctoPrint-PlotlyTempGraph

25 stars 7 forks source link

Enhancement: Allow for Fahrenheit option #33

Closed puterboy closed 1 year ago

puterboy commented 2 years ago

Would be great to have option to display data in Fahrenheit. Ideally perhaps have an (optional) duplicate y-axis on the right hand side with a Fahrenheit scale.. and have the mouse over show both Celsius and Fahrenheit values.

jneilliii commented 2 years ago

I'm displaying the data as provided. If the values returned are in Fahrenheit they aren't getting converted to Celsius. Not sure if that's changeable in firmware or not.

puterboy commented 2 years ago

The enhancement I am proposing ideally has 2 components:

  1. Add a simple Fahrenheit check box to the "Name Mapping". If checked then convert raw data to Celsius as they are read and stored -- simple arithmetic
  2. Add an option to display in Fahrenheit. Either
    • Fahrenheit ONLY in which case all data (which by '#'1 can assumed to be Celsius) is converted and displayed as Fahrenheit
    • Fahrenheit AND Celsius, in which case graph is unchanged but a second Fahrenheit-labeled vertical scale is added on the r right and the pop-up temperature numbers now display as a pair of (Celsius, Fahrenheit) variables
jneilliii commented 2 years ago

Noted, will consider.

puterboy commented 2 years ago

Thanks!

jneilliii commented 2 years ago

So I did some quick testing and although I'm getting errors on initial load, it seems to work assuming the data coming is already in Fahrenheit as I'm not doing any of the math conversions. In the screenshot below I configured tool0 to "use Fahrenheit".

image

image

image

Not sure how much I like the weird overlaid grid lines, so will need to figure out how to set them to match the left side and do the math on the grid so that it's able to align on the same grid.

jneilliii commented 2 years ago

Yeah, made some progress and it looks much better.

image

jneilliii commented 2 years ago

Just released version 0.1.4rc3, switch the plugin's release channel in Software Update settings to Release Candidate and update when prompted if you want to try it out. Only thing currently is converted Fahrenheit numbers don't start calculating on history data for some reason, so you'll see the numbers drop after initial page load.

puterboy commented 2 years ago

Thanks for the work on this!!!

Couple of comments:

  1. I am not seeing the right axis displayed - just the original left one (see below)

  2. in the pop-up, instead of seeing the name of the sensor, I am seeing the time. i.e, it displays as "HH:MM:SS XX.X C" or "HH:MM:SS F" This makes it difficult to know which line is which sensor plus the long time string is distracting and unnecessary.

  3. I would separate the concept of "Use Fahrenheit display on right side of axis" from the concept of "Convert numbers from Celcius to Fahrenheit" Specifically, there are 2 different options being addressed here - one is the format of the input date and the other is the display format of the output graph. i.e.

    • Inputs can be either in Fahrenheit or Celsius (regardless of the units in which they are displayed)
    • Outputs can be displayed in either Fahrenheit or Celsius (regardless of the units in which they are input)

So, my recommendation would be to have the following simplified behavior and UI:

As an American I find myself actually needing both Celsius and Fahrenheit. I use the Celsius for bed and tool temperatures since that is the standard for 3d printing that is noted on filament spools and in slicer settings. But regarding my intuition for understanding the temperatures and in particular for understanding CPU, bed, and enclosure temperatures, it is helpful to have a Fahrenheit counterpart. Moreover, having them both on the same graph as well as in the same pop-up helps me over time better intuit the relationship between the two scales.

image

jneilliii commented 2 years ago
  1. I am not seeing the right axis displayed - just the original left one (see below)

You need to refresh the page after making one of them Fahrenheit.

2. in the pop-up, instead of seeing the name of the sensor, I am seeing the time. i.e, it displays as "HH:MM:SS XX.X C" or "HH:MM:SS F" This makes it difficult to know which line is which sensor plus the long time string is distracting and unnecessary.

I've actually already addressed this as I noticed the same thing.

image

Have a single instance-wide, general checkbox (independent of sensor) that would add a Fahrenheit scale on the right (this would be independent of the number or type of sensors and purely is an output display option). When this box is checked, the right-side Fahrenheit scale would appear and the popup should then show both the Celsius and Fahrenheit numbers for all sensors (corresponding to the dual left and right hand side temperature scales) -- e.g., "Name: XX c (YY F) this is similar to what I believe is shown in your navbar plugin.

This is potentially not possible. Similar to the reason you weren't seeing the second axis numbers is because Plotly will not display the ticks if there isn't any data using that axis.

jneilliii commented 2 years ago

The one issue I haven't figure out yet is if you enable one of the temperatures to be hidden the lines will shrink up and you'll start seeing blank spaces as the lines pull to the right. If no lines are hidden the issue doesn't appear. Not sure if you are seeing the same thing, or if it's just a weird bug with how virtual printer works.

image

puterboy commented 2 years ago
  1. I am not seeing the right axis displayed - just the original left one (see below)

You need to refresh the page after making one of them Fahrenheit. Actually, the problem was that I am using your Consolidated Tabs plugin and adding the Fahrenheit axis widens the display. It would actually be great if that wouldn't happen since until now I was able to fit two tabs equally wide but adding the right scale significantly widens the display for me.

Furthermore, given that Fahrenheit is finer than Celsius (1 degree Celsius ~ 2 degress Fahrenheit), why is the Fahrenheit scale displayed to 1 decimal point while zero decimal points for Celsius - this alone would save some horizontal space.

  1. in the pop-up, instead of seeing the name of the sensor, I am seeing the time. i.e, it displays as "HH:MM:SS XX.X C" or "HH:MM:SS F" This makes it difficult to know which line is which sensor plus the long time string is distracting and unnecessary.

I've actually already addressed this as I noticed the same thing.

Thanks. Is there a new release for that?

image

Have a single instance-wide, general checkbox (independent of sensor) that would add a Fahrenheit scale on the right (this would be independent of the number or type of sensors and purely is an output display option). When this box is checked, the right-side Fahrenheit scale would appear and the popup should then show both the Celsius and Fahrenheit numbers for all sensors (corresponding to the dual left and right hand side temperature scales) -- e.g., "Name: XX c (YY F) this is similar to what I believe is shown in your navbar plugin.

This is potentially not possible. Similar to the reason you weren't seeing the second axis numbers is because Plotly will not display the ticks if there isn't any data using that axis.

Not sure I understand this (I must be missing something...)

puterboy commented 2 years ago

I think I now get what you are saying. In the below, I have only one line turned on and the Fahrenheit scale only shows for that line. But what you really want is a static scale that labels each of the major y-axis lines.

10 -> 50 20 -> 68 30 -> 86 40 -> 104 50 -> 122

To the extent that the Celsius scale is multiples of 5, the Fahrenheit scale will be round numbers. So, the question is do you have the ability just to paint such a "static" scale equivalent on the RHS?

image

jneilliii commented 2 years ago

Set your Maximum Y Limit in settings and that is what it's doing. That's another thing I would need to work out relative to the number of grid lines. Honestly, if I can figure out a way to do your suggestion and just show the right axis ticks and set the labels based on a formula it would be much easier. As it stands now, I've hard coded the number of divisions based on the 300 limit.

puterboy commented 2 years ago

Are you able at a minimum to round to zero decimal places on the Y-axis scale?

jneilliii commented 2 years ago

I did have the tickformat set once using zero decimal places, but it also ended up rounding the actual values too. Doubt that would be much of a concern really, but some people like more detail. That was before I figured out how to format the hover template though, so I might be able to have the best of both.

puterboy commented 2 years ago

To be honest, if you can't get the RHS scale to work clenaly, it might be cleaner/easier just to have the hover offer the option of displaying both values. Again, at least for my needs, I am interested in adding Fahrenheit rather than using Fahrenheit to replace Celsius. Because, at least for me as an American, it's important to know for example that the bed temperature is 60 degrees for PLA since that is the setting on the Filament box or in the slicer but it's also helpful to see that 60 degrees is 140 Fahrenheit and therefore borderline capable of burning me vs. saying bed temperature is 85 for PTEG which is 185 Fahrenheit and capable of really burning me :)

jneilliii commented 2 years ago

Yeah, that would be similar to the stock temperature graph and the "Show temperatures in Fahrenheit as well as Celsius" option in the appearance settings.

image

jneilliii commented 2 years ago

Success with rounding the axis labels and keeping the values with a decimal.

image

puterboy commented 2 years ago

Hi, I am still having several issues:

  1. The Fahrenheit scale on the right only displays '0' - no other scale numbers
  2. Under Settings, there is only a single header "Fahrenheit" for both columns, though hover shows that the first one is "Show Fahrenheit axis on the right side of the graph" and the second one is "Convert Numbers from Fahrenheit to Celsius"
puterboy commented 2 years ago

Beyond that, IMO, the UI and behavior is not what I would have expected and is confusing to me at least. (I say this not as a complaint or criticism of your awesome plugins and efforts but as hopefully helpful UI input)

In Settings, I would have expected:

  1. An instance-wide setting (not per-sensor) labeled "Add Fahrenheit display", that purely determines if the RHS Fahrenheit scale is displayed. This scale should be fixed to mirror the Celsius values on the LHS. e.g., 0 (LHS) = 32 (RHS), 50 (LHS) = 122 (RHS). I.e., the RHS scale is purely an alternative labeling of the Celsius axis using Fahrenheit rather than Celsius units. Thus, you can glance left to get a sense of the Celsius scale or glance right to get a sense of the Fahrenheit scale for any trace. If I am in a Celsius mood, I use the left scale, if I am in a Fahrenheit mood, I use the right scale. This would take effect even if all sensors are Celsius inputs.
  2. A single column of per-sensor checkboxes, labeled "Fahrenheit input" that when checked convert each input data point to Celsius. This box is checked in case a sensor output is in Fahrenheit so that it's internal value is normalized to the Celsius scale so that all traces are comparable visually and read true whether using the left Celsius scale or the right Fahrenheit scale.

Finally, in the display, I would expect the following functionality

  1. if the instance-wide "Add Fahrenheit display" is left unchecked, then the original display behavior persists. I.e. only left-hand Celsius scale and hover values show as, for example, "tool0 actual: 51.3*C"
  2. If the instance-wide "Add Fahrenheit display" is checked, then the RHS Fahrenheit scale is displayed and when hovering both the Celsius and corresponding Fahrenheit values are displayed for all traces. e.g., "tool0 actual: 51.3C (124.3F)"

This to me seems to be the easiest and most backward-compatible way of doing things. To summarize:

jneilliii commented 2 years ago
  1. The Fahrenheit scale on the right only displays '0' - no other scale numbers

Did you set the maximum to 300?

  1. Under Settings, there is only a single header "Fahrenheit" for both columns, though hover shows that the first one is "Show Fahrenheit axis on the right side of the graph" and the second one is "Convert Numbers from Fahrenheit to Celsius"

That was the best way for me to handle the initial development, trying to take into account that someone will undoubtedly want the option to convert numbers.

  1. An instance-wide setting (not per-sensor) labeled "Add Fahrenheit display", that purely determines if the RHS Fahrenheit scale is displayed. This scale should be fixed to mirror the Celsius values on the LHS. e.g., 0 (LHS) = 32 (RHS), 50 (LHS) = 122 (RHS). I.e., the RHS scale is purely an alternative labeling of the Celsius axis using Fahrenheit rather than Celsius units. Thus, you can glance left to get a sense of the Celsius scale or glance right to get a sense of the Fahrenheit scale for any trace. If I am in a Celsius mood, I use the left scale, if I am in a Fahrenheit mood, I use the right scale. This would take effect even if all sensors are Celsius inputs.

As I already mentioned, I'm not sure this is possible with the framework that I'm using to graph, without having data in the second Y axis it just won't show up. And without the second Y axis to the graph there is no way to display the secondary axis labels as anything but what is displayed on the left, so we're kind of stuck with that. If you are able to find anything showing otherwise with Plotly.js framwework, I'm more than happy to look at it.

puterboy commented 2 years ago

Changing to 300 max works for the RHS. Thanks. For a formatting perspective, is it possible to narrow the data portion when you add the Fahrenheit scale so that it fits in the same width as other tabs -- since currently, it widens the graph making it's width inconsistent with other tabs and messing up my "Consolidated Tabs" layout. Note the desired behavior would be consistent with what happens now when you click the legend toggle box which narrows the data area, keeping the overall graph width unchanged.

puterboy commented 2 years ago

The RHS does not seemed to be aligned properly as 0 deg Celsius is aligned with 0 deg Fahrenheit rather than 32 deg Fahrenheit.

image

jneilliii commented 2 years ago

Oh, good catch. I didn't notice that. Just need to change the base of the second axis and that should correct the issue. As for the width, will definitely play with it. I could set the axis labels to be inside I know, otherwise might have to play with margins.

puterboy commented 2 years ago

Also, these new versions seem to further break your Custom Background plugin. Specifically, I was able to have "transparent" work before (so long as I had a white them which allowed me to still see the grid etc.). But now even with "transparent" set, I still see the Octoprint logo in the background (even after refresh or restart) - though strangely, if I open & close settings, the transparent background then takes effect (presumably because it triggers a screen redraw?)

jneilliii commented 2 years ago

So this was much trickier than I anticipated. The plotly library does not make for a way to shift the second axis, so I was able to hack a workaround together to do what we were talking about before. The actual graphed values are based on Celsius numbers and the right axis just has the labels hard coded to the calculated ticks, and the hover for "Fahrenheit enabled" temperatures are using a "customdata" property for the calculated Fahrenheit value.

I realize this is not an ideal solution, but I've looked high and low through the Plotly documents and this was the best method I could find to get this to work.

image

I still have to look into the positioning of the labels and the background stuff you mentioned already, but that is also being tracked in another issue and I haven't started to look into it yet.

puterboy commented 1 year ago

Thanks for all the GREAT WORK!!! And I hesitate to comment further, but... I think there are 3 potential uses of Fahrenheit and it's important (in my mind) to keep them separate:

  1. Allow for sensor output data that is in Fahrenheit rather than Celsius -- this I believe is the intention of the per-sensor checkbox that you implemented (as an aside, this is least important to me, since it is easy for me to change my plugins to do the sensor data conversion)

  2. Add a single checkbox to enable a RHS Fahrenheit scale -- independent of how many sensors may be outputting their data in Fahrenheit -- this is purely a display convenience (for me it's important, since I "think" Bed & Tool in Celsisus since these are the common parameters but I still think Room, Enclosure and CPU temperatures in Fahrenheit -- the "benefits" of being an American stuck in Fahrenheit for regular life but needing Celsius for science and engineering)

  3. Add the ability for the individual tool-popups to display in Fahrenheit vs. Celsius -- in theory, this is independent of # 1 (i.e., I might have data in Celsius from a sensor that I want to see in Fahrenheit or vice-versa) and independent from # 2 (as in this is ideally per sensor). Ideally, there would be a per-sensor option to display Celsius, Fahrenheit or both. But I would settle for either a per-sensor checkbox that added (or substituted) Fahrenheit for Celsius -- or even a display-wide single checkbox that always displayed Fahrenheit alongside Celsius.

I hope this makes sense :)

jneilliii commented 1 year ago

I'll be happy to review any PRs that incorporate the things that you want, I'm not spending any more time on Fahrenheit improvements personally.