This message was too old and has been purged

Quote from: Evil-Knievel on March 15, 2014, 11:00:43 PM

Quote from: tsume90 on March 15, 2014, 10:55:22 PM

Wouldn't mind jumping on this wagon. What language is it written in(if there's a requirement), also where's the source?

Well, all you need is HTML and JavaScript Wink

We just need to query the API server with javascript, and display the results in HTML.
You could check out the main page html to see that it is not that complicated.

Here is the javascript file, which displays the live block/tx info on the main page. This can be adapted/extended/etc.

Code:

(function ($) {
var defaults = {
rowSpeed: 300,
newRow: null,
addTop: true,
removeTop: true
};
var newClasses = "newRow"
var options = $.extend(defaults, options);
$.fn.addRow = function (options) {
opts = $.extend(defaults, options);
var $table = $(this);
var $tableBody = $("tbody", $table);
var t = $(opts.newRow)
console.log("ADDING: " + t);
if (opts.addTop) t.appendTo($tableBody);
else t.prependTo($tableBody);

// make sure we do not have more than x elements in table
    var rowCount = $('tbody tr', this).length;
    console.log("ROWCOUNT: " + rowCount);
    if(rowCount>10)
      $('tbody tr:last', this).remove();
   

var lin = $table.find('tbody tr:first');
lin.find("td").effect("highlight", {}, 1000);
return false;
};

$.fn.removeRow = function (options) {
opts = $.extend(defaults, options);
var $table = $(this);
var t
if (opts.removeTop) t = $table.find('tbody tr:last')
else t = $table.find('tbody tr:first');
t.find("td")
.wrapInner("<div style='DISPLAY: block'/>")
.parent().find("td div")
.slideUp(opts.rowSpeed, function () {
$(this).parent().parent().remove();
});
return false;
};
return this;
})(jQuery);

function formatLTC(Amount){
  var DecimalSeparator = Number("1.5").toLocaleString().substr(1,1);

  var AmountWithCommas = Amount.toLocaleString();
  var arParts = String(AmountWithCommas).split(DecimalSeparator);
  var intPart = arParts[0];
  var decPart = (arParts.length > 1 ? arParts[1] : '');
  decPart = (decPart + '00000').substr(0,5);

  return intPart + DecimalSeparator + decPart + " LTC";
}

function getSubscribeTX(){
  var jsonData={};
  jsonData['id']=-1;
  jsonData['method']="blockchain.tx.subscribe";
  return JSON.stringify(jsonData) + "\n";
}
function getLastTX(){
  var jsonData={};
  jsonData['id']=-1;
  jsonData['method']="blockchain.last.tx";
  return JSON.stringify(jsonData) + "\n";
}
function getLastBlocks(){
  var jsonData={};
  jsonData['id']=-1;
  jsonData['method']="blockchain.last.blocks";
  return JSON.stringify(jsonData) + "\n";
}
function getSubscribeBlocks(){
  var jsonData={};
  jsonData['id']=-1;
  jsonData['method']="blockchain.blocks.subscribe";
  return JSON.stringify(jsonData) + "\n";
}

function addTxRow(txid, amount, timestamp){
  txid=txid.substr(0,12);
  var amtLTC = amount / 100000000;
  $("#txa").addRow({
  newRow: '<tr><td><a href="/tx/' + txid + '">' + txid + '</a><font color=gray>[...]</font></td><td data-livestamp="' + timestamp + '">few seconds ago</td><td class="hidden-phone"></td><td class="right-col"><button class="btn btn-success btn-large"><span>' + formatLTC(amtLTC) + '</span></button></td></tr>',
  addTop: false,
  removeTop: false
  });
}


function addBlockRow(height, hash, numtx, amount, tmpstmp){
  amount = formatLTC(amount);
  $("#blocks").addRow({
  newRow: '<tr><td><a href="/block/' + hash + '">' + height + '</a></td><td data-livestamp="' + tmpstmp + '">few seconds ago</td><td class="hidden-phone">' + numtx + '</td><td class="hidden-phone right-col"><button class="btn btn-warning btn-large"><span>' + amount + '</span></button></td></tr>',
  addTop: false,
  removeTop: false
  });
}

$(document).ready(function() {
    var config = {
      relayURL: "wss://litemonitor.com:2109"
    };
 

   var connected = false;
 
    var socket = new WebSocket(config.relayURL, ['binary']);
 
    socket.onopen = function() {
      socket.send(getLastTX());
      socket.send(getLastBlocks());
      socket.send(getSubscribeTX());
      socket.send(getSubscribeBlocks());
    };
 
    socket.onmessage = function(event) {
      if (!connected && event.data == 'connected') {
        connected = true;
        return;
      }

      var fr = new FileReader();
      fr.onloadend = function(f){

        var mySplitResult = f.target.result.split("\n");
        
        for (ent in mySplitResult) {
          if(mySplitResult[ent].length<5) continue;
          var data = JSON.parse(mySplitResult[ent]);
          if(data['method'] == "blockchain.blocks.subscribe" || data['method'] == "blockchain.last.blocks"){
            data = data['params'][0];
              var height = data['block_height'];
              var numtx = data['num_tx'];
              var hash = data['block_hash'];
              var amount = data['sum_out'];
              var tmpstmp = data['timestamp'];
              addBlockRow(height,hash,numtx,amount,tmpstmp);
          }
          else if(data['method'] == "blockchain.tx.subscribe"){
            var hash = data['tx_id'];
            var timestamp = data['timestamp'];
            var outputs = data['params'][0]['outputs'];
            var totalOut = 0;
            for (var key in outputs) {
                totalOut += outputs[key]['value'];
            }
            addTxRow(hash,totalOut,timestamp);
          }
        }
      };
      fr.readAsBinaryString(event.data);
      

    }



  });

Most magic happens in socket.onmessage = function(event) { where the responses from the API server are handled.

I'm going to do "Block Overview Page".
Could you send me what's done so far?

Also, when you say block overview page, do you mean this? https://blockchain.info/block-index/376347/0000000000000000499aafcd5b6b4dd805576301d91e938e1d6c49bc872f7580