Made it look good

This commit is contained in:
Natty 2023-08-31 20:49:04 +02:00
parent 73bb66a3f1
commit fa8bd5748e
No known key found for this signature in database
GPG key ID: BF6CB659ADEE60EC
5 changed files with 89 additions and 86 deletions

BIN
background.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 559 KiB

View file

@ -19,12 +19,16 @@ async function apiRequest(url, options = null)
}); });
} }
/** function Handle(name, instance) {
* @typedef {{ let handle = Object.create(Handle.prototype);
* name: string, handle.name = name;
* instance: string, handle.instance = instance;
* }} Handle return handle;
*/ }
Handle.prototype.toString = function() {
return `${this.name}@${this.instance}`;
}
/** /**
* @typedef {{ * @typedef {{
@ -36,6 +40,10 @@ async function apiRequest(url, options = null)
* }} FediUser * }} FediUser
*/ */
/**
* @typedef {FediUser & {conStrength: number}} RatedUser
*/
/** /**
* @typedef {{ * @typedef {{
* id: string, * id: string,
@ -530,7 +538,7 @@ class MisskeyApiClient extends ApiClient {
} }
} }
/** @type Map<string, ApiClient> */ /** @type {Map<string, ApiClient>} */
let instanceTypeCache = new Map(); let instanceTypeCache = new Map();
/** /**
@ -546,16 +554,9 @@ function parseHandle(fediHandle, fallbackInstance = "") {
fediHandle = fediHandle.replaceAll(" ", ""); fediHandle = fediHandle.replaceAll(" ", "");
const [name, instance] = fediHandle.split("@", 2); const [name, instance] = fediHandle.split("@", 2);
return { return new Handle(name, instance || fallbackInstance);
name: name,
instance: instance || fallbackInstance,
};
} }
/**
* @typedef {FediUser & {conStrength: number}} RatedUser
*/
async function circleMain() { async function circleMain() {
let progress = document.getElementById("outInfo"); let progress = document.getElementById("outInfo");
@ -641,8 +642,6 @@ async function processNotes(client, connectionList, notes) {
await evaluateNote(client, connectionList, note); await evaluateNote(client, connectionList, note);
counter++; counter++;
} }
progress.innerText = "Done :3";
} }
/** /**
@ -715,8 +714,6 @@ function showConnections(localUser, connectionList) {
// Sort dict into Array items // Sort dict into Array items
const items = [...connectionList.values()].sort((first, second) => second.conStrength - first.conStrength); const items = [...connectionList.values()].sort((first, second) => second.conStrength - first.conStrength);
console.log(items);
// Also export the Username List // Also export the Username List
let usersDivs = [ let usersDivs = [
document.getElementById("ud1"), document.getElementById("ud1"),
@ -726,9 +723,9 @@ function showConnections(localUser, connectionList) {
usersDivs.forEach((div) => div.innerHTML = "") usersDivs.forEach((div) => div.innerHTML = "")
for (let i=0; i < items.length; i++) { for (let i= 0; i < items.length; i++) {
let newUser = document.createElement("p"); let newUser = document.createElement("p");
newUser.innerText = "@" + items[i].handle.name + "@" + items[i].handle.instance; newUser.innerText = "@" + items[i].handle;
createUserObj(items[i]); createUserObj(items[i]);

111
image.js
View file

@ -2,9 +2,10 @@ const toRad = (x) => x * (Math.PI / 180);
const dist = [200, 330, 450]; const dist = [200, 330, 450];
const numb = [8, 15, 26]; const numb = [8, 15, 26];
const radius = [64,58,50]; const radius = [64, 58, 50];
let userNum = 0; let userNum = 0;
let remainingImg = 0; let remainingImg = 0;
let totalImg = 0;
function render(users, selfUser) { function render(users, selfUser) {
userNum = 0; userNum = 0;
@ -12,28 +13,34 @@ function render(users, selfUser) {
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const width = canvas.width; const width = canvas.width;
const height = canvas.height; const height = canvas.height;
// fill the background // fill the background
const bg_image = document.getElementById("mieke_bg"); const bg_image = document.getElementById("mieke_bg");
ctx.drawImage(bg_image, 0, 0, 1000, 1000); ctx.drawImage(bg_image, 0, 0, 1000, 1000);
loadImage(ctx, selfUser.avatar, (width/2)-110, (height/2)-110, 110, "@" + selfUser.handle.name + "@" + selfUser.handle.instance); const tasks = [];
loadImage(ctx,
selfUser.avatar,
(width / 2) - 110,
(height / 2) - 110,
110,
"@" + selfUser.handle,
tasks);
// loop over the layers // loop over the layers
for (var layerIndex=0; layerIndex<3; layerIndex++) { for (let layerIndex= 0; layerIndex < 3; layerIndex++) {
//let layerIndex = get_layer(num);
const angleSize = 360 / numb[layerIndex]; const angleSize = 360 / numb[layerIndex];
// loop over each circle of the layer // loop over each circle of the layer
for (let i = 0; i < numb[layerIndex]; i++) { for (let i = 0; i < numb[layerIndex]; i++) {
remainingImg += 1; remainingImg += 1;
// if we are trying to render a circle but we ran out of users, just exit the loop. We are done. // 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; if (userNum >= users.length) break;
// We need an offset or the first circle will always on the same line and it looks weird // 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 // Try removing this to see what happens
const offset = layerIndex * 30; const offset = layerIndex * 30;
@ -44,34 +51,33 @@ function render(users, selfUser) {
const centerX = Math.cos(r) * dist[layerIndex] + width / 2; const centerX = Math.cos(r) * dist[layerIndex] + width / 2;
const centerY = Math.sin(r) * dist[layerIndex] + height / 2; const centerY = Math.sin(r) * dist[layerIndex] + height / 2;
loadImage( loadImage(
ctx, ctx,
users[userNum].avatar, users[userNum].avatar,
centerX - radius[layerIndex], centerX - radius[layerIndex],
centerY - radius[layerIndex], centerY - radius[layerIndex],
radius[layerIndex], radius[layerIndex],
"@" + users[userNum].handle.name + "@" + users[userNum].handle.instance "@" + users[userNum].handle,
tasks
); );
userNum++; userNum++;
} }
} }
ctx.fillStyle = "#0505AA"; totalImg = remainingImg;
ctx.fillText("Be gay do crime uwu", 10, 15);
ctx.fillStyle = "#666666";
ctx.fillText("https://data.natty.sh/fedi-circles", width-120, height-15, 110)
//ctx.fillText("@sonnenbrandi@mieke.club mit lieben Grüßen an Duiker101", width-300, height-15, 290)
};
function get_layer(i) { ctx.font = "12px sans-serif";
if (i<numb[0]) return 0; ctx.fillStyle = "silver";
if (i<numb[0]+numb[1]) return 1; ctx.fillText("Be gay do crime uwu", 10, 15);
return 2; ctx.fillStyle = "black";
ctx.fillText("https://data.natty.sh/fedi-circles", width - 170, height - 15, 160);
} }
// Load the image from the URL and draw it in a circle // Load the image from the URL and draw it in a circle
function loadImage(ctx, url, x, y, r, name) { function loadImage(ctx, url, x, y, r, name, tasks) {
let progress = document.getElementById("outInfo");
const addText = () => { const addText = () => {
ctx.font = "bold 11px sans-serif"; ctx.font = "bold 11px sans-serif";
const textWidth = ctx.measureText(name).width; const textWidth = ctx.measureText(name).width;
@ -91,33 +97,40 @@ function loadImage(ctx, url, x, y, r, name) {
} }
}; };
const img = new Image; tasks.push(addText);
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();
addText();
const decrementRemaining = () => {
remainingImg -= 1; remainingImg -= 1;
progress.innerText = `Loading avatars: ${totalImg - remainingImg}/${totalImg}`;
if (remainingImg <= 0) { if (remainingImg <= 0) {
document.getElementById("btn_download").href = document.getElementById("canvas").toDataURL("image/png"); progress.innerText = "Done :3";
document.getElementById("btn_download").style.display = "inline"; tasks.forEach((task) => task());
} }
};
img.onerror = function() {
addText();
}; };
img.src = url; const 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();
decrementRemaining();
};
img.onerror = function() {
decrementRemaining();
};
img.src = url;
} }

View file

@ -1,19 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="en">
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Fedi Circle Creator</title> <title>Fedi Circle Creator</title>
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<style>
</style>
<script src=""></script>
<body> <body>
<script src="create-circle.js"></script> <script src="create-circle.js"></script>
<script src="image.js"></script> <script src="image.js"></script>
<h1>Trötpty</h1> <h1>Fedi Circle Creator</h1>
<h3><span style="text-decoration: line-through" aria-hidden="true">Mastodon</span> Fedi Circle Creator</h3>
<!-- TODO Logo? -->
<form id="generateForm" onsubmit="(async () => await circleMain())(); return false;"> <form id="generateForm" onsubmit="(async () => await circleMain())(); return false;">
<input id="txt_mastodon_handle" type="text" placeholder="@sonnenbrandi@mieke.club"> <input id="txt_mastodon_handle" type="text" placeholder="@sonnenbrandi@mieke.club">
<br><br> <br><br>
@ -27,11 +21,11 @@
<button type="submit" id="generateButton">Generate circle</button> <button type="submit" id="generateButton">Generate circle</button>
</form> </form>
<span id="outInfo"></span> <span id="outInfo"></span>
<a href="" id="btn_download" class="button" download="mastodon-circle.png" style="display: none;">DOWNLOAD (klappt wsl nicht)</a>
<!-- <button id="btn_download" onClick="downloadImage()" style="display: none;">DOWNLOAD</button> -->
<br><br> <br><br>
<!-- Canvas for the final Image --> <!-- Canvas for the final Image -->
<canvas id="canvas" width="1000" height="1000"></canvas> <canvas id="canvas" width="1000" height="1000" style="background-color: gray">
</canvas>
<br> <br>
<!-- List of all people in Circle --> <!-- List of all people in Circle -->
<div id="usersDiv"> <div id="usersDiv">
@ -41,13 +35,12 @@
</div> </div>
<br><br><br> <br><br><br>
<div id="credits" style="width: 100%;"> <div id="credits" style="width: 100%;">
<p>Contribute on <a href="https://github.com/AMNatty/Mastodon-Circles">Github</a> </p> <p>Contribute on <a href="https://github.com/AMNatty/Mastodon-Circles">GitHub: AMNatty/Mastodon-Circles</a></p>
<p>Thanks to <a href="https://twitter.com/duiker101">Duiker101</a> for creating chirpty for Twitter</p> <p>Based on <a href="https://github.com/andigandhi/Mastodon-Circles">andigandhi/Mastodon-Circles</a> </p>
<p>Original on <a href="https://github.com/andigandhi/Mastodon-Circles">Github</a> </p>
</div> </div>
<!-- output for further projects ;) --> <!-- output for further projects ;) -->
<div id="outDiv" style="display: none;"></div> <div id="outDiv" style="display: none;"></div>
<!-- Preload the background image --> <!-- Preload the background image -->
<div style="display:none;"><img id="mieke_bg" src="mieke_bg.jpg" width="1000" height="1000" /></div> <div style="display:none;"><img id="mieke_bg" src="background.png" width="1000" height="1000" /></div>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB