nojs

src/build_actix/route.rs

@@ -28,6 +28,28 @@ pub async fn index( req: HttpRequest ) -> Result {
     ).await
 }
 
+
+pub async fn rootwork( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    // if response Ok return HttpResponseBuilder
+    HttpResponse::Ok()
+    // set response content type html
+    .content_type("text/html")
+    // set response body to template context
+    .body(
+        // render template context
+        template::TplRootWork {
+            // lang to value of Accept-Language header
+            lang : &template::get_lang(&req),
+        }
+        // render template context into String
+        .render()
+        .map_err( |e| {
+            eprintln!("error_tplrender : {}", e );
+            error::crash( template::get_lang(&req), "error_tplrender" )
+        })?,
+    ).await
+}
+
 pub async fn hemp( req: HttpRequest ) -> Result<HttpResponse, Error> {
     // if response Ok return HttpResponseBuilder
     HttpResponse::Ok()
@@ -158,6 +180,50 @@ pub async fn robot( req: HttpRequest ) -> Result {
     ).await
 }
 
+pub async fn app( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    // if response Ok return HttpResponseBuilder
+    HttpResponse::Ok()
+    // set response content type html
+    .content_type("text/html")
+    // set response body to template context
+    .body(
+        // render template context
+        template::TplApp {
+            // lang to value of Accept-Language header
+            lang : &template::get_lang(&req),
+        }
+        
+        // render template context into String
+        .render()
+        .map_err( |e| {
+            eprintln!("error_tplrender : {}", e );
+            error::crash( template::get_lang(&req), "error_tplrender" )
+        })?,
+    ).await
+}
+
+pub async fn business( req: HttpRequest ) -> Result<HttpResponse, Error> {
+    // if response Ok return HttpResponseBuilder
+    HttpResponse::Ok()
+    // set response content type html
+    .content_type("text/html")
+    // set response body to template context
+    .body(
+        // render template context
+        template::TplModel {
+            // lang to value of Accept-Language header
+            lang : &template::get_lang(&req),
+        }
+        
+        // render template context into String
+        .render()
+        .map_err( |e| {
+            eprintln!("error_tplrender : {}", e );
+            error::crash( template::get_lang(&req), "error_tplrender" )
+        })?,
+    ).await
+}
+
 
 
 

src/build_actix/template.rs

@@ -12,6 +12,14 @@ pub struct TplIndex<'a> {
     pub lang: &'a str,
 }
 
+#[derive(Template)]
+// define path to use template in
+#[template(path="app.html")]
+pub struct TplRootWork<'a> {
+    // replace with lang
+    pub lang: &'a str,
+}
+
 #[derive(Template)]
 // define path to use template in
 #[template(path="hemp.html")]
@@ -52,16 +60,25 @@ pub struct TplOff<'a> {
     pub lang: &'a str,
 }
 
-
-// test
-// info template within index.html
+// index info windows
 
 #[derive(Template)]
-#[template(path="info.html")]
+#[template(path="tekla.html")]
 pub struct TplRobot<'a> {
     pub lang: &'a str,
 }
 
+#[derive(Template)]
+#[template(path="rootwork.html")]
+pub struct TplApp<'a> {
+    pub lang: &'a str,
+}
+
+#[derive(Template)]
+#[template(path="virtual.html")]
+pub struct TplModel<'a> {
+    pub lang: &'a str,
+}
 
 
 // linked to error template

src/main.rs

@@ -19,14 +19,15 @@ async fn main() -> std::io::Result<()> {
             .service( fs::Files::new("/assets", "./templates/assets/").index_file("index.html"))
             .route("/", web::get().to(route::index))
             .route("/hemp", web::get().to(route::hemp))
-            .route("/spider", web::get().to(route::spider))
+            .route("/tekla", web::get().to(route::spider))
+            .route("/rootwork", web::get().to(route::rootwork))
             .route("/kaoscube", web::get().to(route::cube))
             .route("/cyberpreneur", web::get().to(route::cyber))
             .route("/offgrid", web::get().to(route::off))
-
-            // test
-            // route of link in svg in index.html
+            // info windows index
             .route("/robot", web::get().to(route::robot))
+            .route("/app", web::get().to(route::app))
+            .route("/virtual", web::get().to(route::business))
         })
         .bind("0.0.0.0:5000")?
         .run()

templates/app.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+{% block content %}
+  <h1>RootWork</h1>
+  <p>The social network of plants</p>
+{% endblock %}

templates/assets/css/box.css

@@ -33,6 +33,7 @@
   width: inherit;
   display: grid;
   grid-template-rows: .5fr .25fr 1fr .45fr;
+  max-width: inherit;
 }
 
 .content h2 {
@@ -171,6 +172,11 @@ input:hover ~ .close  {
   }
 }
 
+#small {
+  font-size: 4.9vh;
+  max-width: inherit;
+}
+
 
 
 

templates/assets/js/net.js

@@ -1,278 +0,0 @@
-// replace div data with translated (html output askama)
-// like this ? title: "{{"title1"|translate(lang)}}"
-let graph = {
-    nodes : [
-      {id : "hemp", url: "/hemp" ,index: 0, x: 719.1790913580512, y: 326.11409230900296, vy: 0.0009665554475078223, vx: 0.00044710537175425926, title: "Title1", content: "Content 1"},
-      {id : "permapp", url: "/spider/permapp",index: 1, x: 473.51321690437135, y: 317.1181430586339, vy: 0.0005811239352358496, vx: 0.0005105059544352408,  title: "Title 2", content: "Content 2"},
-      {id : "offgrid",url: "/offgrid", index: 2, x: 495.66982580572676, y: 18.53, vy: 0.0007713356454593206, vx: 0.0007887999665437037,  title: "Title 3", content: "Content 3"},
-      {id : "cyberpreneur",url: "/cyberpreneur", index: 3, x: 457.9995206323447, y: 277.13445200140694, vy: 0.0004637678594351416, vx: 0.0007441570379881761,  title: "Title 4", content: "Content 4" },
-      {id : "kaoscube",url: "/kaoscube", index: 4, x: 428.05791236956037, y: 237.65121337678465, vy: 0.00037483669542696317, vx: 0.00039028860355878376,  title: "Title 5", content: "Content 5"},
-      {id : "spider", url: "/spider",index: 5, x: 461.65464520161396, y: 189.18158017082138, vy: -0.00023265081878199873, vx: 0.00006278089396472572,  title: "Title 6", content: "Content 6" }
-  
-  ],
-  
-    links : [
-      {source: 0, target: 1, index: 0 },
-      {source: 0, target: 2, index: 1 },
-      {source: 0, target: 3, index: 2 },
-      {source: 0, target: 4, index: 3 },
-      {source: 1, target: 2, index: 4 },
-      {source: 1, target: 4, index: 5 },
-      {source: 2, target: 3 ,index: 6 },
-      {source: 2, target: 4 ,index: 7 },
-      {source: 2, target: 5 ,index: 8 },
-      {source: 4, target: 5 ,index: 9 }
-    ],
-
-}
-
-// has to be made responsive to actual screensize !
-
-let width = 100;
-let height = 200;
-let radius = 15;
-
-const svg = d3.select("#mobile_network").append("svg").attr("viewBox", "0, 0, 100, 200").attr("preserveAspectRatio", "xMidYMid meet").attr("style", "position: relative;"),
-    link = svg
-      .selectAll(".link")
-      .data(graph.links)
-      .join("line")
-      .classed("link", true),
-    node = svg
-      .selectAll(".node")
-      .data(graph.nodes)
-      .join("circle")
-      .attr("id", d => d.id)
-      .attr("r", 15)
-      .classed("node", true)
-      .classed("fixed", d => d.fx !== undefined);
-
-
-const node1 = svg.select("#hemp")
-    .attr("fill", "url(#imgHemp)");
-
-const node2 = svg.select("#permapp")
-    .attr("fill", "url(#imgPermapp)");
-
-const node3 = svg.select("#spider")
-    .attr("fill", "url(#imgSpider)");
-
-const node4 = svg.select("#cyberpreneur")
-    .attr("fill", "url(#imgCyber)");
-
-const node5 = svg.select("#kaoscube")
-    .attr("fill", "url(#imgKaos)");
-
-const node6 = svg.select("#offgrid")
-    .attr("fill", "url(#imgOff)");
-
-
-const defs = svg.append("svg:defs");
-
-defs.append("svg:pattern")
-.attr("width", "100%")
-.attr("height", "100%")
-.attr("id", "imgHemp")
-.append("svg:image")
-.attr("xlink:href", "/assets/img/hemp.webp")
-.attr("width", 45)
-.attr("height", 45)
-.attr("x", -7 )
-.attr("y", 0);
-
-defs.append("svg:pattern")
-.attr("width", "100%")
-.attr("height", "100%")
-.attr("id", "imgPermapp")
-.append("svg:image")
-.attr("xlink:href", "/assets/img/v1-permapp.webp")
-.attr("width", 35)
-.attr("height", 35)
-.attr("x", 0 )
-.attr("y", 0);
-
-defs.append("svg:pattern")
-.attr("width", "100%")
-.attr("height", "100%")
-.attr("id", "imgSpider")
-.append("svg:image")
-.attr("xlink:href", "/assets/img/spider_out.webp")
-.attr("width", 45)
-.attr("height", 45)
-.attr("x", -4 )
-.attr("y", -7);
-
-defs.append("svg:pattern")
-.attr("width", "100%")
-.attr("height", "100%")
-.attr("id", "imgCyber")
-.append("svg:image")
-.attr("xlink:href", "/assets/img/3d_greenhouse.webp")
-.attr("width", 50)
-.attr("height", 50)
-.attr("x", -5 )
-.attr("y", -10);
-
-
-defs.append("svg:pattern")
-.attr("width", "100%")
-.attr("height", "100%")
-.attr("id", "imgKaos")
-.append("svg:image")
-.attr("xlink:href", "/assets/img/cube_space.webp")
-.attr("width", 40)
-.attr("height", 40)
-.attr("x", -6 )
-.attr("y", -6);
-
-defs.append("svg:pattern")
-.attr("width", "100%")
-.attr("height", "100%")
-.attr("id", "imgOff")
-.append("svg:image")
-.attr("xlink:href", "/assets/img/boat_construction.webp")
-.attr("width", 40)
-.attr("height", 40)
-.attr("x", -5 )
-.attr("y", -6);
-
-
-  const simulation = d3
-    .forceSimulation()
-    .nodes(graph.nodes)
-    .force("charge", d3.forceManyBody().strength(-300))
-    .force("center", d3.forceCenter(width / 2.5, height / 2.25))
-    .force("link", d3.forceLink(graph.links).distance(30))
-    .force("collide", d3.forceCollide(22))
-    .force("x", d3.forceX(-30))
-    .on("tick", tick);
-
-const drag = d3
-.drag()
-.on("start", dragstart) 
-.on("drag", dragged);
-
-node.call(drag).on("click", click);
-
-
-// on doubleclick release position
-node.on("dblclick", release );
-
-function release(event, d) { 
-  // back to original position
-  delete d.fx;
-  delete d.fy;
-  simulation.alpha(1).restart();
-}
-
-// make this work on touch as well !
-
-function click(event, d) {
-  d3.select(this).classed("fixed", false);
-}
-
-function dragstart() {
-  // select element and set position to fixed
-  d3.select(this).classed("fixed", true);
-
-  // show box on single click
-  toggleDiv(this.id, status);
-
-  console.log("box atrr", box.attr("class"));
-  if ( box.attr("class") == "box_on" ) {
-    // make either nodes underneath unclickable as long as box is open or bring content in box to very front !
-    this.__on = null;
-  }
-  // this refers to dragged circle element
-  console.log("dragstart", this.id);
-
-}
-
-function dragged(event, d) {
-
-  console.log("dragged",d.id);
-  // set x position of dragged node
-  d.fx = clamp(event.x, 0, width);
-  // set x position of dragged node
-  d.fy = clamp(event.y, 0, height);
-  // sets duration of animation before restart
-  simulation.alpha(1).restart();
-}
-
-  function tick() {
-    link
-      .attr("x1", d => d.source.x)
-      .attr("y1", d => d.source.y)
-      .attr("x2", d => d.target.x)
-      .attr("y2", d => d.target.y);
-    node
-      .attr("cx", d => d.x = Math.max(radius, Math.min(width - radius, d.x)))
-      .attr("cy", d => d.y = Math.max(radius, Math.min(height - radius, d.y)));
-  }
-
-function clamp(x, lo, hi) {
-    return x < lo ? lo : x > hi ? hi : x;
-}
-
-// show info divs with data based on id
-
-// the infobox
-const box = d3.select("#box")
-
-// state of box
-let toggleDiv = undefined;
-
-// all nodes
-let nodeArray = graph.nodes;
-
-
-// change status of a box from visible to hidden and viceversa on click
-
-toggleDiv = function( event, status ) {
-
-    if ( status == "" ) {
-      status = box.attr("class") == "box_off" ? "box_on" : "box_off";
-      box.attr("class", status);
-
-    } else  {
-      console.log("status is", status);    
-    }
-  }
-
-
-// Like that somehow: embed data as html
-
-// Get content data
-  //Parameters: data, array containing all nodes
-
-     function getContent( n, nodeArray ) {
-      info = '<div id="box">';
-      if( n.link )
-      // get link of node
-        info += '<a href="' + n.url + '"/>';
-      else
-        console.log("couldn't get link:", n.url);
-
-      if( n.title )
-      info += '<h1 id="title">"' + n.title + '"/>'
-      else
-        console.log("couldn't get title:", n.title);
-      if( n.content )
-        info += '<p id="content><"' + n.content + '"/>'
-          console.log("couldn't get title:", n.content);
-
-      return info;
-    }
-
-
-// Show box for a given node
-      function showContent( node ) {
-        // Fill it and display the box
-        box
-        .html( getContent(node,nodeArray) )
-      }
-  
-
-
-
-

