# fitbit-flip

> This library to create flip animations in Fitbit clockfaces and apps.

Latest version **0.2.0** (published 2018-12-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install fitbit-flip
pnpm add fitbit-flip
yarn add fitbit-flip
bun add fitbit-flip
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2018-12-05 |
| First published | 2018-12-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 87.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 1 |
| Author | Yuriy Galanter |
| Maintainers | ygalanter |
| Keywords | fitbitdev |

## Links

- npm: https://www.npmjs.com/package/fitbit-flip
- Repository: https://github.com/ygalanter/fitbit-flip
- Homepage: https://github.com/ygalanter/fitbit-flip#readme
- Issues: https://github.com/ygalanter/fitbit-flip/issues
- npm.io page: https://npm.io/package/fitbit-flip

## Dependencies (1)

- [readline2](https://npm.io/package/readline2.md) ^1.0.1

## Recent versions

- 0.2.0 (latest) — 2018-12-05

## README

# Flip animation for Fitbit

This library allows you create flip animations in Fitbit apps and clockfaces.

![Example](screenshot.gif "Example")

### Installation

Install the library with `npm i fitbit-flip`

   The installer will ask you if it can copy the library gui files in your `resources` folder:  
   Press `Y` and the `fitbit-flip.gui` file will be created automatically.  
   Press `N` if you prefer to copy the file manually afterwards (default choice is Yes)  
  
You still need to modify the `resources/widgets.gui` file to add the link to `fitbit-flip.gui`:
``` xml
<svg>
    <defs>
        <link rel="stylesheet" href="styles.css" />
        <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
        <!-- import fitbit-flip ui file -->
        <link rel="import" href="fitbit-flip.gui" />
    </defs>
</svg>
```


# Usage

Use a `fitbit-flip` symbol in your `index.gui` file:
``` xml
    <use href="#fitbit-flip" id="elem" x="20" y="20" />
```

Import and use the library in your `app/index.js`:
``` javascript
    import { FitbitFlip } from 'fitbit-flip';

    const elem = new FitbitFlip({
        id: "elem", // id of GUI element
        img_width: 84, //width of image to animate (there will be 2 per element)
        img_height: 67, //height of image to animate (there will be 2 per element)
        duration: 1 // time in seconds to complete half animation (optional, if omited - 1 second will be assumed)
    });

    //assign images to animate
    elem.startStaticImage = `new_top.png`; // new image to show (first part)
    elem.endImage = `new_bottom.png`;  // new image to show (second part)
    elem.startImage = `old_top.png`;  // old image (first part)
    elem.endStaticImage = `old_bottom.png`; // old image (second part)
    
    elem.duration = 2; // duration (time in seconds to complete half animation) can also be changed if needed 

    elem.flip();    // animate
```

Launch your app and enjoy.

# Demo

A demo is available [here](https://github.com/ygalanter/fitbit-flip-demo)

---
_Source: https://npm.io/package/fitbit-flip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._