This document provides information regarding installation and execution for the end-user. For developers and plugin creators read: Developer Documentation.
BeamToIX is a nodejs package. It requires the installation of nodejs. It can be downloaded here: nodejs.
During the installation process, beamtoix requires to create a shortcut, if you are running on linux OS, it must be installed with sudo:
sudo npm install -g beamtoix
If you have access errors, consider installing your global node packages on a path where you have access rights. Read how to do it here: fixing-npm-permissions.
Yes, you can. Install via:
npm install beamtoix
And then execute via
npm run beamtoix --
Hint: The ending --
allows beamtoix to receive options.
BeamToIX is an ecosystem that encompasses a TypeScript/Javascript web browser library, a render server agent and command line utility. The web browser library doesn't requires nodejs, but it won't be able to store the images on the disk, nor generate gifs.
If you just to use BeamToIX as an animation library or generate the frames via teleporting then you don't need to install nodejs.
Yes, you can. Download from here.
puppeteer
is a node package just like beamtoix.
For details, read the question above I can't install BeamToIX!.
Yes, you can. Set the environments variables on your terminal console:
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
CHROME_BIN=<full-chrome-path-including-file-name>
the previous code depends of the running OS, the best it's just type:
beamtoix check
BeamToIX has included a render server agent, and this one requires a server.
The default server is puppeteer
, you can install it via:
npm install -g puppeteer
Tip: on linux OS, it requires a sudo
.
If you have puppeteer installed, but still have errors, set the environment variable to:
CHROME_PATH=<full-chrome-path-including-file-name>
the previous code depends of the running OS, the best it's just type
beamtoix check
On Windows, the system includes a program called convert
.
It's necessary to add the imagemagick
at the beginning of the system path.
# option 1
SET PATH=<my-imagemagik-path>;%PATH%
# option 2
SET IM_CONVERT_BIN=<my-imagemagik-convert.exe-path>
In order for an element to change its position, in necessary that:
The starting position be defined in pixels either by:
{ left: 10px; top: 0px; }
valueStart
defined in pixels. e.g. valueStart: '30px'
.The value
be defined numerically not in pixels.
Inside beamtoix.scss
there are two fields: $beamtoix-width
and $beamtoix-height
.
After modifying these two fields, recompile the js/main.scss
using a SCSS compiler.
Yes, you can.
BeamToIX provides TypeScript typings for convenience and documentation purposes,
but all the functions and constants are designed to be used without TypeScript.
When creating a new project, add the option --no-typescript
.
Example:
beamtoix create foo-js --width 384 --height 288 --fps 30 --no-typescript
Yes, you can. Although, it's advisable to use SCSS.
BeamToIX uses SCSS only to read beamtoix.scss
which provides information
regarding width and height.
When placing absolute elements on your story,
knowing the output width and height might be necessary.
Yes, you can.
BeamToIX was mainly built to use SCSS or CSS.
Nevertheless, it has LESS support.
You need to modify $beamtoix
fields into @beamtoix
on beamtoix.scss
file.
beamtoix.scss
is read both by scss compiler and BeamToIX render server agent.
It only allows a small subset of scss specification.
Yes, you can. You can build your story just with HTML+(S)CSS+JSON without any coding.
All the member names starting with underscore are internal members and they can change over time. It's advisable to use only the public API which is stable.
Yes, you can but BeamToIX wasn't build for speed. It's a software based interpolator designed to be powerful, highly configurable and to allow to save images to the disk.
Yes, you can.
Double slash followed by slash-quote.
"='\\\'=sen(t)\\\''
If the animations substantially change the first frame, it will show a ghost first frame while rending on the client, on the server this frame won't be rendered. To make authoring easier, beamtoix doesn't hides the story before it's rendered. When the story authoring is finished, hide the story on the css properties, this will prevent the ghost first frame.
BeamToIX has included a render server agent which communicates between the BeamToIX web browser library and puppeteer and which in turns communicates with Chrome.
If your url doesn't includes the index.html
then it must end with the slash.
example:
beamtoix render --url "http://localhost:9000/gallery/remote-server/"
BeamToIX uses puppeteer/chrome to render the images to the disk and these application don't allow to save the images into jpg.
The render engine uses a zoom factor 100%. If you use a different zoom factor to test the images it will result in a different output.
BeamToIX was built with image generation in mind, it guaranties that each generated frame has the correct information. However, when the animation is tested in the browser, the time between two frames can be delayed due a complex calculations or image loading. In such cases, BeamToIX tries to compensate by having a shorter time for the next frame.
BeamToIX works internally with frames. Each time duration or position is converted to a integer frame number. If the frames per second, is not a integer division of a second, such as 30fps, it will round to the nearest frame. It's advisable to use fps that are integer divisions such as 20 or 25fps.
A property defined in addAnimation
is then mapped to a DOM attribute or CSS property or
a Virtual Element property.
Due CORS, a script running inside a browser can't load an external text file without a live server.
BeamToIX was designed to be executed, in general, without requiring of a live server.
BeamToIX web browser library requires fps
information.
Initial versions of BeamToIX used gimmicks to get information from style sheets but it wasn't clear solution.