From 8406e72e241618aad03132d198b4cbd96ce032ce Mon Sep 17 00:00:00 2001 From: Andreas Grasser Date: Sat, 19 Nov 2022 20:01:33 +0100 Subject: [PATCH] =?UTF-8?q?Grafikausgabe=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- create-circle.js | 39 ++++++++++++---------- image.js | 84 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 4 ++- style.css | 7 +--- 4 files changed, 110 insertions(+), 24 deletions(-) create mode 100644 image.js diff --git a/create-circle.js b/create-circle.js index 7579497..4a4a00d 100644 --- a/create-circle.js +++ b/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\t\t"+usr["name"]+"\t"+usr["acct"]; + usrElement.innerHTML = "   "+usr["name"]+"  "+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); diff --git a/image.js b/image.js new file mode 100644 index 0000000..ce89a52 --- /dev/null +++ b/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 -

Mastodon Circle Creator (die unrunde Version)

+ +

Mastodon Circle Creator




+
\ No newline at end of file diff --git a/style.css b/style.css index 433eb94..fd5c58c 100644 --- a/style.css +++ b/style.css @@ -6,9 +6,4 @@ body { padding-left: 10%; padding-right: 10%; padding-top: 75px; -} - -input { - -} - +} \ No newline at end of file