[CFC] Developing a WebApp for Poppy's creatures

Context

A problem we want to solve is to make easy for anyone to work on robotic. We think especially of non-uber-geeky people such as artists, social scientists and young students. Therefore a major part of our work is to reduce the barrier for newcomers and made simple that should be simple but is not …

Poppy’s creature are controlled by pypot (Python) embedded on tiny linux computer. For Poppy Humanoid, we have integrated an Odroid U3, and for Poppy Ergo, we are thinking about a Raspberry Pi. It is a great feature to have embedded control, it avoids direct USB connection and multi-OS installation troubles. Yet the access to the robot become slightly more complex because there is now a network between your computer and the robot your are trying to play (or sometimes work) with.

There is no screen, keyboard and mouse. While being very powerful, dealing with user groups, terminal, SSH and emacs/vi is not that I consider as an “simple and accessible” tool to control a robot.

Internet browser are used by everyone on daily basis and web techno are cross-platform. Thus we would like to run a server directly on the robot, which generates a web interface and gives access to the main user needs.

NB: Actually, we already did one on Poppy Humanoid to simplify the access of basic behaviors for demonstration purposes. Yet it is Quick’n’Dirty and not easily extendable for future needs

As member of the Flowers team (research laboratory), building such interface is clearly out of our technological confort zone, both for the server and the UX. Yet we have a more or less clear idea about what it is needed, at least as a first instance, to increase the relevance and the accessibility of Poppy’s creature in educational and artistic contexts.

I open this topic to kickoff this project, share our current ideas and open the development, right from the beginning, with wild developers

Webapp

We need to develop an interface which gives access to several services. A challenge is to make this interface simple and intuitive on the UX side while robust and easily extendable on the server side so a developper can add new app without breaking anything.

Apps

As a first instance, I have listed some needs group by potential apps a Poppy user could have while working with a creature:

  • Admin:

  • reboot, halt the embedded computer

  • configure network connexion

  • update the software

  • run linux command

  • Demo:

  • starting/stopping the robot

  • run attached primitives

  • record and store demonstrated movement

  • Notebook: Integrate and run ipython notbook to facilitate the python development directly on the robot.

  • Snap: Integrate and run Snap so we can control creature with this amazing visual programming tool.

  • Monitoring: Display all sensors and internal values such as position, load, temperature, camera,… but also behavior actions to facilitate the investigation when the actual result is not expected …

  • Logs: Navigate through the robot and linux logs

  • Help: Display some tutorial and the Poppy forum to obtain support.

Of course this list could be appended with apps we did not yet think about…

Interface

Like the apps, here is a first sketch of the potential web UX :

  • Status: Gives basic information such as the robot state (on/off), the current ip address and so on …
  • Apps: The list of all apps available on the robot.
  • Body: the zone where we interact with the selected app
  • Notification: a zone where we can push information such as “Alert! the knee motor is hot as hell !”

Technologies

As I said previously, we are not very skilled to develop this kind of software. Yet from the first exploration over google/stackoverflow I made, there are some technologies that seem adapted:

Server: Django ?

Django is a very powerful python framework to create dynamic website, also it is very well documented.
For this project it has the great feature of managing apps as module we can add or not to our web interface. Therefore it could be possible to add new apps afterward and it should be rather straightforward… It would permit also to modularize the interface so developers can focus their contributions on that they are interested in (e.g. the monitoring of data, the admin panel, … )

**Yet this first choice is also driven by the technology we know (python) rather than other relevant technology such as PHP ( :confounded:), Node.js or Ruby on rails…¨¨

UX: Bootstrap 3 ?

We love bootstrap because it allows for n00b like us creating simple and beautiful web pages.
For this project, there are Bootstrap Admin templates with all UI needed:

For example: AdminLTE

Bootstrap has also very nice charts which can be adapted for monitoring all the data in the robot:

Contribute

When the first design and technology choices will be done, we will open a github repository so interested developers can freely fork and pull-request their work.

3 Likes

While browsing on internet troll discussions, I discovered our Discourse forum, which is a great webapp, is based on Ember.js.

Maybe another possible technology to build the Poppy webapp.

