Hello, this is my new update after two weeks.
Taking advantage of the VM release
The recent Pharo VM Release v9.0.21 for Windows, Mac and Linux was great for our Bloc project since we had some troubles with the graphic libraries dependencies. We take advantage in two aspects:
Simpler install instructions. Getting the project installed is now a simple script, as any other. Before, we had additional steps according to the OS platform (on Mac, via brew or macport; on Windows, by downloading dlls in a zip).
CI running again. The GitHub workflows have been broken some time. The reason was the difficulty to get the VM and update it with updated graphic libraries in the script. Happily, with the new VM release we have restored jobs in all three platforms. After fixing CI, some hidden bugs did pop up, such as an error when scanning fonts on Windows (fixed). Still not everything green, but it’s already good that CI is back!
Outskirts inside and outside
Some geometries now provide an explicit Cairo path to draw the border inside or outside, for two main reasons:
Rendering speed. A recent Bloc Update showed that rendering elements with border inside or outside was significantly slower than centered borders. Now, they are almost as fast as centered outskirts.
Dashed borders. There was a visual issue on elements with dashed border when the outskirts is not centered, i.e. inside or outside. Now it works:
Closed issues on dashed borders:
- https://github.com/pharo-graphics/Bloc/issues/199
- https://github.com/pharo-graphics/Bloc/issues/200
- https://github.com/pharo-graphics/Bloc/issues/201
For the moment, this improvement applies only for circle, rectangle and rounded rectangle, but will be extended to more geometries.
Gaussian shadow effect
In a nutshell, a general approach to create the shadow of a visual element is:
– take the alpha-channel of the element (an 8-bit image)
– apply an approximation of Gaussian blur on it
– paint the shadow color (with an offset), using as a mask the intermediate 8-bit image
– finally, paint the element on top of the shadow.
For example, SVG specifies the drop shadow filter like that. The big question was how to do Gaussian blur step, as Cairo doesn’t provide it out-of-the-box. The current solution is the adaptation of a linear algorithm (on the number of pixels) that looks good:
This element was created with:
BlElement new
geometry: (BlRoundedRectangleGeometry cornerRadius: 50);
size: 500@100;
border: (BlBorder builder
paint: Color blue;
width: 15;
dashArray: #(20);
build);
effect: (BlGaussianShadowEffect
color: Color orange
width: 20
offset: 20 asPoint);
yourselfWarning
This implementation iterates over the pixels, all in CPU, which has its limitations. For example, on large and animated elements. If we implement some hardware accelerated alternative, this could be a solid fallback. However, in an element animation where only offset or color change, then caching the 8-bit image with the shadow mask should work very well.
Rendering regression tests
The following image gallery illustrates examples added to test regressions in rendering:
Binding for SVG and PDF Cairo surfaces
Our Cairo bindings in Alexandrie now support drawing to SVG and PDF files. Part of this code and tests are based on Athens implementation pushed to Pharo a couple of years ago.
Note: I exported this example using the Cairo bindings directly, without integration with Bloc. But it will be straightforward to integrate it.
Thanks for reading. Questions or feedback? Please refer to the #bloc channel at Pharo Discord server, or the lse-openbloc mailing list. Martín Dias
Weekly news about Pharo 