How to display a connected boxes with inputs and outputs in a smartphone?

Imagine the concept of a black box, that can have inputs and outputs.

A box can connect with other boxes. We have something like this:

enter image description here

Now imagine a smartphone. "Ok, this guy is crazy." You thought. And you are right.

I am having several problems conceiving an alternative representation for this kind of structures in a smartphone.

Let me give a concrete example: enter image description here

As you can see we have two boxes from the same type that provide each one a number. Those 2 numbers go into a box that sums and produces the sum. That sum is connected to a box that displays the number received.

There are two important types of boxes: Information providers and actions. Information providers usually start these diagrams and actions generally finish them.

It is important to know what type of block is being used and how blocks connect with each other. Another relevant fact is that new type of blocks can be created. Therefore, this structure is flexible and expansible.

EDIT:

Although I didn't come to a solution yet one thing I know for sure:

I need a system that allows the user to simplify the scene, grouping blocks. Still I have the problem on how to represent this. Is all information important?

Please be aware that I belive the user needs to see the "full picture" or at least what matters of that picture. The minimum I belive that is important is:

  • Know what is connected to what
  • What provides info and what is the final result
  • How the information flows between the boxes.
Tags: