HTML

SimpleFlowDiagramLib: Simple C# library to Serialize Graph to Xml (And Vice Versa)

In continuation from previous article https://gridwizard.wordpress.com/2015/03/25/simple-c-library-to-render-graph-to-flowchart/, we’d explore “SimpleFlowDiagramLib” capability to serialize Graph to Xml (And Vice versa). And, why do we want to do that? For example, wire down a graph to/from Web Services consumed by Java client for example.

Again,
Source code: https://github.com/gridwizard/SimpleFlowDiagram

using System;
using System.IO;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using SimpleFlowDiagramLib;

namespace DemoSimpleFlowDiagramLib
{
    class Program
    {
        
static void Main(string[] args) { // STEP 1. Generate the nodes, render it to XML format (GraphXml) IList[Node] Nodes = new List(); GenerateNodes(Nodes, 3, 3); SimpleFlowDiagramGeneratorCompatibleGraphRender XmlConverter = new SimpleFlowDiagramGeneratorCompatibleGraphRender(); string GraphXml = XmlConverter.RenderGraph(Nodes); string GraphXmlFilePath = "GraphXml.xml"; System.IO.File.WriteAllText(GraphXmlFilePath, GraphXml); Console.WriteLine("Finished writing graph to XML format compatible with SimpleFlowDiagramGenerator.exe"); // STEP 2. Read back from GraphXml MemoryStream Stream = new MemoryStream(); StreamWriter writer = new StreamWriter(Stream); writer.Write(GraphXml); writer.Flush(); Stream.Position = 0; System.Xml.XmlReader XmlRdr = System.Xml.XmlReader.Create(Stream); IList[Node] ResurrectedNodes = XmlConverter.ReadGraphXml(XmlRdr); DiagramCanvasEngine.GenerateLayout( ResurrectedNodes, Node.DEFAULT_NODE_HEIGHT / 2, CanvasDefinition.LayoutDirection.LeftToRight ); // STEP 3. Render the nodes to HTML file - this is exactly what "SimpleFlowDiagramGenerator.exe" does. It reads input xml file which defines the nodes. Then render flowchart to HTML file. IGraphRender Html5Render = new Html5GraphRender(); Html5Render.RenderGraph(Canvas, ResurrectedNodes, DisplaySettings, "Flowchart.html"); Console.WriteLine("Finished render to HTML5 to Flowchart.html"); return; }
public static void GenerateNodes( IList Nodes, int NumRootNodes, int MaxTreeDepth ) { Node RootNode; for (int i = 0; i < NumRootNodes; i++) { RootNode = new Node(); RootNode.NodeHeader = "Root_" + i; RootNode.NodeDetail = "Some detail ..."; RootNode.NodeHyperLink = "http://somewhere.com"; RootNode.Depth = 0; Nodes.Add(RootNode); GenerateSingleGraph(Nodes, RootNode, MaxTreeDepth); } return; } public static void GenerateSingleGraph( IList Nodes, Node RootNode, int MaxTreeDepth ) { int CurrentDepth = 0; RecursiveGenerateGraph(Nodes, RootNode, MaxTreeDepth, ref CurrentDepth); return; } public static void RecursiveGenerateGraph( IList Nodes, Node Node, int MaxTreeDepth, ref int CurrentDepth ) { CurrentDepth++; Random rnd = new Random(DateTime.Now.Second); if (CurrentDepth < MaxTreeDepth) { int NumChildren = rnd.Next(5); for (int i = 0; i < NumChildren; i++) { Node Child = new Node(); Child.NodeHeader = Node.NodeHeader + "." + "Child_Level" + CurrentDepth + "_Num" + i; Child.NodeDetail = "Some detail ..."; Child.NodeHyperLink = "http://somewhere.com"; Child.Depth = CurrentDepth; Child.ParentNodes.Add(Node); Node.ChildNodes.Add(Child); Nodes.Add(Child); int CopyCurrentDepeth = CurrentDepth; RecursiveGenerateGraph(Nodes, Child, MaxTreeDepth, ref CopyCurrentDepeth); } } return; } } }

Happy Coding!

You may also want to check out how to convert DataTable to/from HTML Table – https://gridwizard.wordpress.com/2014/12/17/datatable-to-from-html-table

Simple C# Library to render graph to Flowchart

Simple C# Library to render graph to Flowchart – currently, only render to HTML5 (Intention to support Visio in future).

You can render your graph horizontally (Left to Right), or vertically (Top down) – This is, however, Device Independent, and agnostic of whether you want to render to HTML5, Winform, WPF… The library automatically center parent nodes and calculate Node.x/y and overall canvas size (In case if you want to render it to surfaces other than HTML5 – for example, Visio, WPF, Winform…etc).

Top-to-Bottom
SimpleFlowDiagramLib.Demo.TopToBottom

Note that we didn’t scale text to fit the boxes – this is because automatic scaling would make text so small you can’t read it, thereby making things even worse. This said, if it’s absolutely necessary, Also, notice parent nodes are horizontally-center aligned.

Left-to-Right
SimpleFlowDiagramLib.Demo.LeftToRight

Parent nodes are vertically-center aligned

Source code: https://github.com/gridwizard/SimpleFlowDiagram

Usage:
Can’t be simpler to use, bulk of code in bottom create dummy data for illustration purpose.
a. Node.x/y calculated after call to DiagramCanvasEngine.GenerateLayout (You can use “Nodes” to render on other non-HTML5 surfaces)
b. Html5Render.RenderGraph renders to HTML5

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using SimpleFlowDiagramLib;

namespace DemoSimpleFlowDiagramLib
{
    class Program
    {
        
static void Main(string[] args) { IList Nodes = new List(); GenerateNodes(Nodes, 3, 3); Console.WriteLine("Finished generating dummy nodes, # Nodes: " + Nodes.Count); // Node.x/Node.y + Canvas size calculated (You can adjust programmatically as you see fit afterwards) CanvasDefinition Canvas = DiagramCanvasEngine.GenerateLayout( Nodes, Node.DEFAULT_NODE_HEIGHT / 2, CanvasDefinition.LayoutDirection.LeftToRight ); Console.WriteLine("Finished calculating layout"); GraphDisplayFormatSettings DisplaySettings = new GraphDisplayFormatSettings(); // You can override display font, fore/back color ...etc DisplaySettings.NodeHeaderSettings.ForeColorName = "Black"; DisplaySettings.NodeDetailSettings.ForeColorName = "Black"; IGraphRender Html5Render = new Html5GraphRender(); Html5Render.RenderGraph(Canvas, Nodes, DisplaySettings, "Flowchart.html"); Console.WriteLine("Finished render to HTML5"); return; }
public static void GenerateNodes( IList Nodes, int NumRootNodes, int MaxTreeDepth ) { Node RootNode; for (int i = 0; i < NumRootNodes; i++) { RootNode = new Node(); RootNode.NodeHeader = "Root_" + i; RootNode.NodeDetail = "Some detail ..."; Nodes.Add(RootNode); GenerateSingleGraph(Nodes, RootNode, MaxTreeDepth); } return; } public static void GenerateSingleGraph( IList Nodes, Node RootNode, int MaxTreeDepth ) { int CurrentDepth = 0; RecursiveGenerateGraph(Nodes, RootNode, MaxTreeDepth, ref CurrentDepth); return; } public static void RecursiveGenerateGraph( IList Nodes, Node Node, int MaxTreeDepth, ref int CurrentDepth ) { CurrentDepth++; Random rnd = new Random(DateTime.Now.Second); if (CurrentDepth < MaxTreeDepth) { int NumChildren = rnd.Next(5); for (int i = 0; i < NumChildren; i++) { Node Child = new Node(); Child.NodeHeader = Node.NodeHeader + "." + "Child_Level" + CurrentDepth + "_Num" + i; Child.NodeDetail = "Some detail ..."; Child.ParentNodes.Add(Node); Node.ChildNodes.Add(Child); Nodes.Add(Child); int CopyCurrentDepeth = CurrentDepth; RecursiveGenerateGraph(Nodes, Child, MaxTreeDepth, ref CopyCurrentDepeth); } } return; } } }

Happy Coding!

Next, SimpleFlowDiagramLib – LIBRARY TO SERIALIZE GRAPH TO XML (AND VICE VERSA) – https://gridwizard.wordpress.com/2015/03/31/simpleflowdiagramlib-simple-c-library-to-serialize-graph-to-xml-and-vice-versa

Simple Js to detect Credit Card type, and select CardType img accordingly

HTML

<img id=’MC’ src=’MC.png’ class=’cardimg’ /><img id=’VA’ src=’VA.png’ class=’cardimg’ /><img id=’DC’ src=’DC.png’ class=’cardimg’ /><img id=’JC’ src=’JC.png’ class=’cardimg’ /><img id=’AX’ src=’AX.png’ class=’cardimg’ />

<input type=’text’ id=’txtCardNumber’ onclick=’ShowHideCreditCardPanel2(this.value);’ />

 

Javascript (Uses JQuery to enumerate of list of card type images)

function selectCardImg(cardNumber)
{

         // STEP 1. detect card type
         var cardType = detectCreditCardType(cardNumber);

 

         // STEP 2. select appropriate card type image

$(‘.cardimg’).each(function (index, value) {
   var Id = $(this).attr(‘id’);
   $(this).removeClass(‘cardimg-selected’);
   if(Id==cardType)
      {
          $(this).addClass(‘cardimg-selected’);
      }
   }
)
}

function detectCreditCardType(cardNumber)
{
   var cardType = “”;

   if (/^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/.test(cardNumber))
   {
      cardType = “MC”;
   }
   else if (/^3[0,6,8]\d{12}$/.test(cardNumber))
   {
      cardType = “DC”;
   }
   else if (/^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/.test(cardNumber))
   {
      cardType = “VA”;
   }
   else if (/(^(352)[8-9](\d{11}$|\d{12}$))|(^(35)[3-8](\d{12}$|\d{13}$))/.test(cardNumber))
   {
      cardType = “JC”;
   }
   else if (/^3[4,7]\d{13}$/.test(cardNumber))
   {
      cardType = “AX”;
   }

      return cardType ;
   }

 

Reference: http://blogs.markglibres.com/2010/10/c-get-credit-card-type.html

HTML Checkbox grouping

Simple code snippet – adapted from http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group

<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script&gt;
<script type=”text/javascript”>
$(document).ready(function () {
$(“input:checkbox”).click(function() {
     if ($(this).is(“:checked”)) {
          var group = “input:checkbox[name='” + $(this).attr(“name”) + “‘]”;
          $(group).prop(“checked”, false);
          $(this).prop(“checked”, true);
     } else {
          $(this).prop(“checked”, false);
     }
     });
});
</script>
</head>
<body>
<form>
     <input type=”checkbox” class=”radio” value=”Red” name=”group1” />
     <input type=”checkbox” class=”radio” value=”Blue” name=”group1″ />
     <input type=”checkbox” class=”radio” value=”Yellow” name=”group1″ />
     <p>&nbsp;</p>
     <input type=”checkbox” class=”radio” value=”Dog” name=”group2” />
     <input type=”checkbox” class=”radio” value=”Cat” name=”group2″ />
     <input type=”checkbox” class=”radio” value=”Bird” name=”group2″ />
</form>
</body>
</html>