joshua/dash-visualizer
1
0
Fork 0
mirror of https://github.com/seigler/dash-visualizer synced 2025-07-26 01:06:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

change sound pitches, add gradient easing, update logo

Browse source
This commit is contained in:
Joshua Seigler 2019-04-03 12:44:41 -04:00
parent 5fcd2fcb9c
commit 500486b17d
4 changed files with 25 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/application.js
View file

@ -72,12 +72,12 @@ var App = {
var onTransaction = function(data) {
console.log(data);
if (!muted) {
if (data.valueOut < 10) {
playSound('tx-sm', playbackRate(data.valueOut, 0.00001, 10, 1, 4));
if (data.valueOut < 1) {
playSound('tx-sm', playbackRate(data.valueOut, 0.00001, 10, 1.5, 6));
} else if (data.valueOut < 1000) {
playSound('tx-md', playbackRate(data.valueOut, 10, 1000, 0.5, 1));
playSound('tx-md', playbackRate(data.valueOut, 1, 1000, 0.5, 2));
} else if (data.valueOut >= 1000) {
playSound('tx-lg', playbackRate(data.valueOut, 6000, 1000, 0.25, 1));
playSound('tx-lg', playbackRate(data.valueOut, 6000, 1000, 0.5, 1.5));
}
}
var tx = document.createElement('div');

2
app/assets/assets/Dash-logo.svg
View file

@ -1,2 +1,2 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="Layer_1" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 226.777 226.777" xml:space="preserve" height="226.78px" viewBox="0 0 226.777 226.777" width="226.78px" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata9"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><path id="path3" fill="#fff" opacity="0.2" d="m113.39 0c-62.623 0-113.39 50.767-113.39 113.39 0 62.62 50.766 113.39 113.39 113.39 62.62 0 113.39-50.77 113.39-113.39 0-62.623-50.77-113.39-113.39-113.39zm0 6.9668a106.42 106.42 0 0 1 106.42 106.42 106.42 106.42 0 0 1 -106.42 106.42 106.42 106.42 0 0 1 -106.42 -106.42 106.42 106.42 0 0 1 106.42 -106.42zm-35.624 69.328l-5.723 18.541h75.787l-11.41 37.114h-76.397l-5.72 18.54h81.227c7.94 0 10.06-1.39 15.74-4.71 5.67-3.33 10.1-9.14 12.5-16.06s8.26-26.44 10.06-32.947c1.8-6.506 2.49-8.998 0-13.839-2.49-4.847-7.61-6.639-11.49-6.639h-84.574zm-21.204 28.505l-5.236 17.03h45.264l5.24-17.03h-45.268z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.987 26.988" height="102" width="102" opacity="0.2"><defs><clipPath id="b"><path d="M643.347 374.719h88.588v70.703h-88.588z"/></clipPath><clipPath id="a"><path d="M0 0h841.89v595.276H0z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.15724 0 0 -.15724 -94.698 77.973)" stroke="#fff" fill="#008ce3" fill-opacity="0" stroke-width="4.77"><path d="M688.066 329.303c44.607 0 80.768 36.16 80.768 80.768 0 44.607-36.16 80.769-80.768 80.769-44.607 0-80.768-36.162-80.768-80.77 0-44.607 36.161-80.767 80.768-80.767"/></g><g clip-path="url(#b)" transform="matrix(.15724 0 0 -.15724 -94.698 77.973)" fill="#fff"><path d="M700.375 445.422h-31.701l-2.627-14.683 28.607-.036c14.089.005 18.254-5.114 18.135-13.6-.061-4.35-1.947-11.703-2.761-14.088-2.172-6.353-6.63-13.603-23.353-13.577l-27.808.012-2.632-14.697h31.63c11.157 0 15.9 1.297 20.928 3.62 11.139 5.144 17.767 16.139 20.423 30.487 3.954 21.363-.971 36.562-28.841 36.562M888.046 374.72l5.32 30.223c.959 5.96-1.46 8.514-7.42 8.514h-8.474l-6.811-38.736h-17.24l12.472 70.7h17.24l-3.32-18.77h12.915c15.11 0 20.539-6.596 17.878-21.708l-5.32-30.222z"/><path d="M654.994 417.46c-8.304 0-9.494-5.41-10.28-8.681-1.029-4.281-1.367-6.016-1.367-6.016h32.46c8.304 0 9.494 5.41 10.28 8.682 1.03 4.282 1.367 6.016 1.367 6.016z"/></g></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

Before After
Before After

20
app/styles/main.less
View file

@ -34,7 +34,25 @@ a {
height: 8em;
left: 0;
right: 0;
background-image: linear-gradient(to top, black, transparent);
background-image: linear-gradient(
to top,
hsl(208.13, 72.73%, 43.14%) 0%,
hsla(208.13, 72.73%, 43.14%, 0.987) 8.1%,
hsla(208.13, 72.73%, 43.14%, 0.951) 15.5%,
hsla(208.13, 72.73%, 43.14%, 0.896) 22.5%,
hsla(208.13, 72.73%, 43.14%, 0.825) 29%,
hsla(208.13, 72.73%, 43.14%, 0.741) 35.3%,
hsla(208.13, 72.73%, 43.14%, 0.648) 41.2%,
hsla(208.13, 72.73%, 43.14%, 0.55) 47.1%,
hsla(208.13, 72.73%, 43.14%, 0.45) 52.9%,
hsla(208.13, 72.73%, 43.14%, 0.352) 58.8%,
hsla(208.13, 72.73%, 43.14%, 0.259) 64.7%,
hsla(208.13, 72.73%, 43.14%, 0.175) 71%,
hsla(208.13, 72.73%, 43.14%, 0.104) 77.5%,
hsla(208.13, 72.73%, 43.14%, 0.049) 84.5%,
hsla(208.13, 72.73%, 43.14%, 0.013) 91.9%,
hsla(208.13, 72.73%, 43.14%, 0) 100%
);
z-index: 2;
pointer-events: none;
}

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "dash-visualizer",
"version": "0.1.0",
"version": "0.2.0",
"description": "Dash transaction visualizer",
"main": "app.js",
"repository": "git@github.com:seigler/dash-visualizer.git",