Trying to do things.

Category: Rack (Page 2 of 2)

SVG viewBox Hell!

Ok. I’ve been playing with the code of rack to add the servers to be drag and dropped. My idea is have a parent SVG with many childs. One for the “”paper””, one for the controls, one for the elements to be dragged.

But something strange happen when I add a SVG child that have a viewBox inside a Svg with a viewBox too. I have to part from a clear code in codepen http://codepen.io/manolopm/pen/Hzvfd to try understand the problem.

In the codepen, we can see the main SVG (canvas) with the childs (paper and controls). Canvas has a viewBox set to “0 0 2800 2715” (it could be any value I choose this for trying).

  • Control is an svg child in 100,10 coordinates. Also have a 200×200 box inside.
  • Paper is an svg child in 400,10 coordinates and the size is 200×200. Inside have a box of 50×50 but because It has a viewBox “0 0 50 50” seems the same size. The container size is 200×200 and the box of 50×50 its scaled to fill the 200×200 container.

Now that seems that I understand how it works I’ll try to change rack to adjust as It should.

 

Improving the interface

I’ve been spending some time reading about polymer, which seems to me a really interesting project.  And this is the reason because I didn’t update in a few days.

Today I wan’t to make some drag and drop now,  but today I feel a little bit weak to fight with that so I’ve tried to improve the ui. This is not a big step forward, but I show the experiment to some friends and they appointment a few things that I should change. There is a lot of work to do with the ui, but this points need to be solved so:

  1. I don’t know what are the buttons for. So I’ve drawn the icons in code using snap. Why do that if there some greats svg with the icons ready? because I wan’t to try to do that in code.
  2. I don’t know when I’m pressing the button. First I thing, just look at your hand, but it was an opportunity to experiment with mouse events so… red while you’re pressing.
  3. If I hold the button it should keep moving. Ok, fixed with mousedown and mouseup event.

Controlling the viewBox from another SVG

As I said, I create two svg under the main svg file. One with the content I want to control, that has a viewBox defined, the other one contains 6 rects that have an javascript function to change the viewBox of the first one.

Once again the result is in  https://www.graph-ic.org/svg-experiments/rack/index.html

I have put all the code into a git repository in graph-ic Gitlab. The url of the project is: https://gitlab.graph-ic.org/manolopm/rack-svg