Online Pneumatic Simulator

[Picuino]

Hello everyone, and happy holidays in advance.

These days I am programming a pneumatic circuit simulator for my website in 3500 lines of pure HTML and JavaScript without libraries (as recommended here).


https://www.picuino.com/neumatic/

Tutorial
(Automatic translation into English from the original in Spanish. Corrections are welcomed!)


Now that I have managed to internationalise it (for now only in English and Spanish), I would like to receive feedback on the app.
The programming style could be improved; at some point I will have to refactor and eliminate the global variables, but for now I am focused on improving the application. I will have time to refactor later.

The application is embedded in a single HTML document because I want it to be autonomous. Anyone should be able to run it from their hard drive, without needing the internet.

Thank you in advance for your comments.

Edit:
The editing system is a bit unusual, but it allows you to edit diagrams from your smartphone, without a mouse or keyboard, just clicking with your finger and without dragging anything.

[Picuino]

I have already released a significantly improved version 2.0.
Does anyone know of any automation forums or technology teacher forums where I could promote the app?

[Picuino]

A technical question: How do you program tests for applications with graphical interfaces? Every time I make changes, I have to manually retest everything to make sure it works properly. I've already overlooked some errors in some tests, and on the other hand, testing is very tedious and time-consuming.

Is there a solution to this problem?

[golden_labels]

Thanks, great work!

I’d make manually operated valves to be activated by clicking at any place on them. It’s not instantly clear we have to point to the element on the left. I’m aware that may be more obvious to engineers in the field, but not to a casual user.

I do not know any reasonable way to do automatic tests on GUI. Every approach I’ve seen during 13 years of my career and 10 years following it is… trash. Great promises, little real effects, and — most notably — a lot of effort which in the end nobody cares to undertake. In the end, if the GUI part changes people just blindly accept the outputs as “the new correct,” because the new code is the only thing that can generate reference values in the first place.

The best approach I know is to separate as much as possible into non-GUI code. Then treat the GUI as a thin client that performs only basic operations. Stuff you can easily verify visually and is unlikely to change. This way you can test and mock the logic as much as you wish, including a lot of drawing logic, record and verify calls to the GUI part, without caring much about the visual part.

[Picuino]

Thank you for your reply.

I have already implemented manual valves that are activated by clicking on the body.

If there is no easy solution for automated testing, I will have to continue testing manually. Fortunately, it is not a very extensive application.

[coppercone2]

I could have made use of this many years ago, even if only for photo making, instead of making my own diagrams for simple things, thankfully no more ( I hate how noisy all those pneumatics are), I had to make the diagrams in visio.


Made me laugh because we found a leaking airline and no one wanted to do anything about it, sweep it back under the rug sir. 

water and electrical 'leaks' get the fire department. Pneumatic leak gets "ah someone else will take care of it one day"


What is next, hydraulics one? I bet people would use it, probobly not for simulation, but just for making diagrams. I am almost sure of it. There was no good options a while back. No one wants to do it in visio (horrid !~)

[Picuino]

I also have a library in KiCad with many more symbols, so I can easily draw diagrams without being able to simulate them.

The symbols are in Spanish (I don't have a translated version at the moment).

[Picuino]

Now I have a strange problem that seems impossible to solve.

Sometimes I draw black lines and other times red lines.
I am sure that the context colour is red ( ctx.strokeStyle = 'red'; ) but the line is drawn in black. And this is random. Some valves yes and others no.

I have asked several AIs and they cannot find the solution.

I am completely stuck with this problem.

For example, in this diagram, when the valve is activated, you see the red arrow with the black tip:
www.picuino.com/neumatic/index2.html?loadFile=single-22.txt
However, this works fine in other diagrams.

The code for draw an arrow is simple:

Code: [Select]

  drawArrow(ctx, init_x, init_y, end_x, end_y, color=defaultColor) {
    const arrowHeadSize = 8;
    const arrowAngle = Math.PI/10;
    const angle = Math.atan2(end_y - init_y, end_x - init_x);

    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = color;
    ctx.fillStyle = color;

    // Body line
    ctx.beginPath();
    ctx.moveTo(init_x, init_y);
    ctx.lineTo(end_x - arrowHeadSize * Math.cos(angle),
               end_y - arrowHeadSize * Math.sin(angle));
    ctx.stroke();

    // Arrow
    ctx.beginPath();
    ctx.moveTo(end_x, end_y);
    ctx.lineTo(end_x - arrowHeadSize * Math.cos(angle - arrowAngle),
               end_y - arrowHeadSize * Math.sin(angle - arrowAngle));
    ctx.lineTo(end_x - arrowHeadSize * Math.cos(angle + arrowAngle),
               end_y - arrowHeadSize * Math.sin(angle + arrowAngle));
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }

[Picuino]

It's already been solved:

Every stroke must begin with ctx.beginPath(); (one was missing)

[negativ3]

Very nice and it is very beneficial that it simulates pressure, not just digital states.
I think it also applies to hydraulics, not just pneumatics.

[coppercone2]

 Oh it does, the symbols are just different. I thought it might get more use if it has symbols for both (i.e. for maintenance engineers)

[Picuino]

The problem is that the hydraulic symbols and their simulation system are completely different. I would have to write another program almost from scratch. For now, it's not on my agenda.

The next thing I'd like to do is a process control simulator. A simulator with open-loop control, close-loop control, PID, on-off control with hysteresis, with plants to control such as oven, house heating, etc.

[coppercone2]

oh right, because you don't have to worry about a return path for pneumatic, I forgot about that part. maybe because it was always leaking anyway 

what a shame if I forgot that and drowned my co workers (intro to resident evil movie #1) 

[Picuino]

The current simulation is completely conservative with the amount of air. In fact, this is one of the points that has given me the most trouble and programming time. At first, I started programming the simulation equations based on pressure, but pressure is not conservative. After seeing strange behaviour in the cylinders on some occasions, I came to the conclusion that I should simulate by air mass and calculate pressure as a secondary variable. This way, all the air that enters the circuit remains inside it until it exits through an exhaust.
In this sense, it is very similar to a hydraulic circuit. The problem is that hydraulic circuits are not compressible (or at least very little), and this completely changes the equations and the simulation system.

[negativ3]

Ideally, the return line in hydraulics should be zero resistance.

[Picuino]

I have changed the colour of the pressure to blue, which is more in line with the standard. Does that look okay?

[coppercone2]

I think the blue and black looks horrible on contrast but I have nothing to do with the standards and don't know them.

Personally I think it should be a animation that shows that its compressed gas that wants to get out. Kind of like TV-static. I think that would be cool and intuitive that those lines are 'active'. Maybe the pipes should even 'rumble' when the pressure is very high flow is scary 

then people would naturally think it might be good to put that line in a enclosure

[Picuino]

It's an idea I've had for a long time, but I have doubts about its usefulness in a classroom with 15 computers making noise and scaring everyone.

In addition, browsers block sound by default unless it is generated in response to a user 'gesture' or 'click'.

[coppercone2]

oh no I meant like that they shake on the screen I did not think of audio lol

[Picuino]

That would be a very interesting 4D simulation. Unfortunately, it's beyond my budget  .

[Picuino]

On the other hand, I am going to end the program. For now, I am only going to focus on correcting errors in it.

A program like this, without a manual or tutorial, is useless. Therefore, now it's time to do the entire practical tutorial and explanations on pneumatic circuits to fill at least 10 hours of class time.
It's a more boring part than programming, but necessary. As soon as I have it written in Spanish and translated into English, I'll post it here in case anyone is interested.
(This isn't the right forum for this, but it's the one I know and usually visit).

[Infraviolet]

Picuino, if changing the colour in the software is easy for you, don't worry about people's opinions of what the "right" colour is. Just put a checkbox or slider in to the interface so users can swap between a bunch of common colours as they see fit.

Also, the point about hydraulic simulation... if you are able to change the value in the sim which shows how difficult a fluid is to compress then all you need to do is set it to a very large or very small (depending on the type of units used) value to reflect an almost incompressible fluid. Might not be as computationally efficient for hydraulic sims as a purpose built one, but as a quick adaptation to an existing sim it should be perfectly usable.

[Picuino]

That is a very good idea and easy to implement. But users are overrated. Blue is a good standard. If somebody wants, the code is open-source ;-)

EDIT:

https://github.com/picuino/neumatic/
This is the function:

Code: [Select]

  colorPressure(pressure, background = 0) {
    if (background === 0) {
      let cp = 32 + Math.round(223 * Math.sqrt((pressure - airPressure) / (compressorPressure - airPressure)));
      return 'rgb(' + 0 + ',' + 0 + ',' + cp + ')';
    }
    else {
      let cp = 255 - Math.round(192 * ((pressure - airPressure) / (compressorPressure - airPressure)));
      return 'rgb(' + cp + ',' + cp + ',' + 255 + ')';
    }
  }
The colour is a range of shades that depends on whether they start from black (pipes, etc.) or white (cylinders, AND valve, etc.), which attempts to avoid darker shades that are barely distinguishable. It is not easy to change this to any colour.

[Picuino]

Making the hydraulic version would be really complex. This app has taken me more than 30 hours of work, and I don't think the hydraulic version would take me less than another 20 hours. I'm on holiday now and need to disconnect. Besides, I'm more interested right now in making a simulator for control theory: PID, closed loops, etc.