OctoVue - alternative UI in Vue.js

Showcase
1

Hi all,

wanted to share my latest project with you, maybe you like it or find it useful.
I just started to create an alternative webUI for octoprint in Vue.js with bulma css framework.

Communication with octoprint is done via rest api and UI-updates mainly via octoprint's socks-proxy.

I posted it on github at https://github.com/shodushi/octovue
with some screenshots and installation instructions.

Can be installed on any computer / Pi in your network. (I use it on the same OdroidC2 as my OctoPrint installation)

Let me know what you think :slight_smile:

4 Likes
2

Looks nice. Did you consider wrapping it using the UIPlugin mixin which would allow installation directly from OctoPrint?

3

Does this require NodeJS? (The npm is often part of that installation.) If so, then your installation instructions would need to go over that with the user.

Install NodeJS, for example:

  1. mkdir ~/tmp && cd ~/tmp
  2. wget https://nodejs.org/dist/v8.9.3/node-v8.9.3-linux-armv7l.tar.xz
  3. tar -xvf node-v8.9.3-linux-armv7l.tar.xz
  4. cd node-v8.9.3-linux-armv7l
  5. sudo cp -R * /usr/local/
  6. node --version && npm --version
  7. cd ~ && rm -Rf ~/tmp

The command serve -s -l 80 dist sounds like it's going to try to serve up the interface on port 80. So first, haproxy on an OctoPi installation already binds to that port. Second, in order for serve to bind to a protected port less than 1028 then it needs to either be run with sudo or there needs to be something that allows the pi user to serve up that port or some trick like...

sudo setcap 'cap_net_bind_service=+ep' `which node`
1 Like
4

Thank you, no I did not consider it. Honestly I wasn't aware of this option. But I will check if it is possible to somehow wrap Vue.js inside the octoprint jinja templating.

5

Yes it requires NodeJS. I will adapt the installation instructions accordingly. Thank you very much for your suggestions :slight_smile:

6

I started writing some vue components for octoprint dashboards today.
The actual is a bad one.

All will be Vue + SVG as a single file component.
I mainly use nuxt for coding vue sites


nearly finished only the emit functions :smiley: ... and the z axis