Graph-ic.org

Trying to do things.

Back to my roots

This week I decided to abandon KDE and be back to the ease of windows managers. Now I’m running this combination:

  • Openbox:  A light window manager. I used to have  fluxbox in my college times. The problem I had now with fluxbox its the taskbar + multiscreen. I only have one big taskbar shared between screens, and I don’t like it. So I tried openbox which doesnt have any taskbar.
  • Tint2: I want to have a taskbar. Openbox doesnt have it. So I search for a solution. I found tint2 and I love it. It’s really easy to configure, its light, and works perfectly with multiscreen.
  • Urxvt: If my plan was leave kde, I have to leave konsole. I have tried a lot of term emulators in my life (aterm, wterm, eterm, xterm, ….). This time I plan to use an old friend, urxvt. This has a lot of features, but I only need a few things. I want to have unicode, I want to have a term without menubar, to have the scrollbar on the right side, good looking fonts and also a way to launch another program when I launch the term. Urxvt have it all, and its really light term.
  • Xscreensaver: I need something to lock my session. KDE has this feature built-in. So I used one simple old solution. Xscreensaver, nothing more to say about it

This its still a work in progress. I have some things that I have no replacement. For example, I want to have a launcher like kde one, gmrun could be a solution, and I’m using it right now, but I’m looking for a lighter solution. Other work in progress, it’s a replacement to kaffeine, I know I can use vlc, or mplayer, but I love the way I can see the channels I have, and how to change between channels in kaffeine.

Space invaders on HTML5 + JS

This holidays I saw this video . It’s seem awesome to me, so I decide to make something like that. So, I did it! I made an space invader clone using HTML 5 canvas + vanilla JS. No libraries at all.

The result can be seen here: https://www.graph-ic.org/experiments/invaders/index.html

The code is public and available here: https://gitlab.graph-ic.org/manolopm/invaders/

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.

Moving “paper” controls

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

New controls have been added, now we can move the svg “paper”. To do that, I change the viewBox with JS. I’ve tried to add zoom also, again making use of the viewBox property, but changing viewbox width and height makes snap fails. I have some idea about it. I think snap it’s attached to the screen coordinates, not to svg coordinates. That explain a lot of things, even way the initial displacement have to be .5.

The controls isn’t what I really want, I want to drag the paper to move it, but It’s a first step.

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.

« Older posts

© 2018 Graph-ic.org

Theme by Anders NorenUp ↑