Hyster Posted August 19 Share Posted August 19 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 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 Quote Link to comment
Hyster Posted August 22 Author Share Posted August 22 Updated it quite a bit. can make a bar from stripes. preset to give an idea. Import/export so u can come back to an idea. added a few more shapes. Spoiler MOE image Generator v16.htm Quote Link to comment
Hyster Posted September 16 Author Share Posted September 16 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 moe-gen-V31.zip Quote Link to comment
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.