Skip to content
This repository has been archived by the owner on Jul 2, 2020. It is now read-only.

Commit

Permalink
Merge pull request #6 from cryptojp/master
Browse files Browse the repository at this point in the history 
check
  • Loading branch information
@cryptoqween
cryptoqween authored Oct 20, 2017
2 parents 36c25b1 + 1c634fd commit 478f0c5
Show file tree
Hide file tree
Showing 6 changed files with 314 additions and 302 deletions.
65 changes: 59 additions & 6 deletions streamer/current/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css"></link>
<title>CryptoCompare Streamer API Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
<div id="content"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.js"></script>
<script src="../ccc-streamer-utilities.js"></script>
<script src="./stream.js"></script>

<div class="container">
<div class="row">
<div class="col-lg-5 col-lg-offset-1 price-boxes">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<h6><a href="https://www.cryptocompare.com">Source: CryptoCompare.com</a></h6>
<h2 class="price-display">BTC - USD <span class="price" id="PRICE_BTC"></span></h2>
<h5>24h Change: <span id="CHANGE_BTC"></span><span id="CHANGEPCT_BTC"></span><br></h5>
<h5>Last Market: <span class="exchange" id="LASTMARKET_BTC"></span> <br></h5>
<h5>Trade ID: <span id="LASTTRADEID_BTC"></span><br></h5>
<h5>Open Hour: <span id="OPENHOUR_BTC"></span><br></h5>
<h5>High Hour: <span id="HIGHHOUR_BTC"></span><br></h5>
<h5>Low Hour: <span id="LOWHOUR_BTC"></span><br></h5>
<h5>Open Day: <span id="OPEN24HOUR_BTC"></span><br></h5>
<h5>High Day: <span id="HIGH24HOUR_BTC"></span><br></h5>
<h5>Low Day: <span id="LOW24HOUR_BTC"></span><br></h5>
<h5>Last Trade Volume: <span id="LASTVOLUME_BTC"></span><br></h5>
<h5>Last Trade Volume To: <span id="LASTVOLUMETO_BTC"></span><br></h5>
<h5>24h Volume: <span id="VOLUME24HOUR_BTC"></span><br></h5>
<h5>24h VolumeTo: <span id="VOLUME24HOURTO_BTC"></span><br></h5>
</div>
</div>
</div>
</div>
<div class="col-lg-5 price-boxes">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<h6><a href="https://www.cryptocompare.com">Source: CryptoCompare.com</a></h6>
<h2 class="price-display">ETH - USD <span class="price" id="PRICE_ETH"></span></h2>
<h5>24h Change: <span id="CHANGE_ETH"></span><span id="CHANGEPCT_ETH"></span><br></h5>
<h5>Last Market: <span class="exchange" id="LASTMARKET_ETH"></span> <br></h5>
<h5>Trade ID: <span id="LASTTRADEID_ETH"></span><br></h5>
<h5>Open Hour: <span id="OPENHOUR_ETH"></span><br></h5>
<h5>High Hour: <span id="HIGHHOUR_ETH"></span><br></h5>
<h5>Low Hour: <span id="LOWHOUR_ETH"></span><br></h5>
<h5>Open Day: <span id="OPEN24HOUR_ETH"></span><br></h5>
<h5>High Day: <span id="HIGH24HOUR_ETH"></span><br></h5>
<h5>Low Day: <span id="LOW24HOUR_ETH"></span><br></h5>
<h5>Last Trade Volume: <span id="LASTVOLUME_ETH"></span><br></h5>
<h5>Last Trade Volume To: <span id="LASTVOLUMETO_ETH"></span><br></h5>
<h5>24h Volume: <span id="VOLUME24HOUR_ETH"></span><br></h5>
<h5>24h VolumeTo: <span id="VOLUME24HOURTO_ETH"></span><br></h5>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.2/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../ccc-streamer-utilities.js"></script>
<script src="./stream.js"></script>
</body>

</html>
131 changes: 56 additions & 75 deletions streamer/current/stream.js
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,67 @@
var quote = {};
$(document).ready(function() {

var createDom = function(pair) {
var wrapper = document.getElementById("content");
var div = document.createElement("div");
var html = '<div class="wrapper">';
html += '<h1><span id="fsym_'+ pair +'"></span> - <span id="tsym_'+ pair +'"></span> <strong><span class="price" id="price_'+ pair +'"></span></strong></h1>';
html += '<div class="label">24h Change: <span class="value" id="change_'+ pair +'"></span> (<span class="value" id="changepct_'+ pair +'"></span>)</div>';
html += '<div class="label">Last Market: <span class="market" id="market_'+ pair +'"></span></div>';
html += '<div class="label">Last Trade Id: <span class="value" id="tradeid_'+ pair +'"></span></div>';
html += '<div class="label">Last Trade Volume: <span class="value" id="volume_'+ pair +'"></span></div>';
html += '<div class="label">Last Trade VolumeTo: <span class="value" id="volumeto_'+ pair +'"></span></div>';
html += '<div class="label">24h Volume: <span class="value" id="24volume_'+ pair +'"></span></div>';
html += '<div class="label">24h VolumeTo: <span class="value" id="24volumeto_'+ pair +'"></span></div>';
html += '<div class="source"> Source: <a href="http://www.cryptocompare.com">CryptoCompare</a></div>';
html += '</div>';
div.innerHTML = html;
wrapper.appendChild(div);
};
var socket = io.connect('https://streamer.cryptocompare.com/');
//Format: {SubscriptionId}~{ExchangeName}~{FromSymbol}~{ToSymbol}
//Use SubscriptionId 0 for TRADE, 2 for CURRENT and 5 for CURRENTAGG
//For aggregate quote updates use CCCAGG as market
var subscription = ['5~CCCAGG~BTC~USD', '5~CCCAGG~ETH~USD'];
socket.emit('SubAdd', { subs: subscription });
socket.on("m", function(message) {
dataUnpack(message);
});

var displayQuote = function(_quote) {
var dataUnpack = function(message) {

var fsym = CCC.STATIC.CURRENCY.SYMBOL[_quote.FROMSYMBOL];
var tsym = CCC.STATIC.CURRENCY.SYMBOL[_quote.TOSYMBOL];
var pair = _quote.FROMSYMBOL + _quote.TOSYMBOL;
console.log(_quote);
console.log(pair);
document.getElementById("market_" + pair).innerHTML = _quote.LASTMARKET;
document.getElementById("fsym_" + pair).innerHTML = _quote.FROMSYMBOL;
document.getElementById("tsym_" + pair).innerHTML = _quote.TOSYMBOL;
document.getElementById("price_" + pair).innerHTML = _quote.PRICE;
document.getElementById("volume_" + pair).innerHTML = CCC.convertValueToDisplay(fsym, _quote.LASTVOLUME);
document.getElementById("volumeto_" + pair).innerHTML = CCC.convertValueToDisplay(tsym, _quote.LASTVOLUMETO);
document.getElementById("24volume_" + pair).innerHTML = CCC.convertValueToDisplay(fsym, _quote.VOLUME24HOUR);
document.getElementById("24volumeto_" + pair).innerHTML = CCC.convertValueToDisplay(tsym, _quote.VOLUME24HOURTO);
document.getElementById("tradeid_" + pair).innerHTML = _quote.LASTTRADEID.toFixed(0);
document.getElementById("tradeid_" + pair).innerHTML = _quote.LASTTRADEID.toFixed(0);
document.getElementById("change_" + pair).innerHTML = CCC.convertValueToDisplay(tsym, _quote.CHANGE24H);
document.getElementById("changepct_" + pair).innerHTML = _quote.CHANGEPCT24H.toFixed(2) + "%";
var newPrice = CCC.CURRENT.unpack(message);
var from = newPrice['FROMSYMBOL'];
var fsym = CCC.STATIC.CURRENCY.getSymbol(from);
var to = newPrice['TOSYMBOL'];
var tsym = CCC.STATIC.CURRENCY.getSymbol(to);
var current = {};

if (_quote.FLAGS === "1"){
document.getElementById("price_" + pair).className = "up";
}
else if (_quote.FLAGS === "2") {
document.getElementById("price_" + pair).className = "down";
}
else if (_quote.FLAGS === "4") {
document.getElementById("price_" + pair).className = "";
}
}
for (var key in newPrice) {
current[key] = newPrice[key];
if (key == 'LASTVOLUMETO' || key == 'VOLUME24HOURTO') {
current[key] = CCC.convertValueToDisplay(tsym, newPrice[key]);
}
else if (key == 'LASTVOLUME' || key == 'VOLUME24HOUR' || key == 'OPEN24HOUR' || key == 'OPENHOUR' || key == 'HIGHHOUR' || key == 'LOWHOUR' || key == 'LOW24HOUR') {
current[key] = CCC.convertValueToDisplay(fsym, newPrice[key]);
}
}

var updateQuote = function(result) {
if (current['HIGH24HOUR']) {
current.CHANGE = CCC.convertValueToDisplay(fsym, (current['PRICE'] - current['HIGH24HOUR']));
current.CHANGEPCT = ((current['PRICE'] - current['HIGH24HOUR']) / current['HIGH24HOUR'] * 100).toFixed(2) + "%";
current.HIGH24HOUR = CCC.convertValueToDisplay(fsym, current.HIGH24HOUR);
}

var keys = Object.keys(result);
var pair = result.FROMSYMBOL + result.TOSYMBOL;
if (!quote.hasOwnProperty(pair)) {
quote[pair] = {}
createDom(pair);
}
for (var i = 0; i <keys.length; ++i) {
quote[pair][keys[i]] = result[keys[i]];
}
quote[pair]["CHANGE24H"] = quote[pair]["PRICE"] - quote[pair]["OPEN24HOUR"];
quote[pair]["CHANGEPCT24H"] = quote[pair]["CHANGE24H"]/quote[pair]["OPEN24HOUR"] * 100;
displayQuote(quote[pair]);
}
if (current['LASTTRADEID']) {
current['LASTTRADEID'] = newPrice['LASTTRADEID'].toFixed(0);
}

var socket = io.connect('https://streamer.cryptocompare.com/');
displayData(current, from);
};

//Format: {SubscriptionId}~{ExchangeName}~{FromSymbol}~{ToSymbol}
//Use SubscriptionId 0 for TRADE, 2 for CURRENT and 5 for CURRENTAGG
//For aggregate quote updates use CCCAGG as market
var subscription = ['5~CCCAGG~BTC~USD','5~CCCAGG~ETH~USD'];
var displayData = function(current, from) {

socket.emit('SubAdd', {subs:subscription} );
var direction = current.FLAGS;

socket.on("m", function(message){
var messageType = message.substring(0, message.indexOf("~"));
var res = {};
if (messageType === CCC.STATIC.TYPE.CURRENTAGG) {
res = CCC.CURRENT.unpack(message);
console.log(res);
updateQuote(res);
}
});
for (var key in current) {
if (key == 'CHANGEPCT') {
$('#' + key + '_' + from).text(' (' + current[key] + ')');
}
else {
$('#' + key + '_' + from).text(current[key]);
}
}

$('#PRICE_' + from).removeClass();

if (direction == 1) {
$('#PRICE_' + from).addClass("up");
}
else if (direction == 2) {
$('#PRICE_' + from).addClass("down");
}
};
});
102 changes: 46 additions & 56 deletions streamer/current/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,46 @@
.wrapper {
width: 320px;
height: 250px;
margin: 50px;
background-color: #132c40;
color: white;
padding: 15px 50px 10px 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border-radius: 5px;
font-size: 15px;
}

h1 {
font-size: 24px;
color: #85c1cc;
padding: 0;
}

.label {
color: #a5bdc1;
}

.price {
font-size: 25px;
}

.value {
color: white;
}

.up {
color: #1cf6ba;
}

.down {
color: #c84473;
}

.source {
margin-top: 50px;
text-align: left;
font-size: 12px;
}

a {
color: #eeeeee;
font-size: 12px;
}

a:hover {
color: #c84473;
}

.market {
color: #1cf6ba;
}
body {
background-color: black;
font-size: 17px;
color: white;
}

.panel {
background-color: rgb(50, 50, 50);
}

.panel-body {
padding-left: 10%;
}

.price-boxes {
margin-top: 10%;
}

a {
color:white;
}

.price {
font-size: 25px;
}

.price-display {
font-weight: bold;
text-align: center;
}

span {
color: orange;
}

.up {
color: green;
}

.down {
color: red;
}

.exchange {
color: #42f492;
}
Loading

0 comments on commit 478f0c5

Please sign in to comment.