alpcentaur/cannabinieri_web_actix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile

Browse source
This commit is contained in:
Xsivax 2021-10-31 13:29:44 +01:00
parent 1ca8335c33
commit 69c043bc39
2 changed files with 35 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
templates/assets/css/net.css
View file

@ -22,14 +22,9 @@ svg {
@media(min-width: 768px) { @media(min-width: 768px) {
body { #mobile_network {
max-height: 90vh; display: none;
min-width: 100vw; }
}
svg {
height: 50 !important;
width: 200;
}
} }

58
templates/assets/js/net.js
View file

@ -2,10 +2,10 @@ let graph = {
nodes : [ nodes : [
{id : "hemp", index: 0, x: 719.1790913580512, y: 326.11409230900296, vy: 0.0009665554475078223, vx: 0.00044710537175425926}, {id : "hemp", index: 0, x: 719.1790913580512, y: 326.11409230900296, vy: 0.0009665554475078223, vx: 0.00044710537175425926},
{id : "permapp", index: 1, x: 473.51321690437135, y: 317.1181430586339, vy: 0.0005811239352358496, vx: 0.0005105059544352408 }, {id : "permapp", index: 1, x: 473.51321690437135, y: 317.1181430586339, vy: 0.0005811239352358496, vx: 0.0005105059544352408 },
{id : "spider", index: 2, x: 495.66982580572676, y: 18.53, vy: 0.0007713356454593206, vx: 0.0007887999665437037 }, {id : "offgrid", index: 2, x: 495.66982580572676, y: 18.53, vy: 0.0007713356454593206, vx: 0.0007887999665437037 },
{id : "cyberpreneur", index: 3, x: 457.9995206323447, y: 277.13445200140694, vy: 0.0004637678594351416, vx: 0.0007441570379881761 }, {id : "cyberpreneur", index: 3, x: 457.9995206323447, y: 277.13445200140694, vy: 0.0004637678594351416, vx: 0.0007441570379881761 },
{id : "kaoscube", index: 4, x: 428.05791236956037, y: 237.65121337678465, vy: 0.00037483669542696317, vx: 0.00039028860355878376 }, {id : "kaoscube", index: 4, x: 428.05791236956037, y: 237.65121337678465, vy: 0.00037483669542696317, vx: 0.00039028860355878376 },
{id : "offgrid", index: 5, x: 461.65464520161396, y: 189.18158017082138, vy: -0.00023265081878199873, vx: 0.00006278089396472572 } {id : "spider", index: 5, x: 461.65464520161396, y: 189.18158017082138, vy: -0.00023265081878199873, vx: 0.00006278089396472572 }
], ],
@ -24,8 +24,11 @@ let graph = {
} }
// mobile network
let width = 100; let width = 100;
let height = 200; let height = 200;
let radius = 15;
const svg = d3.select("#mobile_network").append("svg").attr("viewBox", "0, 0, 100, 200").attr("preserveAspectRatio", "xMidYMid meet"), const svg = d3.select("#mobile_network").append("svg").attr("viewBox", "0, 0, 100, 200").attr("preserveAspectRatio", "xMidYMid meet"),
link = svg link = svg
@ -70,9 +73,9 @@ defs.append("svg:pattern")
.attr("id", "imgHemp") .attr("id", "imgHemp")
.append("svg:image") .append("svg:image")
.attr("xlink:href", "/assets/img/hemp.webp") .attr("xlink:href", "/assets/img/hemp.webp")
.attr("width", 35) .attr("width", 45)
.attr("height", 35) .attr("height", 45)
.attr("x", -5 ) .attr("x", -7 )
.attr("y", 0); .attr("y", 0);
defs.append("svg:pattern") defs.append("svg:pattern")
@ -92,10 +95,10 @@ defs.append("svg:pattern")
.attr("id", "imgSpider") .attr("id", "imgSpider")
.append("svg:image") .append("svg:image")
.attr("xlink:href", "/assets/img/spider_out.webp") .attr("xlink:href", "/assets/img/spider_out.webp")
.attr("width", 34) .attr("width", 45)
.attr("height", 34) .attr("height", 45)
.attr("x", -4 ) .attr("x", -4 )
.attr("y", -4); .attr("y", -7);
defs.append("svg:pattern") defs.append("svg:pattern")
.attr("width", "100%") .attr("width", "100%")
@ -103,10 +106,10 @@ defs.append("svg:pattern")
.attr("id", "imgCyber") .attr("id", "imgCyber")
.append("svg:image") .append("svg:image")
.attr("xlink:href", "/assets/img/3d_greenhouse.webp") .attr("xlink:href", "/assets/img/3d_greenhouse.webp")
.attr("width", 40) .attr("width", 50)
.attr("height", 40) .attr("height", 50)
.attr("x", -5 ) .attr("x", -5 )
.attr("y", -8); .attr("y", -10);
defs.append("svg:pattern") defs.append("svg:pattern")
@ -115,8 +118,8 @@ defs.append("svg:pattern")
.attr("id", "imgKaos") .attr("id", "imgKaos")
.append("svg:image") .append("svg:image")
.attr("xlink:href", "/assets/img/cube_space.webp") .attr("xlink:href", "/assets/img/cube_space.webp")
.attr("width", 35) .attr("width", 40)
.attr("height", 35) .attr("height", 40)
.attr("x", -6 ) .attr("x", -6 )
.attr("y", -6); .attr("y", -6);
@ -126,20 +129,20 @@ defs.append("svg:pattern")
.attr("id", "imgOff") .attr("id", "imgOff")
.append("svg:image") .append("svg:image")
.attr("xlink:href", "/assets/img/boat_construction.webp") .attr("xlink:href", "/assets/img/boat_construction.webp")
.attr("width", 35) .attr("width", 40)
.attr("height", 35) .attr("height", 40)
.attr("x", -6 ) .attr("x", -5 )
.attr("y", -6); .attr("y", -6);
const simulation = d3 const simulation = d3
.forceSimulation() .forceSimulation()
.nodes(graph.nodes) .nodes(graph.nodes)
.force("charge", d3.forceManyBody().strength(-60)) .force("charge", d3.forceManyBody().strength(-300))
.force("center", d3.forceCenter(width / 2.1, height / 2.1)) .force("center", d3.forceCenter(width / 2.5, height / 2.25))
.force("link", d3.forceLink(graph.links).distance(50)) .force("link", d3.forceLink(graph.links).distance(30))
.force("collide", d3.forceCollide(22)) .force("collide", d3.forceCollide(22))
.force("x", d3.forceX(-40)) .force("x", d3.forceX(-30))
.on("tick", tick); .on("tick", tick);
@ -158,8 +161,8 @@ defs.append("svg:pattern")
.attr("x2", d => d.target.x) .attr("x2", d => d.target.x)
.attr("y2", d => d.target.y); .attr("y2", d => d.target.y);
node node
.attr("cx", d => d.x) .attr("cx", d => d.x = Math.max(radius, Math.min(width - radius, d.x)))
.attr("cy", d => d.y); .attr("cy", d => d.y = Math.max(radius, Math.min(height - radius, d.y)));
} }
// make this work on touch as well // make this work on touch as well
@ -167,6 +170,7 @@ defs.append("svg:pattern")
function click(event, d) { function click(event, d) {
delete d.fx; delete d.fx;
delete d.fy; delete d.fy;
// remove fixed position on click
d3.select(this).classed("fixed", false); d3.select(this).classed("fixed", false);
simulation.alpha(1).restart(); simulation.alpha(1).restart();
@ -179,8 +183,13 @@ defs.append("svg:pattern")
} }
function dragged(event, d) { function dragged(event, d) {
console.log("dragged",d.id);
// set x position of dragged node
d.fx = clamp(event.x, 0, width); d.fx = clamp(event.x, 0, width);
// set x position of dragged node
d.fy = clamp(event.y, 0, height); d.fy = clamp(event.y, 0, height);
// sets duration of animation before restart
simulation.alpha(1).restart(); simulation.alpha(1).restart();
} }
@ -188,10 +197,7 @@ function clamp(x, lo, hi) {
return x < lo ? lo : x > hi ? hi : x; return x < lo ? lo : x > hi ? hi : x;
} }
const Nodes = graph.nodes;
const nodeIx = d => d.img
const N = d3.map(Nodes, nodeIx);
const Images = d3.map( Nodes, ( _,i ) => ({ img: N[i] }) ); // desktop network