mirror of
https://github.com/seigler/dash-visualizer
synced 2025-07-26 01:06:12 +00:00
feat: add Dash logo
This commit is contained in:
Joshua Seigler
parent
b84655afad
commit
601082cebe
3 changed files with 73 additions and 65 deletions
130
app.js
130
app.js
|
|
@ -1,71 +1,73 @@
|
|||
'use strict';
|
||||
|
||||
var socket = io("https://blockchain.masternode.io/");
|
||||
var transactionList = document.getElementById('transactionList');
|
||||
(function() {
|
||||
function playSound(url){
|
||||
var audio = document.createElement('audio');
|
||||
audio.style.display = "none";
|
||||
audio.src = url;
|
||||
audio.autoplay = true;
|
||||
audio.loop = false;
|
||||
audio.onended = function(){
|
||||
audio.remove() //Remove when played.
|
||||
};
|
||||
document.body.appendChild(audio);
|
||||
}
|
||||
|
||||
function playSound(url){
|
||||
var audio = document.createElement('audio');
|
||||
audio.style.display = "none";
|
||||
audio.src = url;
|
||||
audio.autoplay = true;
|
||||
audio.loop = false;
|
||||
audio.onended = function(){
|
||||
audio.remove() //Remove when played.
|
||||
var onTransaction = function(data) {
|
||||
console.log(data);
|
||||
playSound('assets/bell.mp3');
|
||||
var tx = document.createElement('div');
|
||||
tx.className = 'tx';
|
||||
var txValue = document.createElement('a');
|
||||
txValue.className = 'txValue';
|
||||
txValue.href = 'https://blockchain.masternode.io/tx/' + data.txid;
|
||||
txValue.target = '_blank';
|
||||
txValue.setAttribute('rel', 'noopener');
|
||||
var txOutputs = document.createElement('div');
|
||||
txOutputs.className = 'txOutputs';
|
||||
txValue.appendChild(document.createTextNode(data.valueOut));
|
||||
tx.appendChild(txValue);
|
||||
tx.appendChild(txOutputs);
|
||||
var transactions = data.vout.sort(function(a, b) { // sort descending by tx value
|
||||
return b[Object.keys(b)[0]] - a[Object.keys(a)[0]];
|
||||
});
|
||||
transactions.forEach(function(value, index, array) {
|
||||
var txOut = document.createElement('div');
|
||||
var outputSatoshis = value[Object.keys(value)[0]];
|
||||
txOut.className = 'txOut';
|
||||
txOut.style.width = (outputSatoshis * 0.00001).toFixed(4) + 'px';
|
||||
txOut.title = (value[Object.keys(value)[0]] * 0.00000001);
|
||||
txOutputs.appendChild(txOut);
|
||||
});
|
||||
transactionList.insertBefore(tx, transactionList.firstChild);
|
||||
};
|
||||
document.body.appendChild(audio);
|
||||
}
|
||||
|
||||
var onTransaction = function(data) {
|
||||
console.log(data);
|
||||
playSound('assets/bell.mp3');
|
||||
var tx = document.createElement('div');
|
||||
tx.className = 'tx';
|
||||
var txValue = document.createElement('a');
|
||||
txValue.className = 'txValue';
|
||||
txValue.href = 'https://blockchain.masternode.io/tx/' + data.txid;
|
||||
txValue.target = '_blank';
|
||||
txValue.setAttribute('rel', 'noopener');
|
||||
var txOutputs = document.createElement('div');
|
||||
txOutputs.className = 'txOutputs';
|
||||
txValue.appendChild(document.createTextNode(data.valueOut));
|
||||
tx.appendChild(txValue);
|
||||
tx.appendChild(txOutputs);
|
||||
var transactions = data.vout.sort(function(a, b) { // sort descending by tx value
|
||||
return b[Object.keys(b)[0]] - a[Object.keys(a)[0]];
|
||||
var onBlock = function(data) {
|
||||
console.log(data);
|
||||
playSound('assets/whoosh.mp3');
|
||||
var newBlock = document.createElement('a');
|
||||
newBlock.className = 'blockDivider';
|
||||
newBlock.href = 'https://blockchain.masternode.io/block/' + data;
|
||||
newBlock.target = '_blank';
|
||||
newBlock.setAttribute('rel', 'noopener');
|
||||
newBlock.appendChild(document.createTextNode(data));
|
||||
transactionList.insertBefore(newBlock, transactionList.firstChild);
|
||||
};
|
||||
|
||||
var socket = io("https://blockchain.masternode.io/");
|
||||
var transactionList = document.getElementById('transactionList');
|
||||
|
||||
socket.on('connect', function() {
|
||||
document.getElementById('connectionStatus').className = 'is-connected';
|
||||
// Join the room.
|
||||
socket.emit('subscribe', 'inv');
|
||||
})
|
||||
socket.on('tx', onTransaction);
|
||||
socket.on('block', onBlock);
|
||||
socket.on('disconnect', function() {
|
||||
document.getElementById('connectionStatus').className = 'is-disconnected';
|
||||
});
|
||||
transactions.forEach(function(value, index, array) {
|
||||
var txOut = document.createElement('div');
|
||||
var outputSatoshis = value[Object.keys(value)[0]];
|
||||
txOut.className = 'txOut';
|
||||
txOut.style.width = (outputSatoshis * 0.00001).toFixed(4) + 'px';
|
||||
txOut.title = (value[Object.keys(value)[0]] * 0.00000001);
|
||||
txOutputs.appendChild(txOut);
|
||||
socket.on('reconnecting', function() {
|
||||
document.getElementById('connectionStatus').className = 'is-connecting';
|
||||
});
|
||||
transactionList.insertBefore(tx, transactionList.firstChild);
|
||||
};
|
||||
|
||||
var onBlock = function(data) {
|
||||
console.log(data);
|
||||
playSound('assets/whoosh.mp3');
|
||||
var newBlock = document.createElement('a');
|
||||
newBlock.className = 'blockDivider';
|
||||
newBlock.href = 'https://blockchain.masternode.io/block/' + data;
|
||||
newBlock.target = '_blank';
|
||||
newBlock.setAttribute('rel', 'noopener');
|
||||
newBlock.appendChild(document.createTextNode(data));
|
||||
transactionList.insertBefore(newBlock, transactionList.firstChild);
|
||||
};
|
||||
|
||||
socket.on('connect', function() {
|
||||
document.getElementById('connectionStatus').className = 'is-connected';
|
||||
// Join the room.
|
||||
socket.emit('subscribe', 'inv');
|
||||
})
|
||||
socket.on('tx', onTransaction);
|
||||
socket.on('block', onBlock);
|
||||
socket.on('disconnect', function() {
|
||||
document.getElementById('connectionStatus').className = 'is-disconnected';
|
||||
});
|
||||
socket.on('reconnecting', function() {
|
||||
document.getElementById('connectionStatus').className = 'is-connecting';
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
2
assets/Dash-logo.svg
Normal file
2
assets/Dash-logo.svg
Normal file
|
|
@ -0,0 +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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -4,7 +4,11 @@ body {
|
|||
box-sizing: border-box;
|
||||
font-family: sans-serif;
|
||||
font-size: 140%;
|
||||
background-image: linear-gradient(to bottom right, hsl(208, 73%, 43%), hsl(208, 86.5%, 21.5%));
|
||||
background-image: url('assets/Dash-logo.svg'), linear-gradient(to bottom right, hsl(208, 73%, 43%), hsl(208, 86.5%, 21.5%));
|
||||
background-size: 50vmin auto, cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-color: hsl(208, 73%, 43%);
|
||||
color: white;
|
||||
min-height: 100vh;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue