schulze/plebnet-visualizer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

All web code and ignore json files

Browse Source
This commit is contained in:
Thefeli73 2021-08-19 21:57:49 +02:00
parent 76fc3918bb
commit 8444a983c2
35 changed files with 1066 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
plebnet/graphs/graph.json
plebnet/graphs/neighbours.json
plebnet/graphs/graph_full.json
plebnet/graphs/graph3d.json
plebnet/graphs/graph3d_full.json

63
plebnet/3d.php Normal file
View File

@ -0,0 +1,63 @@
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Plebnet Visualizer (3D) - Satoshis.Tech</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-language" content="en-GB">
<meta name="description" content="A 3D visualization of Plebnet">
<meta name="keywords" content="ln, lightning, lightning network, Plebnet, cyclic hub, hub, visualizer, nodes, 3d">
<meta name="author" content="Felix Schulze">
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="public">
<link rel="canonical" href="https://plebnet.satoshis.tech/3d">
<meta property="og:image" content="https://plebnet.satoshis.tech/assets/img/thumbnail3d.png?v=1.0.0">
<meta property="og:image:height" content="1200">
<meta property="og:image:width" content="630">
<meta property="og:image:alt" content="Plebnet Thumbnail">
<meta name="twitter:image" content="https://plebnet.satoshis.tech/assets/img/thumbnail3d.png?v=1.0.0">
<meta property="twitter:image:alt" content="Plebnet Thumbnail">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Satoshis.Tech">
<meta property="og:title" content="Plebnet Visualizer (3D) - Satoshis.Tech">
<meta property="og:url" content="https://plebnet.satoshis.tech/3d">
<meta property="og:description" content="A 3D visualization of Plebnet">
<meta name="title" content="Plebnet Visualizer (3D) - Satoshis.Tech">
<?php
include 'includes/favicon.html';
?>
<link rel="stylesheet" href="/assets/css/3d.css?v=1.0.4">
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/three-spritetext"></script>
<script src="https://unpkg.com/3d-force-graph"></script>
</head>
<body>
<script src="/assets/js/donate.js?v=1.2.2"></script>
<script src ="https://btcpay.satoshis.tech/modal/btcpay.js"></script>
<form method="POST" onsubmit="onBTCPayFormSubmit(event);return false" action="https://btcpay.satoshis.tech/api/v1/invoices">
<input type="hidden" name="checkoutDesc" value="Donation from Anonymous" />
<input type="hidden" name="price" value="0.00001" />
<input type="hidden" name="storeId" value="BhtTLhbEhSZByquLhPqbbG45SejRXHkimRtBUbtn7m7y" />
<input type="hidden" name="jsonResponse" value="true" />
<input type="hidden" name="notifyEmail" value="donation@satoshis.tech" />
<input type="hidden" name="currency" value="BTC" />
<button type="submit" name="submit" id="donate">
<img src="assets/img/icons/donate_24.png">Buy me a coffee
</button>
</form>
<div id="3d-graph"></div>
<script>
<?php
include 'includes/graph3d.js';
?>
</script>
</body>
</html>

74
plebnet/assets/css/3d.css Normal file
View File

@ -0,0 +1,74 @@
body {
text-align: center;
font-family: Sans-serif;
margin: 0;
}
.graph-data {
position: absolute;
top: 0px;
right: 0px;
padding: 5px;
}
.toggle-data-btn {
cursor: pointer;
opacity: 0.85;
}
.toggle-data-btn:hover {
opacity: 1;
}
#graph-data-description {
font-size: 12px;
color: slategrey;
}
#donate {
position: fixed;
z-index: 999;
bottom: 24px;
right: 24px;
background-color: #68f442;
padding: 16px 24px 16px 16px;
width: auto;
border-radius: 28px;
box-shadow: 0 1px 1px rgb(0 0 0 / 11%), 0 2px 2px rgb(0 0 0 / 11%), 0 4px 4px rgb(0 0 0 / 11%), 0 6px 8px rgb(0 0 0 / 11%), 0 8px 16px rgb(0 0 0 / 11%);
line-height: 24px;
font-size: 20px;
color: #000;
transition: color .2s, background-color .2s;
display: flex;
align-items: flex-end;
border: none;
box-sizing: initial;
outline: none;
}
#donate img {
height: 24px;
padding-right: 16px;
transition: filter .2s;
}
#donate:hover img {
filter: invert(1);
}
#donate:hover {
background-color: #4c9c35;
cursor: pointer;
color: #fff;
}
@media screen and (max-width: 500px) {
#donate {
font-size: 14px;
line-height: 18px;
padding: 14px 18px 14px 14px;
bottom: 14px;
right: 14px;
}
#donate img {
height: 18px;
padding-right: 8px;
}
}

349
plebnet/assets/css/main.css Normal file
View File

@ -0,0 +1,349 @@
body {
margin: 0;
overflow:hidden;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
p {
font-family: 'Roboto', sans-serif;
}
h1,h2,h3,h4,h5 {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
#graph_container {
transform: translate(-50%, 0) scale(1.0);
left: 50%;
position: absolute;
height: calc(100% - 6em);
top: 6em;
overflow: hidden;
}
#graph_svg {
overflow: visible;
}
.link {
stroke: #555;
stroke-opacity: 0.3;
stroke-width: 1.5px;
/*transition: stroke .2s;*/
}
.node .circle {
fill: #fcfcfc;
stroke-width: 1.25px;
pointer-events: all;
/*transition: fill .2s;*/
}
.node text {
visibility: hidden;
opacity: 0;
/*transition: opacity .4s, visibility .4s, font-size .4s;*/
font: 9px sans-serif;
fill: #444;
stroke: none;
text-shadow: inherit;
}
svg g.node:hover text,
svg g.selected text,
svg.show g text,
svg.enable1st g.neighbour text,
svg.enable2nd g.neighbour2nd text {
visibility: visible;
opacity: 1;
pointer-events: all;
}
svg g.node a:hover{
text-decoration: underline;
}
svg.enable2nd g.neighbour2nd text {
font-size: 11px;
}
svg.enable2nd g.neighbour2nd .circle {
fill: #ebe547;
}
svg.enable2nd line.neighbour2nd {
stroke: #ebe547;
}
svg.enable1st g.neighbour text {
font-size: 15px;
}
svg.enable1st g.neighbour .circle {
fill: #4deb47;
}
svg.enable1st line.neighbour {
stroke: #4deb47;
}
svg g.node:hover .circle,
svg g.node.selected .circle {
fill: #eb474d;
}
svg g.node.selected text {
font-size: 18px;
}
.cell {
fill: transparent;
stroke: none;
}
nav {
width: 100%;
height: 6em;
position: absolute;
z-index: 20;
background-color: #73c8ff;
box-shadow: 0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.16),
0 8px 8px rgba(0,0,0,0.20);
display: flex;
justify-content: flex-end;
}
nav .nav-content {
}
nav .nav-content .button {
height: 3em;
padding: 1.5em;
transition: background-color .2s;
}
nav .nav-content .button:hover {
background-color: #2b7aab;
cursor: pointer;
}
nav .nav-content .button img {
user-select: none;
height: 100%;
width: auto;
transition: filter .2s,
transform .8s;
}
nav .nav-content .button:hover img {
filter: invert(1);
}
nav .nav-content .button#settings.active img{
transform: rotate(150deg);
}
#bar {
width: 25%;
min-width: 340px;
right: min(-25%, -340px);
transition: right .8s, visibility .8s;
visibility: hidden;
height: 100%;
position: absolute;
z-index: 10;
background-color: #73c8ff;
overflow-x: hidden;
overflow-y: auto;
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
}
#bar.visible {
right: 0;
visibility: visible;
}
#bar .section {
width: calc(200%/3);
min-width: 300px;
max-width: 1000px;
}
#bar .section:first-child {
margin-top: 7em;
}
#bar .section:last-child {
margin-bottom: 4em;
}
#bar .section .content {
padding: 1em;
}
#search {
width: 100%;
}
#search form {
height: 100%;
display: flex;
}
#search form .autocomplete {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
#search form #nodeInput {
border-width: 0;
border-radius: 0;
padding: 0 1em 0 3em;
width: 100%;
height: 100%;
font-size: 2em;
outline: none;
background-color: transparent;
font-family: 'Roboto', sans-serif;
color: #000;
transition: background-color .2s, color .2s;
}
#search form #nodeInput::placeholder {
color: #00000080;
transition: color .2s;
}
#search form #nodeInput:active::placeholder,
#search form #nodeInput:focus::placeholder {
color: #ffffff80;
}
#search form #nodeInput:active,
#search form #nodeInput:focus {
color: #fff;
background-color: #2b7aab;
}
img.searchIcon {
height: 3em;
width: auto;
position: absolute;
padding: 1.5em;
transition: filter .2s;
pointer-events: none;
}
#search form #nodeInput:active + img.searchIcon,
#search form #nodeInput:focus + img.searchIcon{
filter: invert(1);
}
.autocomplete-items {
position: absolute;
top: 100%;
width: 100%;
}
.autocomplete-items div {
padding: .5em 1.5em;
font-size: 1.5em;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 18em;
background-color: #00000091;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0.5em;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
#donate {
position: fixed;
z-index: 999;
bottom: 24px;
right: 24px;
background-color: #68f442;
padding: 16px 24px 16px 16px;
width: auto;
border-radius: 28px;
box-shadow: 0 1px 1px rgb(0 0 0 / 11%), 0 2px 2px rgb(0 0 0 / 11%), 0 4px 4px rgb(0 0 0 / 11%), 0 6px 8px rgb(0 0 0 / 11%), 0 8px 16px rgb(0 0 0 / 11%);
font-size: 20px;
line-height: 24px;
color: #000;
transition: color .2s, background-color .2s;
display: flex;
align-items: flex-end;
border: none;
box-sizing: initial;
outline: none;
}
#donate img {
height: 24px;
padding-right: 16px;
transition: filter .2s;
}
#donate:hover img {
filter: invert(1);
}
#donate:hover {
background-color: #4c9c35;
cursor: pointer;
color: #fff;
}
@media screen and (max-width: 1920px) {
nav,
#graph_container {
font-size: 14px;
}
}
@media screen and (max-width: 500px) {
nav,
#graph_container {
font-size: 10px;
}
#donate {
font-size: 14px;
line-height: 18px;
padding: 14px 18px 14px 14px;
bottom: 14px;
right: 14px;
}
#donate img {
height: 18px;
padding-right: 8px;
}
}

BIN
plebnet/assets/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
plebnet/assets/img/favicon.psb Normal file
View File

Binary file not shown.

BIN
plebnet/assets/img/favicon/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
plebnet/assets/img/favicon/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
plebnet/assets/img/favicon/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

9
plebnet/assets/img/favicon/browserconfig.xml Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/assets/img/favicon/mstile-150x150.png?v=1.2.0"/>
<TileColor>#ffffff</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
plebnet/assets/img/favicon/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 474 B

BIN
plebnet/assets/img/favicon/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 765 B

BIN
plebnet/assets/img/favicon/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
plebnet/assets/img/favicon/mstile-150x150.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

25
plebnet/assets/img/favicon/safari-pinned-tab.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2305 5110 c-581 -60 -1140 -325 -1555 -740 -480 -481 -750 -1131
-750 -1810 0 -679 270 -1329 750 -1810 426 -425 990 -689 1590 -741 161 -14
439 -6 590 16 789 118 1476 593 1869 1292 144 257 246 558 298 888 24 155 24
555 0 710 -92 579 -333 1060 -727 1455 -387 387 -900 645 -1440 725 -135 20
-490 28 -625 15z m820 -770 c11 -35 -11 -96 -277 -760 -28 -69 -68 -174 -88
-235 -21 -60 -54 -153 -73 -205 -61 -169 -56 -203 33 -221 25 -4 266 -8 536
-9 528 0 525 0 509 -50 -6 -18 -119 -179 -448 -640 -93 -129 -200 -262 -318
-395 -59 -66 -163 -186 -231 -266 -198 -236 -591 -690 -642 -742 -33 -34 -53
-47 -69 -45 -51 7 -38 53 157 545 177 447 278 725 283 783 6 67 -13 96 -72
110 -22 5 -264 10 -538 10 -324 0 -505 4 -518 10 -29 16 -23 49 19 107 249
351 255 357 882 1088 76 88 184 214 240 280 517 603 563 655 586 655 14 0 25
-8 29 -20z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

