mirror of
https://github.com/AMNatty/Mastodon-Circles.git
synced 2024-11-09 12:51:26 -07:00
Made it look good
This commit is contained in:
parent
73bb66a3f1
commit
fa8bd5748e
5 changed files with 89 additions and 86 deletions
BIN
background.png
Normal file
BIN
background.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 559 KiB |
|
@ -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
111
image.js
|
@ -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;
|
||||||
}
|
}
|
25
index.html
25
index.html
|
@ -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>
|
BIN
mieke_bg.jpg
BIN
mieke_bg.jpg
Binary file not shown.
Before Width: | Height: | Size: 28 KiB |
Loading…
Reference in a new issue