Graphsy Blog

This has been a long time coming.  I’ve just added animation capabilities to Graphsy.  They are simple to start with, a Fade In, Fade Out, and Move animation.  But that should be powerful enough to create something interesting.  The best way to explain all of the new functionality is really just to show you.  So here is a short video demoing some of the animation capabilities.  As everything else, animations can also be embedded, if there are animations, animation controls will appear on an embedded item.  I hope you guys try this out and let me know what you think, either here or email me at max@graphsy.com.

Here is also a simple example of an embedded Graphsy animation. Hit play, followed by next:

This new update brings with it a way to store colors in palettes.  The color picker has changed to include enough space for 23 colors.  Once a color is selected the user has to simply drag it from the display into 1 of the 23 slots available.  These color choices will stay with the user across all of the projects and will be remembered when relaunching Graphsy.

The next feature I am working on is custom shapes.  I want to let users create custom shapes, combine them together into libraries, and share those libraries with others.  There is lots of work that needs to go into this, but I hope to have the basic creation tools available shortly.  Check out a list of features that were requested by other users, vote for your favorites, and add new ones at www.graphsy.com/request.

Since all of these updates, the tutorial videos are really getting out of date.  I’m going to spend some time this week updating them.  Hopefully I can get the object creation feature out in 2-3 weeks, unless work gets in the way again.

Anyway, here is a screenshot of the new feature.

New Color Picker

This is a large update to Graphsy. People have asked for graph embeddings and here they are.  This is my first crack at it, so if there is something you especially don’t like please let me know.  Right now the embeddings are iframes pointing to a viewer page.  I hope to get that changed some time in the future, but wanted to roll out the feature ASAP.

Read the rest of this entry »

Having not updated in a while, I’m coming back with some hopefully useful features for Graphsy.  First just want to reassure everyone that work on embedding graphs is progressing nicely and should be done soonish.  I also took some time to add alignment tools.  I felt they were missing and wouldn’t take me too long to code up.  However, with all the traveling and getting sick I’ve been doing the past couple of weeks, these features took a bit longer than anticipated.  Also not sure how well they will scale in the end.  It seems to work fine for 100 shapes, but there is probably a point when it will crap out on certain machines.  Let me know if it happens to you.

You will noticed a new toggle button that is turned on when logging into the studio portion of the application.  It enables objects to be snapped and aligned depending on other objects in the scene.  At their simplest, the features will align top, middle, bottom, left, center, and right portions of each object to other objects in the scene.  Graphsy will show what objects are aligning together using a green bar.

Graphsy will also align objects based on their distances.  For example, if you want to place three boxes such that they are displaced by the same amount, you can begin by placing the first two. Then the third will snap into place at the same distance from the second as the second is from the first.  Also, when placing an object between two other objects, it will snap into place right in the middle.  In this case red bars will appear to signify which distance is being used by Graphsy.

I hope you find there features speed up positioning and help you create better looking images.  If you find that snapping is getting in the way, you can turn it off by clicking on the toggle button.

Added some more functionality to Graphsy.  This time it’s an adjustable grid as well as the ability to snap to it when laying out shapes and edges.  Users can set the number of column in the grid and Graphsy will create as many rows as necessary to make sure each grid cell is a square.  Users can set a value between 1 and 100.  The grid adjusts through all of the different zoom levels and is saved with each project.

The grid itself is rendered using ImageMagick on the backend.  I experimented with using HTML elements first and, while the grid would pop-up faster, once it was on screen its presence slowed down all other operations significantly.  Therefore I decided to go with a rendered grid.  While it may take a bit for it to come up, once it does, it will be cached and the next time should be displayed faster.

Next update will contain more layout features.  Next time shapes and lines will snap into place based on objects already part of the project.

I’ve just put up a new version of Graphsy.  This update was a long time coming.  Unfortunately I got busy with non-Graphsy work so it took a bit longer than I anticipated.  Ohh well.  Enough with excuses, lets move on to details.

Read the rest of this entry »

I’ve now seen a few comments from people using Graphsy trying to figure out exactly what a graph is.  By a graph I mean any kind of relational, or boxes and arrows, type of diagram. I guess the confusion shouldn’t really surprise me.  I remember being terribly confused when the notion of graphs was first introduced to me.  Not because the idea was complex, but because at that time when someone mentioned graphs my immediate response was “line or bar?”  But no, the kinds of graphs one can draw with Graphsy are the kinds of graphs one can make with Visio or OmniGraffle, diagrams with nodes and edges.  Wikipedia has a great entry on graph theory, check it out if you need an introduction.  The next question to answer is what are these things useful for?

Read the rest of this entry »

I’ve been wanting to use cornucopia for a while now, glad to have the chance. Just put up a new update of Graphsy that implements a bunch of features and bug fixes. Most importantly, and most noticeably, the zoom features. Users can now increase or decrease the scale of their drawings. Currently the implemented zoom levels are: 25%, 50%, 75%, 100%, 200%, 400%, and 800%. In the future I plan to add arbitrary zoom, but this is a good start.

Also added keyboard shortcuts to context menus. I’ve been talking about them for a few weeks now, and the buttons themselves were annotated with the corresponding key from the very beginning. Now, when a context menu is visible, hitting the key will correspond to pressing that button. The keys correspond to button placement, not what action they represent. For example, ‘q’ will press the upper left key, no matter which context menu comes up. This way the interface can be used with one hand on the mouse and the other on the keyboard. Hopefully, with this setup, users will not need to look down on the keyboard to hunt for keys and thus can create graphs faster.

The third feature added in this update is a better notification of when a project is not saved. First, a duplicate of the save button has moved to the upper right menu. That button will change color when the current document is out of sync with the saved version. In addition, when users try to leave the studio, Graphsy will inform them if their file is not saved and give them an opportunity to go back and save it.

This update also fixes several bugs. Most had to do with layout, saving, and exporting images.

The next two weeks may be busy, so I don’t know how much Graphsy work I will be able to do. Will try to write another “blog” post though, not sure about the topic yet. Check out the new features and let me know what you think.