19
plebnet/assets/img/favicon/site.webmanifest Normal file
View File

@ -0,0 +1,19 @@
{
"name": "Plebnet",
"short_name": "Plebnet",
"icons": [
{
"src": "/assets/img/favicon/android-chrome-192x192.png?v=1.2.0",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/assets/img/favicon/android-chrome-512x512.png?v=1.2.0",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

BIN
plebnet/assets/img/icons/donate.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
plebnet/assets/img/icons/donate_24.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 516 B

BIN
plebnet/assets/img/icons/info.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
plebnet/assets/img/icons/info_64.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
plebnet/assets/img/icons/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
plebnet/assets/img/icons/search_64.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
plebnet/assets/img/icons/setting.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
plebnet/assets/img/icons/setting_64.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
plebnet/assets/img/qrcode_connect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
plebnet/assets/img/thumbnail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 520 KiB

BIN
plebnet/assets/img/thumbnail3d.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 688 KiB

31
plebnet/assets/js/donate.js Normal file
View File

@ -0,0 +1,31 @@
function onBTCPayFormSubmit(event) {
sats = prompt("Choose an amount between 100 and 500000 sats", "2500");
if (sats === null) {
return;
}
if (sats < 100 || sats > 500000){
alert("Invalid amount!");
return;
}
amountBTC = sats * 0.00000001;
desc = prompt("Optionally enter a name", "Anonymous");
if (desc === null) {
return;
}
event.target[0].value = "Donation from " + desc;
event.target[1].value = amountBTC;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if (this.status == 200 && this.responseText) {
var response = JSON.parse(this.responseText);
window.btcpay.showInvoice(response.invoiceId);
}
}
};
xhttp.open("POST", event.target.getAttribute('action'), true);
xhttp.send(new FormData(event.target));
}

102
plebnet/assets/js/find.js Normal file
View File

@ -0,0 +1,102 @@
function selectNode(nmb) {
var id = lookup[nmb];
$("#" + id).click();
}
function autocomplete(inp, arr) {
var currentFocus;
var nodeNmb = [];
inp.addEventListener("input", function(e) {
nodeNmb = [];
var a, b, i, val = this.value;
closeAllLists();
if (!val) { return false;}
currentFocus = 0;
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
this.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
for (j = 0; j <= (arr[i].length - val.length); j++) {
if (arr[i].substr(j, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = arr[i].substr(0, j);
b.innerHTML += "<strong>" + arr[i].substr(j, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length+j);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.innerHTML += "<input type='hidden' value='" + i + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
selectNode(this.getElementsByTagName("input")[1].value);
});
if (a.children.length < 5) {
a.appendChild(b);
nodeNmb.push(i);
}
break;
}
}
}
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
addActive(x);
});
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key*/
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key*/
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
this.blur()
selectNode(nodeNmb[currentFocus]);
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
var nodes = []
var lookup = []
$.getJSON( "graphs/graph.json", function( graph ) {
for(var node in graph["nodes"]) {
nodes.push(graph["nodes"][node]["name"]);
nodes.push(graph["nodes"][node]["id"]);
lookup.push(graph["nodes"][node]["id"]);
lookup.push(graph["nodes"][node]["id"]);
}
});
autocomplete(document.getElementById("nodeInput"), nodes);

95
plebnet/assets/js/graph.js Normal file
View File

