Issues with the Shields

[stevenjeter94]

Hi.

I stumbled upon this when searching for Kurumi's Sign Maker on the internet. I think this is a great project and I am looking forward to future updates. I did find an issue with it though. Upon creating a Sign and saving it in either of the supported formats, the shields do not show up. I only get a white outline of a box around the number that I chose for the route. This is with all shields that I tried. I tested this with Chrome and Edge with the same issue on both.

Just wanted to let you know just in case you were not aware. Keep up the hard work.

[JKPotato-Computer]

yeah... sorry bout that. honestly i haven't found a solution for the downloading sign part. trust me, i am still a beginner :p but hey thanks for letting me know! i'll try to fix it, whenever i have the time to :)

(btw, here's an alternative method for now: hide the post and zoom into the signs, and take a screenshot - remove the background afterwards, and you have yourself the sign!)

hope you've enjoyed the program so far!

[stevenjeter94]

Yes, that's what I did. Saved the sign after making it by doing a screen grab. Then using Gimp to remove backgrounds.

Hopefully, you can figure out the issue. Great work so far though. Even though you're a beginner, you're doing better than I could manage.

I will for sure continue filling your work. You've got some talent for sure. Good Luck with your future endeavors.

Thanks,

Steven Jeter, Professional Truck Driver

(812)391-8924 @.***

---

From: JK_Potato @.> Sent: Thursday, September 21, 2023 12:19:05 AM To: JKPotato-Computer/SignMaker @.> Cc: stevenjeter94 @.>; Author @.> Subject: Re: [JKPotato-Computer/SignMaker] Issues with the Shields (Issue #3)

yeah... sorry bout that. honestly i haven't found a solution for the downloading sign part. trust me, i am still a beginner :p but hey thanks for letting me know! i'll try to fix it, whenever i have the time to :)

(btw, here's an alternative method for now: hide the post and zoom into the signs, and take a screenshot - remove the background afterwards, and you have yourself the sign!)

hope you've enjoyed the program!

— Reply to this email directly, view it on GitHubhttps://github.com/JKPotato-Computer/SignMaker/issues/3#issuecomment-1728740722, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BCXAQC5CO4JKH5KB6LBVIQLX3O53TANCNFSM6AAAAAA5AVLHI4. You are receiving this because you authored the thread.Message ID: @.***>

[brisingraerowing]

Here's how I made shields export in my fork

Basically I export to SVG, render to a Canvas, then export the Canvas to an Image.

[JKPotato-Computer]

Thanks @brisingraerowing! I've tried it on my local copy of the SignMaker for the next major update... if that ever comes out. Unfortunately, I come across the same issue as the post described above (probably because I am on localhost and not an actual web host?) Anyway, this is the sign I attempted to make:

And this is the sign I ended up with:

It might possibly work if I published this change early onto Github, so I'll probably try that later. Although, anyone can lend me a hand on how to make the image results bigger and take up the right size? They're just too small and blurry at the end! Attached is a link of the code snippet to download PNG files (that I totally didn't just rip off a part from yours... :wink:)

• getFile() is just to grab the panel/post itself, attributed to parameter file in saveToPng(file)
• isPreview is just a preview of the PNG, isSVG is making an SVG except I didn't use the right format to save it... oops
• main system in saveToPng()

• sorry if this code is heavily unoptimized :sweat:

  
  function getFile() {
  var screenshotTarget;
  var postClass;
  
  if (fileInfo.panel == -1) {
      screenshotTarget = document.querySelector("#postContainer");
  } else {
      screenshotTarget = document.getElementById("panel" + fileInfo.panel.toString());
  }
  
  return screenshotTarget;
  }

const downloadFile = function(dataURL) { let a = document.createElement(a); a.setAttribute("href", dataURL); a.setAttribute("download", "downloadedSign.png"); a.click(); a.remove(); }

const saveToPng = function(file,isPreview,isSVG) { let svg = htmlToImage.toSvg(file); svg.then(function(dataUrl) { if (isSVG) { if (isPreview) { return dataUrl; } downloadFile(dataUrl); return; } let tmpCanvas = document.createElement("canvas"); let ctx = tmpCanvas.getContext("2d");

    let tmpImg = new Image();
    tmpImg.addEventListener("load", onTempImageLoad);
    tmpImg.src = dataUrl;

    console.log(tmpImg.width, tmpImg.height);

    tmpCanvas.width = tmpCanvas.height = 512;

    // let targetImg = new Image();

    function onTempImageLoad(e) {
        tmpCanvas.width = e.target.width;
        tmpCanvas.height = e.target.height;

        ctx.drawImage(e.target, 0, 0);
        if (isPreview) {
            let targetImg = new Image();
            targetImg.src = tmpCanvas.toDataURL();
            return targetImg;
        } else {
            downloadFile(tmpCanvas.toDataURL());
        }
    };

}).catch(function(error) {
    console.error("Error Saving!", error);
});

}

[JKPotato-Computer]

Follow up: Tried it once more with changes in GitHub page, same result. Any ideas on why?

[brisingraerowing]

Might be related to the library you use. I use a different one.

[JKPotato-Computer]

I have some good news, the download signs mechanic has been fixed! It was because I used an object element instead of a image element for the shields, probably not supported by html-to-image. Here's the final result:

Some problems I still want to be addressed:

• Panel is too small and should be enlarged, but I have no idea on how to do that...
• Image also has too large of a pixel size (there is more invisible pixels than actual sign) and should really only be the panel itself (or the post depending on configuration)
• Image does not carry over the enlarged first letters such as "South' or "East". This is also a problem with your fork too, but if there was an alternative to this, would be nice to let me know aswell!

bonus feature that I haven't mentioned: you can export and import the post itself through the console by doing app.getPost() and app.setPost(post)