Fancy wifi Table and Camera Load widget (Challenge) #11
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
rroohhh
requested changes
Mar 17, 2021
There was a problem hiding this comment.
Nice work so far. Please see the inline comment.
Some general notes:
- please make sure your code is formatted properly, you can run the autoformatter using
npm run format - please make sure the code is clean, no commented out code, no unused imports, etc
Finally, I think IN-USE could be visualized better by making the text in the row bold or changing the background of the row.
…nncecesary imports and comments.
|
Hello @rroohhh , thanks for suggesting changes. I have added a commit which caters to all your suggestions. Let me know if any more changes are required :) |
rroohhh
requested changes
Mar 18, 2021
There was a problem hiding this comment.
Great so far, however
- The formatting is still not completely clean (
npm run formatstill reformats some things) - What do you think about making the security column nicer using chips?
- Finally
Enhanced*are pretty generic names, I think more meaningful names would be great.
Also please see the inline comments.
|
Hi @rroohhh , I have made changes as per your suggestions. Also please check in the above suggestions, I have one query for you. link to comment Regarding recent commit, I have added chips for the security column and it looks good :). I have also checked the dependencies and updated it. Also, I have changed the colour from white to its hex equivalent(#ffff) in index.jsx, since it was causing some problems in rendering. Do let me know what do you think, meanwhile I will start working on the load graph :)
|
rroohhh
requested changes
Mar 21, 2021
|
Looks good so far, maybe left-aligning the Security column would be cleaner. |
|
Hi @rroohhh , I have added a commit for the load graph where I have used react-charts library. Let me know what you think :)
|
|
Also, I have made changes according to your previous suggestions in my latest commit. |
rroohhh
requested changes
Mar 23, 2021
There was a problem hiding this comment.
Good start on the load graph widget.
Some notes:
- Its missing a legend
- Its missing axis labels
- It gets quite laggy when running for some time
- The theme doesn't really match up with the rest of the site
- Zooming / scrolling would be great
Also see the inline notes.
|
hello @rroohhh , I have changed the library itself as it didn't offer much features. Now, I am using apex-charts and it looks better. It doesn't look jittery now. I have also added a color highlight in the graph if the load increases. Also, now we can download the data directly from the graph as csv or download the graph itself as svg. Re-render problem: Suggested solution: Suggestion to improve performance (display limited points) :
|
|
Also, I have replaced the bars string with an appropriate icon. I found those in the materialUI library. PFA - screenshot
|
rroohhh
requested changes
Mar 24, 2021
There was a problem hiding this comment.
Nice work,
hello @rroohhh , I have changed the library itself as it didn't offer much features. Now, I am using apex-charts and it looks better. It doesn't look jittery now. I have also added a color highlight in the graph if the load increases. Also, now we can download the data directly from the graph as csv or download the graph itself as svg.
Nice, I like the color highlights aswell as the csv / svg download!
Re-render problem:
When we need to zoom/ pan or interact in any way with the graph it resets because it's going to re-render every second.Suggested solution:
We can have a button which stops the live data and then we can interact with the graph, since it will not re-render. Should I work on this ?
This could work as a last resort solution, but finding something that does allow updating the data while keeping things like zoom and position would be a lot better.
Suggestion to improve performance (display limited points) :
We can specify at a time how much data we need to display, for instance we can show 100 points at a time, whenever our data exceeds 100 points, we will shift our data-array. But I am not sure if this is required ?
Well only displaying 100 points at a time would reduce the lag, but finding a way to atleast display like 10000 points interactively should be possible imo. For a really big number of points one could investigate some data reduction methods like averaging nearby points, but I don't think that should be necessary for only 10k points.
Futhermore, this graph is now missing a proper x axis, also it seems like it displays one tick / entry on the x axis per entry, which makes it quickly unreadable.
Glad you liked it
Hey, I have fixed this issue of resetting graph on zoom/pan, please check recent commit. I am manually accessing the chart through DOM and updating the series.
Processing large number of points should not be laggy anymore, from my latest commit I am only appending the series and the graph is not redrawing the previous points.
I am not really sure what you mean, can you please elaborate on this. I have removed the x-axis labels since they were not readable for large number of points. The labels will only be displayed when hovered. |
rroohhh
requested changes
Mar 25, 2021
There was a problem hiding this comment.
Hey, I have fixed this issue of resetting graph on zoom/pan, please check recent commit. I am manually accessing the chart through DOM and updating the series.
Nice, it works better now, bit it still seems to have some problems:
- panning is acting really strange and is noninterative
- if the data gets updated while selecting a interval to zoom to, the start of the interval gets reset to the left side
Processing large number of points should not be laggy anymore, from my latest commit I am only appending the series and the graph is not redrawing the previous points.
To me it seems still pretty laggy, for example try resizing the browser windows with ~100 points for example, that takes multiple seconds on my laptop
Futhermore, this graph is now missing a proper x axis, also it seems like it displays one tick / entry on the x axis per entry, which makes it quickly unreadable.
I am not really sure what you mean, can you please elaborate on this. I have removed the x-axis labels since they were not readable for large number of points. The labels will only be displayed when hovered.
Sorry for being unclear. What I meant was, that a increasing number does not seem like the correct x value for a timeseries, the time when the measurement was taken makes a lot more sense imo. So it would be great to have the time on the x-axis (and as x ticks).
Also while you have removed the x-axis labels, the ticks are still there.
|
Hey @rroohhh, I have added canvasJs charts, let me know if it is performant enough. Also, I haven't completely removed the previous library yet, I'll remove unused libs once we are fixed on one library. Let me know what you think, meanwhile I'll look at what other libs have to offer. :) |
|
Hey @rroohhh :), I have tried chartjs library this time. This library is open-source and is performant. I have removed unnecessary dependencies and files. Also I have tested it for 5 min of data (approx. 1000 total points), works fine. Please let me know what you think. :) |
|
I have just added some minor improvements. Also, since we are using canvas element this time, we can download/view the current state of the graph by simply right-click -> save/view image. |
hanupratap
changed the title
hanupratap
changed the title
hanupratap
changed the title
rroohhh
requested changes
Mar 30, 2021
There was a problem hiding this comment.
chartjs seems be the best performing yet. However there are some points where it doesn't hold up that well
- The zooming seems to act on a point granularity, meaning some amount of distance / rotation on the scroll wheel will make one point more / or less visible, regardless of the total number of visible points. This makes zooming basically impossible when there is a large number of points, as it gets very slow. I would expect zooming to work on a percentage base not a point base.
- Panning is similarily strange, in that it works on a point granularity aswell. This means the panning speed is different depending on the number of points visible and does not match up with the cursor movement atall.
- The x labels are handled in a very weird way. I would expect for a graph with time on the x axis to automatically choose suitable number of x ticks depending on the current zoom and label these with the corresponding time, completely independent of the data points.
- This does not have a
xvalue for the values atall. If some of the labels are the same, it renders the points on top of each other. - The popup when hovering over a point vanishes, when the chart is updated, making in essentially useless, as it is atmost visible for just 1 second.
frontend/components/LoadGraph.jsx
Outdated
| return { | ||
| x_value: time_stamp, | ||
| y_value: [one_min, five_min, fifteen_min], | ||
| original_str: str, |
frontend/components/LoadGraph.jsx
Outdated
|
|
||
| function extractLoadFromString(str = '') { | ||
| const list = str.split(','); | ||
| const time_stamp = list[0].trim(); |
There was a problem hiding this comment.
This does not really work (atleast on my system). I get something like xx:xx:xx up for x days x:xx instead of just the xx:xx:xx part.
frontend/components/LoadGraph.jsx
Outdated
|
|
||
| return ( | ||
| <div> | ||
| <Button |
There was a problem hiding this comment.
The left edge of this button is cut-off for me.
|
Oh also, having zoom on just the mousewheel makes it quite difficult to scroll the actual page. |
rroohhh
requested changes
Apr 3, 2021
frontend/components/LoadGraph.jsx
Outdated
| margin: '1rem', | ||
| marginBottom: '1.5rem', | ||
| display: 'flex', | ||
| fontFamily: 'Arial, Helvetica, sans-serif', |
There was a problem hiding this comment.
Is there a way to use the font from the theme instead of hardcoding it?
frontend/components/LoadGraph.jsx
Outdated
| strokeWidth: 1.5, | ||
| title: chart_title, | ||
| titleHeight: 24, | ||
| xlabel: 'Time(s)', |
| @@ -0,0 +1 @@ | |||
| {"v":"4.6.9","fr":30,"ip":0,"op":300,"w":800,"h":600,"nm":"Aperture","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":2,"ty":4,"nm":"Mask1","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[0],"e":[-12]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[-12],"e":[-12]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[-12],"e":[-30]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[-30],"e":[-30]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[-30],"e":[-12]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[-12],"e":[-12]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[-12],"e":[0]},{"t":240.0000097754}]},"p":{"a":0,"k":[327.182,282,0]},"a":{"a":0,"k":[-73.125,-18.5,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.8392156862745098,0.25882352941176473,0.25882352941176473,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"Shutter6","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[300],"e":[288]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[288],"e":[288]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[288],"e":[270]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[270],"e":[270]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[270],"e":[288]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[288],"e":[288]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[288],"e":[300]},{"t":240.0000097754}]},"p":{"a":0,"k":[348.182,354.25,0]},"a":{"a":0,"k":[-72.611,-18.267,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Mask6","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[300],"e":[288]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[288],"e":[288]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[288],"e":[270]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[270],"e":[270]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[270],"e":[288]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[288],"e":[288]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[288],"e":[300]},{"t":240.0000097754}]},"p":{"a":0,"k":[348.182,354.25,0]},"a":{"a":0,"k":[-72.611,-18.267,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.387454,0.387454,0.387454,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"Shutter5","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[240],"e":[228]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[228],"e":[228]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[228],"e":[210]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[210],"e":[210]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[210],"e":[228]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[228],"e":[228]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[228],"e":[240]},{"t":240.0000097754}]},"p":{"a":0,"k":[420.432,372.375,0]},"a":{"a":0,"k":[-72.308,-18.509,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":4,"nm":"Mask5","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[240],"e":[228]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[228],"e":[228]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[228],"e":[210]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[210],"e":[210]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[210],"e":[228]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[228],"e":[228]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[228],"e":[240]},{"t":240.0000097754}]},"p":{"a":0,"k":[420.432,372.375,0]},"a":{"a":0,"k":[-72.308,-18.509,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.3318627,0.3318627,0.3318627,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":7,"ty":4,"nm":"Shutter4","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[180],"e":[168]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[168],"e":[168]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[168],"e":[150]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[150],"e":[150]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[150],"e":[168]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[168],"e":[168]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[168],"e":[180]},{"t":240.0000097754}]},"p":{"a":0,"k":[472.557,319.125,0]},"a":{"a":0,"k":[-72.25,-18.625,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":8,"ty":4,"nm":"Mask4","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[180],"e":[168]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[168],"e":[168]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[168],"e":[150]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[150],"e":[150]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[150],"e":[168]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[168],"e":[168]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[168],"e":[180]},{"t":240.0000097754}]},"p":{"a":0,"k":[472.557,319.125,0]},"a":{"a":0,"k":[-72.25,-18.625,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.2803309,0.2803309,0.2803309,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":9,"ty":4,"nm":"Shutter3","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[120],"e":[108]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[108],"e":[108]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[108],"e":[90]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[90],"e":[90]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[90],"e":[108]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[108],"e":[108]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[108],"e":[120]},{"t":240.0000097754}]},"p":{"a":0,"k":[453.307,246.875,0]},"a":{"a":0,"k":[-72.753,-18.762,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":10,"ty":4,"nm":"Mask3","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[120],"e":[108]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[108],"e":[108]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[108],"e":[90]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[90],"e":[90]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[90],"e":[108]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[108],"e":[108]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[108],"e":[120]},{"t":240.0000097754}]},"p":{"a":0,"k":[453.307,246.875,0]},"a":{"a":0,"k":[-72.753,-18.762,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.2320159,0.2320159,0.2320159,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":11,"ty":4,"nm":"Shutter2","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[60],"e":[48]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[48],"e":[48]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[48],"e":[30]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[30],"e":[30]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[30],"e":[48]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[48],"e":[48]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[48],"e":[60]},{"t":240.0000097754}]},"p":{"a":0,"k":[379.807,227.875,0]},"a":{"a":0,"k":[-73.145,-18.559,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":12,"ty":4,"nm":"Mask2","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[60],"e":[48]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[48],"e":[48]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[48],"e":[30]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[30],"e":[30]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[30],"e":[48]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[48],"e":[48]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[48],"e":[60]},{"t":240.0000097754}]},"p":{"a":0,"k":[379.807,227.875,0]},"a":{"a":0,"k":[-73.145,-18.559,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","c":{"a":0,"k":[1,0,0.985202,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"fl","c":{"a":0,"k":[0.1655484,0.1655484,0.1655484,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":13,"ty":4,"nm":"Shutter1","tt":2,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[0],"e":[-12]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":30,"s":[-12],"e":[-12]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[-12],"e":[-30]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[-30],"e":[-30]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[-30],"e":[-12]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":180,"s":[-12],"e":[-12]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[-12],"e":[0]},{"t":240.0000097754}]},"p":{"a":0,"k":[327.182,282,0]},"a":{"a":0,"k":[-73.125,-18.5,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[160,57]},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-0.307,-47.006],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1}]}],"fonts":{"list":[{"fName":"Gotham-Book","fFamily":"Gotham","fStyle":"Book","ascent":73.9995727539062}]},"layers":[{"ddd":0,"ind":1,"ty":5,"nm":"2.8","cl":"8","ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[0],"e":[25]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[25],"e":[25]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[25],"e":[0]},{"t":160.000006516934}]},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":60,"s":[399.996,475,0],"e":[399.996,455,0],"to":[0,-3.33333325386047,0],"ti":[0,3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":70,"s":[399.996,455,0],"e":[399.996,455,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":150,"s":[399.996,455,0],"e":[399.996,475,0],"to":[0,3.33333325386047,0],"ti":[0,-3.33333325386047,0]},{"t":160.000006516934}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"t":{"d":{"k":[{"s":{"s":24,"f":"Gotham-Book","t":"","j":2,"tr":0,"lh":28.8,"ls":0,"fc":[0.11,0.11,0.11],"sc":[0,0,0],"sw":1,"of":false},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0]}},"a":[]},"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":5,"nm":"10","ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[0],"e":[25]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":10,"s":[25],"e":[25]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":60,"s":[25],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[0],"e":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":150,"s":[0],"e":[25]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":160,"s":[25],"e":[25]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[25],"e":[0]},{"t":220.000008960784}]},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":0,"s":[399.996,475,0],"e":[399.996,455,0],"to":[0,-3.33333325386047,0],"ti":[0,3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":10,"s":[399.996,455,0],"e":[399.996,455,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":60,"s":[399.996,455,0],"e":[399.996,435,0],"to":[0,-3.33333325386047,0],"ti":[0,3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":70,"s":[399.996,434.99999999999994,0],"e":[399.996,435,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":150,"s":[399.996,434.99999999999994,0],"e":[399.996,455,0],"to":[0,3.33333325386047,0],"ti":[0,-3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":160,"s":[399.996,455,0],"e":[399.996,455,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":210,"s":[399.996,455,0],"e":[399.996,475,0],"to":[0,3.33333325386047,0],"ti":[0,-3.33333325386047,0]},{"t":220.000008960784}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"t":{"d":{"k":[{"s":{"s":24,"f":"Gotham-Book","t":"","j":2,"tr":0,"lh":28.8,"ls":0,"fc":[0.11,0.11,0.11],"sc":[0,0,0],"sw":1,"of":false},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0]}},"a":[]},"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":5,"nm":"16","ks":{"o":{"a":1,"k":[{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":0,"s":[25],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":10,"s":[0],"e":[0]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0_1_0p167_0p167"],"t":210,"s":[0],"e":[25]},{"t":220.000008960784}]},"r":{"a":0,"k":0},"p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":0,"s":[399.996,455,0],"e":[399.996,435,0],"to":[0,-3.33333325386047,0],"ti":[0,3.33333325386047,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":10,"s":[399.996,434.99999999999994,0],"e":[399.996,435,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0,"y":1},"o":{"x":0.167,"y":0.167},"n":"0_1_0p167_0p167","t":210,"s":[399.996,434.99999999999994,0],"e":[399.996,455,0],"to":[0,3.33333325386047,0],"ti":[0,-3.33333325386047,0]},{"t":220.000008960784}]},"a":{"a":0,"k":[0,0,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"t":{"d":{"k":[{"s":{"s":24,"f":"Gotham-Book","t":"","j":2,"tr":0,"lh":28.8,"ls":0,"fc":[0.11,0.11,0.11],"sc":[0,0,0],"sw":1,"of":false},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0]}},"a":[]},"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"Circle Guide 2","ks":{"o":{"a":0,"k":25},"r":{"a":0,"k":0},"p":{"a":0,"k":[400,300,0]},"a":{"a":0,"k":[-111.812,-51.812,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[178,178]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"st","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":8},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[-111.812,-51.812],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"Circle Guide","td":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[400,300,0]},"a":{"a":0,"k":[-111.812,-51.812,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[150,150]},"p":{"a":0,"k":[0,0]},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[-111.812,-51.812],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":300.00001221925,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":0,"nm":"Shutters","tt":1,"refId":"comp_0","ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[400,300,0]},"a":{"a":0,"k":[400,300,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"w":800,"h":600,"ip":0,"op":450.000018328876,"st":0,"bm":0,"sr":1}],"chars":[{"ch":"1","size":24,"style":"Book","w":35.8,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[18.027,0],[25.882,0],[25.882,-70.999],[20.041,-70.999],[2.82,-65.057],[4.733,-58.612],[18.027,-62.741]],"o":[[18.027,0],[25.882,0],[25.882,-70.999],[20.041,-70.999],[2.82,-65.057],[4.733,-58.612],[18.027,-62.741]],"v":[[18.027,0],[25.882,0],[25.882,-70.999],[20.041,-70.999],[2.82,-65.057],[4.733,-58.612],[18.027,-62.741]],"c":true}},"nm":"1","mn":"ADBE Vector Shape - Group"}],"nm":"1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[53.825,0],[61.681,0],[61.681,-70.999],[55.84,-70.999],[38.618,-65.057],[40.532,-58.612],[53.825,-62.741]],"c":true}},"nm":"1","mn":"ADBE Vector Shape - Group"}],"nm":"1","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":"6","size":24,"style":"Book","w":64.7,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[25.781,1.208],[58.813,-8.66],[58.813,-22.458],[47.534,-44.11],[18.934,-39.981],[14.301,-34.241],[21.45,-64.453],[46.426,-61.935],[56.296,-63.647],[43.908,-71.704],[6.143,-54.886],[6.143,-33.234],[9.365,-11.582]],"o":[[47.837,1.208],[58.813,-22.256],[58.813,-35.651],[25.278,-44.11],[14.301,-33.234],[14.301,-50.153],[41.491,-64.453],[51.663,-57.504],[50.153,-68.682],[17.019,-71.704],[6.143,-33.435],[6.143,-18.833],[19.436,-1.511]],"v":[[33.536,1.208],[58.813,-22.256],[58.813,-22.458],[34.442,-44.11],[14.301,-33.234],[14.301,-34.241],[35.046,-64.453],[51.663,-57.504],[56.296,-63.647],[35.449,-71.704],[6.143,-33.435],[6.143,-33.234],[15.005,-5.942]],"c":true}},"nm":"6","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[44.009,-5.841],[15.811,-12.689],[15.811,-21.854],[22.861,-37.262],[50.656,-30.817],[50.656,-21.954]],"o":[[23.263,-5.841],[15.811,-21.652],[15.811,-29.709],[43.607,-37.262],[50.656,-22.156],[50.656,-12.991]],"v":[[33.636,-5.841],[15.811,-21.652],[15.811,-21.854],[33.435,-37.262],[50.656,-22.156],[50.656,-21.954]],"c":true}},"nm":"6","mn":"ADBE Vector Shape - Group"}],"nm":"6","np":5,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-7.755,0],[0,13.596],[0,0],[13.092,0],[4.633,-6.747],[0,0],[-13.596,0],[-5.237,-4.431],[0,0],[8.459,0],[0,-21.451],[0,0],[-5.64,-5.64]],"o":[[14.301,0],[0,0],[0,-13.193],[-9.164,0],[0,0],[0,-15.912],[6.445,0],[0,0],[-6.143,-5.035],[-18.43,0],[0,0],[0,14.401],[4.431,4.431]],"v":[[98.235,1.208],[123.512,-22.256],[123.512,-22.458],[99.141,-44.11],[78.999,-33.234],[78.999,-34.241],[99.745,-64.453],[116.362,-57.504],[120.995,-63.647],[100.148,-71.704],[70.842,-33.435],[70.842,-33.234],[79.704,-5.942]],"c":true}},"nm":"6","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[10.373,0],[0,8.963],[0,0],[-10.574,0],[0,-8.661],[0,0]],"o":[[-10.373,0],[0,0],[0,-7.855],[10.172,0],[0,0],[0,8.963]],"v":[[98.335,-5.841],[80.51,-21.652],[80.51,-21.854],[98.134,-37.262],[115.355,-22.156],[115.355,-21.954]],"c":true}},"nm":"6","mn":"ADBE Vector Shape - Group"},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge"}],"nm":"6","np":5,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":"0","size":24,"style":"Book","w":71.5,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[17.725,1.208],[65.762,-15.509],[65.762,-35.449],[54.281,-71.704],[6.244,-54.987],[6.244,-35.046]],"o":[[54.08,1.208],[65.762,-35.248],[65.762,-55.188],[18.027,-71.704],[6.244,-35.248],[6.244,-15.307]],"v":[[35.953,1.208],[65.762,-35.248],[65.762,-35.449],[36.154,-71.704],[6.244,-35.248],[6.244,-35.046]],"c":true}},"nm":"0","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[49.347,-6.042],[14.502,-19.84],[14.502,-35.449],[22.76,-64.453],[57.504,-50.656],[57.504,-35.046]],"o":[[22.961,-6.042],[14.502,-35.248],[14.502,-50.958],[49.045,-64.453],[57.504,-35.248],[57.504,-19.638]],"v":[[36.154,-6.042],[14.502,-35.248],[14.502,-35.449],[35.953,-64.453],[57.504,-35.248],[57.504,-35.046]],"c":true}},"nm":"0","mn":"ADBE Vector Shape - Group"}],"nm":"0","np":5,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-18.228,0],[0,19.739],[0,0],[18.127,0],[0,-19.739],[0,0]],"o":[[18.127,0],[0,0],[0,-19.739],[-18.127,0],[0,0],[0,19.739]],"v":[[107.452,1.208],[137.262,-35.248],[137.262,-35.449],[107.654,-71.704],[77.744,-35.248],[77.744,-35.046]],"c":true}},"nm":"0","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[13.193,0],[0,15.408],[0,0],[-13.193,0],[0,-15.408],[0,0]],"o":[[-13.193,0],[0,0],[0,-15.509],[13.092,0],[0,0],[0,15.408]],"v":[[107.654,-6.042],[86.002,-35.248],[86.002,-35.449],[107.452,-64.453],[129.004,-35.248],[129.004,-35.046]],"c":true}},"nm":"0","mn":"ADBE Vector Shape - Group"},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge"}],"nm":"0","np":5,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":"2","size":24,"style":"Book","w":59.9,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[4.834,0],[54.08,0],[54.08,-7.251],[16.718,-7.251],[35.55,-23.969],[53.375,-41.089],[53.375,-51.562],[44.211,-71.503],[12.488,-65.964],[11.984,-52.267],[22.86,-64.352],[45.117,-59.116],[41.19,-38.37],[4.834,-6.143]],"o":[[4.834,0],[54.08,0],[54.08,-7.251],[16.718,-7.251],[47.937,-34.745],[53.375,-51.361],[53.375,-63.043],[19.135,-71.503],[6.143,-56.497],[17.624,-60.122],[38.571,-64.352],[45.117,-43.808],[30.414,-28.702],[4.834,-6.143]],"v":[[4.834,0],[54.08,0],[54.08,-7.251],[16.718,-7.251],[35.55,-23.969],[53.375,-51.361],[53.375,-51.562],[31.522,-71.503],[6.143,-56.497],[11.984,-52.267],[30.917,-64.352],[45.117,-50.858],[30.414,-28.702],[4.834,-6.143]],"c":true}},"nm":"2","mn":"ADBE Vector Shape - Group"}],"nm":"2","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,10.272],[0,0],[12.689,0],[6.345,-9.467],[0,0],[-8.057,0],[0,-8.258],[10.776,-9.668],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[12.387,-10.776],[0,0],[0,-11.481],[-12.387,0],[0,0],[5.64,-7.855],[7.654,0],[0,7.05],[0,0],[0,0]],"v":[[64.734,0],[113.98,0],[113.98,-7.251],[76.617,-7.251],[95.45,-23.969],[113.275,-51.361],[113.275,-51.562],[91.422,-71.503],[66.043,-56.497],[71.884,-52.267],[90.817,-64.352],[105.017,-50.858],[90.314,-28.702],[64.734,-6.143]],"c":true}},"nm":"2","mn":"ADBE Vector Shape - Group"}],"nm":"2","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":".","size":24,"style":"Book","w":24.5,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.755,0],[17.02,0],[17.02,-10.574],[7.755,-10.574]],"o":[[7.755,0],[17.02,0],[17.02,-10.574],[7.755,-10.574]],"v":[[7.755,0],[17.02,0],[17.02,-10.574],[7.755,-10.574]],"c":true}},"nm":".","mn":"ADBE Vector Shape - Group"}],"nm":".","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[32.254,0],[41.519,0],[41.519,-10.574],[32.254,-10.574]],"c":true}},"nm":".","mn":"ADBE Vector Shape - Group"}],"nm":".","np":3,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"},{"ch":"8","size":24,"style":"Book","w":63,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[16.718,1.007],[58.209,-7.05],[58.209,-19.235],[52.066,-33.334],[55.792,-44.513],[55.792,-52.872],[44.614,-71.503],[7.654,-63.748],[7.654,-52.67],[13.193,-39.477],[5.237,-27.494],[5.237,-18.933]],"o":[[46.728,1.007],[58.209,-19.034],[58.209,-27.594],[50.253,-39.477],[55.792,-52.67],[55.792,-63.748],[18.832,-71.503],[7.654,-52.872],[7.654,-44.513],[11.28,-33.435],[5.237,-19.135],[5.237,-7.15]],"v":[[31.723,1.007],[58.209,-19.034],[58.209,-19.235],[43.707,-36.456],[55.792,-52.67],[55.792,-52.872],[31.723,-71.503],[7.654,-52.872],[7.654,-52.67],[19.739,-36.456],[5.237,-19.135],[5.237,-18.933]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[40.686,-39.276],[15.61,-44.513],[15.61,-52.368],[22.559,-64.554],[47.836,-59.317],[47.836,-52.167]],"o":[[22.76,-39.276],[15.61,-52.167],[15.61,-59.418],[40.887,-64.554],[47.836,-52.368],[47.836,-44.513]],"v":[[31.723,-39.276],[15.61,-52.167],[15.61,-52.368],[31.723,-64.554],[47.836,-52.368],[47.836,-52.167]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[43.304,-5.942],[13.293,-12.085],[13.293,-19.336],[21.451,-32.73],[50.153,-27.191],[50.153,-19.135]],"o":[[20.142,-5.942],[13.293,-19.135],[13.293,-27.191],[41.995,-32.73],[50.153,-19.336],[50.153,-11.985]],"v":[[31.723,-5.942],[13.293,-19.135],[13.293,-19.336],[31.723,-32.73],[50.153,-19.336],[50.153,-19.135]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"}],"nm":"8","np":6,"cix":2,"ix":1,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-15.005,0],[0,11.984],[0,0],[8.359,3.122],[0,8.157],[0,0],[12.891,0],[0,-10.876],[0,0],[-6.546,-3.021],[0,-8.359],[0,0]],"o":[[15.005,0],[0,0],[0,-8.359],[6.546,-3.021],[0,0],[0,-10.876],[-12.891,0],[0,0],[0,8.157],[-8.459,3.021],[0,0],[0,11.783]],"v":[[94.722,1.007],[121.208,-19.034],[121.208,-19.235],[106.706,-36.456],[118.791,-52.67],[118.791,-52.872],[94.722,-71.503],[70.653,-52.872],[70.653,-52.67],[82.738,-36.456],[68.236,-19.135],[68.236,-18.933]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[8.963,0],[0,7.654],[0,0],[-9.164,0],[0,-6.949],[0,0]],"o":[[-8.963,0],[0,0],[0,-7.05],[9.164,0],[0,0],[0,7.654]],"v":[[94.722,-39.276],[78.609,-52.167],[78.609,-52.368],[94.722,-64.554],[110.835,-52.368],[110.835,-52.167]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[11.581,0],[0,7.05],[0,0],[-10.272,0],[0,-7.855],[0,0]],"o":[[-11.581,0],[0,0],[0,-7.855],[10.272,0],[0,0],[0,7.15]],"v":[[94.722,-5.942],[76.292,-19.135],[76.292,-19.336],[94.722,-32.73],[113.152,-19.336],[113.152,-19.135]],"c":true}},"nm":"8","mn":"ADBE Vector Shape - Group"},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge"}],"nm":"8","np":6,"cix":2,"ix":2,"mn":"ADBE Vector Group"}]},"fFamily":"Gotham"}]} | |||
There was a problem hiding this comment.
Where is this coming from? If you have created it yourself, adding the source file aswell would be nice, otherwise, what license is it under?
There was a problem hiding this comment.
These are free Lottie-animations and comes under creative commons license. This is the link to the animation, you can see the license at the end of the page. I have changed the colors to match the theme :)
| @@ -0,0 +1 @@ | |||
| {"v":"4.11.1","fr":29.9700012207031,"ip":0,"op":120.0000048877,"w":300,"h":300,"nm":"Text","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"internet Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[150,140,0],"ix":2},"a":{"a":0,"k":[50,42.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.4,2],[17.3,0],[12.4,-10.2],[-2.1,-2.3],[0,0],[-2.3,1.9],[-14.4,0],[-10.3,-8.6],[-2,2.3],[0,0]],"o":[[-12.4,-10.3],[-17.3,0],[-2.4,2],[0,0],[2,2.3],[10.3,-8.6],[14.4,0],[2.3,1.9],[0,0],[2.1,-2.3]],"v":[[45.5,2.8],[0,-13.6],[-45.5,2.8],[-46.1,10.6],[-45.7,11.1],[-38,11.7],[0,-2],[38,11.7],[45.7,11.1],[46.1,10.6]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50,17.533],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3,"s":[30],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":86,"s":[0],"e":[30]},{"t":91.000003706506}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.4,1.9],[12.2,0],[8.8,-7.2],[-2,-2.3],[0,0],[-2.3,1.9],[-9.5,0],[-6.799,-5.6],[-1.899,2.2],[0,0]],"o":[[-8.8,-7.2],[-12.2,0],[-2.4,2],[0,0],[1.9,2.2],[6.9,-5.6],[9.5,0],[2.3,1.9],[0,0],[2.1,-2.3]],"v":[[32.25,0.4],[-0.05,-11.1],[-32.35,0.4],[-33.05,8.2],[-32.85,8.5],[-25.25,9.2],[-0.05,0.2],[25.15,9.2],[32.75,8.5],[32.95,8.2]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50.05,35.134],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[32],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":11,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":82,"s":[0],"e":[30]},{"t":88.0000035843135}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[2.5,1.9],[7.2,0],[5.3,-4.1],[-2,-2.3],[-2.3,1.8],[-4.7,0],[-3.4,-2.6],[-1.9,2.2]],"o":[[-5.3,-4.2],[-7.2,0],[-2.4,1.9],[1.9,2.2],[3.4,-2.7],[4.7,0],[2.3,1.8],[2,-2.3]],"v":[[19.2,-1.85],[0,-8.45],[-19.2,-1.85],[-19.9,5.95],[-12.4,6.65],[0,2.45],[12.4,6.65],[19.9,5.95]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50,52.583],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8,"s":[30],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":14,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":79,"s":[0],"e":[30]},{"t":83.0000033806593}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-4.584,0],[0,-4.584],[4.584,0],[0,4.584]],"o":[[4.584,0],[0,4.584],[-4.584,0],[0,-4.584]],"v":[[0,-8.3],[8.3,0],[0,8.3],[-8.3,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9803921568627451,0.5294117647058824,0.33725490196078434,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50,72.534],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p833_1_0p333_0","0p833_1_0p333_0"],"t":12,"s":[100,100],"e":[250,250]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_1_0p167_0p167","0p833_1_0p167_0p167"],"t":18,"s":[250,250],"e":[100,100]},{"i":{"x":[0.833,0.833],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"n":["0p833_1_0p167_0","0p833_1_0p167_0"],"t":24,"s":[100,100],"e":[100,100]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0,0]},"n":["0p833_0p833_0p167_0","0p833_0p833_0p167_0"],"t":63,"s":[100,100],"e":[250,250]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.167,0.167],"y":[0,0]},"n":["0p667_1_0p167_0","0p667_1_0p167_0"],"t":70,"s":[250,250],"e":[100,100]},{"t":77.0000031362743}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":12,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":24,"s":[100],"e":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":44,"s":[0],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":63,"s":[100],"e":[100]},{"t":70.0000028511585}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120.0000048877,"st":0,"bm":0}]} | |||
There was a problem hiding this comment.
This is the link to animation, I have changed the colors to match the theme :)
|
Hey @rroohhh , I have added accordion on the sys-info page, also I have switched on the option of unmount when collapsed on the accordion which will improve performance. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WebUI Challenge Task 1:
I have added sorting functionality based on the keys of the objects available in WiFi tab. Also, I have recreated the table to match the material theme.
NOTE : Click the header of the column to sort. Initially sorted by IN-USE key