-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- heavy optimisation and minimisation - addition of 99 limit for polos in appjs template - addition of picto generator
- Loading branch information
1 parent
b75e8e9
commit c3336eb
Showing
8 changed files
with
380 additions
and
510 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,16 @@ | ||
| function drawLabelledBox(ctx,colour,posX,posY,width,height,textX,textY,text){ | ||
| function drawLabelledBox(ctx,colour,posX,posY,width,height,textX,textY,text,fontsize){ | ||
| ctx.fillStyle = colour; | ||
| ctx.fillRect(posX,posY,width,height) | ||
| ctx.stroke() | ||
| ctx.fillStyle = "black"; | ||
| ctx.font = "15px CozetteVector"; | ||
| ctx.font = fontsize+"px CozetteVector"; | ||
| ctx.fillText(text,textX,textY) | ||
| } | ||
| function getRandomColor() { | ||
| var letters = '0123456789ABCDEF'; | ||
| var color = '#'; | ||
| for (var i = 0; i < 6; i++) { | ||
| color += letters[Math.floor(Math.random() * 16)]; | ||
| } | ||
| return color; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en" style="background-color:rgb(17, 5, 29) ;"> | ||
| <head> | ||
| <title>Picto Template Generator - BOOGO x SEAL</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta name="description" content="Boogo and Seal make Incredibox Mods and Tools."> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="../icons/apple-touch-icon.png"> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="../icons/favicon-32x32.png"> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="../icons/favicon-16x16.png"> | ||
| <link rel="manifest" href="../icons/site.webmanifest"> | ||
| <link rel="shortcut icon" href="../icons/favicon.ico"> | ||
| <meta name="msapplication-TileColor" content="#603cba"> | ||
| <meta name="msapplication-config" content="../icons/browserconfig.xml"> | ||
| <meta name="theme-color" content="#ffffff"> | ||
| <meta charset="UTF-8"> | ||
| <meta property="og:type" content="website"> | ||
| <meta property="og:site_name" content="BOOGO x SEAL"> | ||
| <meta property="og:title" content="Picto Template Generator" /> | ||
| <meta property="og:image" content="https://boogoxseal.xyz/assets/banner.png" /> | ||
| <meta property="twitter:image:src" content="https://boogoxseal.xyz/assets/banner.png" /> | ||
| <meta name="twitter:card" content="summary_large_image"> | ||
| <meta name="twitter:description" content="Boogo and Seal make Incredibox Mods and Tools."> | ||
| <meta name="og:image:alt" content="Boogo and Seal make Incredibox Mods and Tools."> | ||
| <meta name="og:description" content="Boogo and Seal make Incredibox Mods and Tools."> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" crossorigin="anonymous"> | ||
| <link rel="stylesheet" href="../css/topnav.css"> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> | ||
| <script src="../assets/canvas-funcs.js"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" integrity="sha512-XMVd28F1oH/O71fzwBnV7HucLxVwtxf26XV8P4wPk26EDxuGZ91N8bsOttmnomcCD3CS5ZMRL50H0GgOHvegtg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | ||
| <style> | ||
| td{text-align:center}.th-custom{overflow:auto;font-weight:200;text-align:center;padding-left:5px;padding-right:5px;font-size:28px;margin:10px}body{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff;overflow:auto;font-family:monospace;font-weight:500;margin-top:15vh} | ||
| </style> | ||
| </head> | ||
|
|
||
|
|
||
|
|
||
| <body style="background-color:rgb(17, 5, 29) ;"> | ||
| <div class="topnav"> | ||
| <a href="../">Home</a> | ||
| <a class="active" href="./">Tools</a> | ||
| <a href="../mods">Mods</a> | ||
| <a href="../about">About Us</a> | ||
| <a href="https://sealldeveloper.github.io/incredibox-downloads-index/">Mod Index</a> | ||
| </div> | ||
| <div class="container mt-3" style="background-color:rgb(29, 8, 49) ; overflow:hidden; padding-bottom:40px;height:100%;" > | ||
| <h1 class="m-4 mt-3">Incredibox 'Picto Template' Generator</h1> | ||
| <div id="form"> | ||
| <h3 class="m-3">Options</h3> | ||
| <div class="form-group col-md-5 m-3"> | ||
| <label for="iconcount">Picto Count</label> | ||
| <input class="form-control" type="number" id="pictocount" placeholder="20" required="true" value="20"></input> | ||
| </div> | ||
| <div class="form-group m-4 mt-4" id="submit"> | ||
| <input class="btn btn-primary" type="submit" value="Submit and Generate Template" id="submission"></input> | ||
| </div> | ||
| <h3 class="m-3">Preview</h3> | ||
| <div class="form-group col-md-5 m-3"> | ||
| <canvas id="render" height="136"></canvas> | ||
| <canvas class="visually-hidden" id="render-hd" height="272"></canvas> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script> | ||
| function generate() { | ||
| var cozette = new FontFace('CozetteVector', 'url(../assets/CozetteVector.otf)'); | ||
| cozette.load().then(function(font){ | ||
| document.fonts.add(font); | ||
| function pictoRender(canvasname,modifier){ | ||
| var canvas = document.getElementById(canvasname) | ||
| var ctx = canvas.getContext('2d') | ||
| var pictoCount = $('#pictocount').val() | ||
| $('#'+canvasname).attr('width',(68*Number(pictoCount))*modifier) | ||
| $('#'+canvasname).attr('height',136*modifier) | ||
|
|
||
|
|
||
| // Pictos | ||
| pictos=Array.apply(null, Array(Number(pictoCount))).map(function (x, i) { return i; }) | ||
| count=0 | ||
| currentPictoPosX=0 | ||
| for (i in pictos) { | ||
| count++ | ||
| drawLabelledBox(ctx,'red',currentPictoPosX,0,68*modifier,68*modifier,currentPictoPosX,6*modifier,'Picto '+count,8*modifier) | ||
| drawLabelledBox(ctx,'lime',currentPictoPosX,68*modifier,68*modifier,68*modifier,currentPictoPosX,74*modifier,'Active '+count,8*modifier) | ||
| currentPictoPosX+=68*modifier | ||
| } | ||
| } | ||
| pictoRender('render',1) | ||
| pictoRender('render-hd',2) | ||
| }) | ||
| } | ||
| $('.form-control').on('change', function(){ | ||
| generate() | ||
| }) | ||
| $('.form-control').on('change', function(){ | ||
| generate() | ||
| }) | ||
| generate() | ||
| $('#submission').on('click', function(){ | ||
| var zip = new JSZip(); | ||
| var canvas = document.getElementById('render') | ||
| var datauri = canvas.toDataURL('image/png') | ||
| var data = datauri.replace(/^data:image\/\w+;base64,/, ""); | ||
| zip.file(`${name}-template.png`, data, {base64:true}) | ||
| var canvas = document.getElementById('render-hd') | ||
| var datauri = canvas.toDataURL('image/png') | ||
| var data = datauri.replace(/^data:image\/\w+;base64,/, ""); | ||
| zip.file(`${name}-hd-template.png`, data, {base64:true}) | ||
| zip.generateAsync({type:"base64"}).then(function (base64) { | ||
| location.href="data:application/zip;base64," + base64; | ||
| }); | ||
| }) | ||
| </script> | ||
| <h3 style="padding-bottom:5px"></h3> | ||
| <h3 style="text-align:center;font-size:10px">Made by <a style="font-size:10px"target="_blank" rel="noopener noreferrer" class="enter">seal</a></h3> | ||
| </body> | ||
| </html> |
Oops, something went wrong.