@ -0,0 +1,95 @@
function draw_graph(suffix) {
var width = window.innerWidth;
var height = window.innerHeight;
var fill = d3.scale.category20();
var graph_elem = document.getElementById("graph_svg");
if (graph_elem) {
graph_elem.remove();
}
var svg = d3.select("#graph_container").append("svg")
.attr("id", "graph_svg")
.attr("width", width)
.attr("height", height)
.attr("version", "1.1")
.attr("xmlns", "http://www.w3.org/2000/svg")
.attr("xmlns:xlink", "http://www.w3.org/1999/xlink")
.call(d3.behavior.zoom().on("zoom", function () {
svg.attr("transform", "scale(" + d3.event.scale + ")")
}));
var force = d3.layout.force()
.gravity(0.25)
.charge(-1200)
//.gravity(0)
//.charge(0)
.linkDistance(150)
.size([width, height]);
var voronoi = d3.geom.voronoi()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.clipExtent([[0, 0], [width, height]]);
d3.json("graphs/graph" + suffix + ".json", function(error, json) {
if (error) throw error;
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", function(d) { return "link " + d.source.index + " " + d.target.index; });
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.attr("id", function(d) { return d.id; })
.style("text-shadow", function(d) { return "2px 2px 4px" + d.color; })
.call(force.drag);
var circle = node.append("circle")
.attr("r", 5)
.style("stroke", function(d) { return d.color; })
.attr("class", "circle");
var hov_circle = node.append("circle")
.attr("r", 15)
.attr("class", "cell")
var id_link = node.append("a")
.attr("xlink:href", function(d) { return "https://amboss.space/node/" + d.id; })
.attr("target", "_blank");
var label = id_link.append("text")
.attr("dy", ".35em")
.text(function(d) { return d.name; });
force.on("tick", function() {
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
circle
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
hov_circle
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
label
.attr("x", function(d) { return d.x + 8; })
.attr("y", function(d) { return d.y; });
});
});
}
draw_graph("_full");

67
plebnet/assets/js/settings.js Normal file
View File

@ -0,0 +1,67 @@
function setting1() {
if($('#setting1').is(":checked")) {
$("#graph_svg").addClass("show");
} else {
$("#graph_svg").removeClass("show");
}
}
function setting1b() {
if($('#setting1b').is(":checked")) {
$("#graph_svg").addClass("enable1st");
} else {
$("#graph_svg").removeClass("enable1st");
}
}
function setting1c() {
if($('#setting1c').is(":checked")) {
$("#graph_svg").addClass("enable2nd");
} else {
$("#graph_svg").removeClass("enable2nd");
}
}
function setting2() {
if($('#setting2').is(":checked")) {
draw_graph("");
} else {
draw_graph("_full");
}
//reapply settings
reinit();
}
function init() {
$( function(){
setTimeout(() => {
//Show all node names (change classes)
$('#setting1').change(function(){
setting1();
});
//Show 1st degree neighbours
$('#setting1b').change(function(){
setting1b();
});
//Show 2nd degree neighbours
$('#setting1c').change(function(){
setting1c();
});
//show all channels (reload script with different graph.json)
$('#setting2').change(function(){
setting2();
});
reinit();
}, 200);
});
}
function reinit() {
$( function(){
setTimeout(() => {
setting1();
setting1b();
setting1c();
neighbours();
}, 200);
});
}
init();

50
plebnet/assets/js/ui.js Normal file
View File

@ -0,0 +1,50 @@
function neighbours() {
var all_neighbours;
var nodes = [];
$.getJSON( "graphs/neighbours.json", function( data ) {
all_neighbours = data;
});
$.getJSON( "graphs/graph_full.json", function( graph ) {
for(var node in graph["nodes"]) {
nodes.push(graph["nodes"][node]["id"]);
}
});
$(".node").click(function(){
if ($(".selected")[0] != $(this)[0]) {
$(".neighbour2nd").removeClass("neighbour2nd");
$(".neighbour").removeClass("neighbour");
$(".selected").removeClass("selected");
$(this).addClass("selected");
$("#graph_svg").removeClass("enable1st");
$("#graph_svg").removeClass("enable2nd");
let node = this.id;
$("." + nodes.indexOf(node)).addClass("neighbour");
for (var i = 0; i < all_neighbours[node].length; i++) {
first_deg_neighbour = all_neighbours[node][i];
$("#" + first_deg_neighbour).addClass("neighbour");
$("." + nodes.indexOf(first_deg_neighbour)).addClass("neighbour2nd");
for (var j = 0; j < all_neighbours[first_deg_neighbour].length; j++) {
second_deg_neighbour = all_neighbours[first_deg_neighbour][j];
$("#" + second_deg_neighbour).addClass("neighbour2nd");
}
}
var sleep = 400
setTimeout(function(){
setting1b();
setTimeout(function(){
setting1c();
}, sleep);
}, sleep);
}
});
}
function showSettings() {
//spin cogwheel
$("#settings").toggleClass("active");
//Show settings menu
$("#bar").toggleClass("visible");
}

11
plebnet/includes/favicon.html Normal file
View File

@ -0,0 +1,11 @@
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png?v=1.3.0">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png?v=1.3.0">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png?v=1.3.0">
<link rel="manifest" href="/assets/img/favicon/site.webmanifest?v=1.3.0">
<link rel="mask-icon" href="/assets/img/favicon/safari-pinned-tab.svg?v=1.3.0" color="#68f442">
<link rel="shortcut icon" href="/assets/img/favicon/favicon.ico?v=1.3.0">
<meta name="apple-mobile-web-app-title" content="Plebnet">
<meta name="application-name" content="Plebnet">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-config" content="/assets/img/favicon/browserconfig.xml?v=1.3.0">
<meta name="theme-color" content="#ffffff">

14
plebnet/includes/graph3d.js Normal file
View File

@ -0,0 +1,14 @@
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.jsonUrl('graphs/graph3d_full.json')
.nodeLabel('id')
.nodeAutoColorBy('group')
.nodeThreeObject(node => {
const sprite = new SpriteText(node.name);
sprite.material.depthWrite = false; // make sprite background transparent
sprite.color = node.color;
sprite.textHeight = 8;
return sprite;
});
Graph.d3Force('charge').strength(-220);

147
plebnet/index.php Normal file
View File

@ -0,0 +1,147 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Plebnet Visualizer - Satoshis.Tech</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="A visualization of Plebnet">
<meta name="keywords" content="ln, lightning, lightning network, Plebnet, cyclic hub, hub, visualizer, nodes">
<meta name="author" content="Felix Schulze">
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="public">
<link rel="canonical" href="https://plebnet.satoshis.tech">
<meta property="og:image" content="https://plebnet.satoshis.tech/assets/img/thumbnail.png?v=1.0.0">
<meta property="og:image:height" content="1200">
<meta property="og:image:width" content="630">
<meta property="og:image:alt" content="Plebnet Thumbnail">
<meta name="twitter:image" content="https://plebnet.satoshis.tech/assets/img/thumbnail.png?v=1.0.0">
<meta property="twitter:image:alt" content="Plebnet Thumbnail">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Satoshis.Tech">
<meta property="og:title" content="Plebnet Visualizer - Satoshis.Tech">
<meta property="og:url" content="https://plebnet.satoshis.tech">
<meta property="og:description" content="A visualization of Plebnet">
<meta name="title" content="Plebnet Visualizer - Satoshis.Tech">
<?php
include 'includes/favicon.html';
?>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" async rel="stylesheet">
<link rel="stylesheet" async href="/assets/css/main.css?v=1.10.7">
</head>
<body>
<nav>
<div id="search" class="nav-content">
<form autocomplete="off" onsubmit="">
<div class="autocomplete">
<input type="text" placeholder="Node alias" id="nodeInput" name="nodeInput">
<img class="searchIcon" src="assets/img/icons/search_64.png">
</div>
</form>
</div>
<div class="nav-content">
<div id="info" class="button">
<img src="assets/img/icons/info_64.png">
</div>
</div>
<div class="nav-content">
<div id="settings" class="button" onclick="showSettings();">
<img src="assets/img/icons/setting_64.png">
</div>
</div>
</nav>
<div id="bar">
<div class="section">
<div class="content">
<h2>Info</h2>
<h3>Last Updated: <?php echo date("H:i T", filemtime("graphs/graph.json")); ?></h3>
<p>This graph is showing nodes that are part of Plebnet.
Nodes on the graph are scrubbed from <a href="https://graph.plebnet.org/" target="_blank">Plebnet</a>.
Channels are collected directly from the LN.
</p>
</div>
</div>
<div class="section">
<div class="content">
<h2>Settings</h2>
<p>3D version is <button onclick="window.location.href='/3d';">available here</button><p>
<ul>
<li>
Show node names for:
<ul>
<li>
<input type="checkbox" id="setting1a" name="setting1a" value="Node names selected" checked disabled>
<label for="setting1a"> Selected node</label>
</li>
<li>
<input type="checkbox" id="setting1b" name="setting1b" value="Node names neighbours" checked>
<label for="setting1b"> Neighbouring nodes</label>
</li>
<li>
<input type="checkbox" id="setting1c" name="setting1c" value="Node names neighbours 2nd" checked>
<label for="setting1c"> Neighbouring nodes
<span class="tooltip">(2nd degree)
<span class="tooltiptext">The neighbours' neighbours</span>
</span>
</label>
</li>
<li>
<input type="checkbox" id="setting1" name="setting1" value="Node names">
<label for="setting1"> All nodes</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="setting2" name="setting2" value="Triangle Edges">
<label for="setting2"> Show only
<span class="tooltip">triangular channels
<span class="tooltiptext">Triangular channels are channels that form a triangle with 2 other channels, also know as a cyclic superhub, liquidity triangle, channel swap or ring of fire.</span>
</span>
</label>
</li>
</ul>
</div>
</div>
<div class="section">
<div class="content">
<h2>Connect</h2>
Connect with my node <a href="https://btcpay.satoshis.tech/embed/BhtTLhbEhSZByquLhPqbbG45SejRXHkimRtBUbtn7m7y/BTC/ln" target="_blank">here (QR)</a>.<br>
Other links to my node:
<a href="https://terminal.lightning.engineering/#/02241407b77092b0ac43350fdb09d13476cf11b0453037494e55f56207e1b247b8" target="_blank">terminal web</a>,
<a href="https://amboss.space/node/02241407b77092b0ac43350fdb09d13476cf11b0453037494e55f56207e1b247b8" target="_blank">amboss.space</a> and
<a href="https://1ml.com/node/02241407b77092b0ac43350fdb09d13476cf11b0453037494e55f56207e1b247b8" target="_blank">1ml.com</a>.
</p>
</div>
</div>
</div>
<script src="/assets/js/donate.js?v=1.2.3"></script>
<script src ="https://btcpay.satoshis.tech/modal/btcpay.js"></script>
<form method="POST" onsubmit="onBTCPayFormSubmit(event);return false" action="https://btcpay.satoshis.tech/api/v1/invoices">
<input type="hidden" name="checkoutDesc" value="Donation from Anonymous" />
<input type="hidden" name="price" value="0.00001" />
<input type="hidden" name="storeId" value="BhtTLhbEhSZByquLhPqbbG45SejRXHkimRtBUbtn7m7y" />
<input type="hidden" name="jsonResponse" value="true" />
<input type="hidden" name="notifyEmail" value="donation@satoshis.tech" />
<input type="hidden" name="currency" value="BTC" />
<button type="submit" name="submit" id="donate">
<img src="assets/img/icons/donate_24.png">Buy me a coffee
</button>
</form>
<div id="graph_container">
</div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/assets/js/graph.js?v=1.3.1"></script>
<script src="/assets/js/settings.js?v=1.6.0"></script>
<script src="/assets/js/ui.js?v=1.3.0"></script>
<script src="/assets/js/find.js?v=1.2.0"></script>
</body>
</html>