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

check #6

Merged
merged 2 commits into from
Oct 20, 2017
Merged

check #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9523e5c
check
Oct 18, 2017
1c634fd
Socket IO update
Oct 20, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 59 additions & 6 deletions streamer/current/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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