Viewport cuts away custom commands

vmario89 · March 2020

Hey,

i put some special commands in my extcommands.xml to my printer slug. On regular computer this is working fine.

Now on smartphone or if i resice the browser window to some smaller windows there's reached the point where menu gets cut off. There's no way to scroll so the actions which are hidden. No chance on mobile phone to trigger those actions. Image 1 has a smaller viewport than image 2.

some feature: request regarding to this: make the extcommands.xml parser accepting custom svg icons and allow to put actions into custom seb menus.

Repetier · March 2020

The SVG solution is great. Always wanted own icons just did not think about the obvious solution to be independent from internal fonts.

Could also recreate the menu problem. Just need an idea how to fix it as it is a library function from bootstrap and problem seems to be where the menu is included. The top menu for example does not have that problem - it extends the main size and scrolls while printer menu stays sticky even the content below scrolls so has the wrong anchor.

Repetier · March 2020

Ok, found the scroll problem. If dropdown-append-to-body attribute is used, it is not scrolling. A known problem of library authors they won't fix. Fortunately removing the attribute seems to work well, so fixed for next release.

vmario89 · March 2020

hey nice to read! :-)

yeah svg icons could work. or some png files. question is the thing with resizing and colours maybe.

by the way sub menus could be done with "collapse" or "accordion".

i am not a software dev but i had a really quick look on the net:

https://getbootstrap.com/docs/4.3/components/collapse/

https://mdbootstrap.com/docs/jquery/javascript/accordion/ - guess sth is out there for that bootstrap theme similar to that jquery stuff

Repetier · March 2020

With monochrome svg it is best to get color also in dark mode. I'm adding them as img so png would also work and I force height so icons have same size.

Submenu is a problem. We use bootstrap 3 in gui and 4 in monitor and 4 has no submenus any more. And it must work in all. I'm not really a fan of the accordion idea - it is a click more. Maybe at some time we add extra menus if it gets too much entries.

vmario89 · May 2020

hi, one addition to this bug: i realized that when opening Firefox first time the view also will look likt this always (all buttons are unusable):

Screenshot-20200514-140934-org-mozilla-firefox

after reloading the page once the buttons are displayed in the center (and still cutoff the last ones) so the can be used.

regards, Mario

Repetier · May 2020

Ok, I see the problem with the menus not matching in position with narrow screens. Have found a solution for this making them full width when screen has less then 500 pixel width.

Not sure if I interpret your "all buttons unusable". Do you mean the menus open wrong or no click at all is possible so menus even won't open?

When I open it in firefox on desktop (can't debug mobile and ios is always based on safari anyway) the buttons are all usable, so I hope you meant the menus.

vmario89 · May 2020

hi. sorry for unclean description. Yes i mean just the fact that you cannot reach the buttons in the drop down menu so the entries cannot be triggered - you can click the outermost border and it will work - but if text is not displayed you just dont know what you are going to click then^^. This happens only on Smartphone Firefox. On Desktop everything is fine

Repetier · May 2020

Great then it is already fixed in the 0.93.2 beta version I compiled for linux today.

vmario89 · May 2020

Hey,

now the day has come that i have too much entries in the custom drop down menu (14 entries in total). I have a lot of action calls which run python scripts i often need for our Hangprinter implementation. The problem is that i have to modify the browser zoom to 60% to see all the functions i need. Because accordion is not possible, maybe some custom dropdown buttons instead like the following (icons should be changed)?

img datei erstellen

Repetier · May 2020

Nice idea. Will make the split for more the 4 extra entries to keep them balanced more.

vmario89 · June 2020

Hey. It's me again

Happy to see that you released Repetier Server 0.94.0

Found in changelog that you added

* Allow user icons for own commands.
* Dropdown menus now orient based on available space.

Figured out that now the menu has proper width but it still cuts commands on smartphone. I can only see 9 of 15 entries i put in my menu. I cannot zoom out to reach the other missing entries. To fix it i have to change to desktop size viewport. Is it possible to add some scrollbar when the menu pops up?

Cool feature with icons for the custom commands. I did not find the recent documentation on how to do this. Could you give me some hint about xml configuration and constraints for the icon files like file format, size, alpha channel and so on? Did not find the recent docs at https://www.repetier-server.com/documentation/ yet

regards and thanks for your work, Mario

Repetier · June 2020

Yes, I got a scrolling bug in 0.94.0 so also splittet it will not scroll with body. Can you test if that is solved in 0.94.1 beta. Just change linux download link to 0.94.1. At least menus now scroll with body.

Regarding icons just add icon attribute to command tag
<command icon="url" ....>

If it starts with / it is on the server. You can create and use the shadow directory for this to store own images. O ruse absolute urls to fetch them from anywhere you like.

vmario89 · June 2020

hi. thanks for the quick fix. menus work now :-) the icons i am going to test next days

