Design-Verbesserungen

create-circle.js

@@ -11,6 +11,8 @@ let requestCounter = 1;
 function circle_main() {
     // Make Button invisible to prevent clicking
     document.getElementById("btn_create").style.display = "none";
+    // Reset all global variables
+    [ownProfilePic, userInfo, connection_list, requestCounter] = [null, null, {}, 1];
     // Get handle from Textfield
     let mastodon_handle = document.getElementById("txt_mastodon_handle").value;
     userInfo = formatedUserHandle(mastodon_handle);
@@ -140,6 +142,7 @@ function showConnections() {
     );
     
     // Render the Objects
+    document.getElementById("btn_download").style.display = "inline";
     render(items);
 }
 
@@ -165,4 +168,18 @@ function httpRequest(url, callback, callbackVal=null)
     }
     xmlHttp.open("GET", url, true);
     xmlHttp.send(null);
+}
+
+function downloadImage() {
+    var canvas = document.getElementById("canvas");
+    // Convert the canvas to data
+    var image = canvas.toDataURL();
+    // Create a link
+    var aDownloadLink = document.createElement('a');
+    // Add the name of the file to the link
+    aDownloadLink.download = 'mastodon-circle.png';
+    // Attach the data to the link
+    aDownloadLink.href = image;
+    // Get the code to click the download link
+    aDownloadLink.click();
 }

image.js

@@ -13,9 +13,8 @@ function render(users) {
 	const height = canvas.height;
 
 	// fill the background
-	ctx.fillStyle = "#C5EDCE";
+	ctx.fillStyle = "#282c37";
 	ctx.fillRect(0, 0, width, height);
-    ctx.fillStyle = "#000000";
 
     loadImage(ctx, ownProfilePic, (width/2)-110, (height/2)-110, 110, 110);
 
@@ -53,6 +52,7 @@ function render(users) {
 		}
 	}
 
+	ctx.fillStyle = "#DDDDDD";
     ctx.fillText("@sonnenbrandi@mieke.club mit lieben Grüßen an Duiker101", 700, 985, 290)
 };
 

index.html

@@ -15,6 +15,7 @@
     <!-- Logo? -->
     <input id="txt_mastodon_handle" type="text" placeholder="@sonnenbrandi@mieke.club" style="width: 300px;">
     <button id="btn_create" onClick="circle_main()">Circle Erstellen</button>
+    <button id="btn_download" onClick="downloadImage()" style="display: none;">DOWNLOAD</button>
     <br><br><br>
     <canvas id="canvas" width="1000" height="1000"></canvas>
     <div id="outDiv"></div>

style.css

@@ -6,4 +6,5 @@ body {
     padding-left: 10%;
     padding-right: 10%;
     padding-top: 75px;
+    text-align: center;
 }