Part Type Icon in Label Template

[pe5er]

It would be really cool if we could add Part Type Icons to Label Templates. That would enable automatic generation of labels that look like the one below (but with vector based icons instead of images):

I've had a play with the code base, but I am hampered by a complete lack of C# and dot net experience, so i'm not sure i'll be able to figure out a complete solution by myself!

• in labelEditor/index.js i've added:

<DraggableBox name="partTypeIcon" resize="both">{getChildrenByName('partTypeIcon')}</DraggableBox>

• in labelEditorComponents.js i've added:

case 'partTypeIcon':   
    return "Part Type Icon";

That gets me a Part Type Icon element that I can drag into the template editor:

I've added:

var partType = _partTypeService.GetPartTypeAsync(part.PartTypeId).GetAwaiter().GetResult();
var icon = partType?.Icon ?? string.Empty;

but when I watch partType in the debugger, it says icon is null. I was expecting this field to contain the icon's SVG data.

as a test, I created a new part type with a custom svg icon. This shows up in the PartType response. Good enough for now:

now i'm getting somewhere! next step is to convert the SVG into a graphic, and merge that with the label. For this I plan to use svg.skia.

Here's the function for converting SVGs to graphics and merging them:

private void DrawIcon(CustomLabelDefinition labelDef, Image<Rgba32> image, LabelBox box, string icon, float x, float y, float width, float height)
{
    if (width == 0 || height == 0)
        return;

    // Create an SKBitmap from the SVG text
    var skSvg = new SKSvg();
    using (var svgStream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(icon)))
    {
        skSvg.Load(svgStream);
    }

    var picture = skSvg.Picture;
    if (picture == null)
        return;

    var bitmap = new SKBitmap((int)width, (int)height);
    using (var canvas = new SKCanvas(bitmap))
    {
        canvas.Clear(SKColors.Transparent);

        // Calculate the scale for the SVG to fit the specified width and height
        var scaleX = width / picture.CullRect.Width;
        var scaleY = height / picture.CullRect.Height;

        // Scale and draw the SVG
        canvas.Scale(scaleX, scaleY);
        canvas.DrawPicture(picture);
    }

    // Convert SKBitmap to ImageSharp Image
    using (var skiaImage = SKImage.FromBitmap(bitmap))
    using (var data = skiaImage.Encode(SKEncodedImageFormat.Png, 100))
    using (var ms = new MemoryStream())
    {
        data.SaveTo(ms);
        ms.Seek(0, SeekOrigin.Begin);
        var svgImage = Image.Load<Rgba32>(ms);

        // Draw the SVG image onto the original image
        image.Mutate(c => c.DrawImage(svgImage, new Point((int)x + 1, (int)y + 1), new GraphicsOptions()));
    }
}

and the result, very close to what I want!

Next to do is to get the aspect ratio right, and make sure the icons render correctly. They should also be black and white only, no grayscale.

[xanatos451]

Just now coming back around to getting Binner fully configured for my home makerspace and am in the same boat with needing a good solution for QR code and images on labels for a PT-P700. Was curious if you had any additional comments/observations about the formatting you've figured out since your original posting. Thanks!

[replaysMike]

I just ordered the newer version of your printer, PTP750W and I will work to integrate it into the software over the holiday.

On Windows it's usually easier to integrate as it's just about defining the image dimensions to print and how to layout the label. The label editor in Binner is fairly advanced and allows you to define the label dimensions and what to put on it.

On Unix platforms it can be a little more difficult as I am reliant on the generic print drivers and it requires changes in my library implementation.