templates/index.html

@@ -61,13 +61,17 @@
         <path id="edge_6" class="edges" d="m18.277 93.674c38.021-40.006 37.999-40.007 37.999-40.007" stroke-width=".52917"/>
         <path id="edge_4" class="edges" d="m69.403 85.356c-13.122-31.702-13.127-31.689-13.127-31.689" stroke-width="3.4396"/>
         <path id="edge_5" class="edges" d="m50.728 121.44c2.3527-71.49 2.3361-71.474 2.3361-71.474" stroke-width=".48836px"/>
-        <circle id="circle_2" class="nodes" cx="60" cy="52" r="13" style="paint-order:fill stroke markers" fill="url(#permapp)"/>
+        <a href="/app">
+            <circle id="circle_2" class="nodes" cx="60" cy="52" r="13" style="paint-order:fill stroke markers" fill="url(#permapp)"/>
+        </a>
         </g>
 
         <g class="group_3">
             <path id="edge_7" class="edges" d="m30.477 64.503c29.347 29.791 29.347 29.774 29.347 29.774" stroke-width=".52917"/>
             <path id="edge_8" class="edges" d="m23.453 62.106c28.366 67.295 28.374 67.263 28.374 67.263" stroke-width=".55417px"/>
-            <circle id="circle_3" class="nodes" cx="20" cy="60" r="13" style="paint-order: fill stroke markers" fill="url(#cyber)"/>
+            <a href="/virtual">
+                <circle id="circle_3" class="nodes" cx="20" cy="60" r="13" style="paint-order: fill stroke markers" fill="url(#cyber)"/>
+            </a>
         </g>
 
         <g class="group_4">

templates/nav.html

@@ -9,8 +9,9 @@
         <div class="hamburger"></div>
 
         <ul class ="menu">
+            <li><a href="/tekla">Tekla</a></li>
+            <li><a href="/rootwork">Rootwork</a></li>
             <li><a href="/hemp">{{ "nav_item1"|translate(lang) }}</a></li>
-            <li><a href="/spider">{{ "nav_item2"|translate(lang) }}</a></li>
             <li><a href="/kaoscube">Kaos Cube</a></li>
             <li><a href="/cyberpreneur">Cyberpreneur</a></li>
             <li><a href="/offgrid">Offgrid</a></li>

templates/rootwork.html

@@ -0,0 +1,41 @@
+{% extends "index.html" %}
+
+<!-- load into index template -->
+{% block child %}
+<div class="mobile_placeholder">
+    <form action="/" method="get">
+        <input type="submit">
+            <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="myGradient" gradientTransform="rotate(90)">
+                    <stop offset="5%"  stop-color="#8693AB" />
+                    <stop offset="95%" stop-color="#BDD4E7" />
+                    </linearGradient>
+
+                    <linearGradient id="myGradient2" gradientTransform="rotate(45)">
+                        <stop offset="5%"  stop-color="#BDD4E7" />
+                        <stop offset="95%" stop-color="#8693AB" />
+                    </linearGradient>
+                </defs>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        </form>
+    <div class="open">
+        {# Test Content - add language handling json#}
+        <div class="box">
+        </div>
+        <div class="content">
+            <h2>Root Work</h2>
+            <h3>The Social Network of Plants for Robots and Explorers</h3>
+            <p>The most impressive network on out planet can be found underground. 
+               All organisms on earth are related, they are friends and followers. 
+               All of them have favorite environments that get them into a good mood. 
+               They show it with flowers or sweet fruit.
+               RootWork aims to become a network of optimal conditions for all organisms and serves as a database for Tekla.
+            </p>
+            <a href="/rootwork">MORE</a>
+        </div>
+    </div>
+
+</div>
+{% endblock%}

templates/info.html → templates/tekla.html

@@ -33,7 +33,7 @@
                 All Spiders communicate trough the network the Kaos Cube spins.
                 Tekla monitors the plants and takes care of their needs until it's time for it to harvest the free organic and local crops.
             </p>
-            <a href="/spider">MORE</a>
+            <a href="/tekla">MORE</a>
         </div>
     </div>
 

templates/virtual.html

@@ -0,0 +1,41 @@
+{% extends "index.html" %}
+
+<!-- load into index template -->
+{% block child %}
+<div class="mobile_placeholder">
+    <form action="/" method="get">
+        <input type="submit">
+            <svg class="close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <defs>
+                    <linearGradient id="myGradient" gradientTransform="rotate(90)">
+                    <stop offset="5%"  stop-color="#8693AB" />
+                    <stop offset="95%" stop-color="#BDD4E7" />
+                    </linearGradient>
+
+                    <linearGradient id="myGradient2" gradientTransform="rotate(45)">
+                        <stop offset="5%"  stop-color="#BDD4E7" />
+                        <stop offset="95%" stop-color="#8693AB" />
+                    </linearGradient>
+                </defs>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+        </form>
+    <div class="open">
+        {# Test Content - add language handling json#}
+        <div class="box">
+        </div>
+        <div class="content">
+            <h2 id="small">Cyberpreneur</h2>
+            <h3>Virtual business transparency and customers as entrepreneurs</h3>
+            <p>The most impressive network on out planet can be found underground. 
+               All organisms on earth are related, they are friends and followers. 
+               All of them have favorite environments that get them into a good mood. 
+               They show it with flowers or sweet fruit.
+               RootWork aims to become a network of optimal conditions for all organisms and serves as a database for Tekla.
+            </p>
+            <a href="/cyberpreneur">MORE</a>
+        </div>
+    </div>
+
+</div>
+{% endblock%}