DDSFilesize.html

<!DOCTYPE html>
<html>
	<head>
		<title>DDS Filesize Calculator</title>
		<!-- CSS styling for fonts and stuff -->
		<style>
			#Width {
			  width: 4em;
			}
			#Height {
			  width: 4em;
			}
			#MAIN {
				background-color:black;
				font-family: Arial, Helvetica, sans-serif;
				color:#dddddd;
				text-align:center;
			}
			.warning
			{
				color:red;
			}
			#Result
			{
				font-size:5em;
			}
			#Byteresult
			{
				font-size:5em;
			}
			#Pixels
			{
				font-size:2em;
			}
		</style>
	</head>
	<body id="MAIN" onload="CalculateNumbers()">
	
	
		<!-- Title card -->
		<div>
			<h1>DDS Filesize Calculator</h1>
			<hr width=500em>
			<p>This calculates the filesize of DDS files with and without mipmaps, including the header. This variant is HTML for easier website usage. </p>
			<hr width=500em>
		</div>
		
		
		<!-- Input values here -->
		<div>
		
			<div>
				Width <input type="number" id="Width" name="Width" min="0" value="4096" step="1"            
				onchange 
				onpropertychange 
				onkeyuponpaste 
				oninput="CalculateNumbers()"> px
			</div>
			
			<div>
				Height <input type="number" id="Height" name="Height" min="0" value="2048" step="1" 			
				onchange 
				onpropertychange 
				onkeyuponpaste 
				oninput="CalculateNumbers()"> px
			</div>
			
			<!-- Odd number warning-->
			<div id="Warning" class="warning"></div>
			<hr width=100em>
			
			<!-- Select DDS type -->
			<div>
				<label for="Type">Choose a DDS format</label>
				<select name="Type" id="Type" onchange 
					onpropertychange 
					onkeyuponpaste 
					oninput="CalculateNumbers()">
					<option value="BC7">BC7</option>
					<option value="BC5">BC5</option>
					<option value="BC4">BC4</option>
					<option value="DXT5nm">DXT5nm/BC3n</option>
					<option value="DXT5">DXT5/BC3</option>
					<option value="DXT1">DXT1/BC1</option>
					<option value="L8">L8</option>
					<hr width=15em>
					<option value="Uncompressed alpha">Uncompressed alpha</option>
					<option value="Uncompressed no alpha">Uncompressed no alpha</option>
				</select>
				<br>
			</div>
			
			<!-- Mipmaps or no mipmaps -->
			<label for="Mipmaps">Mipmapped</label>
			<input type="checkbox" id="Mipmaps" name="Mipmaps" value="Mipmaps" onchange 
				onpropertychange 
				onkeyuponpaste 
				oninput="CalculateNumbers()">
			<!-- DDS format warning -->
			
			<div id="DDSWarning" class="warning"></div>
		</div>
		<hr width=500em>
		
		
		<!-- The output results. -->
		<div id="Pixels"></div>
		<hr width=100em>
		<div id="Result">
			<hr width=50em>
			<!-- The result -->
			<div>
				<div id="Result"></div>
				<div id="Byteresult"></div>
			</div>
			<!-- Text -->
			<div>
				<hr width=500em>
				<p>It is not recommended to use uncompressed file formats other than L8; they have a huge filesize. Consider DXT1/DXT5 instead.</p>
				<hr width=50em>
			</div>
			<hr width=200em>
		</div>
		
		
		<!-- The real JS -->
		<script>
			function CalculateNumbers() {
				var width = parseInt(document.getElementById("Width").valueAsNumber);
				var height = parseInt(document.getElementById("Height").valueAsNumber);
				var pixels = width*height;
				var Amount = pixels;
				//Pixel counting
				document.getElementById("Pixels").textContent = String(pixels).concat(" Pixels"); 
				//Detection
				element = document.querySelector('#Type');
								output =
                Type = element.options[element.selectedIndex].value;
				//Final results
				if ((Type == "DXT5") || (Type == "L8") || (Type == "DXT5nm") || (Type == "BC5") || (Type == "BC7")) 
				{
					Amount = pixels/1024; //Literally just the pixel count
				}
				else if (Type == "DXT1" || Type == "BC4")
				{
					Amount=pixels/2048; //Pixels/2
				}
				else if (Type == "Uncompressed alpha") 
				{
					Amount=pixels/256; //4*Pixels
				}
				else if (Type == "Uncompressed no alpha") 
				{
					Amount=pixels/333.333333333; //3*Pixels
				}
				else
				{
					Amount=pixels;
				}
				//Mipmaps
				Mipmaps = document.getElementById("Mipmaps").checked;
				if (Mipmaps == true) 
				{
					Amount *= 4/3;
				}
				Amount += 0.125;
				if ((Mipmaps == true) && (Type == "L8"))
				{
					document.getElementById("DDSWarning").textContent = "Warning: Mipmaps are generally recommended to not be used on grayscale heightmap formats such as L8.";
				}
				else 
				{
					document.getElementById("DDSWarning").textContent = "";
				}
				document.getElementById("Result").textContent = String(Math.floor(Amount)).concat(" KB for texture");
				document.getElementById("Byteresult").textContent = String(Amount*1024).concat(" bytes");
				//Warning indicator
				if (((width % 2) != 0) || ((height % 2) != 0))
				{
					document.getElementById("Warning").textContent = "Warning: One or two of your values are odd. Odd width will result in stretching." ;
				} 
				else 
				{
					document.getElementById("Warning").textContent = "";
				}
			};
		</script>
	</body>
</html>