Responsive www control and dashboard for Poppy (Ergo jr)

Hi all,

I am developping a responsive (i.e. adapted either to mobile and tablet or to computer screens) web front-end control/dashboard for my Poppy Ergo Jr.

Nowadays, the initial seed (that is fully functionnal) allows:

  • simply controling the motor positions of a poppy from a mobile or tablet (and of course a browser from a computer :stuck_out_tongue: )
  • Display a simple dashboard about some register values ‘of interest’.

Note as it discovers the configuration of the target robot, it will be applicable more widely(sic); but it may be not really nice/friendly usable with too many motors :woozy_face:.

Below some screenshots on mobile display:

And Dashboard on wide display (PC, tablet, etc…):

This project is available on github at the following URL (a quick install and build guide is provided):

Aim is to test the use of vue.js to develop quick front-end and I have to say that the poppy’s ecosystem is a really nice and fun sandbox for such projects. :hearts::hearts:,

N.

3 Likes

Hi @Nikolaos,

your project is very cute! :smiley:
I regret that ‘npm’ is not pre-installed on the robot’s raspberry … otherwise, we could have considered integrating it into the v2 version … :sweat:

1 Like

Hi,

Thanks for greetings, and pretty glad that it could be integrated :slight_smile:, or you “could have considered” to integrate it (me and my rusty english :slight_smile: )

What a pity because it does not require node at all in “production” (see explainations below).

Node is mandatory for both development and build steps.
As this last point produces a ‘static’ site in a folder (dist) which is a standalone site without any node.js dependencies/needs (vue tooling/webpack is really great), you just need to be able to serve it.

In the github repo, the paragraph about serving it uses node to keep a all-in-one tech approach (sic).

I had some doubt about it (due to some little parts of the poppy-robot-core) but I have performed a test on:

  • A computer without any nodejs installed,
  • Using nginx to serve the produced dist folder.

That works fine (and the same test could be done using any python package dedicated to such task.)

About integrating it, in case of :slight_smile: yes, it will be a great news even if I personnaly consider that some parts must be updated, especially if U would like to use with any kind of poppy robot:

  • In poppy core
    • the code is done to manage a homogeneous set of motors (no notion of kind of motors and mainly connected to the XL-320 due to LED register access), extend it to any will be really simple and immediate (querying the ‘model’ register),
    • a rpm is set for XL-320 (but not nowaday used in poppy-ui).
  • In poppy ui:
    • Next to the previous point, to query or not about le led register i.e. to avoid any timeout in querying register,
    • About UX:,
      • In order to extend to any kind of robots, to add some filtering to show/hide motors, group them by aliases, etc… As the components of the UI aka its basic bricks, take as input a motor id or a set of motor ids, it does not question about the base of the code,
    • I (often enough) lost connection to my ergo, => an indicator about connection state should be added
    • Probably some (a lot of?) details about responsiveness, branding,…,
    • Test it on many browsers/OS: I use it with safari and firefox on macOs, iOS and windows10 devices without any problem; it does not only works with the lastest release of edge based on chronium,
    • Others…

Feel free to contact me by mp about it :slight_smile:
N.