Skip to content

Feature/pr26 remaining length #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Ajimaru merged 5 commits into from
Jul 13, 2026
Merged

Feature/pr26 remaining length #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7ae34ae
added remaining length section to ui
MrBullet Dec 20, 2024
737c19f
edited tooltip
MrBullet Dec 20, 2024
796e807
Merge pull request #1 from MrBullet/MrBullet-patch-1
MrBullet Dec 20, 2024
3d7caa8
added progress bar to sidebar
MrBullet Dec 21, 2024
76f098a
Merge branch 'pr26-head' into feature/pr26-remaining-length
Ajimaru Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion octoprint_SpoolManager/static/css/SpoolManager.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

/* Small line on top of a div-box */
.custom-divider {
border-top: solid 1px;
Expand Down Expand Up @@ -184,3 +183,34 @@
/*#checkboxes label:hover {*/
/* background-color: #1e90ff;*/
/*}*/

/* Spool remaining bar styles */
.spool-remaining-container {
margin-top: 5px;
width: 100%;
}

.spool-remaining-text {
font-size: 12px;
color: #666;
margin-bottom: 2px;
}

.spool-remaining-bar-container {
width: 100%;
height: 4px;
background-color: #eee;
border-radius: 2px;
overflow: hidden;
}

.spool-remaining-bar {
height: 100%;
background-color: #2196F3;
transition: width 0.3s ease;
}

/* Düşük miktar için kırmızı renk */
.spool-remaining-bar.low-amount {
background-color: #f44336;
}
36 changes: 30 additions & 6 deletions octoprint_SpoolManager/static/js/SpoolManager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -586,17 +586,26 @@ $(function() {
}

self.remainingText = function(spoolItem){
var remainingInfo = "("+_buildRemainingText(spoolItem) + ")";
var remainingWeight = _buildRemainingText(spoolItem);
var remainingLength = (Number(self.buildTooltipForSpoolItem(spoolItem, '', 'remainingLength'))/1000).toFixed(2);
var remainingInfo = "(" + remainingWeight + ", " + remainingLength + "m)";
return remainingInfo;
}

self.buildTooltipForSpoolItem = function(spoolItem, textPrefix, attribute){
var value = "";
self.buildTooltipForSpoolItem = function(spoolItem, textPrefix, attribute, unit, textPrefix2, attribute2, unit2){
var tooltip = "";

// İlk özellik için tooltip
if (spoolItem[attribute]() != null){
value = spoolItem[attribute]();
tooltip = textPrefix + spoolItem[attribute]() + (unit || "");
}
var toolTip = textPrefix + value;
return toolTip;

// İkinci özellik varsa ekle
if (attribute2 && spoolItem[attribute2]() != null){
tooltip += (tooltip ? ", " : "") + textPrefix2 + spoolItem[attribute2]() + (unit2 || "");
}

return tooltip;
}

self.getSpoolItemSelectedTool = function(databaseId) {
Expand Down Expand Up @@ -1218,6 +1227,21 @@ $(function() {
//}
}

self.calculateRemainingPercentage = function(spoolItem) {
if (!spoolItem.remainingLength() || !spoolItem.totalLength()) {
return {
width: 0,
isLow: true
};
}
var percentage = (Number(spoolItem.remainingLength()) / Number(spoolItem.totalLength())) * 100;
percentage = Math.min(Math.max(percentage, 0), 100);
return {
width: percentage,
isLow: percentage < 20
};
};

}

/* view model class, parameters for constructor, container to bind to
Expand Down
4 changes: 1 addition & 3 deletions octoprint_SpoolManager/templates/SpoolManager_dialog_selectSpool.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,7 @@
<!-- ko if: sidebarSelectSpoolModalSpoolItem().vendor -->
(<span data-bind="text: sidebarSelectSpoolModalSpoolItem().vendor"></span>)
<!-- /ko -->
<span data-bind="text: $root.remainingText(sidebarSelectSpoolModalSpoolItem()),
attr: {title: $root.buildTooltipForSpoolItem(sidebarSelectSpoolModalSpoolItem(), 'Remaining weight: ', 'remainingWeight')}"
class="spool-remaining" title="Remaining weight"></span>
<span data-bind="text: $root.remainingText(sidebarSelectSpoolModalSpoolItem()), attr: {title: $root.buildTooltipForSpoolItem(sidebarSelectSpoolModalSpoolItem(), 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}" class="spool-remaining" title="Remaining weight and length"></span>
</span>
<!-- /ko -->
<!-- ko ifnot: sidebarSelectSpoolModalSpoolItem() -->
Expand Down
8 changes: 6 additions & 2 deletions octoprint_SpoolManager/templates/SpoolManager_sidebar.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,12 @@
<!-- ko if: vendor -->
(<span data-bind="text: vendor"></span>)
<!-- /ko -->
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
class="spool-remaining" title="Remaining weight"></span>
<div class="spool-remaining-container">
<div class="spool-remaining-text" data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}"></div>
<div class="spool-remaining-bar-container">
<div class="spool-remaining-bar" data-bind="style: { width: $root.calculateRemainingPercentage($data).width + '%' }, css: { 'low-amount': $root.calculateRemainingPercentage($data).isLow }"></div>
</div>
</div>
</div>
<div>
<div class="btn-group">
Expand Down
20 changes: 11 additions & 9 deletions octoprint_SpoolManager/templates/SpoolManager_tab.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@
Name
Material
Last/First Ise
Weight
Remaining
Used
Note
-->
Expand Down Expand Up @@ -200,7 +200,7 @@
<div class="control-group">
<div class="controls">
<label class="checkbox" style="margin-left:10px">
<input type="checkbox" data-bind="checked: tableAttributeVisibility.weight"> Weight
<input type="checkbox" data-bind="checked: tableAttributeVisibility.weight"> Remaining
</label>
</div>
</div>
Expand Down Expand Up @@ -243,7 +243,7 @@
<th style="width: 23%" data-bind="visible: tableAttributeVisibility.displayName">Name</th>
<th style="width: 15%" data-bind="visible: tableAttributeVisibility.material">Material</th>
<th style="width: 12%;" data-bind="visible: tableAttributeVisibility.lastFirstUse">Last / First use</th>
<th style="text-align: center; width: 15%;" data-bind="visible: tableAttributeVisibility.weight">Weight</th>
<th style="text-align: center; width: 15%;" data-bind="visible: tableAttributeVisibility.weight">Remaining</th>
<th style="text-align: center; width: 15%;" data-bind="visible: tableAttributeVisibility.used">Used</th>
<th style="width: 15%;" data-bind="visible: tableAttributeVisibility.note">Note</th>
<!-- TODO remove action column <th style="width: 9%"></th>
Expand All @@ -259,14 +259,16 @@
<span style="vertical-align:super" data-bind="text: material"></span>
</div></td>
<td data-bind="visible: $root.tableAttributeVisibility.lastFirstUse"><span data-bind="text: formatOnlyDate($data, 'lastUse')"></span><br><span data-bind="text: formatOnlyDate($data, 'firstUse')"></span></td>
<td data-bind="visible: $root.tableAttributeVisibility.weight" style="text-align: right;"><span data-bind="text: totalWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Total weight: ', 'totalWeight')}"></span>g<br/>
{# <span data-bind="text: usedWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used weight: ', 'usedWeight')}"></span>g<br/>#}
<span data-bind="text: remainingWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"></span>g<br>
<td data-bind="visible: $root.tableAttributeVisibility.weight" style="text-align: right;">
<span data-bind="text: totalWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Total weight: ', 'totalWeight')}"></span>g<br/>
<span data-bind="text: remainingWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"></span>g<br>
<span data-bind="text: (Number($root.buildTooltipForSpoolItem($data, '', 'remainingLength'))/1000).toFixed(2), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining length: ', 'remainingLength')}"></span>m<br>
</td>
<td data-bind="visible: $root.tableAttributeVisibility.used" style="text-align: right;">

<span data-bind="text: usedPercentage, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used weight: ', 'usedPercentage')}"></span>%<br>
<span data-bind="text: usedLength, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used length: ', 'usedLength')}"></span>mm</td>
<span data-bind="text: usedPercentage, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used: ', 'usedPercentage')}"></span>%<br>
<span data-bind="text: usedWeight, attr: {title: $root.buildTooltipForSpoolItem($data, 'Used weight: ', 'usedWeight')}"></span>g<br/>
<span data-bind="text: (Number($root.buildTooltipForSpoolItem($data, '', 'usedLength'))/1000).toFixed(2), attr: {title: $root.buildTooltipForSpoolItem($data, 'Used length: ', 'usedLength')}"></span>m
</td>
<td data-bind="visible: $root.tableAttributeVisibility.note"><span data-bind="html: noteHtml, attr: { title: noteText }"></span></td>
</tr>
</tbody>
Expand Down
3 changes: 1 addition & 2 deletions octoprint_SpoolManager/templates/SpoolManager_tab_spoolSelection_comp.jinja2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,8 +153,7 @@ File includes all Templates that are needed for custom Knockout.js components, s
<!-- ko if: vendor -->
(<span data-bind="text: vendor"></span>)
<!-- /ko -->
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight')}"
class="spool-remaining" title="Remaining weight"></span>
<span data-bind="text: $root.remainingText($data), attr: {title: $root.buildTooltipForSpoolItem($data, 'Remaining weight: ', 'remainingWeight', 'g', ' Remaining length: ', 'remainingLength', 'mm')}" class="spool-remaining" title="Remaining weight and length"></span>
<!-- ko if: lastUse || firstUse-->
(Last/First-Use <span data-bind="text: lastUse"></span> / <span data-bind="text: firstUse"></span>)
<!-- /ko -->
Expand Down