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.


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.

How do you use Berlin crosswalk signal boxes?

I see these all around town and nobody seems to know how to use them – even my German colleagues. We’re engineers, so we feel pretty stupid and inadequate around them…

The majority of people I’ve seen either ignore them or look at them confusedly and try to slap the three black dots – like a cat to a printer – to no avail.

Obviously there are a lot of different kinds, ranging from old and busted to some having mini LCD screens – but only a few are actually press-able buttons.

What’s the deal with them? How do you use them?

Berlin Crosswalk Signal Button

Best Practice combine or separate similar dialog boxes like note and calendar event

My question is perhaps subjective so apologies in advance but this is a real dilemma I’m having.

I have a web based customer management program that allows users to add information about a customer, including notes, set calendar events (tasks), create contact log entries, and to create always-visible sticky notes.

Now these records are incredibly similar: notes have a title, body, created by, and created on fields. Sticky notes are made by checking off a ‘sticky-note’ check box. Contact log entries are just notes that document customer communication, for example, ‘Called John to promote new v 2.0 release”, and tasks are notes with an alarm date, or maybe a start and end date, sutable for plotting on a calendar.

It would be an easy matter to combine all four types into a single dialog with a radio button or toggle button array at top allowing the user to select a Note, Contact, Sticky, or Task. If I did this I could have one ‘super’ button that opens the dialog, say, “New Note/Task” that would allow the creation of any of the types. Alternately I could have four buttons, “New Note”, “New Contact”, “New Sticky”, “New Task” that would open the dialog with the correct radio pre-selected.

Or I could have four separate dialogs each devoted to it’s purpose.

Or some hybrid, like Note, Sticky, and Contact on one and a different dialog for Tasks, then have either one ‘super’ new-note button and a new-task button.

I can argue an advantage of combining all into one multi-function dialog in that the user could switch between types, if they added a note about a meeting they could later change it to a calendar task or a sticky note by editing the note.

Any thoughts appreciated!

How do you condense list of check boxes?

I have a web part that contains about 40+ check boxes. As you can probably understand, it requires a lot of scrolling to view all the selections. Is it possible to make, say, 4 columns of 10 selections to condense the page a bit?

I know you can make a custom list and then multi-select from a lookup but then I run into a problem during spreadsheet export where each selection is preceded by a ‘#’ and a number.

Rigid boxes for snowboard and ski for air travel

I’ll be flying with Air Canada this winter (domestic flight in Canada) for a ski trip.

From their website, we can see

Snowboards must be packed in a rigid and/or hard-shell case specifically designed for shipping

Does it mean we are not allowed to have ski / snowboard in a soft bag?

Note: we will be two persons, one snowboard, one pair of skis and the boots

Align 2 Boxes Verticaly With An Image Between

I am trying to align 3 boxes and 2 images.

2 boxes vertically with there is an img between

3rd box standing right of them with an arrow img pointing it like this:

This is what i tried:


.cont1 {   display:flex;   flex-direction:row; }  .box{   margin:0 auto;    width: 80px;   height: 80px;   background: #8C8C8C; border: solid 3px #8B0000; }    .burning{     background-image : url("");     width:...
Code (markup):

Align 2 Boxes Verticaly With An Image Between