Where is the YAML for the 'built-in' Octoprint UI?

paynterf · January 4, 2021, 7:12pm

I was hoping to be able to crib from the existing Octoprint UI, but I can't find any .YAML files that generate the controls. I even did a search through all the files in the .octoprint folder tree for some of the button text, but found nothing.

Any idea where this control generation code resides?

TIA,

Frank

Charlie_Powell · January 4, 2021, 7:20pm

There is no such yaml, they are defined in the source.

github.com

OctoPrint/OctoPrint/blob/bf8ff6358556aaa073da2d0646f193c3a1fef48f/src/octoprint/templates/tabs/control.jinja2#L47


                </div>
            </div>
        </div>
    </div>
    <div data-bind="visible: keycontrolPossible() && loginState.hasPermissionKo(access.permissions.WEBCAM)() && loginState.hasPermissionKo(access.permissions.CONTROL)()">
        <small class="muted">{{ _("Hint: If you move your mouse over the picture, you enter keyboard control mode.") }}</small>
    </div>
    <!-- /ko -->
{% endif %}
<div class="jog-panel" style="display: none;" data-bind="visible: loginState.hasPermissionKo(access.permissions.CONTROL)">
    <!-- XY jogging control panel -->
    <div id="control-jog-xy" class="jog-panel">
        <h1>X/Y</h1>
        <div>
            <button id="control-yinc" class="btn box" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('y',1) }"><i class="fas fa-arrow-up"></i></button>
        </div>
        <div>
            <button id="control-xdec" class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x',-1) }"><i class="fas fa-arrow-left"></i></button>
            <button id="control-xyhome" class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting() , click: function() { $root.sendHomeCommand(['x', 'y']) }"><i class="fas fa-home"></i></button>
            <button id="control-xinc" class="btn box pull-left" data-bind="enable: isOperational() && !isPrinting(), click: function() { $root.sendJogCommand('x',1) }"><i class="fas fa-arrow-right"></i></button>

That's where it starts, though it is a lot more complicated than your custom controls. At the bottom of the file there is a template for the custom controls, if you can make sense of it, might give some hints as to what will make what etc.

paynterf · January 4, 2021, 7:33pm

Thanks!

Frank