curved-text is a widget for Fitbit OS using inbuilt fonts to create curved texts.
You can use it under vanilla javascript
(studio or CLI) as well as running typescript
.
Supported by the widget-factory, it enables you to create multiple curved texts.
You can individually define the dimensons of circles
, the texts gets curved at, as well as all text-
and font-properties
and attributes
.
!
There are two different modes
of curving text:
- In default mode
auto
the characters´ widths get calculated by getBBox(), which determines the position of each in relation to those around it. - In mode
fix
you can rotate the characters bysweep-angle
which then rotates the characters per += sweep-angle, which is less consuming, as no getBBox() is needed.
(Setting sweep-angle
automatically switches to mode fix
.)
Almost all set-up and manipulation at runtime of your curved text
work as you are used to from working with fitbit OS built-in elements.
To ensure high flexibility, most attributes/properties can be set in
- SVG
- CSS (by id or class)
- .ts/.js (at runtime)
Setting the radius r < 0 switches the appearance of your text to bottom-curved.
Due to the structure of the <use>
which represents your curved-text element, there are a few cases in which you'll need a <set>
in SVG (see also: fitbit Template Symbols) or specified selectors in CSS (see also: fitbit Selectors). For available attributes/properties and how to set/call, have a look at the interface table.
(For detailed examples of usage and syntax, please have a look at the syntax attachment)
After you define the dimensions of the curve (x,y,r), text-anchor
and start-angle
let you position your textElement where and how you need it to be.
The <use>
elements showing your curved text can be animated like other SVG elements
.
For information on installation
and usage
, please follow this link:
getting started
...and now - CURVE IT!
by BarbWire and Gondwana
(and RTFM! 🙂🖖)
If you're curious about how the code files in this clockface work together to let you create and manipulate widgets, see How the Widget Factory Works.
If you would like to know how to turn your own elements into a reusable component, see How to Make a Widget.
This widget gets integrated by the widget-factory written by Gondwanasoft. Thanks for making my idea (re-)usable :)