ABeamer has its own charts component, but it can also be used to create frame-by-frame animations of other chart and map libraries. D3.js has been widely used to create interactive animations for data science, but since its animation engine is mainly designed to be used interactively, if want you to generate the animation frames to generate animated gifs or movies by using a video capture application, you can’t guarantee the output quality nor guarantee that the animation is timely captured. By using ABeamer on top of D3.js, you can generate high-resolution frames at a selected frame rate. To proof the concept, we will use an D3 datamap animated with ABeamer, and use that animation to generate the frame sequence and an animated GIF.
A new statistic plugin was added, providing the following fundamental statistic operations on arrays:
min,max.
mean,median.
std,var.
sort,sortDesc.
The input it can be both an array or list of numerical values:
"=min([40, 30, 60])""=mean(40, t, 60)"
New format plugin
This new plugin allows to format numbers and currency according to a specific locale.
The function numToStr will convert a number (with grouping) to a string.
"=numToStr(4000.67)"// uses system locale"=numToStr(4000.67, 'pt-PT')"// = 4 000,67
The function nogrpToStr only affects the decimal place, so it doesn’t add the thousand separator.
The function currToStr also adds the currency sign according to the locale. It’s also possible to define the currency sign based on the sign but for that it must be defined the locale.
A new plugin was added, providing date and time functions. now and date are the date/time creator functions, providing a value to be used as input for the following functions: year, shortYear, month, day, hour, minute, second. Given the goals of ABeamer, all the date/time functions use local time.
It also supports a date/time formatter function, where the formatter is a mini-version of moment.js.
Examples:
"=format('YYYY-MM-DD HH:mm:ss', now())""=format('ddd, MMM D (YY) hA', now())"
All these functions are teleportable, but if you plan to render your story in remote server, it’s advisable to setup the date using date function, since the actual date/time which it will be executed is uncertain.
Since every time the now is executed, it provides a different date/time, a call using =hour(now()) followed by =minute(now()) can provide inconsistent results. The best strategy for setting a date is by using set-var task:
The previous version, already reduced the final client library size, by joining all typescript source code, remove the inner namespaces and eliminating all the exports of all source functions that start with underscore, allowing to compact more the code, and then compiling all the code again. In this version, I take one step further by creating two version:
abeamer-debug.min.js - It contains the code of just like it was generated in the version 1.3.
abeamer.min.js - It removes all the debug code used to log the execution.
The new abeamer.min.js is smaller and faster, at the cost of loosing its internal logging capabilities. If you need to log, to understand what is happening behind scenes, just replace it with the abeamer-debug.min.js. In the future more versions will be created to make ABeamer lighter by disabling certain features. The version 2.x, will be smaller since parts of the code will be passed into the plugins. I’m delaying for now this decision to make sure that all the breaking changes are done at once, avoiding many bumps on the major version number.
When you want to send a story via AJAX to a cloud render server, you need to teleport it. The teleportation process has 4 stages:
When a story is created with toTeleport=true. In this stage, ABeamer stores configuration data, and takes a snapshot of the HTML/CSS data.
Every time the user adds an animation. In this stage, the animation is stored to be teleported before any task is executed.
When getStoryToTeleportAsConfig or getStoryToTeleport is invoked. In this stage, it is stored the render and metadata information.
Send it by AJAX along with the assets to the cloud render server.
By taking the snapshot before any addAnimation, ABeamer prevents tasks from duplicating the initial injected HTML code, but what happens, if you need to inject HTML or CSS before the initial snapshot is taken? The most obvious answer it’s to inject the code before the story is created, but in this case, you won’t be able to take benefit from the services provided by ABeamer, such as:
Access local server parameters.
Access story configuration parameters (ex. width).
With the move of the abeamer-gallery-release, abeamer-docs and abeamer-release git pages to the abeamer.devtoix.com domain, this become the home of 4 visual components: website, blog, documentation and gallery, but all of these components were built using different tools, which lead to having 4 components with different visual appearances, and not the feeling of being integrated with the domain visual look. The website was built with a mix of bootstrap, scss, gulp and liquid templates, the blog was built with jekyllrb, the documentation was built with mkdocs and finally the gallery was built with a mix of marked, and some typescript code. Most of work since the last ABeamer release was done on the harmonization of these 4 components, in order for the user feel that each component has part of a whole. This work was done outside the scope of the abeamer git repo. All the code regarding visual customizations was removed from this repo, and ported to the website scripts which aren’t available for public domain. Although there is still some work to be done in this area, and a few bugs to fix, right now the user can already navigate from component to component without the feeling that he is in a different domain.
Often when you are creating a website, you or your client aren’t sure about the colors or sizes of elements. When there are only a few options, you can just fine-tune them using a photo editor during the initial phase, but in other times, you would like to have a draft of the website but with different color options, in order to choose which colors look better for those elements on the screen. If you need show those multiple website draft versions to your client by sending them by email or to put them in the cloud, in order for the client to make a decision about which colors he would prefer, you are stuck in taking one screenshot per option. Taking screenshots not only is a tedious process but it also limits you to your computer screen resolution. This is where ABeamer can help you to reduce dramatically the time you take to create one image per option, whenever the option is a color, a font-size, an element size, position, rotation, or its texts. If have ABeamer already installed, it will only take you a few minutes to get the job done.
After some extra testing on Windows, I detected that in same cases, the gif generator (imagemagick convert program) generates frames with rectangle parts filled with black backgrounds. This incorrect result doesn’t occur when I run imagemagick convert on Linux using the same parameters. I discover that the culprit was the -alpha deactivate parameter, and after some trials, by replacing the deactivate value with background, it solved the problem. In this case, it was required to define the background, I set white as default since it’s the most common. I also added the new abeamer CLI parameter --gif-background to allow the user to define a custom background, which will be used to replace the pixels with transparency. If this value is set to manual, the -alpha parameter won’t be passed to imagemagick convert, allowing the user to manually define his own -alpha parameter by using the CLI parameter --pre-gif.
Bringing all together
When ABeamer was initial publicly released, I created 4 github repos: source code, released (aka distro), docs and gallery-release. This allowed not only to separate the source from the compiled versions, I known that many repos deploy the source along with their release version but personally I find it that it clutters the project and the commits to have all in the same repo, but also it allows to deploy different release components in different places. The docs was initial planned to deployed in https://docs.readthedocs.io, but with the extra customizations, it turn out to be easier to use the Github pages. Github provides not only an excellent way for user to collaborate in the developing a project, but also for other users to inspect code and to use a repo as static file server.
The main focus of the work on ABeamer 1.1 was to improve the virtual animators. This new version implements SimpleVirtualAnimator, allowing to simplify the creation of SVG, Canvas and WebGL virtual animators. Now the adapters also include the method frameRendered, allowing virtual animators to render only once per frame, instead of rendering on the update of each property. Given the power and complexity of these new features, I created a separated blog post called How to use Virtual Animators in ABeamer with the details and examples on how to use Virtual Animators using SimpleVirtualAnimator.
New CLI check command
ABeamer CLI (command-line interface) has the new command check. This command checks if there are missing requirements and if the environments variables are well configured.
If you have experience creating web animations using JavaScript libraries, you know that in its essence, these animations are defined by a selector which defines which DOM Elements will be affected by the animation, and a set of parameters, usually duration, CSS property and easing, that together the selector will provide the necessary information for the library to modify the CSS properties of certain elements over time. Different libraries, have different parameters and behaviors but its fundamental parameterization is similar among all. Many of libraries provide means to extend, either by user JavaScript coding or by means of plugins. JQuery although isn’t an animation library per se, it has countless animation plugins in its ecosystem that animate web elements, but each has its own mechanism of timing and interaction.
ABeamer decouples its access to the DOM tree by using adapters, allowing ABeamer and plugins not only to animate CSS properties, but also SVG, Canvas, WebGL without extra complexity. Plugins can also be created to reduce the complexing of a CSS animation by mapping a ABeamer property into multiple CSS properties. But instead of requiring that the user or the plugin to handle its own timing and interpolation mechanism, it provides Virtual Animators to handle the timing and interpolation of the plugin properties.
The support of Virtual Animators in ABeamer has been for quite a while but the version 1.1, it was added the class SimpleVirtualAnimator to simplify its usage, and it was added the optional frameRendered method to the adapters to reduce the render count when multiple animation properties are used.
It has become a commonplace for open-source projects to have in their README a set of badges, providing attention grabbing information about their version, test coverage and other state information. But these badges are static, ABeamer allows to generate animated badges with remarkable simplicity. ABeamer has an animated badge example in its gallery for quite a while, but since the release of version 1.0.0, the first production level version, these badges have a complete set of configurable parameters, including size, colors and duration. Also, since this version, is no longer required to have js/css/ini files installed in the local machine, it can be executed from a remote link.
After multiple tests, I believe the ABeamer API has reached a mature state. In the future, and with the help of user feedback, small portions of the API can still change but it will be done by creating a new version of a function and deprecating the previous version. Therefore, I released ABeamer 1.0.0, the first production level version of ABeamer. This version has many improvements, bug fixes, a few cosmetics changes in the documentation, and better support on Windows platform and Microsoft web browsers.
The new features in ABeamer 1.0.0 include:
Support for the command-line to pass variables to the library and these to be used by expressions.
Support for the command-line to control the frame dimensions.
Default variables.
Support to server rendering without local configuration files.
Today I’m proud to publish the first version of the ABeamer website. Wow! It has been nearly five months since ABeamer project started, initially called PreciseJS, and after many redesigns it was finally published at the end of May. Since that moment, many features were added, lots of bugs were fixed, and many inconsistencies between different designs were corrected. But there is still along way to archive the proposed goals: provide a tool to individual users, designers, video hosting services, ad network, e-commerce companies that allows them by just using the web browser without installing any extra software to transform a collection of static images into an animated story with transitions, overlays and all sort of special effects.
ABeamer 0.3.1 includes chart series as expressions, allowing to plot mathematical functions. The standard library now also includes log, log10 and exp. And also:
Fixed the chart legend color for line charts. Previously it used fillColor for the legend in line charts.
Fixed chart labelsY when there is not enough y-space created by labelsX. Previously if labelsX weren’t defined the first y-label would be cut from the chart.
Chart Series as Expressions
Before version 0.3.1, ABeamer only supported data series defined as numerical arrays.
ABeamer 0.3.0 includes the first implementation of the charts plugin. Although there is still a lot of work for reach production stage, and the API can still change, is already usable in projects. This plugin, will now enter a phase of research to ensure all parameters are consistent and their names and specifications are easy to use. Have a look how the charts look in action or play with them in Code Pen.
This version also includes:
Gallery examples can viewed online without installing.
expressions support object variables.
expressions support one-dimension indices access to array variable.
Why a new implementation of JavaScript charts when there are already several complete and popular chart implementations, such as D3.js or Google Charts? ABeamer Charts isn’t designed to replace or compete with other chart implementation but instead provide an implementation that is designed to generate frame-by-frame animations and to allow teleportation. The alternative would be to create a plugin as a compatibility layer of other chart implementation but it would require many workarounds to provide a consistent way to animate the chart frame-by-frame in order to be rendered in a remote machine and it would be limited to their capacities of animation.
This website uses cookies to ensure you get the best experience on our website. By continuing to browse the site, you are agreeing to our use of cookies.
