Skip to content

Commit

Permalink
GH-25 | "No spools available" info (#26)
Browse files Browse the repository at this point in the history 
* GH-25 | Display no spool available info

Signed-off-by: Michał Dziekoński <[email protected]>

* GH-25 | Mention spoolman setup

Signed-off-by: Michał Dziekoński <[email protected]>

* GH-25 | Display used weight in muted text

Signed-off-by: Michał Dziekoński <[email protected]>

---------

Signed-off-by: Michał Dziekoński <[email protected]>
  • Loading branch information
@mdziekon
mdziekon authored Apr 27, 2024
1 parent e88e76a commit 6aa676d
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 50 deletions.
13 changes: 12 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@ An OctoPrint plugin integrating with [Spoolman](https://github.com/Donkie/Spoolm
## Features

- [x] Basic Spoolman integration
- [x] Connect to configured Spoolman
- [x] Connect to configured Spoolman instance
- [x] Display available spools
- By default, `archived` spools are not presented for selection
- [x] Select & deselect spools for specified tools / extruders
- [x] Commit spools usage to Spoolman
- [ ] Spools filtering
Expand All @@ -31,6 +32,12 @@ or manually using this URL:

https://github.com/mdziekon/octoprint-spoolman/archive/master.zip

After installing the plugin, you have to set it up, by:
- Providing your Spoolman's instance address.
- This should be either hostname or IP address (whatever works in your network) followed by the port (eg. 7912).
- Remember, your Spoolman's instance **has to be reachable in your local network**, otherwise the plugin won't work.
- For reference, see [Screenshots - Spoolman's setup](#spoolmans-setup)

## Screenshots

### Selected spools list
Expand All @@ -41,6 +48,10 @@ or manually using this URL:

![Showcase - Spools' list](./extras/screenshots/showcase__spools_list.png)

### Spoolman's setup

![Showcase - Spoolman's setup](./extras/screenshots/showcase__spoolman_setup.png)

## Development

You can use `docker compose` to start a development server, consisting of a test OctoPrint & Spoolman instances.
Expand Down
Binary file added extras/screenshots/showcase__spoolman_setup.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 68 additions & 49 deletions octoprint_Spoolman/templates/Spoolman_sidebar_modal_selectspool.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,56 +119,75 @@
</th>
</tr>
</thead>
<tbody data-bind="foreach: templateData.tableItemsOnCurrentPage">
<tr
style="cursor: pointer;"
data-bind="
click: function() {
$component.templateApi.handleSelectSpoolForTool($component.templateData.toolIdx(), $data.id);
},
attr: {
class: (
$component.templateData.toolCurrentSpool() &&
String($component.templateData.toolCurrentSpool().id) === String($data.id)
)
? 'success'
: ''
}
"
title="Click to select spool"
>
<td data-bind="visible: $component.templateData.tableAttributeVisibility.id">
<span data-bind="text: id, attr: { title: id }"></span>
</td>
<td data-bind="visible: $component.templateData.tableAttributeVisibility.spoolName">
<div style="display: flex;">
<div>
<span
class="color-preview"
data-bind="style: { 'background-color': '#' + filament.color_hex }, attr: { title: filament.name }"
></span>
</div>
<div>
<span data-bind="text: filament.name, attr: { title: filament.name }"></span>
<br>
<i>
<span data-bind="text: filament.vendor.name, attr: { title: filament.vendor.name }"></span>
</i>
</div>
</div>
</td>
<td data-bind="visible: $component.templateData.tableAttributeVisibility.material">
<span data-bind="text: filament.material, attr: { title: filament.material }"></span>
</td>
<td
data-bind="visible: $component.templateData.tableAttributeVisibility.weight" style="text-align: right;"

<!-- ko if: (templateData.tableItemsOnCurrentPage().length > 0) -->
<tbody data-bind="foreach: templateData.tableItemsOnCurrentPage">
<tr
style="cursor: pointer;"
data-bind="
click: function() {
$component.templateApi.handleSelectSpoolForTool($component.templateData.toolIdx(), $data.id);
},
attr: {
class: (
$component.templateData.toolCurrentSpool() &&
String($component.templateData.toolCurrentSpool().id) === String($data.id)
)
? 'success'
: ''
}
"
title="Click to select spool"
>
<span data-bind="text: (remaining_weight ?? 0).toFixed(1), attr: {title: 'Remaining weight'}"></span><span data-bind="text: $component.constants.weight_unit"></span>
<br>
<span data-bind="text: used_weight.toFixed(1), attr: {title: 'Used weight'}"></span><span data-bind="text: $component.constants.weight_unit"></span>
</td>
</tr>
</tbody>
<td data-bind="visible: $component.templateData.tableAttributeVisibility.id">
<span data-bind="text: id, attr: { title: id }"></span>
</td>
<td data-bind="visible: $component.templateData.tableAttributeVisibility.spoolName">
<div style="display: flex;">
<div>
<span
class="color-preview"
data-bind="style: { 'background-color': '#' + filament.color_hex }, attr: { title: filament.name }"
></span>
</div>
<div>
<span data-bind="text: filament.name, attr: { title: filament.name }"></span>
<br>
<i>
<span data-bind="text: filament.vendor.name, attr: { title: filament.vendor.name }"></span>
</i>
</div>
</div>
</td>
<td data-bind="visible: $component.templateData.tableAttributeVisibility.material">
<span data-bind="text: filament.material, attr: { title: filament.material }"></span>
</td>
<td
data-bind="visible: $component.templateData.tableAttributeVisibility.weight" style="text-align: right;"
>
<span data-bind="text: (remaining_weight ?? 0).toFixed(1), attr: {title: 'Remaining weight'}"></span><span data-bind="text: $component.constants.weight_unit"></span>
<br>
<span class="muted">
<span data-bind="text: used_weight.toFixed(1), attr: {title: 'Used weight'}"></span><span data-bind="text: $component.constants.weight_unit"></span>
</span>
</td>
</tr>
</tbody>
<!-- /ko -->
<!-- ko if: (templateData.tableItemsOnCurrentPage().length === 0) -->
<tbody>
<tr>
<td
colspan="4"
style="text-align: center;"
>
<i class="muted">
No spools available
</i>
</td>
</tr>
</tbody>
<!-- /ko -->
</table>
</div>
</div>
Expand Down

0 comments on commit 6aa676d

Please sign in to comment.