Repetier · June 2020

Forgot to mention - best use svg icons so color changes in dark mode as well.

vmario89 · June 2020

cool, icons work! Thanks for that feature implementation. This will clean up my user interface a lot

vim /var/lib/Repetier-Server/database/RepetierServer.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<server>
<branding>
<shadow-www-directory>/var/lib/Repetier-Server/shadow</shadow-www-directory>
</branding>
</server>

cd /var/lib/Repetier-Server/
mkdir shadow/
chown repetierserver:dialout shadow/

And then finally put icon file into shadow directory and link it into extcommands.xml

:-)

vmario89 · June 2020

sorry for bugging you again. found the cut away error also in Server Monitor ;-D cannot use all my commands in that menu. by the way you can see my larger needs for some actions.

Repetier · June 2020

Hope there is a solution in bootstrap-vue for this. I fear it will be real problem with the desktop like modification for scrolling. Need to make the menu it self scrollable I guess.
In server I had to rewrite the menu function my self get it all fixed. Will check monitor for next update.

And yes, I see you really have a lot of functions and also icons make good sense in your case.

vmario89 · March 2022

hi, since some more recent update the icons do not show anymore. I think since update 1.2.0 or 1.3.0. The files are still present and can be read. If i use the debugger from Firefox, i can see that the bounding box is messed. The wrong rendering happens on Chrome and Firefox and is the same issue on mobile devices and bigger view ports. I think some css must be broken. i did not change style settings or icons. the viewport and size attributes of the svg are fine.

Repetier · March 2022

My icons are visible on firefox, see:
https://cln.sh/kG61fv

But today I learned firefox is a bit picky with svg icons and when they can be drawn. Can you provide the source of one icon not working for testing.

vmario89 · March 2022

