add file list height options and print button to popup, #49

Author: jneilliii

octoprint_prusaslicerthumbnails/__init__.py

@@ -32,7 +32,10 @@ def get_settings_defaults(self):
 			inline_thumbnail_scale_value="50",
 			align_inline_thumbnail=False,
 			inline_thumbnail_align_value="left",
-			state_panel_thumbnail=True
+			state_panel_thumbnail=True,
+			state_panel_thumbnail_scale_value="75",
+			resize_filelist=False,
+			filelist_height="306"
 		)
 
 	##~~ AssetPlugin mixin

octoprint_prusaslicerthumbnails/static/js/prusaslicerthumbnails.js

@@ -15,6 +15,7 @@ $(function() {
 		self.thumbnail_url = ko.observable('/static/img/tentacle-20x20.png');
 		self.thumbnail_title = ko.observable('');
 		self.inline_thumbnail = ko.observable();
+		self.file_details = ko.observable();
 		self.crawling_files = ko.observable(false);
 		self.crawl_results = ko.observableArray([]);
 
@@ -23,6 +24,7 @@ $(function() {
 				var thumbnail_title = data.path.replace('.gcode','');
 				self.thumbnail_url(data.thumbnail);
 				self.thumbnail_title(thumbnail_title);
+				self.file_details(data);
 				$('div#prusa_thumbnail_viewer').modal("show");
 			}
 		}
@@ -71,6 +73,11 @@ $(function() {
 				self.filesViewModel.thumbnailAlignValue(self.settingsViewModel.settings.plugins.prusaslicerthumbnails.inline_thumbnail_align_value());
 			}
 
+			// assign initial filelist height
+            if(self.settingsViewModel.settings.plugins.prusaslicerthumbnails.resize_filelist()) {
+                $('#files > div > div.gcode_files > div.scroll-wrapper').css({'height': self.settingsViewModel.settings.plugins.prusaslicerthumbnails.filelist_height() + 'px'});
+            }
+
 			// observe scaling changes
 			self.settingsViewModel.settings.plugins.prusaslicerthumbnails.scale_inline_thumbnail.subscribe(function(newValue){
 				if (newValue == false){
@@ -95,6 +102,13 @@ $(function() {
 				self.filesViewModel.thumbnailAlignValue(newValue);
 			});
 
+			// observe file list height changes
+			self.settingsViewModel.settings.plugins.prusaslicerthumbnails.filelist_height.subscribe(function(newValue){
+				if(self.settingsViewModel.settings.plugins.prusaslicerthumbnails.resize_filelist()) {
+                    $('#files > div > div.gcode_files > div.scroll-wrapper').css({'height': self.settingsViewModel.settings.plugins.prusaslicerthumbnails.filelist_height() + 'px'});
+                }
+			});
+
 			self.printerStateViewModel.filepath.subscribe(function(data){
 				if(data){
 					OctoPrint.files.get('local',data)
@@ -104,7 +118,7 @@ $(function() {
 									if($('#prusaslicer_state_thumbnail').length) {
 										$('#prusaslicer_state_thumbnail > img').attr('src', file_data.thumbnail);
 									} else {
-										$('#state > div > hr:first').after('<div id="prusaslicer_state_thumbnail" class="row-fluid"><img src="'+file_data.thumbnail+'" width="100%"/>\n<hr/></div>');
+										$('#state > div > hr:first').after('<div id="prusaslicer_state_thumbnail" class="row-fluid" style="text-align: center"><img src="'+file_data.thumbnail+'" width="' + self.settingsViewModel.settings.plugins.prusaslicerthumbnails.state_panel_thumbnail_scale_value() + '%"/>\n<hr/></div>');
 									}
 								} else {
 									$('#prusaslicer_state_thumbnail').remove();

octoprint_prusaslicerthumbnails/templates/prusaslicerthumbnails.jinja2

@@ -4,9 +4,12 @@
 		<h3 data-bind="text: thumbnail_title()"></h3>
 	</div>
 	<div class="modal-body">
-		<img data-bind="attr: {src: thumbnail_url()}" width="100%"/>
+        <div class="row-fluid">
+            <img data-bind="attr: {src: thumbnail_url()}" width="100%"/>
+        </div>
+
 	</div>
 	<div class="modal-footer">
-		<a href="#" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{ _('Close') }}</a>
+		<a href="#" class="btn pull-left" aria-hidden="true" data-bind="visible: filesViewModel.loginState.hasPermissionKo(filesViewModel.access.permissions.PRINT), click: function() { if (filesViewModel.enableSelectAndPrint(file_details())) { filesViewModel.loadFile(file_details(), true); $('div#prusa_thumbnail_viewer').modal('hide'); } else { return; } }, css: {disabled: !filesViewModel.enableSelectAndPrint(file_details())}"><i class="fas fa-print"></i> {{ _('Print') }}</a> <a href="#" class="btn btn-primary pull-right" data-dismiss="modal" aria-hidden="true">{{ _('Close') }}</a>
 	</div>
-</div>
+</div>

octoprint_prusaslicerthumbnails/templates/prusaslicerthumbnails_settings.jinja2

@@ -5,6 +5,12 @@
 		<input type="checkbox" data-bind="checked: settings.plugins.prusaslicerthumbnails.state_panel_thumbnail"> Show thumbnail in state panel.
 		</label>
 	</div>
+	<div class="controls">
+		<span class="input-append">
+			<input type="number" step="any" min="0" max="100" class="input-mini text-right" data-bind="enable:settings.plugins.prusaslicerthumbnails.state_panel_thumbnail() == true, value: settings.plugins.prusaslicerthumbnails.state_panel_thumbnail_scale_value">
+			<span class="add-on">%</span>
+		</span>
+	</div>
 	<div class="controls">
 		<label class="checkbox">
 		<input type="checkbox" data-bind="checked: settings.plugins.prusaslicerthumbnails.inline_thumbnail"> Use inline thumbnails.
@@ -33,6 +39,17 @@
 			<option value="right">Right</option>
 		</select>
 	</div>
+	<div class="controls">
+		<label class="checkbox">
+		<input type="checkbox" data-bind="checked: settings.plugins.prusaslicerthumbnails.resize_filelist"> Set file list height.
+		</label>
+	</div>
+	<div class="controls">
+		<span class="input-append">
+			<input type="number" step="any" min="0" class="input-mini text-right" data-bind="enable: settings.plugins.prusaslicerthumbnails.resize_filelist() == true, value: settings.plugins.prusaslicerthumbnails.filelist_height">
+			<span class="add-on">px</span>
+		</span>
+	</div>
 </div>
 <div class="row-fluid" data-bind="allowBindings: false">
 	<div class="row-fluid" data-bind="allowBindings: true">
@@ -61,4 +78,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</div>

setup.py

@@ -14,7 +14,7 @@
 plugin_name = "PrusaSlicer Thumbnails"
 
 # The plugin's version. Can be overwritten within OctoPrint's internal data via __plugin_version__ in the plugin module
-plugin_version = "0.1.5rc1"
+plugin_version = "0.1.5rc2"
 
 # The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin
 # module