1 Like

As discussed with people from Inria, I will work on this project.

I’m currently discovering Django, have a very, very short experience of bootstrap and will try to use both. I will also post a design prototype here as soon as possible.

2 Likes

BTW the critical point is not Bootstrap (it is just to have a nice interface) but the actual server behind i.e. Django and friends.

I finally managed to get my django app served by my apache server (apart from some static files…)

I also did a quick preview of what I expect for version 1. No link to the robot yet, this is pure html+css. No bootstrap yet, but it will be easily convertible when everything else is ready.

Remarks welcome.

For me the square “Motors scan” and “quick control” are more important than the others. Upgrade, settings and network config could be smaller (have less surface on the screen). I am also interested to have a “sensor board”, to see for example : position, speed, load, torque etc…

It is just my personal remarks with my little experiments of poppy :blush: But if it could give you some idea…

Nice idea, I advise to add the maximal motor temperature to avoid motor burn and the maximal voltage to monitor battery load (if any battery) above 9.9V. It is just two numbers very useful.

It seems that @Theo has already worked with Django, it can help you to bootstrap the development and make it operationnal quickly.

@manon develop a web app management system you should adapt your interface as you want!

Hi,

In our FabLab, we have some users working on a web interface to monitor Poppy using the API (all in html + js ) :

It looks like that :

To be able to do that, they hacked a bit pypot (all is explained in the github).

Have fun!

8 Likes

Really nice ! I will read this and take (very close) inspiration from it !

What is your licence for this ?

I had my django webapp running on my computer (ubuntu + apache2 server) and I assumed it would work the same on Poppy Humanoid. It didn’t and I sent time wondering why until I discovered that there is a virtualenv. But now wsgi-mod (the stuff that links django to apache) runs on python version and django another.

Is the vistual env really needed ?

Needed… not really. It’s just a way to make sure that the python environment we are using come with exactly what we need and that we can better control the update of the different modules.

I guess we could also setup everything using the system python. In your case, you could also install the mod_wsgi using the pyenv python and it should work.

I guess we could also setup everything using the system python. In your
case, you could also install the mod_wsgi using the pyenv python and it
should work.

I will try that…

OK, I tried that, had to recompile mod_wsgi and now it tells me Python has to be recompiled.

I was also advised to try uWSGI, which easily integrate with django and provides a server. I have yet to test everything, but does anyone object if I replace the Apache server by a uwsgi one ?

Edit: well, it seems I can have uWSGI and Apache… I keep you posted.

@Manon Look at that doc, I think it’s exactly what you need.

Sunday is the best day to explore new web tools isn’t it ?

Today’s best tool is Polymer (another google open source framework which is not a framework) dedicated to the building of web apps.

The best way to understand what Polymer is, is to watch the Goole I/O conf’ they did:

In addition, it integrates the material design (also done by Google) which is thought for creating intuitive user interfaces. Even if you do not like this design, I really recommend to look at the material documentation to see what is in a designer’s head when he create an interface. There are a lot of Do and Don’t which are really instructive for us.

Here’s a good (yet too corporate) video explaining what’s behind material design:

Coming back to Polymer, it looks like quite powerful and seems thought for modularity and off-line apps which appears very important for the way we want to handle apps and community work.
It seems also pretty easy to integrate a mix of content which may be interesting for education application where we want mix of video tutorial, coding stuff, data visualisation, webGL simulation and so on.

As example, there are (open source) apps we maybe would like to have :

1 Like

Based on poppy-monitor and on some work by @Theo, I did a simple yet quite useful webapp:

Install file has been tested ‘a bit’ so be careful. Feedback welcome.

Polymer (and the Web Components) is a very interesting framework for composing web apps. The little I played with the framework gave me a great insight of its capabilities, especially due to the encapsulation of the Components.

I am still wondering about the upcoming browser compatibility of the framework. Currently, it’s limited, and I imagine it ought to become widely supported.

Edit : Currently, the support is natively limited, but the Polyfill library helps bridging the gap for all Evergreen browsers. The exception exists for Internet Explorer, which is correctly supported since version 11. That means no support for IE in Windows before Windows 7.

1 Like