Add property customization

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
+<center><img src="https://user-images.githubusercontent.com/25967949/94992643-7173a580-05c6-11eb-8514-322f459a88d8.png"></center>
 
-# 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.
+<br>
 
+## 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
+
+<br>
+
+## 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
+```
+
+<br>
+
+## License
+
+No License
+
+**But [gif.js](https://github.com/jnordberg/gif.js) has MIT License**

components/leftPanel.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="sidebar">
+    <!-- preview -->
+    <div class="preview container py-3 d-flex align-items-center">
+      <h5
+        class="ml-2 name mb-0 text-white"
+        id="contentName" 
+        title="FileName"
+      >
+        Anubis.json
+      </h5>
+    </div>
+
+    <!-- layer input field -->
+    <div class="keypath-input-section container">
+      <div class="d-flex align-items-center mb-3">
+        <p class="title m-0">Keypath</p>
+        <v-tooltip right>
+          <template v-slot:activator="{ on, attrs }">
+            <em
+              class="far fa-question-circle fa-sm ml-2"
+              v-bind="attrs"
+              v-on="on"
+            >
+            </em>
+          </template>
+          <span>Please type in keypath and press enter</span>
+        </v-tooltip>
+      </div>
+      <div class="row no-gutters">
+        <!-- keypath input field -->
+        <v-text-field
+          v-model="keypath"
+          placeholder="ex) parentLayer.childLayer"
+          prepend-icon="mdi-magnify"
+          solo
+          rounded
+          hide-details
+          clearable
+          clear-icon="mdi-close-circle-outline"
+          @keypress.enter="getKeypath"
+          @click:prepend="getKeypath"
+        ></v-text-field>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  name: 'leftPanel',
+
+  data() {
+    return {
+      keypath: '',
+    }
+  },
+
+  methods: {
+    getKeypath() {
+      if (this.keypath.trim() !== '') {
+        if (this.keypath.slice(-2) === '**') {
+          this.$emit('keypath-changed', this.keypath)
+        } else {
+          this.$emit('keypath-changed', this.keypath + '.**')
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .sidebar {
+    height: 92vh;
+  }
+
+  .preview {
+    height: 12vh;
+  }
+
+  .keypath-input-section {
+    height: 15vh;
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+</style>

components/navbar.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="navbar d-flex justify-content-between">
+    <!-- logo -->
+    <div class="d-flex align-items-center">
+      <img
+        class="logo"
+        src="https://user-images.githubusercontent.com/25967949/94992643-7173a580-05c6-11eb-8514-322f459a88d8.png"
+        alt="logo"
+      >
+    </div>
+    <!-- button group -->
+    <div class="d-flex">
+      <!-- import dialog -->
+      <v-dialog
+        v-model="importDialog"
+        max-width="500"
+      >
+        <template v-slot:activator="{ on, attrs }">
+          <button
+            class="btn accent mx-2"
+            :class="{ 'text-white': $vuetify.theme.dark }" 
+            depressed 
+            v-bind="attrs"
+            v-on="on"
+          >
+            Import
+            <em class="fas fa-file-import ml-2"></em>
+          </button>
+        </template>
+        <v-card>
+          <v-card-title class="headline mb-4">
+            Import New Lottie File
+          </v-card-title>
+          <v-card-text class="pt-3">
+            <div class="filebox d-flex justify-center">
+              <input
+                class="upload-hidden"
+                id="fileSelector"
+                type="file"
+                accept=".json"
+                placeholder="New Lottie"
+                hidden
+                @click="clickFileUpload"
+                @change="clickImportDialogClose"
+              >
+              <v-btn
+                class="py-7"
+                outlined
+                color="upload"
+                width="100%"
+                @click="clickNewLottie"
+              >
+                <v-icon class="mr-2">mdi-paperclip</v-icon>
+                Upload Lottie File
+              </v-btn>
+            </div>
+            <h5 class="my-3 text-center">or</h5>
+            <div class="d-flex align-items-center">
+              <v-text-field
+                v-model="lottieURL"
+                outlined
+                placeholder="Lottie File URL"
+                hide-details
+                color="icon"
+              ></v-text-field>
+              <v-btn
+                class="ml-4"
+                large
+                color="accent"
+                @click="enterLottieURL"
+              >
+                Import
+              </v-btn>
+            </div>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn
+              text
+              @click="clickImportDialogClose"
+            >
+              Close
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  name: 'navbar',
+  data() {
+    return {
+      importDialog: false,
+      lottieURL: ""
+    }
+  },
+  methods: {
+    clickImportDialogClose() {
+      this.importDialog = false
+    },
+    clickFileUpload() {
+      addImportListener()
+    },
+    clickNewLottie() {
+      var fileInput = document.getElementById('fileSelector')
+      fileInput.click()
+    },
+    enterLottieURL() {
+      getLottieFromUrl(this.lottieURL)
+      this.clickImportDialogClose()
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .navbar {
+    height: 8vh;
+    padding-left: 1vw;
+    padding-right: 1vw;
+  }
+  .logo {
+    height: 5vh; 
+  }
+</style>