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

publish: change sound pitches, add gradient easing, update logo

Browse source 
generated from commit d400a4a158d3f25ca1dd8dc52d442a4853343c90
This commit is contained in:
Joshua Seigler 2019-04-03 12:53:08 -04:00
parent 793c9ef4ab
commit 8a558586dd
5 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
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

2
bundle.css
View file

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

2
bundle.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["app/styles/main.less"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"public/bundle.css","sourcesContent":["body {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 140%;\n background-image: url('assets/Dash-logo.svg'), linear-gradient(to bottom right, #1e73be, #073a66);\n background-size: 50vmin auto, cover;\n background-position: center;\n background-attachment: fixed;\n background-repeat: no-repeat;\n background-color: #1e73be;\n color: white;\n min-height: 100vh;\n}\n* {\n box-sizing: inherit;\n}\na {\n color: inherit;\n text-decoration: none;\n}\n#transactionList {\n padding: 1em 0 0;\n mix-blend-mode: screen;\n opacity: 0.75;\n height: 100vh;\n overflow: hidden;\n}\n#transactionList:after {\n content: '';\n position: fixed;\n bottom: 0;\n height: 8em;\n left: 0;\n right: 0;\n background-image: linear-gradient(to top, black, transparent);\n z-index: 2;\n pointer-events: none;\n}\n#connectionStatus.is-connected ~ #transactionList:empty:before {\n content: 'Waiting for first transaction...';\n display: block;\n text-align: center;\n font-size: 2em;\n opacity: 0.5;\n}\n.tx {\n position: relative;\n margin: 3px auto;\n width: 20em;\n min-width: 80%;\n max-width: 100%;\n z-index: 1;\n}\n.txValue {\n display: none;\n flex: 0 0 auto;\n line-height: 1.25;\n}\n.txOutputs {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n align-content: stretch;\n}\n.txOut {\n position: relative;\n flex: 1 1 auto;\n background-color: white;\n}\n.txOut:first {\n border-left: 3px solid black;\n}\n.txOut:after {\n content: '';\n width: 3px;\n background: black;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n}\n.blockDivider {\n display: block;\n margin: 1em -1em -1.5em;\n background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.125));\n padding: 0.125em 1em 1.5em;\n color: rgba(0, 0, 0, 0);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.blockDivider:hover,\n.blockDivider:focus {\n color: inherit;\n}\n#muteToggle,\n#connectionStatus {\n position: fixed;\n top: 0;\n width: 8em;\n background: white;\n border: solid black;\n padding: 0.5em;\n font-size: 0.8em;\n text-transform: uppercase;\n font-weight: bold;\n text-align: center;\n color: black;\n}\n#muteToggle {\n left: 0;\n border-radius: 0 0 0.5em 0;\n border-width: 0 0.1em 0.1em 0;\n transition: opacity 0.5s;\n transition-delay: 1s;\n opacity: 0;\n cursor: pointer;\n z-index: 100;\n}\n#muteToggle:hover {\n opacity: 1;\n transition-delay: 0s;\n}\n#muteToggle:before {\n content: 'Mute';\n}\n#muteToggle.is-muted:before {\n content: 'Un-mute';\n}\n#connectionStatus {\n right: 0;\n border-radius: 0 0 0 0.5em;\n border-width: 0 0 0.1em 0.1em;\n transition: transform 0.5s;\n transform: none;\n}\n#connectionStatus.is-disconnected:before {\n content: 'Disconnected';\n color: red;\n}\n#connectionStatus.is-connecting:before {\n content: 'Connecting...';\n color: black;\n}\n#connectionStatus.is-connected:before {\n content: 'Connected';\n color: green;\n}\n#connectionStatus.is-connected {\n transition: transform 0.5s;\n transition-delay: 2s;\n transform: translate3d(0, -100%, 0);\n}\n"]}
{"version":3,"sources":["app/styles/main.less"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"public/bundle.css","sourcesContent":["body {\n padding: 0;\n margin: 0;\n box-sizing: border-box;\n font-family: sans-serif;\n font-size: 140%;\n background-image: url('assets/Dash-logo.svg'), linear-gradient(to bottom right, #1e73be, #073a66);\n background-size: 50vmin auto, cover;\n background-position: center;\n background-attachment: fixed;\n background-repeat: no-repeat;\n background-color: #1e73be;\n color: white;\n min-height: 100vh;\n}\n* {\n box-sizing: inherit;\n}\na {\n color: inherit;\n text-decoration: none;\n}\n#transactionList {\n padding: 1em 0 0;\n mix-blend-mode: screen;\n opacity: 0.75;\n height: 100vh;\n overflow: hidden;\n}\n#transactionList:after {\n content: '';\n position: fixed;\n bottom: 0;\n height: 8em;\n left: 0;\n right: 0;\n background-image: linear-gradient(to top, #1e73be 0%, rgba(30, 115, 190, 0.987) 8.1%, rgba(30, 115, 190, 0.951) 15.5%, rgba(30, 115, 190, 0.896) 22.5%, rgba(30, 115, 190, 0.825) 29%, rgba(30, 115, 190, 0.741) 35.3%, rgba(30, 115, 190, 0.648) 41.2%, rgba(30, 115, 190, 0.55) 47.1%, rgba(30, 115, 190, 0.45) 52.9%, rgba(30, 115, 190, 0.352) 58.8%, rgba(30, 115, 190, 0.259) 64.7%, rgba(30, 115, 190, 0.175) 71%, rgba(30, 115, 190, 0.104) 77.5%, rgba(30, 115, 190, 0.049) 84.5%, rgba(30, 115, 190, 0.013) 91.9%, rgba(30, 115, 190, 0) 100%);\n z-index: 2;\n pointer-events: none;\n}\n#connectionStatus.is-connected ~ #transactionList:empty:before {\n content: 'Waiting for first transaction...';\n display: block;\n text-align: center;\n font-size: 2em;\n opacity: 0.5;\n}\n.tx {\n position: relative;\n margin: 3px auto;\n width: 20em;\n min-width: 80%;\n max-width: 100%;\n z-index: 1;\n}\n.txValue {\n display: none;\n flex: 0 0 auto;\n line-height: 1.25;\n}\n.txOutputs {\n display: flex;\n flex-wrap: nowrap;\n flex-direction: row;\n align-content: stretch;\n}\n.txOut {\n position: relative;\n flex: 1 1 auto;\n background-color: white;\n}\n.txOut:first {\n border-left: 3px solid black;\n}\n.txOut:after {\n content: '';\n width: 3px;\n background: black;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n}\n.blockDivider {\n display: block;\n margin: 1em -1em -1.5em;\n background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.125));\n padding: 0.125em 1em 1.5em;\n color: rgba(0, 0, 0, 0);\n text-align: center;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.blockDivider:hover,\n.blockDivider:focus {\n color: inherit;\n}\n#muteToggle,\n#connectionStatus {\n position: fixed;\n top: 0;\n width: 8em;\n background: white;\n border: solid black;\n padding: 0.5em;\n font-size: 0.8em;\n text-transform: uppercase;\n font-weight: bold;\n text-align: center;\n color: black;\n}\n#muteToggle {\n left: 0;\n border-radius: 0 0 0.5em 0;\n border-width: 0 0.1em 0.1em 0;\n transition: opacity 0.5s;\n transition-delay: 1s;\n opacity: 0;\n cursor: pointer;\n z-index: 100;\n}\n#muteToggle:hover {\n opacity: 1;\n transition-delay: 0s;\n}\n#muteToggle:before {\n content: 'Mute';\n}\n#muteToggle.is-muted:before {\n content: 'Un-mute';\n}\n#connectionStatus {\n right: 0;\n border-radius: 0 0 0 0.5em;\n border-width: 0 0 0.1em 0.1em;\n transition: transform 0.5s;\n transform: none;\n}\n#connectionStatus.is-disconnected:before {\n content: 'Disconnected';\n color: red;\n}\n#connectionStatus.is-connecting:before {\n content: 'Connecting...';\n color: black;\n}\n#connectionStatus.is-connected:before {\n content: 'Connected';\n color: green;\n}\n#connectionStatus.is-connected {\n transition: transform 0.5s;\n transition-delay: 2s;\n transform: translate3d(0, -100%, 0);\n}\n"]}

8
bundle.js
View file

@ -6775,12 +6775,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
bundle.js.map
View file

File diff suppressed because one or more lines are too long