jcarr
/
check.jcarr.wit.com
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add the liveblock code (direct from author)

This commit is contained in:
Jeff Carr 2018-02-02 21:16:55 +00:00
parent dc29c90307
commit 042f814eed
4 changed files with 7022 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
LiveBlock/code.jquery.com/jquery-1.10.2.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

410
LiveBlock/index.html Normal file
View File

@ -0,0 +1,410 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LiveBlock</title>
<script type="text/javascript" src="code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/vivagraph.js"></script>
<script type="text/javascript" src="js/webgl-programs.js"></script>
<style>
body{
margin: 0;
padding: 0;
position: relative;
}
.input-node{color:green;}
.output-node{color:red;}
.input-output-node{color:orange;}
.transaction-node{color:blue;}
#output{display:none;}
#info{
position: absolute;
right:4px;
top:4px;
width:300px;
background-color: #ccc;
padding:4px;
}
</style>
</head>
<body align="center">
<div id="g" style="background-color:black; width:1920px; height:1080px;"></div>
<div id="info">Hover over nodes to view transaction details</div>
<p>Live visualization of Bitcoin transactions from Blockchain. Created by Jackson Tullis.</p>
<span>Node size scale: </span>
<label>Linear</label>
<input type="radio" name="scaleType" value="LINEAR" />
<label>Log</label>
<input type="radio" name="scaleType" value="LOG" checked />
<br />
LEGEND:
<span class="input-node">Green = input</span>, <span class="output-node">Red = output</span>,
<span class="input-output-node">Yellow = input+output</span>, <span class="transaction-node">Blue = transaction</span>
<br />
NAVIGATION: mouse + scroll = pan/zoom, SPACE = run/pause
<br />
<pre>
</pre>
<div id="output" ></div>
</a>Enjoy it? Please donate some BTC:</h3>
<p><strong>1Li1MSWSC4fNCbwyb1ffFN8HSDpWqZEKVM</strong></p>
<p>API: Blockchain, VivaGraph JS Library</p>
</body>
<script language="javascript" type="text/javascript">
// viva graph part
var graphics = Viva.Graph.View.webglGraphics();
var isWebgl = graphics.isSupported();
if (!isWebgl) {
alert("Turn on webgl or use modern browser");
}
var graph = Viva.Graph.graph(),
layout = Viva.Graph.Layout.forceDirected(graph, {
springLength : 80,
springCoeff : 0.0002,
dragCoeff : 0.009,
gravity : -30,
theta : 0.7
}),
minNodeSize = 1,
maxNodeSize = 100000000;
function log10(val) {
return Math.log(val) / Math.LN10;
}
function log2(val) {
return Math.log(val) / Math.LN2;
}
var scaleType = "LOG"; // LINEAR
var getNodeColor = function(node) {
// here different colors for tx, input, output, mixed and txconfirmed
if(node.data && node.data.t && node.data.t == "i"){
return 0x00FF00;
}else if(node.data && node.data.t && node.data.t == "o"){
return 0xFF0000;
}else if(node.data && node.data.t && node.data.t == "m"){
return 0xFFA500;
}
return 0x008ED2;
},
getNodeSize = function(node){
if(! node.data || !node.data.s){
return 50;
}
var rmin = 32;
var rmax = 96;
// linear normalization to a range rmin,rmax
if(scaleType == "LINEAR"){
return rmin + (rmax - rmin) * ( (node.data.s - minNodeSize)/(maxNodeSize - minNodeSize) ) ;
}else{
// log normalization to a range rmin,rmax
var min = log2(minNodeSize);
var max = log2(maxNodeSize);
var val = log2( node.data.s );
// linear scaling from min.max -> rmin rmax
return rmin + (rmax - rmin) * ( (val - min)/(max - min) ) ;
}
},
getNodeDetails = function(node){
//
// http://blockchain.info/rawtx/$tx_index?format=json
var label = "transaction";
var id = node.id;
if(node.data && node.data.t){
if(node.data.t == "i"){
// input node
label = "input";
}else if(node.data.t == "o"){
// output node
label = "output";
}else if(node.data.t == "mix"){
// node which is both input and output
label = "input/output";
}
// for addresses infor cors not enabled :-(
// enabled for blocks
var balance = 0;
//lets get balance
$.ajax({
//url:"http://blockchain.info/address/"+id+"?format=json&limit=1&cors=true",
//url:"http://blockchain.info/rawblock/123?cors=true&format=json",
url:"https://blockchain.info/q/addressbalance/"+id+"?cors=true",
async:false,
crossDomain:true,
dataType:"text",
success:function(text){
balance = text/100000000;
}
});
document.getElementById("info").innerHTML = label+"<br/>"+id+"<br/>balance: "+balance +" BTC";
}else{
// transaction node
document.getElementById("info").innerHTML = label+"<br/>"+id;
}
};
// need to get these 2 from yavis.reddit.min.js
graphics.setLinkProgram(Viva.Graph.View.webglDualColorLinkProgram());
graphics.setNodeProgram(Viva.Graph.View.webglCustomNodeProgram());
graphics
.node(function(node){
var img = Viva.Graph.View.webglSquare(getNodeSize(node), getNodeColor(node));
return img;
})
.link(function(link){
var fromColor, toColor;
fromColor = toColor = 0x808080;
var line = Viva.Graph.View.webglDualColorLine(fromColor, toColor);
line.oldStart = fromColor;
line.oldEnd = toColor;
return line;
});
var renderer = Viva.Graph.View.renderer(graph,{
layout : layout,
graphics : graphics,
container : document.getElementById('g')
//prerender : 10
});
var events = Viva.Graph.webglInputEvents(graphics, graph),
lastHovered = null,
colorLinks = function(node, color) {
if (node && node.id) {
graph.forEachLinkedNode(node.id, function(node, link){
if (color) {
link.ui.start = link.ui.end = color;
} else {
//link.ui.start = link.ui.oldStart;
//link.ui.end =link.ui.oldEnd;
link.ui.start = link.ui.end = 0x80808040;
}
});
}
};
events.mouseEnter(function(node){
getNodeDetails(node);
colorLinks(lastHovered);
lastHovered = node;
graph.forEachLinkedNode(node.id, function(node, link){
link.ui.start = link.ui.end = 0xffffffff;
graphics.bringLinkToFront(link.ui);
});
renderer.rerender();
}).mouseLeave(function(node) {
colorLinks(lastHovered);
lastHovered = null;
colorLinks(node);
renderer.rerender();
});
// pause rendere on spacebar
var paused = false;
$(window).keydown(function(e) {
if (e.keyCode === 32) { // toggle on spacebar;
e.preventDefault();
paused = !paused;
if (paused) { renderer.pause(); }
else { renderer.resume(); }
}
});
var width = $("#g").width(),
height= $("#g").height();
renderer.run();
graphics.scale(0.15, {x : width/2, y : height/2});
// websockets part
var linksBuffer = [];
var wsUri = "ws://ws.blockchain.info/inv";
if (document.location.protocol.indexOf("https") === 0) {
wsUri = "wss://ws.blockchain.info/inv";
}
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
var colorNodes = function(node, color) {
if (node && node.id) {
graph.forEachNode(function(node){
if (color) {
node.ui.color = color;
}
});
}
};
function addNodes(link){
if(link.t == "i"){
var node = graph.getNode(link.from);
if( !node ){
graph.addNode(link.from,{s:link.value,t:link.t});
} else {
// such a node already exists
if(node.data && node.data.t && node.data.t == "o" ){
node.data.t = "mix";
node.ui.color = 16776960;
renderer.rerender();
}
}
} else if(link.t == "o"){
var node = graph.getNode(link.to);
if( ! node){
graph.addNode(link.to,{s:link.value,t:link.t});
} else {
// such a node alredy exists.
if(node.data && node.data.t && node.data.t == "i"){
node.data.t = "mix";
node.ui.color = 16776960;
renderer.rerender();
}
}
}
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) { onOpen(evt) };
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) }; }
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend({"op":"unconfirmed_sub"});
}
function onClose(evt) { writeToScreen("DISCONNECTED"); }
function onMessage(evt) {
// parse message
var msg = JSON.parse(evt.data);
var txHash = msg.x.hash;
if(msg.op == "utx"){
// uncorfimed transactions
var inputs = msg.x.inputs;
var outputs = msg.x.out;
// generate from to
var links = [];
for(var i=0;i<inputs.length;i++){
var input = inputs[i];
links.push({
from: input.prev_out.addr,
to: txHash,
value: input.prev_out.value,
t:"i"
});
}
for(var j=0;j<outputs.length;j++){
var output = outputs[j];
links.push({
from: txHash,
to: output.addr,
value: output.value,
t:"o"
});
}
}
// flush the buffer if not empty
if (! paused && linksBuffer.length > 0) {
for(var i=0;i<linksBuffer.length;i++){
var link = linksBuffer[i];
addNodes(link)
graph.addLink(link.from,link.to);
}
linksBuffer = [];
}
for(var i=0;i<links.length;i++){
var link = links[i];
if(link.value > maxNodeSize){
maxNodeSize = link.value;
}
if (! paused) {
addNodes(link);
graph.addLink(link.from,link.to);
} else{
// add links to a buffer
linksBuffer.push(link);
}
//writeToScreen('<span style="color: blue;">from: ' + link.from+' to ' +link.to+' value: '+ (link.value/100000000)+'</span>');
}
//websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
//writeToScreen("SENT: " + JSON.stringify(message));
websocket.send(JSON.stringify(message));
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, false);
window.l = layout;
window.g = graph;
window.r = renderer;
$("input[name='scaleType']").change(function(){
scaleType = this.value;
graph.forEachNode(function(node){
node.ui.size = getNodeSize(node);
})
});
</script>
<script>
</script>
</html>

