https://github.com/barbwire-1/curved-text

widget to use built-in fonts for curved text in fitbit OS
https://github.com/barbwire-1/curved-text

Last synced: 3 days ago
JSON representation

widget to use built-in fonts for curved text in fitbit OS

• Host: GitHub
• URL: https://github.com/barbwire-1/curved-text
• Owner: BarbWire-1
• License: mit
• Created: 2020-12-15T06:37:41.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-05-12T21:11:51.000Z (over 2 years ago)
• Last Synced: 2023-03-09T23:34:15.096Z (over 1 year ago)
• Language: TypeScript
• Homepage:
• Size: 2.27 MB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
curved-text

=

**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`.

!
![examples](doco/examples.png#center)


Modes

-

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 by `sweep-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`.)

Settings

-

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 `` which represents your curved-text element, there are a few cases in which you'll need a `` in SVG (see also: [fitbit Template Symbols](https://dev.fitbit.com/build/guides/user-interface/svg/#template-symbols)) or specified selectors in CSS (see also: [fitbit Selectors](https://dev.fitbit.com/build/guides/user-interface/css/#selectors)). For available attributes/properties and how to set/call, have a look at the [interface table](doco/interface_table.png).

(For detailed examples of usage and syntax, please have a look at the [syntax attachment](doco/snippets.md))

Positioning

-

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.

Animation

-

The `` elements showing your curved text can be animated like other `SVG elements`.

Installation and Usage

-

For information on `installation` and `usage`, please follow this link:

[getting started](doco/usage.md)

---

...and now - CURVE IT!\

by BarbWire and Gondwana

(and RTFM! :slightly_smiling_face::vulcan_salute:)

[curved-text-demo](https://github.com/BarbWire-1/curved-text-demo)\

!
![demo](doco/curved_text_demo2.gif#center)


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](doco/how-the-factory-works.md).

If you would like to know how to turn your own elements into a reusable component, see [How to Make a Widget](doco/how-to-widget.md).

# Acknowledgement

This widget gets integrated by the widget-factory written by [Gondwanasoft](https://github.com/gondwanasoft/fitbit-simple-widget).

Thanks for making my idea (re-)usable :)