evansloan / collectionlog.net

MIT License
17 stars 5 forks source link

feat(icons): Add Varlamore Part 2 Icons #114

Closed nmesot closed 4 weeks ago

nmesot commented 4 weeks ago

This PR adds the new icons from Varlamore part 2.

It took me a while to understand how they are resized properly, but I think I got it right.

It also fixes an issue with the unknown icon from my previous PR, which was not resized properly.

I created a script to download, resize and base64 encode new icons. It is not part of this PR, but I can share that too if interested.

evansloan commented 4 weeks ago

I've been procrastinating doing this so thank you, I'll give it a look and merge if everything looks ok. I also use a python script to generate the icons. Probably should have included that in here from the start, but if yours does the same as mine it should be fine.

Here's my script if you wanted to take a look. I'll add it to the repo as well

import base64
import io
import json
import os

from PIL import Image

ICONS_DIR = 'original'
OUT_DIR = 'out'
OUT_FILE = 'resized.json'

DEFAULT_WIDTH = 36
DEFAULT_HEIGHT = 32

def main() -> None:
    processed = {}

    # Pull files from dir and convert to base64
    for filename in os.listdir(ICONS_DIR):
        filepath = os.path.join(ICONS_DIR, filename)

        with open(filepath, 'rb') as fp:
            img = Image.open(fp)
            processed[filename[:-4]] = process_img(img)

    # Save base64 strings in json file
    with open(os.path.join(OUT_DIR, OUT_FILE), 'w') as fp:
        json.dump(processed, fp, indent=2)

def resize_img(img: Image) -> Image:
    """Resize image to default width and height of 36x32
       This does not resize the image, but creates a canvas
       of the disired width and places the image in the center of
       the canvas

    Args:
        img (Image): Image to resize

    Returns:
        Image: Resized image
    """
    width, height = img.size
    left = (DEFAULT_WIDTH - width) // 2
    top = (DEFAULT_HEIGHT - height) // 2

    resized = Image.new('RGBA', (DEFAULT_WIDTH, DEFAULT_HEIGHT), (0, 0, 0, 0))
    resized.paste(img, (left, top))

    return resized

def img_to_base64(img: Image) -> str:
    """Encode an image in base64 format

    Args:
        img (Image): Image to convert

    Returns:
        str: Base64 encoded image in string format
    """
    bytes = io.BytesIO()
    img.save(bytes, format='PNG')
    return base64.b64encode(bytes.getvalue()).decode('utf-8')

def process_img(img: Image) -> str:
    """Resize and convert image to base64 encoded string

    Args:
        img (Image): Image to process

    Returns:
        str: Base64 encoded image in string format
    """
    resized = resize_img(img)
    return img_to_base64(resized)

if __name__ == '__main__':
    main()
nmesot commented 4 weeks ago

Sweet, I think I my script does the same thing! It's a bit hackier than yours, and written in bash, but here it goes

#!/bin/bash

declare -a items
#put the items you want to add into the map items, with keys being the itemId
#they need to match the url https://oldschool.runescape.wiki/images/$itemName
items[30152]="Huberte.png"
items[30070]="Dragon_hunter_wand.png"
items[30066]="Tome_of_earth_(empty).png"
items[30068]="Soiled_page.png"
items[30085]="Hueycoatl_hide.png"
items[30088]="Huasca_seed_5.png"
items[30154]="Moxi.png"
items[29889]="Glacial_temotli.png"
items[29892]="Pendant_of_ates_(inert).png"
items[29895]="Frozen_tear.png"
items[29974]="Prescription_goggles_(unfocused).png"
items[29978]="Alchemist_labcoat_(apron_off).png"
items[29982]="Alchemist_pants_(apron_off).png"
items[29986]="Alchemist_gloves.png"
items[29990]="Alchemist's_amulet_(charged).png"
items[29992]="Alchemist's_amulet_(charged).png"
items[29996]="Reagent_pouch.png"
items[30002]="Chugging_barrel_(disassembled).png"
items[30040]="Colossal_wyrm_teleport_scroll.png"
items[30042]="Calcified_acorn.png"
items[30045]="Graceful_hood_(Varlamore).png"
items[30048]="Graceful_cape_(Varlamore).png"
items[30051]="Graceful_top_(Varlamore).png"
items[30054]="Graceful_legs_(Varlamore).png"
items[30057]="Graceful_gloves_(Varlamore).png"
items[30060]="Graceful_boots_(Varlamore).png"

rm -f out.txt
touch out.txt
rm -rf files

mkdir files
cd files

for c in "${!items[@]}"
do
  itemId=$c
  itemName=${items[$c]}
  echo $itemName
  #download images from osrs wiki
  curl --silent "https://oldschool.runescape.wiki/images/$itemName" --output $itemName
  #imagemagick tool to resize image to a 36x32 image by extending the borders with transparent pixels
  magick convert $itemName -background none -gravity center -extent 36x32 $itemName
  #base64 encode the image and write it to out.txt. The contents of the file can be directly copied to items.json
  b64=$(eval base64 '$itemName' --wrap=0)
  echo "\"$itemId\": \"$b64\"," >> ../out.txt
done

cd ..