Spool-Editing-Dialog: Auto weight/length feature

[TiziG]

New functionality for the spool editing dialog. Let me know what you think!

New Functionality:

• Filament weight input values get automatically converted from gram to mm and vice versa. (Requires valid diameter and density)
• A new dropdown select enables auto updating of different values. This allows for following calculations:
  • Calculate initial/remaining/used filament weight by measuring the combined filament+spool weight and defining the empty spool weight.
  • Calculate empty spool weight by measuring the initial combined filament+spool weight and defining the initial filament weight.

UI Changes

• Split weight inputs into 3 categories: Filament, Spool, Combined
• Added inputs for combined weight
• Added auto calculation dropdown
• Added info texts for auto calculation and unit conversions
• Fixed overflow behavior of the editing dialog. Previously some inputs got covered by the gray button section from the bottom (on small screens).

Implementation Details

The new logic is implemented solely in the dialog view model. The new input fields (for combined weight) are derived fields and do not get stored outside the view model (hence no db changes).

Related Tickets

implements #202

Screenshots

[TiziG]

@OllisGit
Merge conflicts are now resolved.

The only debatable conflict was the css for the dialog min/max height. Both your version 1.5 and this PR tried to fix the height issues. I chose my solution, as it also prevents the dialog from becoming too high on large displays. Although I'm not quite sure if the now deleted #full-sized-box div had other side effects.

Solution in this PR:

html:

<div class="modal-body hack-flowbreak"  >
  <form  class="form-horizontal" id="spool-form" >
    ...

css:

.hack-flowbreak {
  max-height: calc(100vh - 250px) !important;
}

Solution of Version 1.5:

html

  <div class="modal-body "  >
    <div class="full-sized-box">
      <form  class="form-horizontal" id="spool-form" >
        ...

js

self.spoolDialog.modal({
    minHeight: function() { return Math.max($.fn.modal.defaults.maxHeight() - 180, 250); },
    ...
})

[OllisGit]

Fyi: I will try your css solution...the minHeight is taken from OP sourcecode I only adjust the maxheight, e.g. AboutDialog

            self.aboutDialog
                .modal({
                    minHeight: function () {
                        return Math.max($.fn.modal.defaults.maxHeight() - 80, 250);
                    }
                })
                .css({
                    "width": "auto",
                    "margin-left": function () {
                        return -($(this).width() / 2);
                    }
                });

[OllisGit]

Hi @TiziG,

I changed the ui a little bit (make it more compact). Smaller headers and replace all "Auto calculation prevents editing." with a single static note on top.

... I will change some other stuff (not related to this PR), so it will take a while when I release the next version.

[OllisGit]

Btw. which calc.mode should be the default one? and should this be stored in plugins-settings or in each spool?

[OllisGit]

Hi @TiziG,

your merge is now in the latest release. Thanks again, very helpful!

I changed some small things...e.g. remaining field is now in readonly mode. The value is only calculated.

Please test and give a feedback if you found some issues.

[TiziG]

Awesome, thanks for your work @OllisGit !
I'll check it out in the next few days.