Graph-ic.org

Trying to do things.

Page 2 of 3

Going to live again

I’ve been on holiday about a month, and I tried to forget everything about IT.

I have a few days left yet to start working again but, it was time to try to do things with rack again.

Now I tried a different approach to cable management experiment. What I was trying was too hardcore, so I take a look to some library and I found interact.js. Probably, if somewhere I finish rack, will use a lot this library. Almost everything I have in my mind for the ux is covered with interact.

What I’ve done this time:

https://www.graph-ic.org/svg-experiments/interact/index.html

The same experiment like the old one for cable management, you can grab any final point of the quadratic bezier curve to any position and the cable goes along.

I’ve only one fixed point as middle component of the quadratic curve, I have to study the physic of the cables to make it move as it should.

This week.

This week I’ve been in jssummit. Is the second conference, the first one was csssummit, that I go from the people of enviromentsforhumans.  The great think about this kind of conferences its that are online, it’s expensive but the talks are really great, I’ll try to repeat the next year.

And what happens with my experiments? Well, I have more ideas, more things to try,  less time. One of the things that make me stop with my actuals experiments where the discover of Sharejs.

Sharejs is an Operational Transform library, It let you share your documents online between navigators. In my work, the developers guys did something similar with a faye server, but this new approach seems really interesting. Integrates the synchronization mecanism into a node server.  Joseph Gentle, the guy that program this library, said that its not madure enought to put in production, but still I wan’t to try something.

One of the new ideas is WAY (Where Are You?). The idea its to have a map, google maps actually but I pretend to exchange with openlayers, where you been positionated using geolocation api and the other people that came to the web are also geolocalizated. And show a lines between points with the distances. It’s only a toy but It could be a great prototype for a real product.

I’m still trying to understand the library, so the experiments are still in beginning stages so nothing to show yet.

In my other line of experiments, I have found another interesting library, Interact.js. Look at SVG examples, could be a fast way to obtain the cable functionality I wan’t to rack.

Experiment with cables

One of ideas that I want to implement in Rack is a cable management. How and where are connected and so on. I also have the idea of give them some semantic meaning. What for? If I can give some semantic, they will not be only lines, they will be cables, that connect A with B. So I can make alerts, or see what happen if I disconnect a cable.

The first step was to create a bezier curve (a simple one) and try to control one of their points with the mouse.

https://www.graph-ic.org/svg-experiments/cables/index.html

As you may notice, this only works if you put your navigator in a full hd screen at full screen. What’s this for? Because the mouse coordinates are in navigator coordinates and the point coordinates are in svg coordinates, which are related to the viewBox size.

I have to make scale one coordinates to another to make it works as it should, but I have to sleep, so it have to wait until tomorrow or whenever.

Playing with webcomponents

In the weekend I take a look to polymer. Polymer is a js library to use and create webcomponents. The idea, is to bring to the web something that exists lot time ago in desktop applications. Reusable components.

It make use of shadow dom, so it makes incompatible with a lot of old browser and some new ones. But I think it will be the future of web programming apps. So I ask myself if I cant integrate this with my idea of “Rack” and to use it to embed svg into svg as components. That test is not for today, but I’ve tried to add a component that create and SVG at root level.

It works, the component is not too elaborated, just take the size property and use it to establish width and height of one SVG that draws a rect inside it. No JS embeded in the component, no more magic, just that.

Once again, the demo is the same url https://www.graph-ic.org/svg-experiments/rack/index.html.

One corious thing that happend. After added my component all the svg created by SnapSVG, loose the colors. I take a fast look and the problem comes from the named colors, some of them (silver, white) don’t work anymore, so I had to change them by the hexa color reference. Probably, something of polymer its reusing the names or something like that, but I don’t have more time today to take a look to it.

If you are wondering how looks like the code of a webcomponent maded with polymer, here goes my silly component:

 

 

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

Nested SVG

Today I spend few time playing with rack. What I want for today was a concept test about nest a SVG into onther and see if I can control the viewBox of one of them without affecting the other one.

So I tried something like this, using developers tools over my rack experiment:

Everithing works as I expect, so tomorrow I’ll try to move my experiment to the main SVG with two nested SVG. One that acts like control buttons and the second one with the Rack, so I can change the viewBox of the rack from the other. If that works, probably my next step is to try drag and drop between nested SVG.

Making SVG responsive

As I told in my last post, I’ve read the articles of Sara Soueidan about viewbox again. Also I had to view again her last talk in the CSSconf EU 2014.

As she said, if you wan’t to make an SVG responsive you’ll have to follow the next steps:

  1. Remove ‘width’ and ‘height’ attributes from the root <svg>.
  2. Add ‘viewBox’ attribute if not already present.
  3. Set ‘preserveAspectRatio’ to ‘xMidYMid meet’.
  4. Embed.. …and apply fixes where/when needed… (If you’re thinking in IE you’re correct, but not only IE).

Talking about fixes, I have my own fix to something not directly attached to responsive, but something that it’s really annoying to me. In Chrome (at least in Chromium 37.0.2062.94 over Arch linux) you wan’t to set display:block over your root svg element. Why? Because if you don’t do it, Chrome (Chromium) decide to put a “”beautifull”” display:inline that makes scrollbar appears.

I don’t know if this is really a bug, or a feature that I don’t understand but I HATE IT!.

The result is not perfect, I should resize everything based in the lowest resolution to have a good display in all the resolutions, but for today it’s enough for me.

You can see it in: https://www.graph-ic.org/svg-experiments/rack/index.html 

First step in project rack

Rack is an old idea I have rounding in my mind over a year. Because I didn’t have enought time, I’ve tried to pay some developers to make it, but with no results. So, I will steal myself some time again to try to make it again.

The idea is to have an online editor where you can setup your rack of your Datacenter. The idea is bigger, not only limited to the rack elements, also to connect the cables, and give some knowledge about what connects the cables. I’ve been searching something like that and I didn’t found something similar, and it will be a great app to document the Datacenter of my work.

I only have a very basic knowledge about SVG, so I have to look for resources online that could guide me.

First of this resources was this one:

http://www.fabacademy.org/archives/2014/tutorials/providence/usingSnapSVG/

It’s a great example about how to do some things (like load an external svg, clone it, change the properties), with snap.svg.

Another good link that would help in my idea is this one:

http://svg-whiz.com/samples.html

Have a lot of examples, but the one I’m really interested is in the drag and drop one.

For now, this gives me a silly experiment, witch is only a test. Probably I have to take another look  to Sara Soueidan’s articles to set corectly the viewport and so on. But for today I have covered something.

This is the result: https://www.graph-ic.org/svg-experiments/rack/

All the rack are generated cloning the piece on the first row at the left.

« Older posts Newer posts »

© 2019 Graph-ic.org

Theme by Anders NorenUp ↑