Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Various issues with TouchUI #418

Closed
spanzetta opened this issue Aug 5, 2020 · 43 comments
Closed

Various issues with TouchUI #418

spanzetta opened this issue Aug 5, 2020 · 43 comments

Comments

@spanzetta
Copy link

  1. Menu icon missing for
  • Octolapse (plugin ver 0.4.0)
  • Print Job History (plugin ver 1.5.0)
  • Printer notification (new from Octoprint 1.4.1)
    See screenshot and pls compare with the full interface screenshot also attached
    It seems there is one more menu entry (named "Attention!") which should not exists..
  1. No Confirm button also in Full Screen Mode (Touch UI specific switch) - see screenshot
    it happens with both:
  • Internet Samsung 12.1.1.36 (latest)
  • Chrome 84.0.4147.111 (latest)
    Smartphone is Samsung ZFlip (Screen A/R = 22:9) with Android 10 - OneUI 2.1
    The same problem happens on Samsung A5 2017 (standard 16:9 screen)
  1. Overlay issue with Octolapse tab.. menu are covered by the picture (it's not a video .. it's a picture)
    see screenshot

  2. Wrong formatting for Temperature - see screenshot

Pls note that problems n #1 and #2 was NOT happening with previous Octoprint 1.4.0...
These problems started with 1.4.1

Problem n. #3 and #4 was happening also with 1.4.0

Waiting your comments

Thanks

1 - Menu icons missing

full interface

2 - No Confirm button also in FullScreen mode

3 - Overlay issue with Octolapse

4 - wrong formatting

@LarsAmplatzer
Copy link

I have the same issue with the "stop print" message box. Worked fine until the update of octoprint (now 1.4.1) and Touch-UI
IMG_20200806_120355_2
.

@spanzetta
Copy link
Author

Thanks for the confirm..
I really hope that the author will fix all those issues soon..
This plugin is really GREAT .. but if it works bad.. it becomes useless ..
Let's wait..

@cp2004
Copy link

cp2004 commented Aug 6, 2020

I think your issue with the icons for plugins is a tricky one. There are 242 plugins registered in the repository, plus probably many more that aren't. I think it is hard for this plugin to have an icon for each of them. More advanced feature but maybe allowing users to choose an icon, like themify does. So far, it is only a handful that have been manually added.

@spanzetta
Copy link
Author

I think your issue with the icons for plugins is a tricky one. There are 242 plugins registered in the repository, plus probably many more that aren't. I think it is hard for this plugin to have an icon for each of them. More advanced feature but maybe allowing users to choose an icon, like themify does. So far, it is only a handful that have been manually added.

ok but with previous 1.4.0 there wasn't this problem

@bolsoncerrado
Copy link

I also have a weird issue of icons overlapping with the folder icons on an Hyperpixel 4 screen plus the missing CONFIRM button upon, for example, shutdown system.

20200807_112530
20200807_112512

@devildant
Copy link

i add another similar issue.
there is a general problem with the scroll bars of modals, like settings.
image

image

@devildant
Copy link

devildant commented Aug 7, 2020

maybe a short fix :

<style>
#touch body .modal-scrollable {
    height:85vh!important;
}
    #touch body .modal-scrollable .modal .modal-header span.hidden .show-dropdown {
        overflow:auto!important;
    }
</style>

@devildant
Copy link

for this pb
image

plugin developers can easily correct the problem
example with my plugin shutdown printer:
css :

#touch body #tabs #sidebar_plugin_shutdownprinter_wrapper_link a:before, #touch body #navbar #all_touchui_settings #sidebar_plugin_shutdownprinter_wrapper_link a:before,#touch body #tabs #sidebar_plugin_shutdownprinter_wrapper_link2 a:before, #touch body #navbar #all_touchui_settings #sidebar_plugin_shutdownprinter_wrapper_link2 a:before {
    content: "\f011";
}

@spanzetta
Copy link
Author

and the "attention" one? It seems a problem of this plugin.. started after the update to 1.4.1 (before it wasn't appearing)

@devildant
Copy link

devildant commented Aug 7, 2020

it's a plugin : https://github.com/OctoPrint/OctoPrint-FirmwareCheck
but in original interface the sidebar is disable but with with touchui the side bar is show

@spanzetta
Copy link
Author

ah ok.. thanks

what about all the other issues (n. 2, 3 and 4 in my original report at beginning of this thread)?

Thanks

@devildant
Copy link

i add another bug
image

css fix (maybe):

#touch body #files_wrapper #files .gcode_files .entry .btn.toggleAdditionalData {
    left: calc(100vw - 59px)!important;
}


