Welcome! Log In Create A New Profile

Advanced

TouchUI for OctoPrint (unleash those touchscreen and your mobile)

Posted by DragoslaV 
TouchUI for OctoPrint (unleash those touchscreen and your mobile)
October 17, 2015 09:42AM
Introducing a new plugin for OctoPrint that will transforms the entire OctoPrint layout into a Touch/Mobile friendly interface with all features intact and down to the smallest resolutions, possible.
The philosophy is to keep other clients intact of the interface, so once you active the plugin on a device, only that device will show the TouchUI.



Some special features:
  1. Mouse events will mimic touch (for those TFT touchscreens)
  2. A virtual keyboard (also for those TFT touchscreens)
  3. Fullscreen mode (will be asked for on first startup)

Some fixed hiccups for touch use:
  1. Bigger buttons
  2. Notifications are bigger and directly close-able
  3. Modals appear from left and are not fixed.
  4. Overhauled the filelist
  5. Responsive layout (not adaptive)

Okay, how do install this?
On your octoprint, open "Settings > Plugin Manager > Get more", then TouchUI should be present in the list, click on install next to it. (you might need to refresh the list if you don't see it)

How do I active the interface
Go to the browser and navigate to your octoprint location as normal but add '#touch' behind it, such as "http://myprinter.local/#touch"

Alternatively you can open 'User Settings > TouchUI' and activate it from there.

And my Touchscreen?
  1. Make sure you boot to Desktop
  2. Autostart OctoPrint
  3. run sudo apt-get install iceweasel
  4. run sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
  5. Insert @iceweasel "http://localhost:5000/#touch" to the list
  6. Now press Ctrl+X, then Y and enter to save the changes
  7. Open Iceweavel
  8. Type in about:config in the address field and hit enter. Now find the browser.sessionstore.resume_from_crash line and double click to change it to false.
  9. Go into fullscreen mode
  10. Reboot and iceweavel should connect directly and in fullscreen

More project information: [github.com]
A video: [www.youtube.com] (notice some of the layout bugs are solved)
Sorry, only registered users may post in this forum.

Click here to login