Skip to content

Commit

Permalink
Merge pull request #4 from HugoCLSC/1.9-update
Browse files Browse the repository at this point in the history 
1.9 update
  • Loading branch information
@HugoCLSC
HugoCLSC authored Jul 24, 2023
2 parents 1eb644f + ac45a84 commit 42eb8c0
Show file tree
Hide file tree
Showing 8 changed files with 1,064 additions and 861 deletions.
22 changes: 22 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"workbench.colorCustomizations": {
"activityBar.activeBackground": "#fbed80",
"activityBar.background": "#fbed80",
"activityBar.foreground": "#15202b",
"activityBar.inactiveForeground": "#15202b99",
"activityBarBadge.background": "#06b9a5",
"activityBarBadge.foreground": "#15202b",
"commandCenter.border": "#15202b99",
"sash.hoverBorder": "#fbed80",
"statusBar.background": "#f9e64f",
"statusBar.foreground": "#15202b",
"statusBarItem.hoverBackground": "#f7df1e",
"statusBarItem.remoteBackground": "#f9e64f",
"statusBarItem.remoteForeground": "#15202b",
"titleBar.activeBackground": "#f9e64f",
"titleBar.activeForeground": "#15202b",
"titleBar.inactiveBackground": "#f9e64f99",
"titleBar.inactiveForeground": "#15202b99"
},
"peacock.color": "#f9e64f"
}
8 changes: 5 additions & 3 deletions octoprint_BLOCKS/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,8 @@ def wifiStatus(self):
# At this stage we send the wifi level if the printer is connected
if self._printer.is_operational():
self._printer.commands(
"M550 W{}".format(net_data["WifiLevel"]))
f'M550 W{net_data["WifiLevel"]}')
# "M550 W{}".format(net_data["WifiLevel"]))
self._logger.debug("Wifi quality level sent.")
elif _ssid is None:
# Probably are on Ethernet
Expand Down Expand Up @@ -230,14 +231,15 @@ def get_template_configs(self):
dict(type="sidebar", template="blocks_connectionWrapper.jinja2",
custom_bindings=True),
# My webcam link template
dict(type="tab", name="WebCam", custom_bindings=False),
# dict(type="tab", name="Webcam",template="webcam_tab.jinja2", custom_bindings=True),
dict(type="tab", name="Webcam", custom_bindings=True),
# Custom Notifications template
dict(type="sidebar", template="blocks_notifications_wrapper.jinja2",
custom_bindings=True),
# Light Dark Theme Switch template
dict(type="navbar", template="lightDarkSwitch.jinja2",
custom_bindings=True),
# Fullscreen button for webcam template
# # Fullscreen button for webcam template
dict(type="generic", template="webcambar.jinja2",
custom_bindings=True),
# Wifi set up window template
Expand Down
3 changes: 2 additions & 1 deletion octoprint_BLOCKS/static/css/BLOCKS.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -691,8 +691,9 @@ span.add-on{
width: auto;
position: absolute;
bottom: 5%;
right: 5%;
right: 1%;
float: right;
z-index: 5;
}

#webcam_container .webcam_rotated {
Expand Down
1,554 changes: 846 additions & 708 deletions octoprint_BLOCKS/static/js/BLOCKS.js
View file

Large diffs are not rendered by default.

323 changes: 177 additions & 146 deletions octoprint_BLOCKS/static/js/BLOCKS_WebCam.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,152 +5,183 @@
* License: APGLv3
*/

$(function() {

function BLOCKS_WebCamViewModel(parameters) {
var self = this;

self.settings = parameters[0];
self.loginState = parameters[1];
self.control = parameters[2];
self.access = parameters[3];



self.webcamStatus = ko.observable(false);

self.onTabChange = function(current, previous){
if(current == "#tab_plugin_BLOCKS"){
clearTimeout(self.control.webcamDisableTimeout);
self.webcamStatus(true);
$('#tab_plugin_BLOCKS_link > a').attr('class','blink');
$('#tab_plugin_BLOCKS_link > a').css("color","#f56161ed");
// Determine stream type and switch to corresponding webcam.
// Took from the controlViewModel.
var streamType = determineWebcamStreamType(self.settings.webcam_streamUrl());
if (streamType == "mjpg") {
self.control._switchToMjpgWebcam();
} else if (streamType == "hls") {
self.control._switchToHlsWebcam();
} else {
throw "Unknown stream type " + streamType;
}
}else{
self.webcamStatus(false);
$('#tab_plugin_BLOCKS_link > a').attr('class','');
$('#tab_plugin_BLOCKS_link > a').css("color","");
}
};


self.onBrowserTabVisibilityChange = function (status) {
if (status) {
clearTimeout(self.control.webcamDisableTimeout);
self.webcamStatus(true);
var streamType = determineWebcamStreamType(self.settings.webcam_streamUrl());
if (streamType == "mjpg") {
self.control._switchToMjpgWebcam();
} else if (streamType == "hls") {
self.control._switchToHlsWebcam();
} else {
self.webcamStatus(false);
throw "Unknown stream type " + streamType;
}
}
};


self.fullScreenStyles = {
"ON":{
"width": "100%",
"height": "100%",
"z-index": "1070",
"position": "fixed",
"display": "block",
"top": "0px",
"bottom": "0px",
"right": "0px",
"left": "0px",
},
"OFF":{
"width": "100%",
"height": "100%",
"z-index": "unset",
"position": "relative",
"display": "",
"top": "unset",
"bottom": "unset",
"right": "unset",
"left": "unset",
},
"ROTATOR_ON":{
"height": "calc(100% / 1.78)",
"top": "206px",
"position": "relative",
},
"ROTATOR_OFF":{
"height": "",
"top": "0px",
"position": "absolute",
},
"ROTATOR_ON_PAD":{
"padding-bottom":"0%",
},
"ROTATOR_OFF_PAD":{
"padding-bottom":"100%",
},
};

self.fullScreenState = ko.observable(false);
self.fullScreenButton = ko.observable(undefined);
self.fullScreenButton.subscribe(function(val){
try {
if(self.fullScreenState() === false){
self.fullScreenOperations(true);
self.fullScreenState(true);

}else if (self.fullScreenState() === true ){
self.fullScreenState(false);
self.fullScreenOperations(false);
}
} catch (e) {
console.log(e);
}
});
/*TODO: No control view model ele não utiliza como dependencia o webcam view model do plugin.
*
* Utilizam o ko, nas templates para dar bind da template da webcam para o control viewmodel
* Desta forma não utilizam como dependencia, mas depois na funcão vão buscar a data correspondente a
* camera para poder utilizar as funcoes desta
*/

self.fullScreenOperations = function(state){
if(state === true){
$('#webcam_rotator.webcam_rotated').css(self.fullScreenStyles.ROTATOR_ON_PAD);
$('#webcam_rotator.webcam_rotated > .webcam_fixed_ratio').css(self.fullScreenStyles.ROTATOR_ON);
$('#webcam_container').css(self.fullScreenStyles.ON);
}else{
$('#webcam_rotator.webcam_rotated').css(self.fullScreenStyles.ROTATOR_OFF_PAD);
$('#webcam_rotator.webcam_rotated > .webcam_fixed_ratio').css(self.fullScreenStyles.ROTATOR_OFF);
$('#webcam_container').css(self.fullScreenStyles.OFF);
}
};
// This event listener serves for the full screen video player
// When the user presses Escape when the video is full screen
var bod = document.querySelector('html');
bod.addEventListener('keydown', (e) => {
if((e.key ==="Escape" || e.key === 'Esc') && self.fullScreenState()===true ){
console.log(e);
self.fullScreenState(false);
self.fullScreenOperations(false);
}
$(function () {
function BLOCKS_WebCamViewModel(parameters) {
var self = this;

self.settings = parameters[0];
self.loginState = parameters[1];
self.control = parameters[2];
self.access = parameters[3];
self.classicWebcam = parameters[4];
self.webcamStatus = ko.observable(false);

self.onStartupComplete = function () {
// Append the camera container from control in the new tab
$("#webcam_plugins_container ").appendTo(
$("#tab_plugin_octoprint_BLOCKS")
);

$("#fullscreenButton").appendTo($("#webcam_img_container"));
OctoPrint.coreui.viewmodels.controlViewModel.recreateIntersectionObservers();
// I can now safelly remove the old control element from the page
$("#control").remove();
};

self.onTabChange = function (current, previous) {
if (current == "#tab_plugin_octoprint_BLOCKS") {
self.onActivateWebcamTabBlink(true);
self.webcamStatus(true);
OctoPrint.coreui.viewmodels.controlViewModel.onBrowserTabVisibilityChange(
true
);
} else {
self.onActivateWebcamTabBlink(false);
self.webcamStatus(false);
OctoPrint.coreui.viewmodels.controlViewModel.onBrowserTabVisibilityChange(
false
);
}

if (self.classicWebcam.webcamError()) {
console.log("There was an error on the webcam");
OctoPrint.coreui.viewmodels.controlViewModel.onBrowserTabVisibilityChange(self.webcamStatus());
}
};

self.onActivateWebcamTabBlink = function (value) {
if (value) {
$("#tab_plugin_octoprint_BLOCKS_link > a").attr(
"class",
"blink"
);
$("#tab_plugin_octoprint_BLOCKS_link > a").css(
"color",
"#f56161ed"
);
} else {
$("#tab_plugin_octoprint_BLOCKS_link > a").attr("class", "");
$("#tab_plugin_octoprint_BLOCKS_link > a").css("color", "");
}
};

self.fullScreenStyles = {
ON: {
// width: "100%",
width: window.innerWidth,
// height: "100%",
height: window.innerHeight,
"z-index": "1070",
position: "fixed",
display: "block",
top: "0px",
bottom: "0px",
right: "0px",
left: "0px",
},
OFF: {
width: "100%",
height: "100%",
"z-index": "unset",
position: "relative",
display: "",
top: "unset",
bottom: "unset",
right: "unset",
left: "unset",
},
ROTATOR_ON: {
height: "calc(100% / 1.78)",
top: "206px",
position: "relative",
},
ROTATOR_OFF: {
height: "",
top: "0px",
position: "absolute",
},
ROTATOR_ON_PAD: {
"padding-bottom": "0%",
},
ROTATOR_OFF_PAD: {
"padding-bottom": "100%",
},
};

self.fullScreenState = ko.observable(false);
self.fullScreenButton = ko.observable(undefined);

self._webcamFixedRatio = document.querySelector(".webcam_fixed_ratio");
self._webcamFixedRatioStyle =
this._webcamFixedRatio.style.paddingBottom;

self.fullScreenButton.subscribe(function (val) {
try {
// var _webcamFixedRatio = document.querySelector(".webcam_fixed_ratio");
if (self.fullScreenState() === false) {
self.fullScreenOperations(true);
self.fullScreenState(true);
} else if (self.fullScreenState() === true) {
self.fullScreenState(false);
self.fullScreenOperations(false);
}
} catch (e) {
console.log(e);
}
});

self.fullScreenOperations = function (state) {
if (state === true) {
$("#webcam_rotator.webcam_rotated").css(
self.fullScreenStyles.ROTATOR_ON_PAD
);
$("#webcam_rotator.webcam_rotated > .webcam_fixed_ratio").css(
self.fullScreenStyles.ROTATOR_ON
);
$("#webcam_img_container").css(self.fullScreenStyles.ON);
self._webcamFixedRatio.style.cssText = "padding-bottom: 49.5%;";
} else {
$("#webcam_rotator.webcam_rotated").css(
self.fullScreenStyles.ROTATOR_OFF_PAD
);
$("#webcam_rotator.webcam_rotated > .webcam_fixed_ratio").css(
self.fullScreenStyles.ROTATOR_OFF
);
$("#webcam_img_container").css(self.fullScreenStyles.OFF);
self._webcamFixedRatio.style.paddingBottom =
self._webcamFixedRatioStyle;
}
};
// This event listener serves for the full screen video player
// When the user presses Escape when the video is full screen
var bod = document.querySelector("html");
bod.addEventListener("keydown", (e) => {
if (
(e.key === "Escape" || e.key === "Esc") &&
self.fullScreenState() === true
) {
self.fullScreenState(false);
self.fullScreenOperations(false);
}
});
}
OCTOPRINT_VIEWMODELS.push({
construct: BLOCKS_WebCamViewModel,
dependencies: [
"settingsViewModel",
"loginStateViewModel",
"controlViewModel",
"accessViewModel",
"classicWebcamViewModel",
],
elements: ["#fullscreenButton"],
// elements: ["#classicwebcam_plugin_container"],
});


}
OCTOPRINT_VIEWMODELS.push({
construct: BLOCKS_WebCamViewModel,
dependencies: [
"settingsViewModel",
"loginStateViewModel",
"controlViewModel",
"accessViewModel"],
elements: [
"#fullscreenButton"
]
});
});
Loading

0 comments on commit 42eb8c0

Please sign in to comment.