Responsive www control and dashboard for Poppy (Ergo jr)

Community projects
, ,
1

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 monitoring a poppy from a mobile or a tablet (and of course a browser from a computer :stuck_out_tongue: )
  • Setting a bunch of registers (‘compliant’, ‘moving_speed’, ‘goal_position’ and ‘led’).

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 wide display (PC, tablet, etc…):

On mobile devices

dashboard-mobile

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
2

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:

2 Likes
4

Hi,

This project have updated a bite in order to improve the user’s XP. Among other things:

  • The monitoring and the control panels has been merged into a single page,
  • A bunch of register (aka the few I use :crazy_face:) can now be modified via the app for each motor:
    • ‘compliant’,
    • ‘moving_speed’,
    • ‘goal_position’,
    • At last, the ‘led’ register.
  • And many other small changes.

Note I have done a quick video (in french) demonstrating its use (monitoring/controling the ergo) on both mobile phone and computer.

N.

1 Like
5

Oh my mistake,

It does not require node.js/npm at all in production.

Download the latest build available on this page and unzip it.

Then just serve it.

As example using python:

python -u -m http.server 5000 --directory dist
Serving HTTP on :: port 5000 (http://[::]:5000/) ...

N.

1 Like