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)
});
}
/**
* @typedef {{
* name: string,
* instance: string,
* }} Handle
*/
function Handle(name, instance) {
let handle = Object.create(Handle.prototype);
handle.name = name;
handle.instance = instance;
return handle;
}
Handle.prototype.toString = function() {
return `${this.name}@${this.instance}`;
}
/**
* @typedef {{
@ -36,6 +40,10 @@ async function apiRequest(url, options = null)
* }} FediUser
*/
/**
* @typedef {FediUser & {conStrength: number}} RatedUser
*/
/**
* @typedef {{
* id: string,
@ -530,7 +538,7 @@ class MisskeyApiClient extends ApiClient {
}
}
/** @type Map<string, ApiClient> */
/** @type {Map<string, ApiClient>} */
let instanceTypeCache = new Map();
/**
@ -546,16 +554,9 @@ function parseHandle(fediHandle, fallbackInstance = "") {
fediHandle = fediHandle.replaceAll(" ", "");
const [name, instance] = fediHandle.split("@", 2);
return {
name: name,
instance: instance || fallbackInstance,
};
return new Handle(name, instance || fallbackInstance);
}
/**
* @typedef {FediUser & {conStrength: number}} RatedUser
*/
async function circleMain() {
let progress = document.getElementById("outInfo");
@ -641,8 +642,6 @@ async function processNotes(client, connectionList, notes) {
await evaluateNote(client, connectionList, note);
counter++;
}
progress.innerText = "Done :3";
}
/**
@ -715,8 +714,6 @@ function showConnections(localUser, connectionList) {
// Sort dict into Array items
const items = [...connectionList.values()].sort((first, second) => second.conStrength - first.conStrength);
console.log(items);
// Also export the Username List
let usersDivs = [
document.getElementById("ud1"),
@ -726,9 +723,9 @@ function showConnections(localUser, connectionList) {
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");
newUser.innerText = "@" + items[i].handle.name + "@" + items[i].handle.instance;
newUser.innerText = "@" + items[i].handle;
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 numb = [8, 15, 26];
const radius = [64,58,50];
const radius = [64, 58, 50];
let userNum = 0;
let remainingImg = 0;
let totalImg = 0;
function render(users, selfUser) {
userNum = 0;
@ -12,28 +13,34 @@ function render(users, selfUser) {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const width = canvas.width;
const width = canvas.width;
const height = canvas.height;
// fill the background
const bg_image = document.getElementById("mieke_bg");
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
for (var layerIndex=0; layerIndex<3; layerIndex++) {
//let layerIndex = get_layer(num);
for (let layerIndex= 0; layerIndex < 3; layerIndex++) {
const angleSize = 360 / numb[layerIndex];
// loop over each circle of the layer
for (let i = 0; i < numb[layerIndex]; i++) {
remainingImg += 1;
// 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;
// We need an offset or the first circle will always on the same line and it looks weird
// 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;
// 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;
@ -44,34 +51,33 @@ function render(users, selfUser) {
const centerX = Math.cos(r) * dist[layerIndex] + width / 2;
const centerY = Math.sin(r) * dist[layerIndex] + height / 2;
loadImage(
ctx,
users[userNum].avatar,
loadImage(
ctx,
users[userNum].avatar,
centerX - radius[layerIndex],
centerY - radius[layerIndex],
radius[layerIndex],
"@" + users[userNum].handle.name + "@" + users[userNum].handle.instance
"@" + users[userNum].handle,
tasks
);
userNum++;
userNum++;
}
}
ctx.fillStyle = "#0505AA";
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)
};
totalImg = remainingImg;
function get_layer(i) {
if (i<numb[0]) return 0;
if (i<numb[0]+numb[1]) return 1;
return 2;
ctx.font = "12px sans-serif";
ctx.fillStyle = "silver";
ctx.fillText("Be gay do crime uwu", 10, 15);
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
function loadImage(ctx, url, x, y, r, name) {
function loadImage(ctx, url, x, y, r, name, tasks) {
let progress = document.getElementById("outInfo");
const addText = () => {
ctx.font = "bold 11px sans-serif";
const textWidth = ctx.measureText(name).width;
@ -91,33 +97,40 @@ function loadImage(ctx, url, x, y, r, name) {
}
};
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();
addText();
tasks.push(addText);
const decrementRemaining = () => {
remainingImg -= 1;
progress.innerText = `Loading avatars: ${totalImg - remainingImg}/${totalImg}`;
if (remainingImg <= 0) {
document.getElementById("btn_download").href = document.getElementById("canvas").toDataURL("image/png");
document.getElementById("btn_download").style.display = "inline";
progress.innerText = "Done :3";
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>
<html lang="de">
<html lang="en">
<meta charset="UTF-8">
<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">
<style>
</style>
<script src=""></script>
<body>
<script src="create-circle.js"></script>
<script src="image.js"></script>
<h1>Trötpty</h1>
<h3><span style="text-decoration: line-through" aria-hidden="true">Mastodon</span> Fedi Circle Creator</h3>
<!-- TODO Logo? -->
<h1>Fedi Circle Creator</h1>
<form id="generateForm" onsubmit="(async () => await circleMain())(); return false;">
<input id="txt_mastodon_handle" type="text" placeholder="@sonnenbrandi@mieke.club">
<br><br>
@ -27,11 +21,11 @@
<button type="submit" id="generateButton">Generate circle</button>
</form>
<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>
<!-- 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>
<!-- List of all people in Circle -->
<div id="usersDiv">
@ -41,13 +35,12 @@
</div>
<br><br><br>
<div id="credits" style="width: 100%;">
<p>Contribute on <a href="https://github.com/AMNatty/Mastodon-Circles">Github</a> </p>
<p>Thanks to <a href="https://twitter.com/duiker101">Duiker101</a> for creating chirpty for Twitter</p>
<p>Original on <a href="https://github.com/andigandhi/Mastodon-Circles">Github</a> </p>
<p>Contribute on <a href="https://github.com/AMNatty/Mastodon-Circles">GitHub: AMNatty/Mastodon-Circles</a></p>
<p>Based on <a href="https://github.com/andigandhi/Mastodon-Circles">andigandhi/Mastodon-Circles</a> </p>
</div>
<!-- output for further projects ;) -->
<div id="outDiv" style="display: none;"></div>
<!-- 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>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB