Grafikausgabe hinzugefügt

create-circle.js

@@ -2,8 +2,10 @@
 Dies ist eine erste Implementierung, da ist noch vieeeel zu tun :)
 */
 
+let ownProfilePic;
 let userInfo;
 let connection_list = {};
+let requestCounter = 1;
 
 // The main function called by the button-click
 function circle_main() {
@@ -13,7 +15,7 @@ function circle_main() {
     let mastodon_handle = document.getElementById("txt_mastodon_handle").value;
     userInfo = formatedUserHandle(mastodon_handle);
     getStatuses();
-    setTimeout(showConnections,3000);
+    //setTimeout(showConnections,3000);
 }
 
 // Format the Mastodon Handle to an array: [username, userID, instance.tld]
@@ -28,16 +30,17 @@ function formatedUserHandle(mastodon_handle) {
 
 // Get the user ID from the handle
 function getIdFromName(name, server) {
-    // https://mieke.club/api/v1/accounts/lookup?acct=HeilandSanremo
     var xmlHttp = new XMLHttpRequest();
     let url = "https://"+server+"/api/v1/accounts/lookup?acct="+name;
     xmlHttp.open( "GET", url, false ); // false for synchronous request
     xmlHttp.send( null );
-    return JSON.parse(xmlHttp.responseText)["id"];
+    let response = JSON.parse(xmlHttp.responseText);
+    ownProfilePic = response["avatar"];
+    return response["id"];
 }
 
 // Get a JSON String with all the posted statuses from the account and call processStatuses()
-function getStatuses() {
+async function getStatuses() {
     // Build the URL
     let url = "https://"+userInfo[2]+"/api/v1/accounts/"+userInfo[1]+"/statuses";
     // Do the async http request and call processStatuses()
@@ -61,6 +64,7 @@ function processStatuses(statuses) {
 
 // Get all Reblogs and Favs for a status update
 function evaluateStatus(id, faved, rebloged) {
+    requestCounter += faved+rebloged+1;
     // Build the URL
     let url1 = "https://"+userInfo[2]+"/api/v1/statuses/"+id+"/reblogged_by";
     // Do the async http request
@@ -69,7 +73,7 @@ function evaluateStatus(id, faved, rebloged) {
     // Build the URL
     let url2 = "https://"+userInfo[2]+"/api/v1/statuses/"+id+"/context";
     // Do the async http request
-    if (faved) httpRequest(url2, evalReplies, 1.1);
+    httpRequest(url2, evalReplies, 1.1);
 
     // Build the URL
     let url3 = "https://"+userInfo[2]+"/api/v1/statuses/"+id+"/favourited_by";
@@ -84,6 +88,8 @@ function evalReplies(jsonString, plus) {
     for (var i=0; i<jsonArray.length; i++) {
         incConnectionValue(jsonArray[i]["account"], plus);
     }
+
+    if (requestCounter<=0) showConnections();
 }
 
 // Evaluate the Favs and Reposts
@@ -93,6 +99,8 @@ function evalStatusInteractions(jsonString, plus) {
     for (var i=0; i<jsonArray.length; i++) {
         incConnectionValue(jsonArray[i], plus);
     }
+
+    if (requestCounter<=0) showConnections();
 }
 
 
@@ -106,8 +114,6 @@ function incConnectionValue(conJSON, plus) {
     }
     // Increment the connection strength
     connection_list[id]["conStrength"] = connection_list[id]["conStrength"] + plus;
-
-    //document.getElementById("outDiv").innerText = JSON.stringify(connection_list);
 }
 
 // Create a new node in the connection_list dictionary
@@ -134,16 +140,12 @@ function showConnections() {
     );
     
     // Render the Objects
-    for (var i=0; i<items.length; i++) {
-        //createUserObj(items[i][1])
-        if (!items[i][1]["bot"]) createUserObj(items[i][1]);
-    }
-    document.getElementById("btn_create").style.display = "inline";
+    render(items);
 }
 
 function createUserObj(usr) {
     let usrElement = document.createElement("div");
-    usrElement.innerHTML = "<img src=\""+usr["pic"]+"\" width=\"20px\">\t\t<b>"+usr["name"]+"</b>\t"+usr["acct"];
+    usrElement.innerHTML = "<img src=\""+usr["pic"]+"\" width=\"20px\">&nbsp;&nbsp;&nbsp;<b>"+usr["name"]+"</b>&nbsp;&nbsp;"+usr["acct"];
     document.getElementById("outDiv").appendChild(usrElement);
 }
 
@@ -153,10 +155,13 @@ function httpRequest(url, callback, callbackVal=null)
 {
     var xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = function() { 
-        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
-            callback(xmlHttp.responseText, callbackVal);
-        } else if (xmlHttp.readyState == 4 && xmlHttp.status == 404)
-            callback("[]", callbackVal);
+        if (xmlHttp.readyState == 4) {
+            requestCounter--;
+            if (xmlHttp.status == 200) {
+                callback(xmlHttp.responseText, callbackVal);
+            } else
+                callback("[]", callbackVal);
+        }
     }
     xmlHttp.open("GET", url, true);
     xmlHttp.send(null);

image.js

@@ -0,0 +1,84 @@
+const toRad = (x) => x * (Math.PI / 180);
+
+const dist = [200, 330, 450];
+const numb = [8, 15, 26];
+const radius = [64,58,50];
+let userNum = 0;
+
+function render(users) {
+	const canvas = document.getElementById("canvas");
+	const ctx = canvas.getContext("2d");
+    
+    const width = canvas.width;
+	const height = canvas.height;
+
+	// fill the background
+	ctx.fillStyle = "#C5EDCE";
+	ctx.fillRect(0, 0, width, height);
+    ctx.fillStyle = "#000000";
+
+    loadImage(ctx, ownProfilePic, (width/2)-110, (height/2)-110, 110, 110);
+
+	// loop over the layers
+	for (var layerIndex=0; layerIndex<3; layerIndex++) {
+        //let layerIndex = get_layer(num);
+
+		const angleSize = 360 / numb[layerIndex];
+
+		// loop over each circle of the layer
+		for (let i = 0; i < numb[layerIndex]; i++) {
+			// We need an offset or the first circle will always on the same line and it looks weird
+			// Try removing this to see what happens
+			const offset = layerIndex * 30;
+
+			// i * angleSize is the angle at which our circle goes
+			// We need to converting to radiant to work with the cos/sin
+			const r = toRad(i * angleSize + offset);
+
+			const centerX = Math.cos(r) * dist[layerIndex] + width / 2;
+			const centerY = Math.sin(r) * dist[layerIndex] + height / 2;
+
+            loadImage(
+                ctx,
+                users[userNum][1]["pic"],
+				centerX - radius[layerIndex],
+				centerY - radius[layerIndex],
+				radius[layerIndex],
+				radius[layerIndex]
+			);
+
+            userNum++;
+			// if we are trying to render a circle but we ran out of users, just exit the loop. We are done.
+			if (userNum>=users.length) break;
+		}
+	}
+
+    ctx.fillText("@sonnenbrandi@mieke.club mit lieben Grüßen an Duiker101", 700, 985, 290)
+};
+
+function get_layer(i) {
+    if (i<numb[0]) return 0;
+    if (i<numb[0]+numb[1]) return 1;
+    return 2;   
+}
+
+// Load the image from the URL and draw it in a circle
+function loadImage(ctx, url, x, y, r) {
+    var img = new Image;
+    img.onload = function(){
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(x+r, y+r, r, 0, Math.PI * 2, true);
+        ctx.closePath();
+        ctx.clip();
+
+        ctx.drawImage(img,x,y,r*2,r*2);
+
+        ctx.beginPath();
+        ctx.arc(x+r, y+r, r, 0, Math.PI * 2, true);
+        ctx.clip();
+        ctx.closePath();
+        ctx.restore();
+    };
+    img.src = url;
+}

index.html

@@ -10,11 +10,13 @@
 <script src=""></script>
 <body>
     <script src="create-circle.js"></script>
-    <h1>Mastodon Circle Creator (die unrunde Version)</h1>
+    <script src="image.js"></script>
+    <h1>Mastodon Circle Creator</h1>
     <!-- Logo? -->
     <input id="txt_mastodon_handle" type="text" placeholder="@sonnenbrandi@mieke.club" style="width: 300px;">
     <button id="btn_create" onClick="circle_main()">Circle Erstellen</button>
     <br><br><br>
+    <canvas id="canvas" width="1000" height="1000"></canvas>
     <div id="outDiv"></div>
 </body>
 </html> 

style.css

@@ -6,9 +6,4 @@ body {
     padding-left: 10%;
     padding-right: 10%;
     padding-top: 75px;
-}
-
-input {
-
-}
-
+}