#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:first-child {
    right: 120px!important;
}

#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:last-child {
    right: 54px!important;
}

@devildant
Copy link

and another :
image
fix css:

#touch body .dropdown-menu:before {
    right: 45px!important;
}

@devildant
Copy link

devildant commented Aug 8, 2020

Here is a little CSS to temporarily fix some problems.
while waiting for a real fix from @BillyBlaze , which will be cleaner than mine :).

/* short fix touch ui */
/* for fix modal dimension (button cancel save..) */
#touch body .modal-scrollable {
    height:calc(100vh - 10px)!important;
}

/* for fix icon in table list of files */
#touch body #files_wrapper #files .gcode_files .entry .btn.toggleAdditionalData {
    left: calc(100vw - 59px)!important;
}


#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:first-child {
    right: 120px!important;
}

#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:last-child {
    right: 54px!important;
}

/* for align arrow menu */
#touch body .dropdown-menu:before {
    right: 45px!important;
}
/* for show option apply preset temp in table temperature target */
#touch body #temperature-table .temperature_target > div > button .caret:after {
    content: "\f0d7";
    font-family: FontAwesome;
    font-size: 1.125rem;
    top: -7px;
    left: -6px;
    position: relative;
}
/* for align th title in table temperature target */
#touch body #temperature-table td, #temperature-table th {
    line-height: 34px!important;
}
/* for show completely Actual th in table temperature target  */
#touch body #temp>div:last-child table tr:first-child th {
    font-size: 0.9rem!important;
}

@knightmedz
Copy link

Here is a little CSS to temporarily fix some problems.
while waiting for a real fix from @BillyBlaze , which will be cleaner than mine :).

/* short fix touch ui */
/* for fix modal dimension (button cancel save..) */
#touch body .modal-scrollable {
    height:calc(100vh - 10px)!important;
}

/* for fix icon in table list of files */
#touch body #files_wrapper #files .gcode_files .entry .btn.toggleAdditionalData {
    left: calc(100vw - 59px)!important;
}


#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:first-child {
    right: 120px!important;
}

#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:last-child {
    right: 54px!important;
}

/* for align arrow menu */
#touch body .dropdown-menu:before {
    right: 45px!important;
}
/* for show option apply preset temp in table temperature target */
#touch body #temperature-table .temperature_target > div > button .caret:after {
    content: "\f0d7";
    font-family: FontAwesome;
    font-size: 1.125rem;
    top: -7px;
    left: -6px;
    position: relative;
}
/* for align th title in table temperature target */
#touch body #temperature-table td, #temperature-table th {
    line-height: 34px!important;
}
/* for show completely Actual th in table temperature target  */
#touch body #temp>div:last-child table tr:first-child th {
    font-size: 0.9rem!important;
}

Thanks for this. Can you please tell me how to apply these to my device? I'm using OctoPrint in my Raspberry Pi. Thanks.

@spanzetta
Copy link
Author

I am also interested to know how to apply these (Raspberry PI with Octoprint)
Thanks in advance

@devildant
Copy link

devildant commented Aug 9, 2020

connect to ssh to your pi with putty

run command for backup css
cp /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css touchui.css

run this command for add new line in file :
echo "" >> /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css

on your browser copy the css (ctrl + c)

/* short fix touch ui */
/* for fix modal dimension (button cancel save..) */
#touch body .modal-scrollable {
    height:calc(100vh - 10px)!important;
}

/* for fix icon in table list of files */
#touch body #files_wrapper #files .gcode_files .entry .btn.toggleAdditionalData {
    left: calc(100vw - 59px)!important;
}


#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:first-child {
    right: 120px!important;
}

#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:last-child {
    right: 54px!important;
}

