diff --git a/README.md b/README.md index 826e2c7..1b4a4e4 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,50 @@ -# Env Setup -- Setup the emscripten sdk environment - Follow DoDown and Install steps https://emscripten.org/docs/getting_started/downloads.html -- Clone the repo using git clone --recurse-submodules https://github.com/rlottie/rlottie.github.io.git command +
-# Build - - cd rlottie - - ./wasm_build.sh {emscripten_sdk_path} - - cp builddir_wasm/src/rlottie-wasm.* ../ - - NOTE : to get a callstack modify build.sh file by passing the build flag -s assertions=1 +## Introduction +PrettyView is the most convenient lottie web player. It is created to help communication between designers and developers. Not only does PrettyView helps designers and developers to check if the animation is rendered well on the website, but PrettyView also allows to customize animation layers. -# test - run ./test.sh in command prompt. +- **Simple Customization**: In the left panel, users can access each layer by keypath. In the right panel, you can easily adjust properties such as color, opacity, and position, and find out the immediate changes. +
+## Features +- [x] Change layer color +- [x] Change layer opacity +- [x] Change layer position +- [x] Canvas shape, rotation +- [x] Keypath search +- [ ] Multi view +- [ ] Play speed, type, direction +- [ ] Transforms + +
+ +## Getting Started +### Env Setup + +- Setup the emscripten sdk environment. Follow Down and Install steps [emscripten](https://emscripten.org/docs/getting_started/downloads.html) +- Clone the repo +```bash +$ git clone --recurse-submodules https://github.com/rlottie/rlottie.github.io.git +``` + +### Build +```bash +$ cd rlottie +$ ./wasm_build.sh {absolute_emsdk_folder_path} +$ cp builddir_wasm/src/rlottie-wasm.* ../ +``` +- NOTE : to get a callstack modify build.sh file by passing the build flag -s assertions=1 + + +### test +```bash +$ run ./test.sh +``` + +
+ +## License + +No License + +**But [gif.js](https://github.com/jnordberg/gif.js) has MIT License** diff --git a/components/leftPanel.vue b/components/leftPanel.vue new file mode 100644 index 0000000..8297340 --- /dev/null +++ b/components/leftPanel.vue @@ -0,0 +1,89 @@ + + + + + \ No newline at end of file diff --git a/components/navbar.vue b/components/navbar.vue new file mode 100644 index 0000000..93c5a34 --- /dev/null +++ b/components/navbar.vue @@ -0,0 +1,128 @@ + + + + + \ No newline at end of file diff --git a/components/property.vue b/components/property.vue new file mode 100644 index 0000000..2d21980 --- /dev/null +++ b/components/property.vue @@ -0,0 +1,266 @@ + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 031896e..9976726 100644 --- a/index.html +++ b/index.html @@ -1,55 +1,155 @@ - - - - - - - - rlottie viewer - - + + + + + + + + PrettyView + + + + + + + + + + + + + + +
+ + -
-

Experimental Multiple lottie view ClickToView ?

-
- Drag and Drop your Lottie JSON file to the window - Or - -
-
- -
-