Hi, for sure. I create my icons with Inkscape

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   sodipodi:docname="release_abc.svg"
   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   id="svg8"
   version="1.1"
   viewBox="0 0 300 300"
   height="300mm"
   width="300mm">
  <defs
     id="defs2" />
  <sodipodi:namedview
     inkscape:window-maximized="1"
     inkscape:window-y="-8"
     inkscape:window-x="1912"
     inkscape:window-height="976"
     inkscape:window-width="1920"
     showgrid="false"
     inkscape:document-rotation="0"
     inkscape:current-layer="layer1"
     inkscape:document-units="mm"
     inkscape:cy="981.25809"
     inkscape:cx="547.18388"
     inkscape:zoom="0.24748737"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     borderopacity="1.0"
     bordercolor="#666666"
     pagecolor="#ffffff"
     id="base" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">
    <g
       id="g955"
       transform="matrix(0,2.8947158,-2.8947158,0,385.81447,-82.634041)">
      <path
         style="fill:#000000;stroke-width:0.264583"
         d="m 45.747115,54.782574 c -4.285534,-0.004 -6.868573,-0.147693 -7.293764,-0.405695 -1.271661,-0.771609 -1.275401,-2.687197 -0.0067,-3.446807 0.363594,-0.217704 2.144697,-0.404733 4.029532,-0.423132 1.857853,-0.01813 3.37792,-0.146994 3.37792,-0.28635 0,-0.1393 -3.812649,-4.06602 -8.472553,-8.725924 -5.810891,-5.810891 -8.550505,-8.681037 -8.720727,-9.136166 -0.413353,-1.105286 0.348639,-2.544064 1.422041,-2.685076 1.253842,-0.164713 1.575215,0.110938 10.291141,8.826864 4.682581,4.682581 8.625811,8.48736 8.762778,8.455017 0.136959,-0.03231 0.245309,-1.470089 0.240812,-3.195034 -0.0045,-1.724937 0.130794,-3.471717 0.300627,-3.88174 0.676248,-1.632611 3.027357,-1.628248 3.704645,0.0069 0.171403,0.413799 0.303066,3.649732 0.292587,7.190965 -0.01718,5.805438 -0.08169,6.501224 -0.655976,7.075515 -0.576094,0.576094 -1.270657,0.636326 -7.272346,0.63069 z"
         id="path856"
         sodipodi:nodetypes="ssssssssssssssss" />
      <path
         sodipodi:nodetypes="ssssssssssssssss"
         id="path856-1"
         d="m 107.04621,116.08149 c 0.004,4.28554 0.1477,6.86858 0.4057,7.29377 0.77161,1.27166 2.68719,1.2754 3.4468,0.007 0.21771,-0.3636 0.40474,-2.1447 0.42314,-4.02954 0.0181,-1.85785 0.14699,-3.37792 0.28635,-3.37792 0.1393,0 4.06602,3.81265 8.72592,8.47256 5.81089,5.81089 8.68104,8.5505 9.13617,8.72072 1.10528,0.41336 2.54406,-0.34864 2.68507,-1.42204 0.16471,-1.25384 -0.11094,-1.57521 -8.82686,-10.29114 -4.68258,-4.68258 -8.48736,-8.62581 -8.45502,-8.76278 0.0323,-0.13696 1.47009,-0.24531 3.19503,-0.24081 1.72494,0.004 3.47172,-0.13079 3.88174,-0.30062 1.63262,-0.67625 1.62825,-3.02736 -0.007,-3.70465 -0.4138,-0.1714 -3.64973,-0.30307 -7.19096,-0.29259 -5.80544,0.0172 -6.50123,0.0817 -7.07552,0.65598 -0.57609,0.57609 -0.63632,1.27066 -0.63069,7.27234 z"
         style="fill:#000000;stroke-width:0.264583" />
      <g
         transform="rotate(180,82.101786,81.320983)"
         id="g933">
        <path
           id="path891"
           d="m 70.512892,89.855995 c -1.132919,-1.825629 -1.866309,-3.514547 -3.27353,-7.538713 -0.673568,-1.926137 -1.554029,-4.182473 -1.956606,-5.01408 -2.039424,-4.212914 -7.048137,-7.802606 -13.513912,-9.685253 -1.456054,-0.423961 -1.673775,-0.552913 -1.760029,-1.042458 -0.212196,-1.204252 1.436829,-2.826162 2.710312,-2.66575 2.543334,0.320375 7.709218,2.653914 10.694425,4.830898 3.787655,2.76218 5.025877,4.803746 8.062038,13.292605 1.177948,3.293456 2.091671,5.081234 3.395668,6.643919 1.94204,2.327315 4.018325,3.463855 10.458533,5.724949 5.175831,1.817172 6.372942,2.487135 8.867858,4.962888 2.250586,2.23333 3.07614,3.39197 4.56185,6.40273 0.970999,1.96772 2.241191,5.47385 2.353241,6.49571 0.14417,1.31492 -1.456093,2.95805 -2.67221,2.74376 -0.489544,-0.0863 -0.618499,-0.30398 -1.042459,-1.76003 -1.882644,-6.46577 -5.472335,-11.47448 -9.685259,-13.513911 -0.831607,-0.402578 -3.087949,-1.283046 -5.01408,-1.956607 -1.926145,-0.673562 -4.117716,-1.50524 -4.87017,-1.848179 -3.288534,-1.498777 -5.740356,-3.533957 -7.31567,-6.072478 z"
           style="fill:#00aa0f;fill-opacity:1;stroke-width:0.203472"
           sodipodi:nodetypes="ssssssssssssssssssss" />
        <path
           sodipodi:nodetypes="ssssssssssssssssssss"
           style="fill:#4f6ab4;fill-opacity:1;stroke-width:0.203472"
           d="m 78.063256,82.305628 c -1.132919,-1.825629 -1.866309,-3.514547 -3.273529,-7.538713 -0.673569,-1.926137 -1.55403,-4.182473 -1.956607,-5.01408 -2.039423,-4.212914 -7.048137,-7.802606 -13.513912,-9.685253 -1.456054,-0.423961 -1.673775,-0.552913 -1.760029,-1.042457 -0.212196,-1.204253 1.436829,-2.826163 2.710312,-2.665751 2.543335,0.320375 7.709218,2.653914 10.694425,4.830898 3.787655,2.762181 5.025877,4.803746 8.062038,13.292606 1.177948,3.293456 2.091671,5.081234 3.395668,6.643918 1.942041,2.327315 4.018325,3.463855 10.458534,5.724949 5.17583,1.817173 6.372941,2.487135 8.867864,4.96289 2.25059,2.233333 3.07614,3.391977 4.56185,6.402731 0.971,1.967724 2.24119,5.473854 2.35324,6.495714 0.14417,1.31492 -1.45609,2.95805 -2.67221,2.74376 -0.48954,-0.0863 -0.6185,-0.30398 -1.04246,-1.76003 -1.88264,-6.465771 -5.472339,-11.474484 -9.685264,-13.513918 -0.831607,-0.402577 -3.087949,-1.283045 -5.01408,-1.956607 -1.926145,-0.673562 -4.117716,-1.50524 -4.870169,-1.848179 -3.288535,-1.498777 -5.740357,-3.533957 -7.315671,-6.072478 z"
           id="path902" />
        <path
           id="path904"
           d="m 85.613622,74.755265 c -1.13292,-1.825629 -1.86631,-3.514547 -3.27353,-7.538713 -0.673569,-1.926137 -1.55403,-4.182473 -1.956607,-5.01408 -2.039423,-4.212914 -7.048137,-7.802605 -13.513911,-9.685253 -1.456054,-0.423961 -1.673776,-0.552912 -1.760029,-1.042457 -0.212196,-1.204253 1.436829,-2.826163 2.710312,-2.66575 2.543334,0.320374 7.709218,2.653913 10.694425,4.830897 3.787655,2.762181 5.025876,4.803746 8.062037,13.292606 1.177948,3.293456 2.091672,5.081234 3.395669,6.643918 1.94204,2.327315 4.018325,3.463855 10.458532,5.724949 5.17583,1.817173 6.37294,2.487136 8.86786,4.962886 2.25058,2.233333 3.07614,3.391977 4.56185,6.402732 0.971,1.967723 2.24119,5.473855 2.35323,6.495709 0.14418,1.314929 -1.45608,2.958051 -2.6722,2.743765 -0.48955,-0.08625 -0.6185,-0.303978 -1.04246,-1.760031 -1.88265,-6.46577 -5.47234,-11.474483 -9.68526,-13.513914 -0.83161,-0.402577 -3.087948,-1.283045 -5.014078,-1.956607 -1.926145,-0.673562 -4.117716,-1.505239 -4.87017,-1.848179 -3.288534,-1.498777 -5.740356,-3.533957 -7.31567,-6.072478 z"
           style="fill:#a903a7;fill-opacity:1;stroke-width:0.203472"
           sodipodi:nodetypes="ssssssssssssssssssss" />
      </g>
    </g>
  </g>
</svg>

i will try out some experiments with this stuff again too.

Repetier · March 2022

Ok, I could reproduce the error in one case. The svg contains stuff preventing it from working. When you drag the file on the upload icon we fix these automatically. If you instead just paste the file into the text region these replacements do not happen. Not the icon is 300mm wide and with width included in svg tag it is shown with that size just reduced to first 30px or so which are empty, so int that case you won't see anything.

Solution when it happened to me was quite simple. Go back to web action, edit icon - this loading also triggers error fix. Hit ok and save action. Now icon should appear. At least it did for me.

For importing drag the file only to upload area and it will be fixed on import. Only pasting content will not do that. Will add an extra repair on "ok" press for next version in case other users try that way.

vmario89 · March 2022

i finally fixed it by just reediting all icons manually. removed transforms, adjusted viewports, changed the size, changed units to px, etc. etc. :-)

Viewport cuts away custom commands

Comments