Posted By

wyattstorch42 on 01/01/14


Tagged

menu php generator responsive hamburger


Versions (?)

PHP Hamburger Generator


 / Published in: PHP
 

Save this script on your localhost and run it whenever you need to generate a "hamburger icon" of a specific size and color. Just tell it the dimensions and bar color and it will output a mathematically perfect hamburger icon as a transparent PNG, which you can just download.

  1. <?php
  2. // Enable robust error reporting to catch errors
  3.  
  4. // Generate an image if the form has been submitted
  5. if (!empty($_GET)) {
  6. // $side is the width and height of the resulting image
  7. $side = intval($_GET['side']);
  8. // $color is a hexadecimal color (000000 to FFFFFF)
  9. $color = $_GET['color'];
  10. // If the $color begins with a # sign, strip it off
  11. $color = substr($color, 0, 1) == '#' ? substr($color, 1) : $color;
  12. // Split the color into the hex value for red, green, and blue
  13. list($r, $g, $b) = str_split($color, 2);
  14. // Convert the hexadecimal strings to decimal numbers (00=00, FF=255)
  15. $r = hexdec($r);
  16. $g = hexdec($g);
  17. $b = hexdec($b);
  18.  
  19. // Create the canvas
  20. $image = imagecreatetruecolor($side, $side);
  21. // Preserve transparency
  22. imagesavealpha($image, true);
  23. // Fill it with a transparent background
  24. imagefill($image, 0, 0, imagecolorallocatealpha($image, 0, 0, 0, 127));
  25.  
  26. // Allocate the bar color
  27. $color = imagecolorallocate($image, $r, $g, $b);
  28.  
  29. // Draw 3 rectangles on the canvas from (x1, x2) to (y1, y2) and fill
  30. // them with the bar color
  31. $x1 = $side/7;
  32. $x2 = $side-$x1;
  33. for ($y1 = $x1; $y1 < $x2; $y1 += $x1*2) {
  34. imagefilledrectangle($image, $x1, $y1, $x2-1, $y1+$x1-1, $color);
  35. }
  36.  
  37. // Output the PNG if no errors were printed during this process
  38. if (!headers_sent()) {
  39. header('Content-Type: image/png');
  40. imagepng($image);
  41. imagedestroy($image);
  42. }
  43. // Terminate
  44. }
  45. ?>
  46. <!DOCTYPE html>
  47. <html lang="en">
  48. <head>
  49. <meta charset="UTF-8">
  50. <title>Hamburger Icon Generator</title>
  51. </head>
  52. <body>
  53. <h1>Hamburger Icon Generator</h1>
  54. <form method="get" target="_blank">
  55. <p><label>Size <input type="number" name="side" min="7" max="700" step="7" value="49" onchange="document.getElementById('side').innerHTML = this.value;">&times;<span id="side">49</span> (must be a multiple of 7)</label></p>
  56. <p><label>Bar Color #<input type="text" name="color" value="000000"> (hex values only)</label></p>
  57. <p><input type="submit" value="Generate"></p>
  58. </form>
  59. </body>
  60. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Some0ne on January 2, 2014

Great little tool but if it has to be "must be a multiple of 7" why not replace size input with a select box with only multiples of 7 in it.

Posted By: wyattstorch42 on February 22, 2014

Personally, I prefer the HTML5 number input. I like having the built-in spinner. Of course, that isn't ideal for cross-browser, but this is just a tool for internal use. Obviously it doesn't validate input or anything either.

You need to login to post a comment.