From abce8802e3120b9cdaac09eef176b0ae9ac7515c Mon Sep 17 00:00:00 2001 From: Chae Lin Shin Date: Mon, 19 Oct 2020 04:21:47 +0900 Subject: [PATCH 1/5] Add property customization --- README.md | 58 +++++-- components/leftPanel.vue | 89 +++++++++++ components/navbar.vue | 128 +++++++++++++++ components/property.vue | 302 ++++++++++++++++++++++++++++++++++++ index.html | 190 +++++++++++++++++------ index.js | 174 +++++++++++++++++++++ main.js | 23 ++- module-rlottie-webworker.js | 228 --------------------------- module-rlottie.js | 204 ------------------------ multiview.html | 28 ---- multiview.js | 66 -------- rlottie-handler.js | 87 +++++++++++ rlottie-module.js | 18 +++ rlottie-wasm.js | 2 +- rlottie-wasm.wasm | Bin 368356 -> 363023 bytes rlottie-worker.js | 102 ++++++------ style.css | 121 +++++++++++---- 17 files changed, 1151 insertions(+), 669 deletions(-) create mode 100644 components/leftPanel.vue create mode 100644 components/navbar.vue create mode 100644 components/property.vue create mode 100644 index.js delete mode 100644 module-rlottie-webworker.js delete mode 100644 module-rlottie.js delete mode 100644 multiview.html delete mode 100644 multiview.js create mode 100644 rlottie-handler.js create mode 100644 rlottie-module.js diff --git a/README.md b/README.md index 826e2c7..469af8c 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 DoDown 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..e4aae8c --- /dev/null +++ b/components/property.vue @@ -0,0 +1,302 @@ + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 031896e..4b35d38 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 - -
-
- -
-
@@ -160,30 +161,7 @@ module.exports = { name: 'property', data() { return { - color: { - alpha: Number(), - hex: String(), - hexa: String(), - hsla: { - h: Number(), - s: Number(), - l: Number(), - a: Number(), - }, - hsva: { - h: Number(), - s: Number(), - v: Number(), - a: Number(), - }, - hue: Number(), - rgba: { - r: Number(), - g: Number(), - b: Number(), - a: Number() - } - }, + color: '', opacity: null, strokeWidth: null, xPos: null, @@ -195,42 +173,28 @@ module.exports = { }, watch: { keypath() { - this.color = { - alpha: Number(), - hex: String(), - hexa: String(), - hsla: { - h: Number(), - s: Number(), - l: Number(), - a: Number(), - }, - hsva: { - h: Number(), - s: Number(), - v: Number(), - a: Number(), - }, - hue: Number(), - rgba: { - r: Number(), - g: Number(), - b: Number(), - a: Number() - } - }, + this.color = '' this.opacity = null, this.strokeWidth = null, this.xPos = null, this.yPos = null }, - color() { - if (this.color.hex) { - setLayerColor(this.keypath, this.color.rgba.r/255, this.color.rgba.g/255, this.color.rgba.b/255) - } - } }, methods: { + changeColor() { + if (this.color !== '#FF0000FF') { + if (this.color.toString().match(/#[a-zA-Z0-9]{6,}/)) { + this.color = this.color.substr(0, 7); + var bigint = parseInt(this.color.substr(1, 7), 16); + var r = (bigint >> 16) & 255; + var g = (bigint >> 8) & 255; + var b = bigint & 255; + setLayerColor(this.keypath, r/255, g/255, b/255) + } + } else { + this.color = '#000000' + } + }, changeOpacity(opacity) { if (opacity && opacity <= 100 && opacity >= 0) { setLayerOpacity(this.keypath, Number(opacity)); diff --git a/index.html b/index.html index 4b35d38..9976726 100644 --- a/index.html +++ b/index.html @@ -140,7 +140,7 @@ }, data() { return { - keypath: null + keypath: '' } }, methods: {