Skip to content

Commit

Permalink
docs: Improve README and fix homepage link
Browse files Browse the repository at this point in the history
  • Loading branch information
Mr-Pepe committed Jan 11, 2024
1 parent 06e7a0d commit f2be9b1
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 16 deletions.
23 changes: 9 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
# Stroke order animator

[![Pub](https://img.shields.io/pub/v/stroke_order_animator.svg)](https://pub.dev/packages/stroke_order_animator) __Try the [web version](https://mr-pepe.github.io/stroke-order-animator).__
[![Pub](https://img.shields.io/pub/v/stroke_order_animator.svg)](https://pub.dev/packages/stroke_order_animator)


This package implements stroke order animations and quizzes of Chinese characters based on the [Make me a Hanzi](https://github.com/skishore/makemeahanzi) data.

__Try the [web version](https://chill-chinese.github.io/stroke-order-animator) generated from the [example](example/lib/main.dart).__

A `StrokeOrderAnimationController` handles the animation state and serves as an interface between your app and the stroke order animation.
In order to control animations, a `TickerProvider` must be passed to the controller, for example using a `TickerProviderStateMixin`.
The controller is then passed as an argument to the `StrokeOrderAnimator` that displays the actual stroke order diagram.

The stroke order data has to be passed in as a JSON string.
You can download all stroke order data for offline usage directly from [here](https://raw.githubusercontent.com/skishore/makemeahanzi/master/graphics.txt).
The stroke order data has to be passed to the animation controller as a JSON string.
You can either either use the `getStrokeOrder` function to download the data on demand or download all stroke order data for offline usage directly from [here](https://raw.githubusercontent.com/skishore/makemeahanzi/master/graphics.txt).
Data for single characters can be downloaded through the [Hanzi Writer Data](https://github.com/chanind/hanzi-writer-data) project, e.g., via https://cdn.jsdelivr.net/npm/hanzi-writer-data@latest/我.json.
Don't forget to replace double quotation marks (`"`) with single ones (`'`).
The stroke order data is available under the [ARPHIC public license](ARPHICPL.txt).

When using the animations in a PageView or ListView, it is recommended to use a unique key for every `StrokeOrderAnimator` and cancel the animation when the selected page changes in order to avoid broken animation behavior.

All attributes and actions of the stroke order diagram are controlled via the `StrokeOrderAnimationController` and can be changed anytime using the respective setter methods.

Expand Down Expand Up @@ -43,6 +44,9 @@ All attributes and actions of the stroke order diagram are controlled via the `S
* Show full character
* Reset animation/quiz

> [!TIP]
> When using the animations in a PageView or ListView, it is recommended to use a unique key for every `StrokeOrderAnimator` and cancel the animation when the selected page changes in order to avoid broken animation behavior.
## Callbacks

To better integrate the quizzes, three callbacks can be either passed to the `StrokeOrderAnimationController` during instantiation or afterwards using the `add...Callback` method:
Expand All @@ -52,15 +56,6 @@ To better integrate the quizzes, three callbacks can be either passed to the `St

The `onQuizCompleteCallback` receives a `Quizsummary` containing the number of mistakes on a per-stroke basis and the paths of the correct strokes (in a 1024x1024 coordinate system). The other two callbacks receive the index of the stroke that was written (in-)correctly. All indices are zero-based.

## Example

To run an example showing several stroke order diagrams in a swipeable page view run the following:

```
git clone https://github.com/Mr-Pepe/stroke-order-animator
cd stroke-order-animator/example/
flutter run
```

## Issues and feature requests

Expand Down
4 changes: 2 additions & 2 deletions pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ description: Stroke order animations and quizzes for Chinese characters for use
# Version gets set by cider during publishing
version: 0.0.0

homepage: https://github.com/Mr-Pepe/stroke-order-animator
homepage: https://github.com/chill-chinese/stroke-order-animator

repository: https://github.com/Mr-Pepe/stroke-order-animator
repository: https://github.com/chill-chinese/stroke-order-animator

environment:
sdk: ">=3.0.0 <4.0.0"
Expand Down

0 comments on commit f2be9b1

Please sign in to comment.