test.php

  1. <?php
  2. define('COLORMAP_ROOT', '');
  3. ?><!DOCTYPE html>
  4. <html lang="es" dir="ltr">
  5. <head>
  6. <meta charset="utf-8">
  7. <title>ColorMap</title>
  8. <script src="<?=COLORMAP_ROOT?>colormap.js"></script>
  9. <link href="<?=COLORMAP_ROOT?>colormap.css" rel="stylesheet">
  10. <style>
  11. body { background-color:#999; }
  12. #cm_selection { display:flex; }
  13. #cm_sampling { width:100px; height:100px; border:1px solid #000; }
  14. #cm_clicking { margin-left:1em; }
  15. #cm_buttons { display:flex; flex-direction:row; width:100px; }
  16. </style>
  17. <script>
  18. ColorMap.setCallback(function (color) {
  19. document.getElementById('cm_clicking').textContent = color;
  20. })
  21. ColorMap.setSamplingId('cm_sampling');
  22. </script>
  23. </head>
  24. <body>
  25. <h1>ColorMap</h1>
  26. <h2>Palette</h2>
  27. <div id="colormap" class="colormap_static">
  28. <?php include COLORMAP_ROOT."colormap.php" ?>
  29. </div>
  30. <h2>Selected color</h2>
  31. <div id="cm_selection">
  32. <p id="cm_sampling">sampling</p>
  33. <p id="cm_clicking">clicking</p>
  34. </div>
  35. <h2>Change color</h2>
  36. <p id="cm_buttons">
  37. <button onclick="ColorMap.setColor('#FFFFFF')">white</button>
  38. <button onclick="ColorMap.setColor('#FF0000')">red</button>
  39. <button onclick="ColorMap.setColor('#00FF00')">green</button>
  40. <button onclick="ColorMap.setColor('#0000FF')">blue</button>
  41. <button onclick="ColorMap.setColor('#00FFFF')">cyan</button>
  42. <button onclick="ColorMap.setColor('#FF00FF')">magenta</button>
  43. <button onclick="ColorMap.setColor('#FFFF00')">yellow</button>
  44. </p>
  45. </body>
  46. </html>
  47.  

Proinf.net