As the topic says, is there a way to move (or even better duplicate) a custom control button from the control tab to another tab e.g. the temperature tab?
Every hint is highly appreciated.
jQuery (within a JavaScript context) is pretty amazing. Here's a snippet from Robo 3D's plugin which completely terraforms the OctoPrint screens for its own purposes:
$("#temperature-graph").parent().next(".row-fluid").prependTo("#temperature_main .accordion-inner");
$("#temperature-graph").prependTo("#temperature_main .accordion-inner");
$("#temperature-graph").wrap("<div class='temp-graph-wrapper'></div>");
$("#temperature_main table-bordered").remove();
$("#control .terminal").next(".row-fluid").next("div").prependTo("#terminal_main .accordion-inner");
$("#control .terminal").next(".row-fluid").prependTo("#terminal_main .accordion-inner");
$("#control .terminal").prependTo("#terminal_main .accordion-inner");
$('link[rel="shortcut icon"]').attr('href', '~/Octoprint-robotheme/octoprint-robotheme/static/favicon.ico');
$("#terminal-output").addClass("well");
$("#terminal_main").after("<div class='panel-footer'><div class='row-fluid'><div class='span8 terminal-textbox'></div><div class='span4 terminal-submit'></div></div></div>");
$("#terminal_wrapper .accordion-heading").append("<div class='heading_buttons'><div class='label line-container'></div><button type='button' class='btn btn-default btn-gradient btn-sm dropdown-toggle' data-toggle='dropdown'><span class='caret'></span></button><ul class='dropdown-menu pull-right terminal-options' role='menu'></ul></div>");
$(".terminal span[data-bind*='lineCount']").appendTo("#terminal_wrapper .heading_buttons .label");
$(".terminal .pull-right a").each(function() {
$("ul.terminal-options").append(
$('<li>').append(
$(this)
))
});
$(".line-container").after($(".terminal button[data-bind*='toggleAutoscroll']").addClass("btn-default btn-sm text-light7 mr5"));
$(".terminal-options").append("<li class='divider'></li>");
It reminds me of the method used to artistically produce the South Park cartoon series (frame by frame): cut some paper and arrange it somewhere else.
Or just combine the two tabs into one....
Thank you both.
So I have a nice starting point, must see what I can reach with my manageable Javascript knowledge ...
I'm paraphrasing here, but it might be:
$(filter to find what you're trying to copy).each(function() {
$("filter to the parent element where it's being copied to").append(
$('<div or similar>').append(
$(this)
))
});
1 Like
Not sure if append alone will do the same thing, but appendTo can also be used to move elements within the dom. So something like the below code will take all the "jog-panel" classed elements from the control tab and move it to the end of the Temperature tab's contents. The real trick is just finding where you want to put it and then fixing the layout once it's there due to size changes, etc. You'll notice once you do the code below in developer console of your browser the alignment really gets messed up.
$('#control > div.jog-panel').appendTo('#temp');
This code will just move the controls for motion. The jQuery selector is what you have to figure out. In Chrome's developer console you can use the inspect tool to find the code, then right click the element and select Copy > Selector from the context menu.
$('#control > div:nth-child(3)').appendTo('#temp');
It's all about the jQuery selector. They're often a pain. But the good thing is that you can play with this in your Development Console on the website in question. Just write the code there in the JavaScript console until you get it right. In fact, if you do an Inspect Element and click on the element in the HTML, it will highlight the most specific CSS for that selection.
1 Like
Just playing with it in the browser console - looks like it's easier as I thought ...
$('#temp').append(
$('.custom_section_horizontal')
)
.custom_section_horizontal is the div that originaly holds the button(s)
1 Like
Cool, maybe my BLTouch plugin?
It would be nice to have a generalized plugin like Themeify which works in this way: provide a FROM and TO jQuery pair to do modifications like this.
Am I muse or demon-from-hell? (You be the judge.)
It wouldn't be actually all that hard. It's similar to what I'm doing with the widescreen plugin moving items from the left sidebar to a newly injected sidebar on the right...
I swear, I forked Themeify a year ago with the intent to add a new jQuery section to it. The more I climbed into his code the more I said "eww". It just seemed overly complicated to me for what I thought it could be doing.
Of course, if the code is more complicated than I would have imagined then there's probably some reason which I don't understand. So there's likely a Boojum hiding there somewhere.
O.k. think I got it
$('.custom_section_horizontal').appendTo(
$('#temp')
)
moves the button(s)
$('.custom_section_horizontal').clone().appendTo(
$('#temp')
)
copys the button(s)
To make it permantent I asume I have to make a simple plugin skeleton with this as a .js file in /static/js/ ?
Yep. That's the plan.
And the Hunting of the Snark is a parody about project management, I'd suggest.
Yep, that is exactly correct. The widescreen plugin that I linked above does exactly that. Just make sure that you put your code in the AllBound callback to make sure all the fancy stuff has finished. Like I did here.
1 Like
Thanks a lot you both for the push in the right direction ...
No problem, I'm always glad to help the plugin developers here.