API tools faq
paste
yodapt

kumiko

yodapt
Jan 14th, 2024 (edited)
61
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 27.54 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2.  
  3. session_start();
  4.  
  5. // Let's convert the SVG requests into Base64 so we can load them as text with the inital request, greatly reducing the request number
  6. function SVGtoBase64($url) {
  7.     return 'data:image/svg+xml;base64,'.base64_encode(file_get_contents(__DIR__.$url));
  8. }
  9.  
  10. // Check if already loaded once
  11. if(isset($_SESSION["loaded"])){
  12.     $loaded = true;
  13. }else{
  14.     $loaded = false;
  15.     $_SESSION["loaded"] = true;
  16. }
  17.  
  18. // Calcualte the right settings
  19. if(isset($_GET['shape'])){
  20.     $shape = $_GET['shape'];
  21. }else{
  22.     $shape = 'rec';
  23. }
  24. if(isset($_GET['edge'])){
  25.     $edge = $_GET['edge'];
  26. }else{
  27.     $edge = '10';
  28. }
  29. if(isset($_GET['horizontal'])){
  30.     $horizontal = $_GET['horizontal'];
  31. }else{
  32.     $horizontal = 10;
  33. }
  34. if(isset($_GET['vertical'])){
  35.     $vertical = $_GET['vertical'];
  36. }else{
  37.     $vertical = 4;
  38. }
  39. if(isset($_GET['pitch'])){
  40.     $jigumi = $_GET['pitch'];
  41. }else{
  42.     $jigumi = 50;
  43. }
  44. if(isset($_GET['mitsuke'])){
  45.     $mitsuke = $_GET['mitsuke'];
  46. }else{
  47.     $mitsuke = 3;
  48. }
  49.  
  50. // Colors
  51. if(isset($_GET['framecolor'])){
  52.     $framecolor = $_GET['framecolor'];
  53. }else{
  54.     $framecolor = '543e30';
  55. }
  56. if(isset($_GET['jigumicolor'])){
  57.     $jigumicolor = $_GET['jigumicolor'];
  58. }else{
  59.     $jigumicolor = 'f3e4bd';
  60. }
  61.  
  62. if(isset($_GET['rotation'])){
  63.     $panelrotation = $_GET['rotation'];
  64. }else{
  65.     $panelrotation = 90;
  66. }
  67.  
  68.  
  69. // Include tsukeko, if defined
  70. if(isset($_GET['tsukeko'])){
  71.     $tsukeko = $_GET['tsukeko'];
  72. }else{
  73.     $tsukeko = 3; // $mitsuke;
  74. }
  75.  
  76.  
  77. if($shape == 'tri'){
  78.     $horizontal = $horizontal + 2;
  79. }else if($shape == 'kite' || $shape == 'hex' || $shape == 'rec' || $shape == 'coaster'){
  80.     $horizontal = $horizontal + 1;
  81. }
  82.  
  83. $pxwidth = 100;
  84. $pxheight = ceil($pxwidth*sqrt(3)/2);
  85.  
  86. $pxscale = $pxwidth/$jigumi;
  87.  
  88. $pxmitsuke = ceil($pxscale*$mitsuke);
  89. $pxmitsukeh = ceil($pxscale*$mitsuke*sqrt(3)/2);
  90.  
  91. $pxtsukeko = ceil($pxscale*$tsukeko);
  92. $pxtsukekoh = ceil($pxscale*$tsukeko*sqrt(3)/2);
  93.  
  94. // Adjust edge dimension to scale
  95. $pxedge = ceil($pxscale*$edge);
  96.  
  97. // Width and height of panel (including invisible triangles!)
  98. // Accuracy is not very important, it mainly creates the dimensions at high zoom levels
  99. $panelheight = ceil($pxheight*$vertical + 2*$pxedge +2*$pxtsukeko);
  100. $panelwidth  = ceil($pxwidth*$horizontal + 4*$pxedge + 4*$pxtsukeko);
  101.  
  102.  
  103. ?>
  104. <!DOCTYPE html>
  105. <html lang="en">
  106.   <head>
  107.     <meta property="og:url" content="https://www.kumikodesigner.com" />
  108.     <meta property="og:title" content="Interactive kumiko designer" />
  109.     <meta property="og:description" content="A little digital help in creating traditional Japanese kumiko art" />
  110.     <meta property="og:image" content="https://www.kumikodesigner.com/images/banner.jpg" />  
  111.    
  112.     <script src="jquery-3.7.1.min.js"></script>
  113.     <script src="jquery.mousewheel.js"></script>
  114.     <script language="javascript" src="lz-string.js"></script>
  115.     <script src="vanilla-picker-master/dist/vanilla-picker.js?123456"></script>
  116.    
  117.     <script type="text/javascript" src="functions.js?v=<?php include('version.php'); echo $version; ?>"></script>
  118.     <script type="text/javascript">
  119.         var panel_height = <?= $panelheight; ?>;
  120.         var panel_width = <?= $panelwidth; ?>;
  121.         var px_height = <?= $pxheight; ?>;
  122.         var px_width = <?= $pxwidth; ?>;
  123.         var jigumipitch = <?= $jigumi; ?>;
  124.         var jigumimitsuke = <?= $mitsuke; ?>;
  125.         var loadrotation = <?= $panelrotation; ?>;
  126.         var panel_vert = false;
  127.         var panel_flip = 1; // 1 for normal -1 for mirror
  128.         var panel_scale = 1.0;
  129.         var panel_edge = <?= $edge; ?>;
  130.         var autoselect_EN = true;
  131.         var infoscreen = false;
  132.         var printscreen = false;
  133.         var dimsscreen = false;
  134.         var urlscreen = false;
  135.         var bgcolor = <?= '\''.$jigumicolor.'\''; ?>;
  136.        
  137.         <?php
  138.         if(isset($_SESSION['designname'])){
  139.             echo "var designname = '".$_SESSION['designname']."';\n";
  140.             echo "\t\twindow.localStorage.setItem('designname','".$_SESSION['designname']."');\n"; // Also store the name in localStorage
  141.         }else{
  142.             echo "var designname = null;\n";
  143.         }?>
  144.        
  145.         var username = <?php
  146.         if(isset($_SESSION['username'])){
  147.             echo "'".$_SESSION['username']."'";
  148.         }else{
  149.             echo 'null';
  150.         }
  151.         ?>;
  152.        
  153.         // Create timer to save changes
  154.         var saveTimer = null; //in ms
  155.        
  156.         function unfade(element) {
  157.             var op = 0.1;  // initial opacity
  158.             element.style.display = 'block';
  159.             var timer = setInterval(function () {
  160.                 if (op >= 1){
  161.                     clearInterval(timer);
  162.                 }
  163.                 element.style.opacity = op;
  164.                 element.style.filter = 'alpha(opacity=' + op * 100 + ")";
  165.                 op += op * 0.05;
  166.             }, 25);
  167.         }
  168.        
  169.         <?php if(!$loaded){
  170.             echo "$(window).on('load',function() {unfade($('#content')[0]); $('#loading').css('display','none'); });";
  171.         }
  172.         ?>
  173.     </script>  
  174.  
  175.     <meta charset="utf-8">
  176.     <title>Kumiko designer</title>
  177.     <link rel="stylesheet" href="style/userbar.css?v=<?php include('version.php'); echo $version; ?>">
  178.     <link rel="stylesheet" href="style/panel.css?v=<?php include('version.php'); echo $version; ?>">
  179.     <style type="text/css">
  180.         #content{
  181.             <?php if(!$loaded){ echo 'opacity: 0;';} ?>
  182.         }
  183.        
  184.         #panel {   
  185.             margin: auto;
  186.             width: <?= $panelwidth; ?>px;
  187.             height: <?= $panelheight; ?>px;
  188.            
  189.             display: flex;
  190.             justify-content: center;
  191.             align-items: center;
  192.             min-height: 100%;
  193.         }
  194.         .center {
  195.             transform-origin: 50% 50%;
  196.             transform: scale(1,1); 
  197.             width: <?= $panelwidth; ?>px;
  198.             float:left;
  199.             opacity: 0; /* was 0 TODO */
  200.         }
  201.         #up {
  202.             width: 0;
  203.             height: 0;
  204.             border-left:    <?= $pxwidth/2; ?>px solid transparent;
  205.             border-right:   <?= $pxwidth/2; ?>px solid transparent;
  206.             border-bottom: <?= $pxheight; ?>px solid transparent;
  207.             float:left;
  208.             margin-left:   -<?= $pxwidth/2; ?>px;
  209.             transform: translateZ(0);
  210.         }        
  211.         #down {
  212.             width: 0;
  213.             height: 0;
  214.             border-left:    <?= $pxwidth/2; ?>px solid transparent;
  215.             border-right:   <?= $pxwidth/2; ?>px solid transparent;
  216.             border-top:     <?= $pxheight; ?>px solid transparent;
  217.             float:left;
  218.             margin-left:   -<?= $pxwidth/2; ?>px;
  219.             margin-bottom:  -<?= $pxmitsuke; ?>px;
  220.             transform: translateZ(0);
  221.         }                      
  222.         #outline{
  223.             width:<?= round($pxwidth*($horizontal-1)); ?>px;
  224.             padding-right: <?= ($pxwidth/2 + $pxedge*2 + $pxtsukeko*2); ?>px;
  225.             padding-left: <?= ($pxwidth/2 + $pxedge*2 + $pxtsukeko*2); ?>px;
  226.         }        
  227.         #clip{
  228.             margin-right:-<?= ($pxwidth); ?>px;
  229.             margin-left:-<?= ($pxwidth/2); ?>px;
  230.             float:left;
  231.         }      
  232.         #triangle {
  233.             float:left;
  234.             width: <?= $pxwidth; ?>px;        
  235.             height: <?= $pxheight; ?>px;      
  236.             margin-top:-<?= $pxheight; ?>px;  
  237.             margin-left:-<?= $pxwidth/2; ?>px;
  238.             background-image:url('kumiko.php?jigumi=<?= $jigumi; ?>&scale=4&flip=0&mitsuke=2&rot=0&shape=asanoha&bg2color=333333&color=<?= $jigumicolor; ?>&bgcolor=<?= $jigumicolor; ?>&grid=<?= $mitsuke; ?>');
  239.             background-size: <?= $pxwidth; ?>px;
  240.             background-repeat:no-repeat;
  241.         }      
  242.         #triangleu {
  243.             float:left;
  244.             width: <?= $pxwidth; ?>px;
  245.             height: <?= $pxheight; ?>px;
  246.             margin-top:0px;
  247.             margin-left:-<?= $pxwidth/2; ?>px;
  248.             background-image: url('kumiko.php?jigumi=<?= $jigumi; ?>&scale=4&flip=1&mitsuke=2&rot=0&shape=asanoha&bg2color=333333&color=<?= $jigumicolor; ?>&bgcolor=<?= $jigumicolor; ?>&grid=<?= $mitsuke; ?>');
  249.             background-size: <?= $pxwidth; ?>px;
  250.             background-repeat:no-repeat;
  251.         }      
  252.         #up.first{
  253.             margin-right:<?= ($pxwidth/2); ?>px;
  254.         }
  255.         #down.first{
  256.             margin-left:-<?= $pxwidth; ?>px;
  257.         }      
  258.     </style>
  259.   </head>
  260. <body ondragstart="return false;" onmousedown="return false;" onload="load();">
  261.  
  262. <div id="loading" style="position: absolute; z-index:20; background: #000; top: 50%; left: 50%; width:200px; height: 120px; margin-left:-100px; margin-top: -100px;" align="center">
  263. <div class="lds-default">
  264. <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  265. </div><p style="margin-top:10px; color: #f3e4bd;">Loading design</p></div>
  266.  
  267. <div id="edtpattern">
  268. <h2 style="margin-left: 30px; margin-top:30px; color: #ccc;">Edit individual pattern piece</h2>
  269. <p style="margin-left:30px; color: #ccc; ">Left click to change color, right click to remove pieces.</p>
  270. <div id="patterne" style="float:left; margin-left:65px; margin-top: 20px;">
  271. </div>
  272.  
  273. <p style="float:left; margin-left: 70px; margin-top:38px; color: #ccc;">Second color</p>
  274. <div style="float:left; position:absolute; right: 65px; top: 180px;  z-index:9;">
  275. <div id="color"></div>
  276.  
  277. <div id="colorpicker"><?php include('colors.php'); ?></div>
  278. </div>
  279. <div id="cancel" style="left: 95px;">Cancel</div>
  280. <div id="insert" style="right: 95px;">Insert</div>
  281. </div>
  282.  
  283. <div id="content">
  284.  
  285. <div id="hotkeys">
  286. <p>Hotkeys (h = hide)</p>
  287. <table>
  288. <tr><td>a </td><td>= select all</td></tr>
  289. <tr><td>c </td><td>= clear selection</td></tr>
  290. <tr><td>f </td><td>= full screen</td></tr>
  291. <tr><td>r </td><td>= rotate pattern piece</td></tr>
  292. <tr><td>s </td><td>= auto-deslect on/off</td></tr>
  293. <tr><td>i </td><td>= info</td></tr>
  294.  
  295. <tr><td>+ </td><td>= zoom in</td></tr>
  296. <tr><td>- </td><td>= zoom out</td></tr>
  297. <tr><td>e </td><td>= zoom to extents</td></tr>
  298. <!--<tr><td>1-8</td><td>= color pattern piece</td></tr>-->
  299. </table>
  300. </div>
  301.  
  302.  
  303.  
  304. <div id="container">
  305. <div id="panel">
  306. <?php
  307.     // Calculate vertical size of edge including tsukeko
  308.     if($shape == 'tri'){
  309.         $vedget = $pxedge*2 + $pxtsukeko*2 - $pxmitsuke;
  310.         $vedgeb = $pxedge + $pxtsukeko - $pxmitsuke/2;
  311.     }else if($shape == 'kite'){
  312.         $vedget = $pxedge*2 + $pxtsukeko*2 - $pxmitsuke;
  313.         $vedgeb = $pxedge*2 + $pxtsukeko*2 - $pxmitsuke;
  314.     }else{
  315.         $vedget = $pxedge + $pxtsukeko - $pxmitsuke/2;
  316.         $vedgeb = $pxedge + $pxtsukeko - $pxmitsuke/2;
  317.     }      
  318.    
  319.     $bordercolor = $framecolor;
  320.     $fillcolor = $jigumicolor;
  321.     $pwidth = ($horizontal)*$pxwidth + $pxedge*4 + $pxtsukeko*4; // Add some margin, this is enough for all types of panels
  322.    
  323.     echo '<div class="center" style="padding-top: '.$vedget.'px; padding-bottom:'.$vedgeb.'px; background-image: url(\'border.php?shape='.$shape.'&edge='.$edge.'&vertical='.$vertical.'&horizontal='.$horizontal.'&pitch='.$jigumi.'&grid='.$mitsuke.'&framecolor='.$bordercolor.'&bgcolor='.$fillcolor.'&scale=4&tsukeko='.$tsukeko.'\'); background-size: '.$pwidth.'px; background-repeat: no-repeat;">';  
  324. ?>
  325.  
  326. <div id="our_table">
  327. <div id="outline">
  328. <div id="kumikoborder">
  329. <div id="clip">
  330. <?php  
  331.     // Style for the selected pattern pieces
  332.     $selectiond = '<img src="images/seld.svg" width="'.$pxwidth.'" height="'.$pxheight.'" class="nh">';
  333.     $selectionu = '<img src="images/selu.svg" width="'.$pxwidth.'" height="'.$pxheight.'" class="nh">';
  334.    
  335.     $t = 1; // Define whether the first half triangle is pointed up or down
  336.     if(isset($_GET['halfor'])){
  337.         $t = $_GET['halfor'];
  338.     }
  339.     //echo $shape."\n";
  340.     if($shape == 'rec'){
  341.         // Rectangle       
  342.         for ($y=1; $y<=$vertical;$y++){
  343.             $x = 0;
  344.             if($y%2 == $t){
  345.                 echo '<div id="up" style="clear:both;"><p id="triangleu" style="opacity:0;">'.$selectionu.'</p></div>';
  346.             }else{
  347.                 echo '<div id="down" style="clear:both;"><p id="triangle" style="opacity:0;">'.$selectiond.'</p></div>';   
  348.             }      
  349.            
  350.             for ($x=1; $x<$horizontal*2;$x++){
  351.                 $style = "";           
  352.                 if(($x+$y)%2==$t){
  353.                     echo '<div id="up"><p id="triangleu" style="'.$style.'">'.$selectionu.'</p></div>';
  354.                 }else{
  355.                     echo '<div id="down"><p id="triangle" style="'.$style.'">'.$selectiond.'</p></div>';   
  356.                 }      
  357.             }      
  358.            
  359.             if($y%2 == 1-$t){
  360.                 echo "\n".'<div id="down"><p id="triangle" style="opacity:0;">'.$selectiond.'</p></div>';              
  361.             }else{
  362.                 echo "\n".'<div id="up"><p id="triangleu" style="opacity:0;">'.$selectionu.'</p></div>';               
  363.             }  
  364.         }
  365.     }
  366.    
  367.     if($shape == 'hex' || $shape == 'kite' || $shape == 'coaster'){
  368.         $oddeven = ($vertical/2)%2;
  369.         if($horizontal+1 > $vertical){
  370.             $visible = ($vertical/2)-1;
  371.         }else{
  372.             $visible = 1+$oddeven;
  373.             if($shape == 'kite'){
  374.                 $visible = $horizontal-2;
  375.             }                      
  376.         }
  377.         if($shape == 'hex' && $vertical == $horizontal-1){
  378.             $visible = $vertical/2-1;          
  379.         }
  380.        
  381.         for ($y=1; $y<=$vertical;$y++){
  382.             $x = 0;
  383.             if($y%2 == $oddeven){
  384.                 echo '<div id="up" style="clear:both;"><p id="triangleu" style="opacity:0;">'.$selectionu.'</p></div>';
  385.             }else{
  386.                 echo '<div id="down" style="clear:both;"><p id="triangle" style="opacity:0;">'.$selectiond.'</p></div>';   
  387.             }      
  388.            
  389.             for ($x=1; $x<$horizontal*2;$x++){
  390.  
  391.                 if($x < $vertical-$visible || $x > 2*$horizontal - $vertical+$visible){
  392.                     $style = "opacity:0;";
  393.                 }else{
  394.                     $style = "";
  395.                 }
  396.                
  397.                
  398.                 if(($x+$y)%2==$oddeven){
  399.                     if(strlen($style) > 3){
  400.                         echo '<div id="up"><p id="triangleu" style="'.$style.'">'.$selectionu.'</p></div>';
  401.                     }else{
  402.                         echo '<div id="up"><p id="triangleu">'.$selectionu.'</p></div>';
  403.                     }
  404.                 }else{
  405.                     if(strlen($style) > 3){
  406.                         echo '<div id="down"><p id="triangle" style="'.$style.'">'.$selectiond.'</p></div>';   
  407.                     }else{
  408.                         echo '<div id="down"><p id="triangle">'.$selectiond.'</p></div>';  
  409.                     }
  410.                 }      
  411.             }
  412.            
  413.            
  414.             if($y%2 == 1-$oddeven){
  415.                 echo "\n".'<div id="down"><p id="triangle" style="opacity:0;">'.$selectiond.'</p></div>';              
  416.             }else{
  417.                 echo "\n".'<div id="up"><p id="triangleu" style="opacity:0;">'.$selectionu.'</p></div>';               
  418.             }  
  419.             if($y>$vertical/2){
  420.                 $visible = $visible - 1;
  421.             }else if($y<$vertical/2){
  422.                 $visible = $visible + 1;
  423.             }      
  424.         }
  425.     }
  426.    
  427.     if($shape == 'tri'){
  428.         $visible = -2;
  429.         for ($y=1; $y<=$vertical;$y++){
  430.             $x = 0;
  431.             if($y%2 != $horizontal%2){
  432.                 echo '<div id="up" style="clear:both;"><p id="triangleu" style="opacity:0;">'.$selectionu.'</p></div>';
  433.             }else{
  434.                 echo '<div id="down" style="clear:both;"><p id="triangle" style="opacity:0;">'.$selectiond.'</p></div>';   
  435.             }      
  436.            
  437.             for ($x=1; $x<$horizontal*2;$x++){
  438.  
  439.                 if($x < $vertical-$visible || $x > 2*$horizontal - $vertical+$visible){
  440.                     $style = "opacity:0;";
  441.                 }else{
  442.                     $style = "";
  443.                 }
  444.                
  445.                
  446.                 if(($x+$y)%2!=$horizontal%2){
  447.                     echo '<div id="up"><p id="triangleu" style="'.$style.'">'.$selectionu.'</p></div>';
  448.                 }else{
  449.                     echo '<div id="down"><p id="triangle" style="'.$style.'">'.$selectiond.'</p></div>';   
  450.                 }      
  451.             }
  452.            
  453.             if($y%2 == $horizontal%2){
  454.                 echo "\n".'<div id="down"><p id="triangle" style="opacity:0;">'.$selectiond.'</p></div>';              
  455.             }else{
  456.                 echo "\n".'<div id="up"><p id="triangleu" style="opacity:0;">'.$selectionu.'</p></div>';               
  457.             }  
  458.             $visible = $visible + 1;
  459.         }
  460.     }
  461.    
  462. ?>
  463.  
  464. </div></div></div></div></div></div></div>
  465.  
  466.  
  467. <div id="tools">
  468. <div id="collapse"></div>
  469. <div id="toolpadding">
  470.  
  471. <div id="colpick" style="display: none; position: absolute; top:-321px;border:16px solid black; width: 250px; height: 321px;background-color: black;"></div>
  472.  
  473. <div id="colors">
  474.     <div style="background:#f3e4bd;" onclick="changecolor('f3e4bd')"></div>
  475.     <div style="background:#dcbc83;" onclick="changecolor('dcbc83')"></div>
  476.     <div style="background:#d1a468;" onclick="changecolor('d1a468')"></div>
  477.     <div style="background:#b57a52;" onclick="changecolor('b57a52')"></div>
  478.     <div style="background:#543e30;" onclick="changecolor('543e30')"></div>
  479.     <div style="background:#9e492c;" onclick="changecolor('9e492c')"></div>
  480.     <div style="background:#985a6e;" onclick="changecolor('985a6e')"></div>
  481.     <div style="background:#856b53;" onclick="changecolor('856b53')"></div>
  482.     <span style="float:left; width: 140px; background-color: #543e30; color:#f3e4bd; font-size: 15px;line-height:30px;text-align: center;border-top:2px solid #f3e4bd;">Infill color</span>
  483. </div>
  484.  
  485. <div id="bgcolors">
  486.     <div style="background:#ffffff;" onclick="changebgcolor('ffffff')"></div>  
  487.     <div style="background:#ffffee;" onclick="changebgcolor('ffffee')"></div>
  488.     <div style="background:#fff3df;" onclick="changebgcolor('fff3df')"></div>
  489.     <div style="background:#9c6c48;" onclick="changebgcolor('9c6c48')"></div>
  490.     <div style="background:#707645;" onclick="changebgcolor('707645')"></div>
  491.     <div style="background:#969696;" onclick="changebgcolor('969696')"></div>
  492.     <div style="background:#6f6c65;" onclick="changebgcolor('6f6c65')"></div>
  493.     <div style="background:#333333;" onclick="changebgcolor('333333')"></div>  
  494.     <span style="float:left; width: 140px; background-color: #543e30; color:#f3e4bd; font-size: 15px;line-height:30px;text-align: center;border-top:2px solid #f3e4bd;">Background color</span>
  495. </div>
  496.  
  497. <div id="adjustbuttons">
  498. <img src="images/rotate.png" onclick="rotate_pattern()" title="Rotate infill piece" />
  499. <img src="images/mirror.png" onclick="mirror_pattern()" title="Mirror infill piece" />
  500. <img src="images/patternedtn.png" onclick="edtpattern()" title="Edit pattern" />
  501. <img src="images/lup.png" onclick="increase_mitsuke()" title="Increase mitsuke (0.5 mm)" />
  502. <img src="images/foreground.png" onclick="changelayer()" title="Foreground / background" />
  503. <img src="images/flower.png" onclick="" title="not implemented" />
  504. <img src="images/bulb_on.png" onclick="togglebacklight()" title="Backlit on/off" id="backlit" />
  505. <img src="images/ldown.png" onclick="decrease_mitsuke()" title="Decrease mitsuke (0.5 mm)"/>
  506. </div>
  507.  
  508. <div id="patternscontainer">
  509. <div id="patternsscroll">
  510. <div id="patterns">
  511.     <img src="kumiko.php?jigumi=50&scale=5&flip=0&shape=empty&color=543e30&bgcolor=f3e4bd&grid=6"       alt="lastedited" name="Last edited infill piece" id="lastedited" />
  512.     <img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" style="visibility: hidden;" />
  513.    
  514.     <img src="<?= SVGtoBase64('images/svg/empty.svg'); ?>" alt="empty" name="Empty" />
  515.     <img src="<?= SVGtoBase64('images/svg/tsanugi.svg'); ?>" alt="tsanugi" name="Rind&#333; tsanugi" />
  516.     <img src="<?= SVGtoBase64('images/svg/rindoasanoha.svg'); ?>" alt="rindoasanoha" name="Rind&#333; asa-no-ha" />
  517.     <img src="<?= SVGtoBase64('images/svg/kasane.svg'); ?>" alt="kasane" name="Kasane rind&#333;" />
  518.     <img src="<?= SVGtoBase64('images/svg/tsumiishi.svg'); ?>" alt="tsumiishi" name="Tsumi-ishi kikk&#333;" />
  519.     <img src="<?= SVGtoBase64('images/svg/bishamonkikko.svg'); ?>"  alt="bishamonkikko" name="Bishamon kikk&#333;" />  
  520.     <img src="<?= SVGtoBase64('images/svg/asanoha.svg'); ?>"    alt="asanoha" name="Asa-no-ha" />  
  521.     <img src="<?= SVGtoBase64('images/svg/asanohavariant.svg'); ?>" alt="asanohavariant" name="Asa-no-ha variant" />   
  522.     <img src="<?= SVGtoBase64('images/svg/tsuno.svg'); ?>"  alt="tsuno" name="Tsuno asa-no-ha" />
  523.     <img src="<?= SVGtoBase64('images/svg/futaezakura.svg'); ?>" alt="futaezakura" name="Futae-zakura kikk&#333;" />    
  524.     <img src="<?= SVGtoBase64('images/svg/sakura.svg'); ?>" alt="sakura" name="Sakura kikk&#333;" />
  525.     <img src="<?= SVGtoBase64('images/svg/kazaguruma.svg'); ?>" alt="kazaguruma" name="Kaza-guruma" /> 
  526.     <img src="<?= SVGtoBase64('images/svg/gomagara.svg'); ?>"   alt="gomagara" name="Goma-gara kikk&#333;" />      
  527.     <img src="<?= SVGtoBase64('images/svg/kuruma.svg'); ?>" alt="kuruma" name="Kuruma kikk&#333; #1" />
  528.     <img src="<?= SVGtoBase64('images/svg/kurumakikko.svg'); ?>"    alt="kurumakikko" name="Kuruma kikk&#333; #2" />
  529.     <img src="<?= SVGtoBase64('images/svg/kawaristar.svg'); ?>" alt="kawaristar" name="Kawari variant" />
  530.     <img src="<?= SVGtoBase64('images/svg/futae.svg'); ?>"  alt="futae" name="Futae asa-no-ha" />  
  531.     <img src="<?= SVGtoBase64('images/svg/kawari.svg'); ?>" alt="kawari" name="Kawari asa-no-ha" />
  532.     <img src="<?= SVGtoBase64('images/svg/yae.svg'); ?>" alt="yae" name="Yae asa-no-ha" />
  533.     <img src="<?= SVGtoBase64('images/svg/ryuso.svg'); ?>"  alt="ryuso" name="Ry&#363;s&#333; kikk&#333;" />
  534.     <img src="<?= SVGtoBase64('images/svg/ryusoasanoha.svg'); ?>" alt="ryusoasanoha" name="Ry&#363;s&#333; asa-no-ha" />
  535.     <img src="<?= SVGtoBase64('images/svg/kawariyae.svg'); ?>" alt="kawariyae" name="Kawari yae-zakura" />
  536.     <img src="<?= SVGtoBase64('images/svg/yaezakura.svg'); ?>" alt="yaezakura" name="Yae-zakura kikk&#333;" />
  537.     <img src="<?= SVGtoBase64('images/svg/benten.svg'); ?>" alt="benten" name="Benten kikk&#333;" />
  538.     <img src="<?= SVGtoBase64('images/svg/bentena.svg'); ?>" alt="bentena" name="Bentena asa-no-ha" />
  539.     <img src="<?= SVGtoBase64('images/svg/bententawara.svg'); ?>" alt="bententawara" name="Benten tawara kikk&#333;" />
  540.     <img src="<?= SVGtoBase64('images/svg/bentenmie.svg'); ?>" alt="bentenmie" name="Benten mie kikk&#333;" /> 
  541.     <img src="<?= SVGtoBase64('images/svg/yaekikyo.svg'); ?>" alt="yaekikyo" name="Yae kiky&#333; Asa-no-ha" />
  542.     <img src="<?= SVGtoBase64('images/svg/yaewatsunagi.svg'); ?>" alt="yaewatsunagi" name="Yae wa-tsunagi" />      
  543.     <img src="<?= SVGtoBase64('images/svg/tawara.svg'); ?>" alt="tawara" name="Tawara kikk&#333;" />
  544.     <img src="<?= SVGtoBase64('images/svg/urahana.svg'); ?>" alt="urahana" name="Urahana kikk&#333;" />
  545.     <img src="<?= SVGtoBase64('images/svg/yaeurahana.svg'); ?>" alt="yaeurahana" name="Yae urahana kikk&#333;" />
  546.     <img src="<?= SVGtoBase64('images/svg/kawaraurahana.svg'); ?>" alt="kawaraurahana" name="Kawara urahana kikk&otilde;" />
  547.     <img src="<?= SVGtoBase64('images/svg/karahanakikko.svg'); ?>" alt="karahanakikko" name="Karahana kikk&#333;" />       
  548.     <img src="<?= SVGtoBase64('images/svg/curved.svg'); ?>" alt="curved" name="Unknown" /> 
  549.     <img src="<?= SVGtoBase64('images/svg/curved2.svg'); ?>" alt="curved2" name="Unknown" />   
  550.     <img src="<?= SVGtoBase64('images/svg/shippo.svg'); ?>" alt="shippo" name="Shippo kikk&#333;" />
  551.     <img src="<?= SVGtoBase64('images/svg/asanohamaroc.svg'); ?>" alt="asanohamaroc" name="Asa-no-ha variant" />   
  552.     <img src="<?= SVGtoBase64('images/svg/dahlia.svg'); ?>" alt="dahlia" name="Dahlia" />  
  553.     <img src="<?= SVGtoBase64('images/svg/hakkakugara.svg'); ?>" alt="hakkakugara" name="Hakkaku gara" />          
  554.     <img src="<?= SVGtoBase64('images/svg/mikado.svg'); ?>"     alt="mikado" name="Mikado" />
  555.     <img src="<?= SVGtoBase64('images/svg/kurumastar.svg'); ?>"     alt="kurumastar" name="Kuruma variant" />
  556.     <img src="<?= SVGtoBase64('images/svg/kawari3.svg'); ?>"    alt="kawari3" name="Kawari variant" />
  557.     <img src="<?= SVGtoBase64('images/svg/tsumiishivar.svg'); ?>"   alt="tsumiishivar" name="Tsumi-ishi variant" />
  558.    
  559.    
  560. </div>
  561. </div>
  562. </div>
  563. <span id="patternname" style="position:absolute; left:50%; bottom:0px; z-index: 10; width: 200px; margin-left: -100px; color:#f3e4bd; font-size: 15px;line-height:20px;text-align: center; display:none;">Yae-Zakura Kikko</span>
  564.  
  565.  
  566. <div id="buttons">
  567.     <img src="images/rotate.png" title="rotate panel" onclick="rotate()"/>
  568.     <img src="images/zoomin.png" title="zoom in" onclick="zoomin()" />
  569.     <img src="images/extents.png" title="zoom to fit screen" onclick="zoomext()" />
  570.     <img src="images/zoomout.png" title="zoom out" onclick="zoomout()" />
  571.     <img src="images/save.png" title="save design" onclick="saveas()" />
  572.     <img src="images/share.png" title="share design" onclick="sharemenu()" />      
  573.     <img src="images/info2.png" title="info/help" onclick="info()" />
  574.    
  575.     <img src="images/groupsel.png" title="group selection on/off" onclick="selsame_enable()" id="selsame" />
  576.     <img src="images/autodeselect.png" title="automatic deselect on/off" onclick="autodeselect()" id="autodeselect" />
  577.     <img src="images/deselect.png" title="deselect all" onclick="deselect(1)" />
  578.     <img src="images/print.png" title="export printable design" onclick="printmenu()" />
  579.     <img src="images/ruler.png" title="export dimensional drawing" onclick="dimsmenu()" />
  580.     <img src="images/settings.png" title="settings" onclick="settings()" />
  581.     <img src="images/home.png" title="home" onclick="home()" />
  582.    
  583.     <span style="float:left; width: 252px; background-color: #543e30; color:#f3e4bd; font-size: 15px;line-height:30px;text-align: center;">www.kumikodesigner.com
  584.     </span>
  585. </div>
  586.  
  587. </div></div></div>
  588.  
  589. <div id="info"><p>Watch <a href="https://www.kumikodesigner.com/video.php" target="blank" />this video</a> to learn how to use the application.<br /><br />If you have ideas to improve it, please let me know by sending an email via <a href="https://www.kumikodesigner.com/contact.php" target="blank">my contact form</a>.</p>
  590.  
  591. <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
  592. <input type="hidden" name="cmd" value="_s-xclick" />
  593. <input type="hidden" name="hosted_button_id" value="WX3R8FSAK8728" />
  594. <input type="image" src="images/donate_small.png" border="0" name="submit" title="Please consider a donation so I can keep improving the tool!" alt="Donate with PayPal button" />
  595. </form>
  596.  
  597. <div id="break"></div>
  598.  
  599. <div id="icons">
  600. <img src="images/rotate.png" />     <p>Rotate the kumiko panel</p>
  601. <img src="images/zoomin.png" />     <p>Zoom in</p>
  602. <img src="images/extents.png" />    <p>Zoom to fit screen</p>
  603. <img src="images/zoomout.png" /> <p>Zoom out</p>
  604. <img src="images/save.png" />       <p>Save project</p>
  605. <img src="images/share.png" />      <p>Create link to share design</p>
  606. </div>  
  607. <div id="icons" style="">
  608. <img src="images/groupsel.png" />   <p>Select equal patterns (on/off)</p>
  609. <img src="images/select.png" />     <p>Automatic deselect (on/off)</p>
  610. <img src="images/deselect.png" />   <p>Deselect all</p>
  611.  
  612. <img src="images/print.png" />      <p>Export pdf for printing</p>
  613. <img src="images/ruler.png" />      <p>Export pdf with dimensions</p>
  614. <img src="images/settings.png" />   <p>Settings</p>
  615. </div>
  616.  
  617. </div>
  618.  
  619. <div id="print_menu">
  620. <h2>Choose print style</h2>
  621. <p>Click your prefered style to export a 1:1 scale pdf of your design.</p>
  622. <img src="images/style2.png" onClick="printversion(0);">
  623. <img src="images/style3.png" onClick="printversion(1);">
  624. <img src="images/style1.png" onClick="printversion(2);">
  625. </div>
  626.  
  627. <div id="dims_menu">
  628. <h2>Choose dimensional drawing style</h2>
  629. <p style="color: #600">Please note this is a beta feature, it can still contain errors!<!--Click your prefered style to generate a pdf with pattern information.--></p>
  630. <img src="images/scaledrawing.png" onClick="printversion(34);">
  631. <span class="menu_info">Scale 1:1 pdf with occurance count</span>
  632. <img src="images/dimdrawing.png" onClick="printversion(33);">
  633. <span class="menu_info" style="left: 242px;">Scale 2:1 pdf with angles and dimensions</span>
  634. <img src="images/svg.png" onClick="printversion(35);">
  635. <span class="menu_info" style="left: 455px;">Scale 1:1 SVG file for laser cutting</span>
  636. </div>
  637.  
  638. <div id="share">
  639. <h2>Share your design with others</h2>
  640. <p>The link below is a quick link to your design. <br />
  641. Others can only view, not edit.</p>
  642. <p>People with the link can see the name of your design, not your username. If you make changes to the design, it will also be reflected immediately to the link.</p>
  643. <?php
  644. if(isset($_SESSION['durl'])){
  645.     echo '<a href="https://www.kumikodesigner.com/d/'.$_SESSION['durl'].'" style="color: #543e30; font-weight: bold;">www.kumikodesigner.com/d/'.$_SESSION['durl'].'</a>'."<br />\n";
  646.     echo '<button id="urlbutton" onclick="copyToClipboard(\''.$_SESSION['durl'].'\')" style="margin-top: 20px; height: 30px; width: 100%; border: 2px solid #543e30; font-weight: bold; font-size: 16px;">Copy Link</button>';
  647. }else{
  648.     echo '<p style="font-weight: bold; font-style: italic; ">Only registered users can share their designs. Register <a href="https://www.kumikodesigner.com/users/register.php">here</a></p>';
  649. }
  650. ?>
  651. </div>
  652. <div id="saving" style="position: absolute; top: 0px; left:50%; margin-left:-150px; color: #ccc;text-align:center; background-color:#000; height: 40px; width: 300px; line-height: 40px; display:none; z-index: 12; color: #f3e4bd;">Saving design...</div>
  653.  
  654. <?php include 'user_bar.php'; ?>
  655. </body>
  656. <script>
  657.     pickerFixed = new Picker({
  658.             parent: document.querySelector('#colpick'),
  659.             popup: false,
  660.             alpha: false,
  661.             cancelButton: true,
  662.             editor: false,
  663.             color: '#cef6',
  664.             onChange: function(color) {},      
  665.             onDone: function(color){
  666.                 change_preset(color);              
  667.             }
  668.         });
  669. </script>
  670. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!