6517
LiveBlock/js/vivagraph.js Normal file
View File

File diff suppressed because it is too large Load Diff

89
LiveBlock/js/webgl-programs.js Normal file
View File

@ -0,0 +1,89 @@
// here define functions to draw points and lines
Viva.Graph.View.webglDualColorLine = function (t, e) {
return {
start: Viva.Graph.View._webglUtil.parseColor(t),
end: Viva.Graph.View._webglUtil.parseColor(e)
}
}
Viva.Graph.View.webglDualColorLinkProgram = function () {
var t, e, r, i, n, a, o, s, u, c, d = 6,
l = 2 * (2 * Float32Array.BYTES_PER_ELEMENT + Uint32Array.BYTES_PER_ELEMENT),
f = ["precision mediump float;", "varying vec4 color;", "void main(void) {", " gl_FragColor = color;", "}"].join("\n"),
p = ["attribute vec2 a_vertexPos;", "attribute vec4 a_color;", "uniform vec2 u_screenSize;", "uniform mat4 u_transform;", "varying vec4 color;", "void main(void) {", " gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0.0, 1.0);", " color = a_color.abgr;", "}"].join("\n"),
h = 0,
g = new ArrayBuffer(1024 * l),
v = new Float32Array(g),
m = new Uint32Array(g),
w = function () {
if ((h + 1) * l > g.byteLength) {
var t = new ArrayBuffer(2 * g.byteLength),
e = new Float32Array(t),
r = new Uint32Array(t);
r.set(m), v = e, m = r, g = t
}
};
return {
load: function (a) {
e = a, e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA), e.enable(e.BLEND), i = Viva.Graph.webgl(a), t = i.createProgram(p, f), e.useProgram(t), n = i.getLocations(t, ["a_vertexPos", "a_color", "u_screenSize", "u_transform"]), e.enableVertexAttribArray(n.vertexPos), e.enableVertexAttribArray(n.color), r = e.createBuffer()
},
position: function (t, e, r) {
var i = t.id,
n = i * d;
v[n] = e.x, v[n + 1] = e.y, m[n + 2] = t.start, v[n + 3] = r.x, v[n + 4] = r.y, m[n + 5] = t.end
},
createLink: function (t) {
w(), h += 1, a = t.id
},
removeLink: function (t) {
h > 0 && (h -= 1), h > t.id && h > 0 && i.copyArrayPart(m, t.id * d, h * d, d)
},
updateTransform: function (t) {
c = !0, u = t
},
updateSize: function (t, e) {
o = t, s = e, c = !0
},
render: function () {
e.useProgram(t), e.bindBuffer(e.ARRAY_BUFFER, r), e.bufferData(e.ARRAY_BUFFER, g, e.DYNAMIC_DRAW), c && (c = !1, e.uniformMatrix4fv(n.transform, !1, u), e.uniform2f(n.screenSize, o, s)), e.vertexAttribPointer(n.vertexPos, 2, e.FLOAT, !1, 3 * Float32Array.BYTES_PER_ELEMENT, 0), e.vertexAttribPointer(n.color, 4, e.UNSIGNED_BYTE, !0, 3 * Float32Array.BYTES_PER_ELEMENT, 8), e.drawArrays(e.LINES, 0, 2 * h), a = h - 1
},
bringToFront: function (t) {
a > t.id && i.swapArrayPart(m, t.id * d, a * d, d), a > 0 && (a -= 1)
},
getFrontLinkId: function () {
return a
}
}
}
Viva.Graph.View.webglCustomNodeProgram = function () {
var t, e, r, i, n, a, o, s, u, c = 4,
d = ["precision mediump float;", "varying vec4 color;", "varying float pixelSize;", "void main(void) {", " if (gl_PointCoord.x <= pixelSize || gl_PointCoord.x >= 1.0-pixelSize || gl_PointCoord.y <= pixelSize || gl_PointCoord.y >= 1. - pixelSize) {", " gl_FragColor = vec4(color.xyz * 0.3, 1);", " } else {", " gl_FragColor = color;", " }", "}"].join("\n"),
l = ["attribute vec2 a_vertexPos;", "attribute vec2 a_customAttributes;", "uniform vec2 u_screenSize;", "uniform mat4 u_transform;", "varying vec4 color;", "varying float pixelSize;", "void main(void) {", " gl_Position = u_transform * vec4(a_vertexPos/u_screenSize, 0, 1);", " gl_PointSize = a_customAttributes[1] * u_transform[0][0];", " float c = a_customAttributes[0];", " color.b = mod(c, 256.0); c = floor(c/256.0);", " color.g = mod(c, 256.0); c = floor(c/256.0);", " color.r = mod(c, 256.0); c = floor(c/256.0); color /= 255.0;", " color.a = 1.0;", " pixelSize = 1.0/gl_PointSize;", "}"].join("\n"),
f = new Float32Array(64),
p = 0;
return {
load: function (a) {
e = a, n = Viva.Graph.webgl(a), t = n.createProgram(l, d), e.useProgram(t), i = n.getLocations(t, ["a_vertexPos", "a_customAttributes", "u_screenSize", "u_transform"]), e.enableVertexAttribArray(i.vertexPos), e.enableVertexAttribArray(i.customAttributes), r = e.createBuffer()
},
position: function (t, e) {
var r = t.id;
f[r * c] = e.x, f[r * c + 1] = e.y, f[r * c + 2] = t.color, f[r * c + 3] = t.size
},
updateTransform: function (t) {
u = !0, s = t
},
updateSize: function (t, e) {
a = t, o = e, u = !0
},
createNode: function () {
f = n.extendArray(f, p, c), p += 1
},
removeNode: function (t) {
p > 0 && (p -= 1), p > t.id && p > 0 && n.copyArrayPart(f, t.id * c, p * c, c)
},
replaceProperties: function () {},
render: function () {
e.useProgram(t), e.bindBuffer(e.ARRAY_BUFFER, r), e.bufferData(e.ARRAY_BUFFER, f, e.DYNAMIC_DRAW), u && (u = !1, e.uniformMatrix4fv(i.transform, !1, s), e.uniform2f(i.screenSize, a, o)), e.vertexAttribPointer(i.vertexPos, 2, e.FLOAT, !1, c * Float32Array.BYTES_PER_ELEMENT, 0), e.vertexAttribPointer(i.customAttributes, 2, e.FLOAT, !1, c * Float32Array.BYTES_PER_ELEMENT, 8), e.drawArrays(e.POINTS, 0, p)
}
}
}