What is QBlocks ?
QBlocks allows you to design resolution independent graphics for your iOS or OSX projects. QBlocks help developers and graphics artists to achieve greats result with no effort. With his easy to use UI and its objects oriented tools gives an amazing workflow. The strength of QBlocks is in its architecture based on plugins or blocks that delivers the versatility and potential for growth.
Here are some of the thing you can do in QBlocks.
You can create graphics using pro tools like any vector graphics application. Qblocks use Bezier Curves so the design possibilities are endless.
You can create graphics for the WEB and for Apps. QBlocks export in PNG, JPG and TIFF formats and also in PDF. You can import images and use them to trace graphics.
You can generate real time Objective-C Code of any graphics you create in QBlocks. The generated code is based on Quartz 2D API, so the compatibility between iOS and OSX it is almost 100%.
QBlocks is primarily a design application and a tool for Apps & Web developers and the final objective is the graphics to the screen. However, with the ability to use Bezier curves in future releases will export formats like SVG or for another API.
Document Window Overview
The main document window in QBlocks is divided in two. The Panels of the left is where the object & blocks list are, and the right one is the main canvas where you work and create your graphics and also is where the real time objective-c code is generated, you can togle between both, the main draw canvas and the code list view.
How QBlocks Works
The best way to understand how it works is to isolate the creation of bezier paths and the characteristics of these paths, because the core of the system is based on plugins that gives the features of each path. Having isolated the creation of the path of the attributes we have created the opportunity to grow without limits and create new plugins or blocks that can define new attributes and even put several of them together to create custom blocks that define an style of graphics. We started with the basic ones, but the idea is to continue with new and more complex ones.
Plugins allows us the possibility of using them in our absolute freedom, it gives us versatility to the design. The following small example illustrates this, In the first square the gradient is drawn first and in the second at the end. This is done by simply dragging the block at the end of the block list and in the same way you can add other blocks, bringing the possibility of new effects.
To start we put twelve plugins or blocks. Which allow very powerful graphic design. The final idea is to be able to create a framework to create plugins externally to us. For now we are defining and improving the framework and we will continue to create new plugins with new effects.
- Settings : Set Line Join, Line Cap and Miter Limit
- Clip Path : Create a Clip offset for the Path
- Stroke Color : Set the Color Stroke of the Path, it use the colors defined in the Library (change : Highlight, Shadow, Opacity, Hue, Saturation and Brightness)
- Stroke Width : Set the width of the path
- Stroke Path : Stroke the Path (also set if the path cast shadows)
- Fill Color : Set the Color to Fill the Path, it use the colors defined in the Library (change : Highlight, Shadow, Opacity, Hue, Saturation and Brightness)
- Fill Path : Fill the current Path (also set if the path cast shadows)
- Gradient : Fill the Path with the gradient, it use the gradient defined in the Library (also set if the path cast shadows)
- Shadow : Define the shadows for the Path, it use the colors defined in the Library (change : Highlight, Shadow, Opacity, Hue, Saturation and Brightness)
- Inner Shadow : Define the Inner Shadows for the Path, it use the colors defined in the Library (change : Highlight, Shadow, Opacity, Hue, Saturation and Brightness)
- Text : Set the Text that goes inside the Path, you can change Family, Font, Size, Color & Align (change : Highlight, Shadow, Opacity, Hue, Saturation and Brightness) also set if the Text cast shadows
- Picture : You can import an Image File from your Computer to be used for trace or backgrounds can be Scaled to Fit, Scaled to Fill and Original Size, also can change its opacity
Real Time Code Generation
Each plugin has the ability to create its own code. So, what makes QBlocks, is to gather and organize the code to deliver it in a coherent list. With the framework that we are developing QBlocks interact with the plugins and ask each one to generate the code we need. By now we generate Objective-C code for iOS and OSX but we are ending .SVG (Scalable Vector Graphics) and we will continue with others. The code is shown in a view, which represents each plugins used with colored blocks that make it easier to read.
Color & Gradient Library
The QBlocks Library handles colors and gradients in a very tied way. This is, to use a color, first you have to create it in the Color Library,where you define a Color Name and its Color, once this is done you can use independently in each Block and to create Gradients. That way if you want to change a color it changes everywhere. But this does not mean that the color can not be changed, each plugin can modify or change its Highlight, Shadow, Opacity, Hue, Saturation and Brightness independently