Graph-ic.org

Trying to do things.

Category: Rack (page 1 of 2)

Selecting colors for the wires

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

I wan’t to change the random color for the wires by a color picker to choose the color. I found a lot of them, but I wan’t a color picker that don’t have a lot of dependencies (like jquery, jqueryui, so on) , and don’t fill with mess my html.

So the option selected is  JsColor.

Now you can choose the color that the wire will have.

Moving background using interact.js drag and drop

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

I hate the buttons. I mean, I hate unnecessary buttons. In the last post I have added a lot of buttons to move the background, but the natural way to do that is drag and drop, but I thought It will be more difficult to do that.

But again, interact.js is the solution. A really simple way, just add a class, make it draggable with interact and decide what to do in the start drag and drop, the stop or/and the movement.

For this project, interact.js is being a great help.

Adding wires dinamically

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

Is a really simple thing, but for me, and for this crazy experiment, is a big push.

Now, if you push con add wire button, you will get a random color dinamically generated wire in the svg that you can move and fadein/fadeout like others.

Talking about fadein/fadeout, something really ugly it’s happening with this effect, probably because its only mouseover when you’re over the svg path, so it’s really easy to loose the focus. I’ll try to work on it.

Finally, my next steps:

  • Add a color picker.
  • Choose a way to define the curve, not only the initial/final points.
  • Experiment with ‘use’ to add the switches/servers/elements/whatever to the graph.
  • Server side (to store, load, give a name, users and so on).
  • If I reach this point, I’ll make a party! I’ll have a lot of work to do yet but …. will be the first alpha release to what I have in my mind.

Finally snapping

Finally I get snapping with interact. Here is the small snippet to do that, simple isn’t it? I’ve been fighting with this two weeks, and really I’m not sure what is different with my last tries.

UPDATE:  Finally I found what is different (the relativePoints with .5), I really don’t understand why, but if I try to use relativePoints to 0 or 0.0 or .0 it does snap but not in the position I wish. I’ll try to understand why this happen but reading the star example of interact they also use it, and I also don’t understand why.

A fast post. Added prefixfree

I tried to show the wires experiment to a colleage, he was using firefox and the background and the fadeout/fadein effects didn’t work. I show him the same url in chrome and works fine, but I don’t want to have this problem anymore, so I use prefixfree from Lea Verou and problem solved. The url it’s still the same:

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

Dissapear others

As I planned, my next step was hover effect. The idea: make other wires goes to semitransparent, so in a final version, that would make to see the wire you’re looking for easier.

I’ve also made a grid appears, just using a def and two patterns. I’ve tried to use snap from interact.js but I’ve been missing something because don’t snap where I want to, so I left this point to another moment.

As always the url is the same:

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

Playing with css animations and opacity

I’ve been playing with animations and opacity to make one cable almost dissapear.

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

I’ve used my last interact experiment, it seems the most promising way to build the interface of cables project, so I added a second wire, and change the opacity. This is a really simple change, but I have to take in mind use prefixfree from Lea Verou, modernizer or some other library that clear the path with the prefixes hell.

Probably, my next steps will be add wires on demand (using a button or something) and make on hover effect to only see with full opacity the wire selected.

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.

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:

 

 

« Older posts

© 2019 Graph-ic.org

Theme by Anders NorenUp ↑