/* for align arrow menu */
#touch body .dropdown-menu:before {
    right: 45px!important;
}
/* for show option apply preset temp in table temperature target */
#touch body #temperature-table .temperature_target > div > button .caret:after {
    content: "\f0d7";
    font-family: FontAwesome;
    font-size: 1.125rem;
    top: -7px;
    left: -6px;
    position: relative;
}
/* for align th title in table temperature target */
#touch body #temperature-table td, #temperature-table th {
    line-height: 34px!important;
}
/* for show completely Actual th in table temperature target  */
#touch body #temp>div:last-child table tr:first-child th {
    font-size: 0.9rem!important;
}

on putty run this cmd :
vi /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css

go end of file with shortcup
shift + G

exec keyboard cmd : i
exec mouse right click
exec keyboard cmd : escape
enter the command
:wq
and key enter

for rollback :
cp touchui.css /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css

normally it's work ^^ (for my part I insert this css in one of my personal plugin)

@spanzetta
Copy link
Author

spanzetta commented Aug 10, 2020

Many thanks..

Do you know if also the overlay issue (my issue n. 3 at beginning) can be caused by some css?
If not.. which can be the cause?

thanks

@asmagill
Copy link

Confirming above issues with update to 1.4.1, but also want to add that now when I "Send G-Ccode to printer host" from within PrusaSlicer, new items won't appear as available in the TouchUI file list until I restart TouchUI from its settings page. Prior to this update, they would appear in the list after a few seconds.

@BillyBlaze - should this be listed in a separate issue or is this grouped one ok?

@blankink65
Copy link

connect to ssh to your pi with putty

run command for backup css
cp /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css touchui.css

run this command for add new line in file :
echo "" >> /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css

on your browser copy the css (ctrl + c)

/* short fix touch ui */
/* for fix modal dimension (button cancel save..) */
#touch body .modal-scrollable {
    height:calc(100vh - 10px)!important;
}

/* for fix icon in table list of files */
#touch body #files_wrapper #files .gcode_files .entry .btn.toggleAdditionalData {
    left: calc(100vw - 59px)!important;
}


#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:first-child {
    right: 120px!important;
}

#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:last-child {
    right: 54px!important;
}

/* for align arrow menu */
#touch body .dropdown-menu:before {
    right: 45px!important;
}
/* for show option apply preset temp in table temperature target */
#touch body #temperature-table .temperature_target > div > button .caret:after {
    content: "\f0d7";
    font-family: FontAwesome;
    font-size: 1.125rem;
    top: -7px;
    left: -6px;
    position: relative;
}
/* for align th title in table temperature target */
#touch body #temperature-table td, #temperature-table th {
    line-height: 34px!important;
}
/* for show completely Actual th in table temperature target  */
#touch body #temp>div:last-child table tr:first-child th {
    font-size: 0.9rem!important;
}

on putty run this cmd :
vi /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css

go end of file with shortcup
shift + G

exec keyboard cmd : i
exec mouse right click
exec keyboard cmd : escape
enter the command
:wq
and key enter

for rollback :
cp touchui.css /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css

normally it's work ^^ (for my part I insert this css in one of my personal plugin)

This does fix the missing buttons on the confirmation dialog windows.

@devildant
Copy link

i made another css for fix bug with settings menu scroll

/* for fix scroll menu settings */
#touch body #special-dropdown-uni > div {
	overflow-y: auto!important;
}

@devildant
Copy link

full css :

/* short fix touch ui */
/* for fix modal dimension (button cancel save..) */
#touch body .modal-scrollable {
    height:calc(100vh - 10px)!important;
}

/* for fix icon in table list of files */
#touch body #files_wrapper #files .gcode_files .entry .btn.toggleAdditionalData {
    left: calc(100vw - 59px)!important;
}


#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:first-child {
    right: 120px!important;
}

#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:last-child {
    right: 54px!important;
}

/* for align arrow menu */
#touch body .dropdown-menu:before {
    right: 45px!important;
}
/* for show option apply preset temp in table temperature target */
#touch body #temperature-table .temperature_target > div > button .caret:after {
    content: "\f0d7";
    font-family: FontAwesome;
    font-size: 1.125rem;
    top: -7px;
    left: -6px;
    position: relative;
}
/* for align th title in table temperature target */
#touch body #temperature-table td, #temperature-table th {
    line-height: 34px!important;
}
/* for show completely Actual th in table temperature target  */
#touch body #temp>div:last-child table tr:first-child th {
    font-size: 0.9rem!important;
}

/* for fix scroll menu settings */
#touch body #special-dropdown-uni > div {
	overflow-y: auto!important;
}

still waiting for a better fix from @BillyBlaze

@spanzetta
Copy link
Author

pls note that issue #3 (Overlay issue with Octolapse tab.. menu are covered by the picture (it's not a video .. it's a picture)
see screenshot) is still there

@bolsoncerrado
Copy link

@BillyBlaze are you still with us? :)

@skarab22
Copy link

skarab22 commented Sep 8, 2020

connect to ssh to your pi with putty
run command for backup css
cp /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css touchui.css
run this command for add new line in file :
echo "" >> /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css
on your browser copy the css (ctrl + c)

/* short fix touch ui */
/* for fix modal dimension (button cancel save..) */
#touch body .modal-scrollable {
    height:calc(100vh - 10px)!important;
}

/* for fix icon in table list of files */
#touch body #files_wrapper #files .gcode_files .entry .btn.toggleAdditionalData {
    left: calc(100vw - 59px)!important;
}


#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:first-child {
    right: 120px!important;
}

#touch body #files_wrapper #files .gcode_files .entry div.action-buttons .btn:last-child {
    right: 54px!important;
}

/* for align arrow menu */
#touch body .dropdown-menu:before {
    right: 45px!important;
}
/* for show option apply preset temp in table temperature target */
#touch body #temperature-table .temperature_target > div > button .caret:after {
    content: "\f0d7";
    font-family: FontAwesome;
    font-size: 1.125rem;
    top: -7px;
    left: -6px;
    position: relative;
}
/* for align th title in table temperature target */
#touch body #temperature-table td, #temperature-table th {
    line-height: 34px!important;
}
/* for show completely Actual th in table temperature target  */
#touch body #temp>div:last-child table tr:first-child th {
    font-size: 0.9rem!important;
}

This does fix the missing buttons on the confirmation dialog windows.

Could you help me, I don't understand what you did after this line
echo "" >> /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css

Where do you insert the css code ?

I'm also lost with this

on putty run this cmd :
vi /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css
go end of file with shortcup
shift + G
exec keyboard cmd : i
exec mouse right click
exec keyboard cmd : escape
enter the command
:wq
and key enter
for rollback :
cp touchui.css /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css
normally it's work ^^ (for my part I insert this css in one of my personal plugin)

@gperrone71
Copy link

gperrone71 commented Sep 8, 2020

