Enlarged Network Graphic by 20%

The YaCy retro-pixel-art images had been designed in a time
where displays had not been "retina displays" and
device pixel ratios (DPR) of 2 (everything must be scaled up
by 100% to have the same size).
Because the YaCy images have a fixed-width size, they appear
now tiny compared on how they appeared in the past.
Our 6-pixel font is not readable any more on high-res
displays because with a DPR-2 they are scaled down to 50%.
Experiments with DPR-agnostic auto-scaling of the images did
not show a beautiful result. Instead, we now simply give
the graphics 20% more pixel space and also scale up the font
from 6 pixel to 8 pixel. They still have a nice retro-style
look.

3 files changed, 24 insertions, 10 deletions

diff --git a/htroot/Network.html b/htroot/Network.html
index 3bdb5d500..75a33f59c 100644
--- a/htroot/Network.html
+++ b/htroot/Network.html
@@ -44,7 +44,7 @@ document.getElementById("apilink").setAttribute("href", "Network.xml?" + window.
     <h2>YaCy Search Network '#[networkName]#'</h2>

   <script type="text/javascript">

   <!--

-    imagestub = "NetworkPicture.png?width=1024&height=720&bgcolor=FFFFFF&ct=15000&coronaangle=";

+    imagestub = "NetworkPicture.png?width=1280&height=900&bgcolor=FFFFFF&ct=15000&coronaangle=";

     imageanimindex = 0;

     imageloadindex = 0;

     imagecycles = 0;

@@ -56,7 +56,7 @@ document.getElementById("apilink").setAttribute("href", "Network.xml?" + window.
       for (j = 0; j < 6; j++) initanimationphase(j, handle);

     }

     function initanimationphase(phase, handle) {

-      imagearray[phase] = new Image(1024, 720);

+      imagearray[phase] = new Image(1280, 900);

       angle = phase * 60;

       imagearray[phase].src = imagestub + angle + "&handle=" + handle;

     }

@@ -172,7 +172,7 @@ document.getElementById("apilink").setAttribute("href", "Network.xml?" + window.
     </p>

     ::

     <div class="left">

-    <table border="0" width="1024">

+    <table border="0" width="1280">

       <tr class="TableHeader">

         <td rowspan="5" class="TableHeader" width="10%">Network</td>

         <td colspan="#(active-switch)#2::3::4::5::6#(/active-switch)#" width="22%">Online Peers</td>

@@ -223,7 +223,7 @@ document.getElementById("apilink").setAttribute("href", "Network.xml?" + window.
 

     <div class="left">

       <p>

-        <a href="NetworkPicture.png?width=1024&amp;height=720&amp;bgcolor=FFFFFF"><img id="NetworkPicture" src="NetworkPicture.png?width=1024&amp;height=720&amp;bgcolor=FFFFFF&amp;coronaangle=0" alt="The YaCy Network" width="1024" height="720" /></a>

+        <a href="NetworkPicture.png?width=1280&amp;height=900&amp;bgcolor=FFFFFF"><img id="NetworkPicture" src="NetworkPicture.png?width=1280&amp;height=900&amp;bgcolor=FFFFFF&amp;coronaangle=0" alt="The YaCy Network" width="1280" height="900" /></a>

       </p>

     </div>

     <div class="left">

diff --git a/source/net/yacy/peers/graphics/NetworkGraph.java b/source/net/yacy/peers/graphics/NetworkGraph.java
index 25c08639a..5ed4120dc 100644
--- a/source/net/yacy/peers/graphics/NetworkGraph.java
+++ b/source/net/yacy/peers/graphics/NetworkGraph.java
@@ -64,7 +64,7 @@ public class NetworkGraph {
     private static final long COL_HEADLINE       = 0xFFFFFF;

     private static final long COL_ACTIVE_DOT     = 0x000040;

     private static final long COL_ACTIVE_LINE    = 0x113322;

-    private static final long COL_ACTIVE_TEXT    = 0x226644;

+    private static final long COL_ACTIVE_TEXT    = 0x33BB88;

     private static final long COL_PASSIVE_DOT    = 0x201010;

     private static final long COL_PASSIVE_LINE   = 0x443333;

     private static final long COL_PASSIVE_TEXT   = 0x663333;

@@ -289,10 +289,10 @@ public class NetworkGraph {
 

         // draw description

         networkPicture.setColor(COL_HEADLINE);

-        PrintTool.print5(networkPicture, 2, 6, 0, "YACY NETWORK '" + networkName.toUpperCase() + "'", -1, 100);

-        PrintTool.print5(networkPicture, 2, 14, 0, networkTitle.toUpperCase(), -1, 80);

-        PrintTool.print5(networkPicture, width - 2, 6, 0, "SNAPSHOT FROM " + new Date().toString().toUpperCase(), 1, 80);

-        PrintTool.print5(networkPicture, width - 2, 14, 0, "DRAWING OF " + totalCount + " SELECTED PEERS", 1, 80);

+        PrintTool.print7(networkPicture, 2, 10, 0, "YACY NETWORK '" + networkName.toUpperCase() + "'", -1, 100);

+        PrintTool.print7(networkPicture, 2, 20, 0, networkTitle.toUpperCase(), -1, 80);

+        PrintTool.print7(networkPicture, width - 2, 10, 0, "SNAPSHOT FROM " + new Date().toString().toUpperCase(), 1, 80);

+        PrintTool.print7(networkPicture, width - 2, 20, 0, "DRAWING OF " + totalCount + " SELECTED PEERS", 1, 80);

 

         // wait for draw termination

         //for (final Thread t: drawThreads) try { t.join(); } catch (final InterruptedException ee) {}

@@ -357,7 +357,7 @@ public class NetworkGraph {
             this.img.arcLine(this.centerX, this.centerY, this.innerradius + 18, this.innerradius + linelength, angle, true, this.colorLine, 0x444444l, 12, this.coronaangle / 30, 0, true);

             // draw text

             this.img.setColor(this.colorText);

-            PrintTool.arcPrint5(this.img, this.centerX, this.centerY, this.innerradius + linelength, angle, name, 100);

+            PrintTool.arcPrint7(this.img, this.centerX, this.centerY, this.innerradius + linelength, angle, name, 100);

 

             // draw corona around dot for crawling activity

             final int ppmx = Math.min(this.seed.getPPM() / 20, 10);

diff --git a/source/net/yacy/visualization/PrintTool.java b/source/net/yacy/visualization/PrintTool.java
index ee876db37..df25642c3 100644
--- a/source/net/yacy/visualization/PrintTool.java
+++ b/source/net/yacy/visualization/PrintTool.java
@@ -218,6 +218,20 @@ public class PrintTool {
         if ((angle < (90 - arcDist)) || (angle > (270 + arcDist))) xp = x;
         print5(matrix, xp, yp, 0, message, -1, intensity);
     }
+    
+    public static void arcPrint7(final RasterPlotter matrix, final int cx, final int cy, final int radius, final double angle, final String message, final int intensity) {
+        final int x = cx + (int) ((radius + 1) * Math.cos(RasterPlotter.PI180 * angle));
+        final int y = cy - (int) ((radius + 1) * Math.sin(RasterPlotter.PI180 * angle));
+        int yp = y + 4;
+        if ((angle > arcDist) && (angle < 180 - arcDist)) yp = y;
+        if ((angle > 180 + arcDist) && (angle < 360 - arcDist)) yp = y + 8;
+        if ((angle > ( 90 - arcDist)) && (angle < ( 90 + arcDist))) yp -= 8;
+        if ((angle > (270 - arcDist)) && (angle < (270 + arcDist))) yp += 8;
+        int xp = x - 4 * message.length();
+        if ((angle > (90 + arcDist)) && (angle < (270 - arcDist))) xp = x - 8 * message.length();
+        if ((angle < (90 - arcDist)) || (angle > (270 + arcDist))) xp = x;
+        print7(matrix, xp, yp, 0, message, -1, intensity);
+    }
 
 
     public static void main(final String[] args) {