Graphical orders mananager interfaces. How?

 

Hello Community!

i am very interesting in learn to code this kind of interfaces, somebody could give a north in how or what tools are used to develop something like this picture? no mean I want to do exactly that, but is amazing how fast and good look has

is it done complety with Canvas? is there a library that could helps?

Thanks in advance!

 
Facundo Laje:

Hello Community!

i am very interesting in learn to code this kind of interfaces, somebody could give a north in how or what tools are used to develop something like this picture? no mean I want to do exactly that, but is amazing how fast and good look has

is it done complety with Canvas? is there a library that could helps?

Thanks in advance!

It is yes with canvas. 

It is not as difficult as it seems .

  • you just have to be aware of where your graphics should be positioned when the chart changes or moves 
  • track mouse events over the "interactive" parts of the display
  • draw only when its needed

The first thing you can do which will "unlock" all you need for this is try and create a box which is drawn on a canvas on the chart and the user can move it.

Then you add text to it

That's the basic "hill" you need to climb 

 
Lorentzos Roussos #:

It is yes with canvas. 

It is not as difficult as it seems .

  • you just have to be aware of where your graphics should be positioned when the chart changes or moves 
  • track mouse events over the "interactive" parts of the display
  • draw only when its needed

The first thing you can do which will "unlock" all you need for this is try and create a box which is drawn on a canvas on the chart and the user can move it.

Then you add text to it

That's the basic "hill" you need to climb 

Thank you Lorenzos!
 
Lorentzos Roussos #:

It is yes with canvas. 

It is not as difficult as it seems .

  • you just have to be aware of where your graphics should be positioned when the chart changes or moves 
  • track mouse events over the "interactive" parts of the display
  • draw only when its needed

The first thing you can do which will "unlock" all you need for this is try and create a box which is drawn on a canvas on the chart and the user can move it.

Then you add text to it

That's the basic "hill" you need to climb 

Strange. For me it was much more harder than it seems :)
 
Andrey Barinov #:
Strange. For me it was much more harder than it seems :)

You built an entire terminal tho ... :P xD

 
Facundo Laje:

Hello Community!

i am very interesting in learn to code this kind of interfaces, somebody could give a north in how or what tools are used to develop something like this picture? no mean I want to do exactly that, but is amazing how fast and good look has

is it done complety with Canvas? is there a library that could helps?

Thanks in advance!

Hello, you should use functions, trend lines, etc

<ex4 files deleted>

 
Kourosh Davallou #:

Hello, you should use functions, trend lines, etc

<ex4 files deleted>

Please only attach the source code files.

Reason: