last update: Sat, 17 Dec 2011 15:03:25 +0000
  1. {if $id}
  2. <p>
  3. <img style="max-width:100%;" src="graph{$id}.png" alt="{$text}" />
  4. </p>
  5. <p>
  6. Direktlink zum Bild: <a href="graph{$id}.png">http://peeeq.de/graph{$id}.png</a>
  7. | <a href="graph{$id}.svg">http://peeeq.de/graph{$id}.svg</a>
  8. </p>
  10. {/if}
  11. <form action="drawgraph.php" method="post" enctype="multipart/form-data">
  12. <p align="center">
  13. <textarea name="text" rows="20" cols="80">{$text}</textarea>
  14. </p>
  15. <p style="padding-left:100px;">
  16. <br />Richtung: <select name="rankdir">
  17. <option value="TB">von Oben nach Unten</option>
  18. <option value="LR">von Links nach Rechts</option>
  19. <option value="BT">von Unten nach Oben</option>
  20. <option value="RL">von Rechts nach Links</option>
  21. </select>
  22. <br />Layout-Engine: <select name="engine">
  23. <option value="dot">dot (gut für Bäume)</option>
  24. <option value="neato">neato (gut für Graphen)</option>
  25. <option value="fdp">fdp (gut für Graphen)</option>
  26. <option value="twopi">twopi (Kreis-Layout)</option>
  27. <option value="circo">circo (Kreis-Layout)</option>
  28. </select>
  29. <br /><input accesskey="s" type="submit" value="speichern" />
  30. </p>
  31. </form>
  32. <div id="Hilfe" style="padding-left:50px;padding-right:50px;">
  33. <h2>Hilfe:</h2>
  34. <p>
  35. Dieses Tool zeichnet Graphen aus einem eingerücktem Text. Am besten sieht mand dies an einem einfachen Beispiel. Der folgende Text zeichnet einen Pfeil von Hallo nach Welt, da Welt unter Hallo steht und eingerückt ist.</p>
  36. <img src="graph46.png" alt="Hallo Welt Beispiel" style="float:right;"/>
  37. <pre>
  38. Hallo
  39. Welt
  40. </pre>
  41. <p>
  42. Der selbe Knotenname bezeichnet auch immer den selben Knoten, also kann man mehr zeichnen als nur Bäume. </p>
  43. <p>Kanten kann man beschriften, indem man die Beschriftung
  44. gefolgt von einem Größer-Zeichen vor den Knotennamen schreibt.
  45. Verschiedene Formen sind ebenfalls mÃglich, dazu schreibt man einfach hinter
  46. einen Knotennamen getrennt durch einen Doppelpunkt die gewünschte Form (erlaubt
  47. sind: ellipse, box, circle, doublecircle, diamond,
  48. plaintext). Ein Beispiel eines Automaten sollte dies klar machen:</p>
  49. <img src="graph45.png" alt="Automat" style="float:right;" />
  50. <pre>
  51. Start:plaintext
  52. s0
  53. a > s1
  54. a|b > s1
  55. b > s2:doublecircle
  56. a > s0
  57. b > s1
  58. </pre>
  59. <p>
  60. Mehr Features und eine verbesserte Bedienung werden in Zukunft kommen.
  61. </p></div><div style="clear:both;"></div>

goto line:
Compare with:
text copy window edit this code post new code