@skarab22 here what I did (I'm new to Linux and vi is not the easiest editor to work with)

  • follow the first two instructions (cp and echo commands)
  • use vi to open the file
  • I then used Shift + A (instead of G) to append at the bottom of file
  • copy from the message the text you need to append to the css file
  • right click in the ssh / putty window
  • use the escape char (in my case it is Ctrl + C) to ender command mode, and then :wq + Enter to save and quit

If everything worked fine, if you do:
cat /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css
you should see at the bottom of the file the lines you pasted.

Please note that in order for everything to work, I had to disable "enable customizations" from TouchUI settings and reboot. If something doesn't go as expected roll-back using
cp touchui.css /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css
and start from beginning.

Another suggestion I could give is to play a bit with vi with a dummy file (it worked for me).

Good luck (and thanks to everybody who contributed to this fix!)

@whitewytch
Copy link

If you don't know the vi command line editor... Just use Visual Studio Code, for a full graphical interface experience.

@gperrone71
Copy link

If you don't know the vi command line editor... Just use Visual Studio Code, for a full graphical interface experience.

Surely I'm a bit off-topic here, but how I can read the linux partition of the RPi card from Windows? Tried a couple of "adapters" but none of them actually worked...

@whitewytch
Copy link

You can't read the RPi files from Windoze it's a different type of filing system. Just install a Linux distro in Dual boot.

@skarab22
Copy link

skarab22 commented Sep 9, 2020

@skarab22 here what I did (I'm new to Linux and vi is not the easiest editor to work with)

  • follow the first two instructions (cp and echo commands)
  • use vi to open the file
  • I then used Shift + A (instead of G) to append at the bottom of file
  • copy from the message the text you need to append to the css file
  • right click in the ssh / putty window
  • use the escape char (in my case it is Ctrl + C) to ender command mode, and then :wq + Enter to save and quit

If everything worked fine, if you do:
cat /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css
you should see at the bottom of the file the lines you pasted.

Please note that in order for everything to work, I had to disable "enable customizations" from TouchUI settings and reboot. If something doesn't go as expected roll-back using
cp touchui.css /home/pi/oprint/lib/python2.7/site-packages/octoprint_touchui/static/css/touchui.css
and start from beginning.

Another suggestion I could give is to play a bit with vi with a dummy file (it worked for me).

Good luck (and thanks to everybody who contributed to this fix!)

It works fine without installing nothing ! Thanks for all !!!

BillyBlaze added a commit that referenced this issue Sep 9, 2020
The menu was overlapsed by OctoLapse and their aggressive z-index; therefor
make the z-index higher than OctoLapse

Fixes #418
@spanzetta
Copy link
Author

spanzetta commented Sep 9, 2020

anyone can confirm the issue #3 in my original bug report (beginning of this thread)?
3. Overlay issue with Octolapse tab.. menu are covered by the picture (it's not a video .. it's a picture)
see screenshot

Scroll at beginning to see screenshot..
Thanks

BillyBlaze added a commit that referenced this issue Sep 9, 2020
Fixes #418

🎨 Fix layout issues caused by plugins
@BillyBlaze
Copy link
Owner

Thanks all for reporting; and thanks for providing work-arounds. Next time I would suggest to upload a LESS file to your PI and use the "Custom file" option in the TouchUI settings.

@spanzetta; I can confirm the issue with OctoLapse and its fixed on the maintenance branch.

@spanzetta
Copy link
Author

Dear @BillyBlaze
thanks for you reply..
Are you saying that it's all fixed on the maintenance branch? Could you pls guide me how to install it?
Thanks a lot

BillyBlaze added a commit that referenced this issue Sep 9, 2020
Thanks to @skarab22 for providing fixes

Fixes #418
@BillyBlaze
Copy link
Owner

  1. Uninstall TouchUI
  2. Install TouchUI with the link:
    https://github.com/BillyBlaze/OctoPrint-TouchUI/archive/maintenance.zip

@BillyBlaze
Copy link
Owner

Some updates on the issues reporting here:

First by @spanzetta:

  1. Menu icon missing for:
    These plugins are official not supported (yet) so the missing icon is an indicator for this. I will not add them now.
  2. No Confirm button also in Full Screen Mode
    Fixed on maintenance branch
  3. Overlay issue with Octolapse tab
    Fixed on maintenance branch
  4. Wrong formatting for Temperature
    Fixed on maintenance branch

Secondly by @devildant (thanks for providing workarounds)

  1. Missing scroll bars of modals
    Fixed on maintenance branch
  2. Icons all over the place in files list
    Fixed on maintenance branch
  3. Arrow icon not aligned in center on dropdown-menu
    Fixed on maintenance branch
  4. Various styling fixes in the temperature table
    Fixed on maintenance branch

I will release this a.s.a.p.

@spanzetta
Copy link
Author

  1. Uninstall TouchUI
  2. Install TouchUI with the link:
    https://github.com/BillyBlaze/OctoPrint-TouchUI/archive/maintenance.zip

Many thanks!
Will do it now!

@BillyBlaze
Copy link
Owner

Bug fixes was released with 0.3.16

Thanks for the reports/workarounds

@devildant
Copy link

Hello, i update touchui, but all bug persist :(
i clear my cache but no change

@devildant
Copy link

impossible scroll :
image

button confirm cancel not accessible :
image

actual and target not align and button for set temp (hotend/bed) not visible
image

@devildant
Copy link

Ok after x uninstall/install it's ok

@rudyamid
Copy link

Looks like 0.3.16 fixed the missing cancel/OK buttons on the confirmation pages during shutdown, etc. Thanks!

@devildant
Copy link

devildant commented Sep 11, 2020

Looks like 0.3.16 fixed the missing cancel/OK buttons on the confirmation pages during shutdown, etc. Thanks!

yes yes, several uninstallation / installation we ended up going.
despite my attempt to delete cache on the browser side (mobile and desktop), I still had the old CSS, I can't explain it too much, but it's OK

@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked and limited conversation to collaborators Sep 26, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests