diff --git a/articles/20170425/header.html b/articles/20170425/header.html index f89c10c..ff9ba46 100644 --- a/articles/20170425/header.html +++ b/articles/20170425/header.html @@ -1,7 +1,7 @@
-
+

ARTICLE

diff --git a/data/getKnownBlocksList.php b/data/getKnownBlocksList.php new file mode 100644 index 0000000..2ee8b52 --- /dev/null +++ b/data/getKnownBlocksList.php @@ -0,0 +1,25 @@ + diff --git a/explorer.php b/explorer.php index b036a61..6f873b6 100644 --- a/explorer.php +++ b/explorer.php @@ -53,7 +53,7 @@ var pos = $(this).offset().top; var winTop = $(window).scrollTop(); if (pos < winTop + 600) { - ajouterPreviousBlock(); + blockchainExplorer.ajouterPreviousBlock(); $(this).addClass("slide"); } }); @@ -64,7 +64,7 @@ { cur_height = []; cur_methode=la_methode; - return initBlockExplorer(null); + return blockchainExplorer.init(); } diff --git a/images/20170200-content.html b/images/20170200-content.html deleted file mode 100644 index 12ea4a4..0000000 --- a/images/20170200-content.html +++ /dev/null @@ -1,106 +0,0 @@ -
-
-
-

A digital currency

-

- Use cryptography.
- No "central bank".
- P2P network.
-

-
-
- -
-
-
- -
-
-
- -
-
-

WALLET

-

- Use cryptography.
- No "central bank".
- P2P network.
-

-
-
-
- -
-
-
-

Transaction

-

-When Bob is sending 42 to Alice, the bitcoin protocol is creating a transaction.
-A transaction is the balance between his Inputs and his Outputs. -

    -
  • First the network needs to be sure that Bob has got enough in his wallet.
    So Bob will include a list of transactions that he has received before.
    This is the inputs of the transactions.
    For example, previous transaction's amount are 10, 25 and another 10, so total inputs are 45
    • -
  • As the input's sum is superior to the amount of the transaction, an ouput is added.
    This output is the change to Bob.
    In the example, this 3
    • -
  • Fees are took by the network to process the transaction.
    Let say it will take 0.5.
    This is another ouput
    • -
  • So Alice will get only a part of the transaction's amount.
    this the last output, 41.5
    • -
-So the transaction is a made with : -
    -
  • Inputs : a list of previous transactions that bob has received
    • -
  • Outputs : a list of amounts to send to Alice, Bob, and fees
    • -
  • A timestamp
    • -
-Then the wallet will broadcast the transaction on the network.
-It will be sent to the area called "mempool".
-Nodes of the network will validate the transaction by verfying the Inputs and the Ouputs.
-A hash of the transaction is computed.
-So the transaction is sealed. -

-
-
- -
-
-
- -
-
-
- -
-
-

Block

-

-Then the bitcoin protocol is grouping validated transactions in blocks.
-So a block is an array of transactions.
-A block is made with : -

    -
  • An array of transactions.
    -That's what my script is drawing.
    -Running the transactions array, it is computing the sum of each outputs of each transaction.
    -Then, it draws a rectangle for each sum.
    -
    • -
  • A "proof of work".
    The miner is computing a special hash that depends on the array of transaction and that will answer to a constraint.
    This hash is very difficult to compute. In fact it is not really computed, the miner must test every value until he find the solution.
    • -
  • That why the network will give him a reward.
    This is a special transaction that has no inputs.
    • -
-

-
- -
-
- -
-
-
-

Blockchain

-

-Each block has a hash and a reference to the ihash of the previous block.
-So blocks are chained together.
-

-
- -
- -
- -
-
diff --git a/images/block_image.php b/images/block_image.php index 5186240..e20824e 100644 --- a/images/block_image.php +++ b/images/block_image.php @@ -33,13 +33,13 @@ if (isset($_REQUEST['methode'])) $methode = $_REQUEST['methode']; if (isset($_REQUEST['mode'])) $mode = intval($_REQUEST['mode']); $img = null; +$str_mode = ''; +if ($mode != 9999) $str_mode = '-'.$mode; // --- // --- Le cas général : on trouve le fichier image demandé // --- -$imagefilename = DATA_PATH.'/'.$methode.'/'.$block_hash; -if ($mode != 9999) $imagefilename .= '-'.$mode; -$imagefilename .= '.png'; +$imagefilename = DATA_PATH.'/'.$methode.'/'.$block_hash.$str_mode.'.png'; if (file_exists($imagefilename)) $img = imagecreatefrompng($imagefilename); // --- diff --git a/js/blockexplorer.js b/js/blockexplorer.js index 548d509..6a694ed 100644 --- a/js/blockexplorer.js +++ b/js/blockexplorer.js @@ -1,340 +1,267 @@ - // Init array - var liste_blocks = [ - { - name : 'WHALE201810', - hash : '0000000000000000000f9f2dadfb8f312572183272802cbfcc4ff95b4ee6777d', - height : 545911 - }, - { - name : 'BLOCK21E800', - hash : '00000000000000000021e800c1e8df51b22c1588e5a624bea17e9faa34b2dc4a', - height : 528249 - }, - { - name : 'HURRICANE_1', - hash : '0000000000000000000fe6d521a187a5523d5cef6f6c178923ff82ffe5a0f372', - height : 506734 - }, - { - name : 'SEGWIT', - hash : '000000000000000000cbeff0b533f8e1189cf09dfbebf57a8ebe349362811b80', - height : 481823 - }, - { - name : 'SEGWIT_LOCK', - hash : '0000000000000000012e6060980c6475a9a8e62a1bf44b76c5d51f707d54522c', - height : 479808 - }, - { - name : 'BCC', - hash : '00000000000000000019f112ec0a9982926f1258cdcc558dd7c3b7e5dc7fa148', - height : 478559 - }, - { - name : 'BIP_91_LOCK', - hash : '0000000000000000015411ca4b35f7b48ecab015b14de5627b647e262ba0ec40', - height : 477120 - }, - { - name : 'HALVING_2', - hash : '000000000000000002cce816c0ab2c5c269cb081896b7dcb34b8422d6b74ffa1', - height : 420000 - }, - { - name : 'WHALE201311', - hash : '0000000000000001bc7156dd1183c87859b326affa3a5cdd157e809537f0b284', - height : 270953 - }, - { - name : 'HALVING_1', - hash : '000000000000048b95347e83192f69cf0366076336c639f9b7228e9ba171342e', - height : 210000 - }, - { - name : 'PIZZA', - hash : '00000000006de085dadb3ec413ef074022fe781121b467e98960280dd246bb00', - height : 57035 - }, - { - name : 'TOPISTO', - hash : '000000000a73e64735a2b75c97ea674950a9018da1420d01328a918c9ff9852c', - height : 5637 - }, - { - name : 'LEET', - hash : '000000008bf44a528a09d203203a6a97c165cf53a92ecc27aed0b49b86a19564', - height : 1337 - }, - { - name : 'LUCIFER', - hash : '00000000fc5b3c76f27f810ee775e480ae7fd604fd196b2d8da4257fcd39f4f9', - height : 666 - }, - { - name : 'THE_ANSWER', - hash : '00000000314e90489514c787d615cea50003af2023796ccdd085b6bcc1fa28f5', - height : 42 - }, - { - name : 'GENESIS', - hash : '000000000019d6689c085ae165831e934ff763ae46a2a6c172b3f1b60a8ce26f', - height : 0 - } - ]; - - var flag_nav = true; - var classes = ['bg-grey-even','bg-grey-odd']; - var cur_class = 0; - var cur_height = []; - var cur_methode = 'hasard'; - - function precisionRound(number) { +blockchainExplorer = function(){ + + // Init array + var liste_blocks = null; + var flag_nav = true; + var classes = ['bg-grey-even','bg-grey-odd']; + var cur_class = 0; + var cur_height = []; + var cur_methode = 'hasard'; + var isInitSelector = false; + + function precisionRound(number) { var precision = 4; var factor = Math.pow(10, precision); return Math.round((number/100000000) * factor) / factor; - } + } - function getblockNameFromHash(hash) - { - var retour = ''; - liste_blocks.forEach(function(item){ - if (hash == item.hash) retour = item.name; - }); - return retour; - } - - function getblocHashFromName(name) - { - var retour = ''; - liste_blocks.forEach(function(item){ - if (name == item.name) retour = item.hash; - }); - return retour; - } + function getblockNameFromHash(hash) + { + var retour = ''; + liste_blocks.forEach(function(item){ + if (hash == item.hash) retour = item.name; + }); + return retour; + } + + function getblocHashFromName(name) + { + var retour = ''; + liste_blocks.forEach(function(item){ + if (name == item.name) retour = item.hash; + }); + return retour; + } - function addInfoForBlock(block) - { - var height = '300px'; - var contenu = ''; - var downloadingImage = new Image(); + function addInfoForBlock(block) + { + var height = '300px'; + var contenu = ''; + var downloadingImage = new Image(); - cur_height.push(block.height); - - cur_class = 1 - cur_class; + cur_height.push(block.height); + + cur_class = 1 - cur_class; - blockName = getblockNameFromHash(block.hash); - if (blockName != '') blockName = ' ( '+blockName+' )'; + blockName = getblockNameFromHash(block.hash); + if (blockName != '') blockName = ' ( '+blockName+' )'; - contenu += '

block '+block.height+blockName+'

'; - contenu += ' '; - //contenu += ' '; - //contenu += ' '; - contenu += ' '; - contenu += ' '; - contenu += ' '; - contenu += ' '; - contenu += ' '; - contenu += ' '; - contenu += ' '; - contenu += '
hash'+block.hash+'
index'+block.block_index+'
timestamp'+block.time+'
nonce'+block.nonce+'
nb tx'+block.n_tx+'
outputs'+precisionRound(block.topisto_outputs).toFixed(4)+'
inputs'+precisionRound(block.topisto_inputs).toFixed(4)+'
fees'+precisionRound(block.topisto_fees).toFixed(4)+'
reward'+precisionRound(block.topisto_reward).toFixed(4)+'
'; - - $('#info_'+block.height).html(contenu); - - downloadingImage.onload = function(){ - $('#img_'+block.height).attr('src', this.src); - //$('#img_'+block.height).attr('height', height); - //$('#img_'+block.height).attr('width','auto'); - flag_nav = true; - }; - downloadingImage.src = 'images/block_image.php?methode='+cur_methode+'&hash='+block.hash; - - return true; - } - - function addDivForBlock(block_height) - { - var contenu = ''; - - contenu += '
'; - contenu += '
'; - contenu += '
'; - contenu += '

COMPUTING ...

'; - contenu += '
'; - contenu += '
'; - contenu += '
'; - contenu += ' '; - contenu += '
'; - contenu += '
'; - contenu += '
'; - contenu += '
'; - - $('#blockchain').append(contenu); - - return true; - } - - function addDivForVoid() + contenu += '

block '+block.height+blockName+'

'; + contenu += ' '; + //contenu += ' '; + //contenu += ' '; + contenu += ' '; + contenu += ' '; + contenu += ' '; + contenu += ' '; + contenu += ' '; + contenu += ' '; + contenu += ' '; + contenu += '
hash'+block.hash+'
index'+block.block_index+'
timestamp'+block.time+'
nonce'+block.nonce+'
nb tx'+block.n_tx+'
outputs'+precisionRound(block.topisto_outputs).toFixed(4)+'
inputs'+precisionRound(block.topisto_inputs).toFixed(4)+'
fees'+precisionRound(block.topisto_fees).toFixed(4)+'
reward'+precisionRound(block.topisto_reward).toFixed(4)+'
'; + + $('#info_'+block.height).html(contenu); + + downloadingImage.onload = function(){ + $('#img_'+block.height).attr('src', this.src); + //$('#img_'+block.height).attr('height', height); + //$('#img_'+block.height).attr('width','auto'); + flag_nav = true; + }; + downloadingImage.src = 'images/block_image.php?methode='+cur_methode+'&hash='+block.hash; + + return true; + } + + function addDivForBlock(block_height) + { + var contenu = ''; + + contenu += '
'; + contenu += '
'; + contenu += '
'; + contenu += '

COMPUTING ...

'; + contenu += '
'; + contenu += '
'; + contenu += '
'; + contenu += ' '; + contenu += '
'; + contenu += '
'; + contenu += '
'; + contenu += '
'; + + $('#blockchain').append(contenu); + + return true; + } + + function addDivForVoid() + { + var contenu = ''; + + contenu += '
'; + contenu += '
'; + contenu += '
'; + contenu += '

the VOID ...

'; + contenu += '
'; + contenu += '
'; + contenu += '
'; + contenu += ' '; + contenu += '
'; + contenu += '
'; + contenu += '
'; + contenu += '
'; + + $('#blockchain').append(contenu); + + return true; + } + + function toggleForwardBtn() + { + if (cur_height.length < 3) { - var contenu = ''; - - contenu += '
'; - contenu += '
'; - contenu += '
'; - contenu += '

the VOID ...

'; - contenu += '
'; - contenu += '
'; - contenu += '
'; - contenu += ' '; - contenu += '
'; - contenu += '
'; - contenu += '
'; - contenu += '
'; - - $('#blockchain').append(contenu); - - return true; + $('#fast_forward_btn').removeClass('btn-success'); + $('#fast_forward_btn').addClass('btn-secondary'); + $('#btn-forward').removeClass('btn-info'); + $('#btn-forward').addClass('btn-secondary'); + } else { + $('#fast_forward_btn').removeClass('btn-secondary'); + $('#fast_forward_btn').addClass('btn-success'); + $('#btn-forward').removeClass('btn-secondary'); + $('#btn-forward').addClass('btn-info'); } - - function toggleForwardBtn() + return true; + } + + function gotoBlock(block_name) + { + $(document).scrollTop( $("#explorer").offset().top ); + // Bloquer la navigation pendant le calcul + if (!flag_nav) { - if (cur_height.length < 3) - { - $('#fast_forward_btn').removeClass('btn-success'); - $('#fast_forward_btn').addClass('btn-secondary'); - $('#btn-forward').removeClass('btn-info'); - $('#btn-forward').addClass('btn-secondary'); - } else { - $('#fast_forward_btn').removeClass('btn-secondary'); - $('#fast_forward_btn').addClass('btn-success'); - $('#btn-forward').removeClass('btn-secondary'); - $('#btn-forward').addClass('btn-info'); - } - return true; + window.alert('A block image is currently computed, please wait ...'); + return false; } + flag_nav = false; - - function gotoBlock(block_name) + if (block_name == 'NEXT') { - $(document).scrollTop( $("#explorer").offset().top ); + flag_nav = true; - // Bloquer la navigation pendant le calcul - if (!flag_nav) + // Supprimer un block + if (cur_height.length < 3) { - window.alert('A block image is currently computed, please wait ...'); + window.alert('No Next Block, you are at '+$('#blockSelector').val()+' block !'); return false; } - flag_nav = false; - - if (block_name == 'NEXT') - { - flag_nav = true; - - // Supprimer un block - if (cur_height.length < 3) - { - window.alert('No Next Block, you are at '+$('#blockSelector').val()+' block !'); - return false; - } - liste_blocks['PREVIOUS'] = liste_blocks['BLOCK_'+cur_height[cur_height.length-1]]; - cur_height.pop(); + liste_blocks['PREVIOUS'] = liste_blocks['BLOCK_'+cur_height[cur_height.length-1]]; + cur_height.pop(); - toggleForwardBtn(); + toggleForwardBtn(); - $('#block_'+cur_height[cur_height.length-2]).slideDown(400, function() { - // Animation complete. - $('#blockchain').children('div:last').remove(); - cur_class = 1 - cur_class; - }); - - } else { - // Ajouter un block - addDivForBlock(cur_height[cur_height.length-1] - 1); - - // Décaler d'un block vers le haut - if (cur_height.length > 1) $('#block_'+cur_height[cur_height.length-2]).slideUp(); - - block_hash = ''; - if (block_name != 'LAST') block_hash = '?block_hash='+liste_blocks[block_name]; - $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { - liste_blocks['PREVIOUS'] = data.prev; - liste_blocks['BLOCK_'+data.height] = data.hash; - addInfoForBlock(data); - - toggleForwardBtn(); - }); - } + $('#block_'+cur_height[cur_height.length-2]).slideDown(400, function() { + // Animation complete. + $('#blockchain').children('div:last').remove(); + cur_class = 1 - cur_class; + }); - return true; - } + } else { + // Ajouter un block + addDivForBlock(cur_height[cur_height.length-1] - 1); - function ajouterPreviousBlock() - { - // Bloquer la navigation pendant le calcul - if (!flag_nav) return false; - flag_nav = false; + // Décaler d'un block vers le haut + if (cur_height.length > 1) $('#block_'+cur_height[cur_height.length-2]).slideUp(); - // Ajouter un div - addDivForBlock(cur_height[cur_height.length-1] - 1); - // Mettre les infos du - block_hash = '?block_hash='+liste_blocks['PREVIOUS']; + block_hash = ''; + if (block_name != 'LAST') block_hash = '?block_hash='+liste_blocks[block_name]; $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { liste_blocks['PREVIOUS'] = data.prev; liste_blocks['BLOCK_'+data.height] = data.hash; addInfoForBlock(data); + + toggleForwardBtn(); }); } - function initBlockchain(block_name) - { - $(document).scrollTop( $("#explorer").offset().top ); - - $('#blockchain').html(''); - cur_height = []; - cur_class = 0; - flag_nav = true; + return true; + } + + function _ajouterPreviousBlock() + { + // Bloquer la navigation pendant le calcul + if (!flag_nav) return false; + flag_nav = false; + + // Ajouter un div + addDivForBlock(cur_height[cur_height.length-1] - 1); + // Mettre les infos du + block_hash = '?block_hash='+liste_blocks['PREVIOUS']; + $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { + liste_blocks['PREVIOUS'] = data.prev; + liste_blocks['BLOCK_'+data.height] = data.hash; + addInfoForBlock(data); + }); + } + + function initBlockchain(block_name) + { + $(document).scrollTop( $("#explorer").offset().top ); + $('#blockchain').html(''); + cur_height = []; + cur_class = 0; + flag_nav = true; + + block_hash = ''; + if (block_name != 'LAST') block_hash = '?block_hash='+getblocHashFromName(block_name); + $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { + addDivForBlock(data.height); + addInfoForBlock(data); + + liste_blocks['PREVIOUS'] = data.prev; + if (data.prev != '0000000000000000000000000000000000000000000000000000000000000000') + gotoBlock('PREVIOUS'); + else + addDivForVoid(); + }); - block_hash = ''; - if (block_name != 'LAST') block_hash = '?block_hash='+getblocHashFromName(block_name); - $.getJSON('data/getBlockInfo.php'+block_hash, function( data ) { - addDivForBlock(data.height); - addInfoForBlock(data); + return true; + } - liste_blocks['PREVIOUS'] = data.prev; - if (data.prev != '0000000000000000000000000000000000000000000000000000000000000000') - gotoBlock('PREVIOUS'); - else - addDivForVoid(); - }); + function blockSelectorChange() + { + initBlockchain($('#blockSelector').val()); + $('#fast_forward_btn').attr('data-original-title', $('#blockSelector').val()); + } - return true; - } - - function blockSelectorChange() - { - initBlockchain($('#blockSelector').val()); - $('#fast_forward_btn').attr('data-original-title', $('#blockSelector').val()); - } - function initBlockSelector() + function initBlockSelector() + { + if (!isInitSelector) { // Init the selector var select = $('#blockSelector'); - if (typeof select.isInitSelector == 'undefined') - { - select.isInitSelector = true; - $.each(liste_blocks, function (key, bloc) { - select.append(new Option(bloc.name, bloc.name)); - }); - } + + $.each(liste_blocks, function (key, bloc) { + select.append(new Option(bloc.name, bloc.name)); + }); + + isInitSelector = true; } + } - function initBlockExplorer(leblock) - { + function _init() + { + $.getJSON('data/getKnownBlocksList.php', function( data ) { + liste_blocks = data; initBlockSelector(); if (cur_height.length == 0) initBlockchain('LAST'); return true; - } - - $(document).ready(function(){ - blockchainListener.addBlockHook(initBlockExplorer); }); + } + + return {init: _init, ajouterPreviousBlock: _ajouterPreviousBlock}; +}(); + +$(document).ready(function(){ + blockchainExplorer.init(); +});