Jump to content

MOE image Generator


Recommended Posts

I got bored with the marks in game and wanted them all to look the same so i created a web page that can create them in .png.

Spoiler

image.thumb.png.6ab7b0b46d531396aecc39b5871dae59.png

 

Copt text to a .txt file and "save as"  .htm

 

Spoiler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marks of Excellence Generator</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        h1 {
            margin-bottom: 20px;
        }
        .controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        .controls > div {
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .controls label {
            margin-right: 10px;
        }
        #canvas-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        canvas {
            border: 1px solid #000;
            margin: 5px;
        }
    </style>
    <!-- JSZip library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>

<body>
    <h1>Customizable Marks of Excellence Generator</h1>
    <ul>
  <li>Select options, Click Generate to preview. Download when happy.</li>
  <li>Unzip. Keep folder structure</li>
  <li>Convert .png to .dds (Can do it <a href="https://imagetostl.com/convert/file/png/to/dds#convert"  target="_blank">here</a> online).</li>
   <li>Replace .png with the .dds.</li>
  <li>rezip with compression set to "store".</li>
  <li>Change .zip to .wotmod then place in C:\Games\World_of_Tanks_EU\mods\<font color="#f00">{Ver num}</font>\ .</li>
</ul>
</br>
    <div class="controls">
        <div>
            <label for="stripeColor">Stripe Color:</label>
            <input type="color" id="stripeColor" value="#FFD700">
            
            <label for="borderColor">Stripe Border Color:</label>
            <input type="color" id="borderColor" value="#FFFFFF">
            
            <label for="backgroundColor">Background Color:</label>
            <input type="color" id="backgroundColor" value="#000000">
            </div>
            <div>
            <label for="stripeWidth">Stripe Width:</label>
            <input type="number" id="stripeWidth" value="60" min="1" max="256">
            
            <label for="borderSize">Border Size:</label>
            <input type="number" id="borderSize" value="10" min="0" max="10">
        </div>
        </br>
        <div>If you just want a shape, set Stripe Width: & Border Size: to 0.</div>
        </br>
        <div>
            <label for="shapeColor">Shape Color:</label>
            <input type="color" id="shapeColor" value="#FF0000">
            </div>
        <div>
            <label for="shape">Shape:</label>
            <select id="shape">
                <option value="none">None</option>
                <option value="circle">Circle</option>
                <option value="square">Square</option>
                <option value="triangle">Triangle</option>
                <option value="star">Star</option>
                <option value="pentagon">Pentagon</option>
                <option value="hexagon">Hexagon</option>
                <option value="diamond">Diamond</option>
            </select>
            
            <label for="shapeSize">Shape Size:</label>
            <input type="number" id="shapeSize" value="20" min="1" max="256">
            </div>
            <div>
            <label for="transparentBackground">Transparent Background:</label>
            <input type="checkbox" id="transparentBackground">
        </div>
        <button id="generate-button">Generate</button></br>
        <button id="download-button">Download All</button>
    </div>

    <div id="canvas-container"></div>

    <script>
        const imgSize = 256;
        const zip = new JSZip(); // Initialize the ZIP object

        // Folder path inside the ZIP file
        const folderPath = "res/gui/maps/vehicles/decals/insignia";

        const countries = [
            "china", "czech", "france_uk", "germany", "italian",
            "japan", "poland", "sweden", "usa", "ussr"
        ];

        function drawShape(ctx, shape, x, y, size, color) {
            ctx.fillStyle = color;
            ctx.beginPath();
            switch (shape) {
                case "circle":
                    ctx.arc(x, y, size, 0, 2 * Math.PI);
                    break;
                case "square":
                    ctx.rect(x - size / 2, y - size / 2, size, size);
                    break;
                case "triangle":
                    ctx.moveTo(x, y - size);
                    ctx.lineTo(x + size, y + size);
                    ctx.lineTo(x - size, y + size);
                    ctx.closePath();
                    break;
                case "star":
                    drawStar(ctx, x, y, size, 5);
                    break;
                case "pentagon":
                    drawPolygon(ctx, x, y, size, 5);
                    break;
                case "hexagon":
                    drawPolygon(ctx, x, y, size, 6);
                    break;
                case "diamond":
                    ctx.moveTo(x, y - size);
                    ctx.lineTo(x + size, y);
                    ctx.lineTo(x, y + size);
                    ctx.lineTo(x - size, y);
                    ctx.closePath();
                    break;
                default:
                    return;
            }
            ctx.fill();
        }

        function drawStar(ctx, cx, cy, outerRadius, spikes) {
            let rot = Math.PI / 2 * 3;
            let x = cx;
            let y = cy;
            let step = Math.PI / spikes;
            let innerRadius = outerRadius / 2;

            ctx.moveTo(cx, cy - outerRadius);
            for (let i = 0; i < spikes; i++) {
                x = cx + Math.cos(rot) * outerRadius;
                y = cy + Math.sin(rot) * outerRadius;
                ctx.lineTo(x, y);
                rot += step;

                x = cx + Math.cos(rot) * innerRadius;
                y = cy + Math.sin(rot) * innerRadius;
                ctx.lineTo(x, y);
                rot += step;
            }
            ctx.lineTo(cx, cy - outerRadius);
            ctx.closePath();
            ctx.fill();
        }

        function drawPolygon(ctx, cx, cy, radius, sides) {
            let angle = Math.PI / 2;
            const step = (2 * Math.PI) / sides;

            ctx.moveTo(cx + radius * Math.cos(angle), cy - radius * Math.sin(angle));
            for (let i = 0; i < sides; i++) {
                angle += step;
                ctx.lineTo(cx + radius * Math.cos(angle), cy - radius * Math.sin(angle));
            }
            ctx.closePath();
            ctx.fill();
        }

        function drawStripes(ctx, numberOfStripes, stripeWidth, stripeColor, borderColor, borderSize, shape, shapeSize, shapeColor) {
            const thirdWidth = imgSize / 3; // Each third's width
            const y1 = 0; // Start of the stripe vertically
            const y2 = imgSize; // End of the stripe vertically

            ctx.strokeStyle = borderColor;
            ctx.lineWidth = borderSize; // Border thickness
            
            for (let i = 0; i < numberOfStripes; i++) {
                let centerX;
                if (numberOfStripes === 1) {
                    centerX = imgSize / 2; // Center the stripe for the single stripe case
                } else {
                    centerX = (i * thirdWidth) + (thirdWidth / 2); // Center of each third
                }
                const halfStripeWidth = stripeWidth / 2;
                const xStart = centerX - halfStripeWidth;

                // Draw the stripe with the correct color
                ctx.fillStyle = stripeColor;
                ctx.fillRect(xStart, y1, stripeWidth, y2 - y1);
                if (borderSize > 0) {
                    ctx.strokeRect(xStart, y1, stripeWidth, y2 - y1); // Draw border around stripe
                }

                // Draw the shape if any
                if (shape !== "none") {
                    drawShape(ctx, shape, centerX, imgSize / 2, shapeSize, shapeColor);
                }
            }
        }

        function generateMarks() {
            const container = document.getElementById('canvas-container');
            container.innerHTML = ''; // Clear previous canvases

            const stripeColor = document.getElementById('stripeColor').value;
            const borderColor = document.getElementById('borderColor').value;
            const backgroundColor = document.getElementById('backgroundColor').value;
            const stripeWidth = parseInt(document.getElementById('stripeWidth').value);
            const borderSize = parseInt(document.getElementById('borderSize').value);
            const shape = document.getElementById('shape').value;
            const shapeSize = parseInt(document.getElementById('shapeSize').value);
            const shapeColor = document.getElementById('shapeColor').value;
            const transparentBackground = document.getElementById('transparentBackground').checked;

            countries.forEach(country => {
                for (let stripes = 1; stripes <= 3; stripes++) {
                    const canvas = document.createElement('canvas');
                    canvas.width = imgSize;
                    canvas.height = imgSize;
                    const ctx = canvas.getContext('2d');

                    if (transparentBackground) {
                        ctx.clearRect(0, 0, imgSize, imgSize); // Clear canvas for transparency
                    } else {
                        ctx.fillStyle = backgroundColor;
                        ctx.fillRect(0, 0, imgSize, imgSize);
                    }

                    drawStripes(ctx, stripes, stripeWidth, stripeColor, borderColor, borderSize, shape, shapeSize, shapeColor);

                    if (country === "china") {
                        // Only append China canvases for display
                        container.appendChild(canvas);
                    }

                    // Convert canvas to Blob and add to ZIP file
                    canvas.toBlob(function(blob) {
                        zip.file(`${folderPath}/gun_${country}_${stripes}.png`, blob);
                    });
                }
            });
        }

        function downloadZip() {
            zip.generateAsync({ type: "blob" }).then(function(content) {
                saveAs(content, "marks_of_excellence.zip");
            });
        }

        document.getElementById('generate-button').addEventListener('click', generateMarks);
        document.getElementById('download-button').addEventListener('click', downloadZip);

        window.onload = generateMarks;
    </script>
</body>
</html>

 

I can't test all nations. Pls add feed back if you try it. Hope it helps.

MOE image Generator.htm

Link to comment
  • 4 weeks later...

2 major improvements are: auto updating when u make a settings change so easier to tweak. Option to add an image to the shape drop down (can add several images at a time and will stay in the menu. jpg,png,gif and webp files tested ), can resize but border does not work with an image. zipped as i added a few images to try.

 

I cant think of anything else i could add atm 😕

 

Spoiler

image.png.cb2d7244a3a5a70d456105ef38e65fb6.png

 

moe-gen-V31.zip

Link to comment

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use and Privacy Policy.