ouroboros-gorup/Mastodon-Circles
1
0
Fork 0
mirror of https://github.com/AMNatty/Mastodon-Circles.git synced 2024-11-21 10:37:26 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Made it look good

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 559 KiB

39
create-circle.js
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]);

109
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;
@ -13,27 +14,33 @@ 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;
}

25
index.html
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>

BIN
mieke_bg.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 28 KiB