diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4169c5d --- /dev/null +++ b/.gitignore @@ -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 diff --git a/plebnet/3d.php b/plebnet/3d.php new file mode 100644 index 0000000..28c8176 --- /dev/null +++ b/plebnet/3d.php @@ -0,0 +1,63 @@ + + + + +Plebnet Visualizer (3D) - Satoshis.Tech + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/plebnet/assets/css/3d.css b/plebnet/assets/css/3d.css new file mode 100644 index 0000000..e4b95bf --- /dev/null +++ b/plebnet/assets/css/3d.css @@ -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; + } +} \ No newline at end of file diff --git a/plebnet/assets/css/main.css b/plebnet/assets/css/main.css new file mode 100644 index 0000000..aa47040 --- /dev/null +++ b/plebnet/assets/css/main.css @@ -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; + } +} \ No newline at end of file diff --git a/plebnet/assets/img/favicon.png b/plebnet/assets/img/favicon.png new file mode 100644 index 0000000..15c2157 Binary files /dev/null and b/plebnet/assets/img/favicon.png differ diff --git a/plebnet/assets/img/favicon.psb b/plebnet/assets/img/favicon.psb new file mode 100644 index 0000000..0b2e621 Binary files /dev/null and b/plebnet/assets/img/favicon.psb differ diff --git a/plebnet/assets/img/favicon/android-chrome-192x192.png b/plebnet/assets/img/favicon/android-chrome-192x192.png new file mode 100644 index 0000000..75c71cd Binary files /dev/null and b/plebnet/assets/img/favicon/android-chrome-192x192.png differ diff --git a/plebnet/assets/img/favicon/android-chrome-512x512.png b/plebnet/assets/img/favicon/android-chrome-512x512.png new file mode 100644 index 0000000..8a07f11 Binary files /dev/null and b/plebnet/assets/img/favicon/android-chrome-512x512.png differ diff --git a/plebnet/assets/img/favicon/apple-touch-icon.png b/plebnet/assets/img/favicon/apple-touch-icon.png new file mode 100644 index 0000000..ff07442 Binary files /dev/null and b/plebnet/assets/img/favicon/apple-touch-icon.png differ diff --git a/plebnet/assets/img/favicon/browserconfig.xml b/plebnet/assets/img/favicon/browserconfig.xml new file mode 100644 index 0000000..0da2c75 --- /dev/null +++ b/plebnet/assets/img/favicon/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #ffffff + + + diff --git a/plebnet/assets/img/favicon/favicon-16x16.png b/plebnet/assets/img/favicon/favicon-16x16.png new file mode 100644 index 0000000..34ddaea Binary files /dev/null and b/plebnet/assets/img/favicon/favicon-16x16.png differ diff --git a/plebnet/assets/img/favicon/favicon-32x32.png b/plebnet/assets/img/favicon/favicon-32x32.png new file mode 100644 index 0000000..90aa69b Binary files /dev/null and b/plebnet/assets/img/favicon/favicon-32x32.png differ diff --git a/plebnet/assets/img/favicon/favicon.ico b/plebnet/assets/img/favicon/favicon.ico new file mode 100644 index 0000000..3862418 Binary files /dev/null and b/plebnet/assets/img/favicon/favicon.ico differ diff --git a/plebnet/assets/img/favicon/mstile-150x150.png b/plebnet/assets/img/favicon/mstile-150x150.png new file mode 100644 index 0000000..40132c6 Binary files /dev/null and b/plebnet/assets/img/favicon/mstile-150x150.png differ diff --git a/plebnet/assets/img/favicon/safari-pinned-tab.svg b/plebnet/assets/img/favicon/safari-pinned-tab.svg new file mode 100644 index 0000000..d5882b6 --- /dev/null +++ b/plebnet/assets/img/favicon/safari-pinned-tab.svg @@ -0,0 +1,25 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + diff --git a/plebnet/assets/img/favicon/site.webmanifest b/plebnet/assets/img/favicon/site.webmanifest new file mode 100644 index 0000000..6ce8837 --- /dev/null +++ b/plebnet/assets/img/favicon/site.webmanifest @@ -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" +} diff --git a/plebnet/assets/img/icons/donate.png b/plebnet/assets/img/icons/donate.png new file mode 100644 index 0000000..6449ce8 Binary files /dev/null and b/plebnet/assets/img/icons/donate.png differ diff --git a/plebnet/assets/img/icons/donate_24.png b/plebnet/assets/img/icons/donate_24.png new file mode 100644 index 0000000..83b6d03 Binary files /dev/null and b/plebnet/assets/img/icons/donate_24.png differ diff --git a/plebnet/assets/img/icons/info.png b/plebnet/assets/img/icons/info.png new file mode 100644 index 0000000..58ab8c2 Binary files /dev/null and b/plebnet/assets/img/icons/info.png differ diff --git a/plebnet/assets/img/icons/info_64.png b/plebnet/assets/img/icons/info_64.png new file mode 100644 index 0000000..f62cf26 Binary files /dev/null and b/plebnet/assets/img/icons/info_64.png differ diff --git a/plebnet/assets/img/icons/search.png b/plebnet/assets/img/icons/search.png new file mode 100644 index 0000000..2e61777 Binary files /dev/null and b/plebnet/assets/img/icons/search.png differ diff --git a/plebnet/assets/img/icons/search_64.png b/plebnet/assets/img/icons/search_64.png new file mode 100644 index 0000000..9543e34 Binary files /dev/null and b/plebnet/assets/img/icons/search_64.png differ diff --git a/plebnet/assets/img/icons/setting.png b/plebnet/assets/img/icons/setting.png new file mode 100644 index 0000000..7f21dcb Binary files /dev/null and b/plebnet/assets/img/icons/setting.png differ diff --git a/plebnet/assets/img/icons/setting_64.png b/plebnet/assets/img/icons/setting_64.png new file mode 100644 index 0000000..7903904 Binary files /dev/null and b/plebnet/assets/img/icons/setting_64.png differ diff --git a/plebnet/assets/img/qrcode_connect.png b/plebnet/assets/img/qrcode_connect.png new file mode 100644 index 0000000..81f53b6 Binary files /dev/null and b/plebnet/assets/img/qrcode_connect.png differ diff --git a/plebnet/assets/img/thumbnail.png b/plebnet/assets/img/thumbnail.png new file mode 100644 index 0000000..18d2d0d Binary files /dev/null and b/plebnet/assets/img/thumbnail.png differ diff --git a/plebnet/assets/img/thumbnail3d.png b/plebnet/assets/img/thumbnail3d.png new file mode 100644 index 0000000..604b4c0 Binary files /dev/null and b/plebnet/assets/img/thumbnail3d.png differ diff --git a/plebnet/assets/js/donate.js b/plebnet/assets/js/donate.js new file mode 100644 index 0000000..8082bf9 --- /dev/null +++ b/plebnet/assets/js/donate.js @@ -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)); +} \ No newline at end of file diff --git a/plebnet/assets/js/find.js b/plebnet/assets/js/find.js new file mode 100644 index 0000000..f07ddb5 --- /dev/null +++ b/plebnet/assets/js/find.js @@ -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 += "" + arr[i].substr(j, val.length) + ""; + b.innerHTML += arr[i].substr(val.length+j); + b.innerHTML += ""; + b.innerHTML += ""; + 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); \ No newline at end of file diff --git a/plebnet/assets/js/graph.js b/plebnet/assets/js/graph.js new file mode 100644 index 0000000..78c8af3 --- /dev/null +++ b/plebnet/assets/js/graph.js @@ -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"); diff --git a/plebnet/assets/js/settings.js b/plebnet/assets/js/settings.js new file mode 100644 index 0000000..8a950a2 --- /dev/null +++ b/plebnet/assets/js/settings.js @@ -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(); diff --git a/plebnet/assets/js/ui.js b/plebnet/assets/js/ui.js new file mode 100644 index 0000000..c211f36 --- /dev/null +++ b/plebnet/assets/js/ui.js @@ -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"); +} \ No newline at end of file diff --git a/plebnet/includes/favicon.html b/plebnet/includes/favicon.html new file mode 100644 index 0000000..7af9aef --- /dev/null +++ b/plebnet/includes/favicon.html @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/plebnet/includes/graph3d.js b/plebnet/includes/graph3d.js new file mode 100644 index 0000000..07fe643 --- /dev/null +++ b/plebnet/includes/graph3d.js @@ -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); \ No newline at end of file diff --git a/plebnet/index.php b/plebnet/index.php new file mode 100644 index 0000000..640baa7 --- /dev/null +++ b/plebnet/index.php @@ -0,0 +1,147 @@ + + + + + Plebnet Visualizer - Satoshis.Tech + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Info

+

Last Updated:

+

This graph is showing nodes that are part of Plebnet. + Nodes on the graph are scrubbed from Plebnet. + Channels are collected directly from the LN. +

+
+
+
+
+

Settings

+

3D version is

+

    +
  • + Show node names for: +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    +
    • +
  • + + +
    • +
+
+
+
+
+

Connect

+ Connect with my node here (QR).
+ Other links to my node: + terminal web, + amboss.space and + 1ml.com. +

+
+
+
+ + + +
+ + + + + + + +
+ +
+
+ + + + + + + + +