Module: HDLRuby::Viz

Defined in:

lib/HDLRuby/hruby_viz.rb

Defined Under Namespace

Classes: IC, Node, Port

Constant Summary

LEFT =

Directions/sides encoding: left=1, up=2, right=4, down=8, blocked=16

1

UP =

2

RIGHT =

4

DOWN =

8

BLOCKED =

16

Class Method Summary

• .closing_svg(name, side, xpos, ypos, visibility = "hidden") ⇒ Object

  Generate a closing button symbol.

• .header_svg(name, x0, y0, width, height) ⇒ Object

  Generate the svg header, global control scripts and helping panel.

• .help_svg(x0, y0, width, height) ⇒ Object

  Generate the help panel and its handling.

• .reg2input_name(name) ⇒ Object

  Generate an input register name from +name+.

• .reg2output_name(name) ⇒ Object

  Generate an output register name from +name+.

• .svg_text_fit(name, width, max_size) ⇒ Object

  Generate a script for resizing a font to fit +width+ for text object +name+, with max font size +max_size+ px.

• .to_svg_id(name) ⇒ Object

  Converts to a SVG-compatible id.

• .to_svg_text(name) ⇒ Object

  Converts to a SVG-compatible text.

Class Method Details

.closing_svg(name, side, xpos, ypos, visibility = "hidden") ⇒ Object

Generate a closing button symbol. (Invisible by default, if "" is given as visibilty, not set here.

# File 'lib/HDLRuby/hruby_viz.rb', line 4082

def self.closing_svg(name,side,xpos,ypos,visibility="hidden")
  # The rectangle of the button.
  if visibility.empty? then
    res  = "<g id=\"#{name}\" >\n"
  else
    res  = "<g id=\"#{name}\" visibility=\"#{visibility}\">\n"
  end
  res += "<rect fill=\"#cd5c5c\" "+
    "stroke=\"#000\" stroke-width=\"#{side/8.0}\" " +
    "x=\"#{xpos}\" y=\"#{ypos}\" " +
    "width=\"#{side}\" height=\"#{side}\" />\n"
  # The cross lines.
  res += "<line stroke=\"#000\" stroke-width=\"#{side/8.0}\" " +
    "stroke-linecap=\"butt\" " +
    "x1=\"#{xpos}\" y1=\"#{ypos}\" " +
    "x2=\"#{xpos+side}\" y2=\"#{ypos+side}\" " +
    " />\n"
  res += "<line stroke=\"#000\" stroke-width=\"#{side/8.0}\" " +
    "stroke-linecap=\"butt\" " +
    "x1=\"#{xpos+side}\" y1=\"#{ypos}\" " +
    "x2=\"#{xpos}\" y2=\"#{ypos+side}\" " +
    " />\n"
  res += "</g>"
end

.header_svg(name, x0, y0, width, height) ⇒ Object

Generate the svg header, global control scripts and helping panel.

# File 'lib/HDLRuby/hruby_viz.rb', line 3989

def self.header_svg(name,x0,y0,width,height)
  return "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \n        \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n<svg id=\"svg:\#{name}\" width=\"100%\" height=\"100%\" \n   viewBox=\"\#{x0} \#{y0} \#{width} \#{height}\" \n   xmlns=\"http://www.w3.org/2000/svg\"\n   xmlns:xlink=\"http://www.w3.org/1999/xlink\" >\n\n<script>\nconst diagram = document.getElementById('svg:\#{name}');\nconst zoom = 1.0;\nconst deltaR = 100.0;\nlet x0 = \#{x0};\nlet y0 = \#{y0};\nlet width = \#{width};\nlet height = \#{height};\ndiagram.setAttribute('viewBox', `${x0} ${y0} ${width} ${height}`);\n\n// Create an SVGPoint for conputing the location in the diagram\nlet pt = diagram.createSVGPoint();\n\n// Get the location of the cursor in the diagram.\nfunction cursorPoint(e){\npt.x = e.clientX; pt.y = e.clientY;\nreturn pt.matrixTransform(diagram.getScreenCTM().inverse());\n}\n\n// Zooming function.\ndiagram.addEventListener(\"wheel\", (e) => {\n  let factor = 1.0 / (zoom * Math.exp(e.deltaY/deltaR))\n  let loc = cursorPoint(e);\n  x0 = x0 * factor;\n  y0 = y0 * factor;\n  width = width * factor;\n  height = height * factor;\n  let dx = (-loc.x) * (factor-1);\n  let dy = (-loc.y) * (factor-1);\n  x0 += dx;\n  y0 += dy;\n  diagram.setAttribute('viewBox', `${x0} ${y0} ${width} ${height}`);\n});\n\n// Moving function.\nlet isMoving = false;\nlet prevLoc;\n\ndiagram.addEventListener(\"mousedown\", (e) => {\n  prevLoc = cursorPoint(e);\n  isMoving = true;\n});\n\ndiagram.addEventListener(\"mouseup\", (e) => {\n  isMoving = false;\n});\n\ndiagram.addEventListener(\"mousemove\", (e) => {\n  if (isMoving) {\n      let loc = cursorPoint(e);\n      let dx = prevLoc.x-loc.x;\n      let dy = prevLoc.y-loc.y;\n      x0 += dx;\n      y0 += dy;\n      diagram.setAttribute('viewBox', `${x0} ${y0} ${width} ${height}`);\n  }\n});\n\ndiagram.addEventListener(\"keydown\", (e) => {\n  switch(e.key) {\n      case 'ArrowLeft':\n          x0 -= width/100.0;\n          break;\n      case 'ArrowUp':\n          y0 -= width/100.0;\n          break;\n      case 'ArrowRight':\n          x0 += width/100.0;\n          break;\n      case 'ArrowDown':\n          y0 += width/100.0;\n          break;\n  }\n  diagram.setAttribute('viewBox', `${x0} ${y0} ${width} ${height}`);\n});\n\n</script>\n\n"
end

.help_svg(x0, y0, width, height) ⇒ Object

Generate the help panel and its handling.

# File 'lib/HDLRuby/hruby_viz.rb', line 4108

def self.help_svg(x0,y0,width,height)
  # Compute the fit factor.
  fit = 1024.0/[width,height].min
  return "// Helping button.\n<g id=\"$help$_open\">\n<rect fill=\"yellow\" stroke=\"#000\" stroke-width=\"3\"\n x=\"\#{x0+width-62/fit}\" y=\"\#{y0+2/fit}\" width=\"\#{60/fit}\" height=\"\#{30/fit}\" />\n<text style=\"text-anchor: middle; dominant-baseline: middle;\" \n      font-family=\"monospace\" font-size=\"\#{20/fit}px\"\n      x=\"\#{x0+width-32/fit}\" y=\"\#{y0+17/fit}\" >\n  Help\n</text>\n</g>\n\n// Helping panel.\n<g id=\"$help$\" visibility=\"hidden\">\n<rect fill=\"#ffffd7\" stroke=\"#000\" stroke-width=\"6\"\n x=\"\#{x0}\" y=\"\#{y0}\" width=\"\#{width}\" height=\"\#{height}\" />\n <text font-size=\"\#{40/fit}px\" font-family=\"serif\" font-weight=\"bold\"\n  x=\"\#{x0+width/2}\" y=\"\#{y0+40/fit}\" >\n  Help\n </text>\n\n <text font-size=\"\#{30/fit}px\" font-family=\"serif\" font-weight=\"bold\"\n  x=\"\#{x0+15/fit}\" y=\"\#{y0+100/fit}\" >\n Navigation:\n </text>\n <text font-size=\"\#{25/fit}px\" font-family=\"serif\" x=\"\#{x0+25/fit}\" y=\"\#{y0+140/fit}\" >\n Zoom in/out:\n </text>\n <text font-size=\"\#{25/fit}px\" font-family=\"serif\" x=\"\#{x0+190/fit}\" y=\"\#{y0+140/fit}\" >\n mouse wheel.\n </text>\n <text font-size=\"\#{25/fit}px\" font-family=\"serif\" x=\"\#{x0+25/fit}\" y=\"\#{y0+170/fit}\" >\n Move diagram:\n </text>\n <text font-size=\"\#{25/fit}px\" font-family=\"serif\" x=\"\#{x0+190/fit}\" y=\"\#{y0+170/fit}\" >\n left click and drag, or arrow keys.\n </text>\n <text font-size=\"\#{25/fit}px\" font-family=\"serif\" x=\"\#{x0+25/fit}\" y=\"\#{y0+200/fit}\" >\n Open element:\n </text>\n <text font-size=\"\#{25/fit}px\" font-family=\"serif\" x=\"\#{x0+190/fit}\" y=\"\#{y0+200/fit}\" >\n left click on element.\n </text>\n <text font-size=\"\#{25/fit}px\" font-family=\"serif\" x=\"\#{x0+25/fit}\" y=\"\#{y0+230/fit}\" >\n Close element:\n </text>\n <text font-size=\"\#{25/fit}px\" font-family=\"serif\" x=\"\#{x0+190/fit}\" y=\"\#{y0+230/fit}\" >\n left click on the close button at the top right of the element.\n </text>\n\n <text font-size=\"\#{30/fit}px\" font-family=\"serif\" font-weight=\"bold\"\n  x=\"\#{x0+15/fit}\" y=\"\#{y0+300/fit}\" >\n Types of elements:\n </text>\n \#{\n # ic = IC.new(\"Instance\",:instance)\n # ic.scale = 35.0\n # ic.xpos = (x0+15/fit) / ic.scale\n # ic.ypos = 330/fit / ic.scale\n # ic.width = 300/fit / ic.scale\n # ic.height = 100/fit / ic.scale\n # ic.instance_svg(ic)\n ic = IC.new(\"Instance\",:instance)\n ic.scale = 35.0/fit\n ic.xpos = (x0+15)/fit / ic.scale\n ic.ypos = 330/fit / ic.scale\n ic.width = 300/fit / ic.scale\n ic.height = 100/fit / ic.scale\n ic.instance_svg(ic)\n }\n \#{\n # ic = IC.new(\"Continuous assignment\",:alu)\n # ic.scale = 35.0\n # ic.xpos = (x0+(15+300+15)/fit) / ic.scale\n # ic.ypos = 305/fit / ic.scale\n # ic.width = 300/fit / ic.scale\n # ic.height = 150/fit / ic.scale\n # p0 = Port.new(\"in0\",ic,:input)\n # p0.side = LEFT\n # ic.ports << p0\n # p1 = Port.new(\"in1\",ic,:input)\n # p1.side = LEFT\n # ic.ports << p1\n # p2 = Port.new(\"out\",ic,:output)\n # p2.side = RIGHT\n # ic.alu_svg(ic)\n # ic.ports << p2\n # ic.alu_svg(ic)\n ic = IC.new(\"Continuous assignment\",:alu)\n ic.scale = 35.0/fit\n ic.xpos = (x0+(15+300+15))/fit / ic.scale\n ic.ypos = 305/fit / ic.scale\n ic.width = 300/fit / ic.scale\n ic.height = 150/fit / ic.scale\n p0 = Port.new(\"in0\",ic,:input)\n p0.side = LEFT\n ic.ports << p0\n p1 = Port.new(\"in1\",ic,:input)\n p1.side = LEFT\n ic.ports << p1\n p2 = Port.new(\"out\",ic,:output)\n p2.side = RIGHT\n ic.alu_svg(ic)\n ic.ports << p2\n ic.alu_svg(ic)\n }\n \#{\n # ic = IC.new(\"Combinatorial process\",:process)\n # ic.scale = 35.0\n # ic.xpos = (x0+15/fit) / ic.scale\n # ic.ypos = 480/fit / ic.scale\n # ic.width = 300/fit / ic.scale\n # ic.height = 100/fit / ic.scale\n # ic.process_svg(ic)\n ic = IC.new(\"Combinatorial process\",:process)\n ic.scale = 35.0/fit\n ic.xpos = (x0+15)/fit / ic.scale\n ic.ypos = 480/fit / ic.scale\n ic.width = 300/fit / ic.scale\n ic.height = 100/fit / ic.scale\n ic.process_svg(ic)\n }\n \#{\n # ic = IC.new(\"Clocked process\",:clocked_process)\n # ic.scale = 35.0\n # ic.xpos = (x0+(15+300+15)/fit) / ic.scale\n # ic.ypos = 480/fit / ic.scale\n # ic.width = 300/fit / ic.scale\n # ic.height = 100/fit / ic.scale\n # ic.clocked_process_svg(ic)\n ic = IC.new(\"Clocked process\",:clocked_process)\n ic.scale = 35.0/fit\n ic.xpos = (x0+(15+300+15))/fit / ic.scale\n ic.ypos = 480/fit / ic.scale\n ic.width = 300/fit / ic.scale\n ic.height = 100/fit / ic.scale\n ic.clocked_process_svg(ic)\n }\n \#{\n # ic = IC.new(\"Time process\",:timed_process)\n # ic.scale = 35.0\n # ic.xpos = (x0+(15+300+15+300+15)/fit) / ic.scale\n # ic.ypos = 480/fit / ic.scale\n # ic.width = 300/fit / ic.scale\n # ic.height = 100/fit / ic.scale\n # ic.timed_process_svg(ic)\n ic = IC.new(\"Time process\",:timed_process)\n ic.scale = 35.0/fit\n ic.xpos = (x0+(15+300+15+300+15))/fit / ic.scale\n ic.ypos = 480/fit / ic.scale\n ic.width = 300/fit / ic.scale\n ic.height = 100/fit / ic.scale\n ic.timed_process_svg(ic)\n }\n \#{\n # ic = IC.new(\"Signal\",:register)\n # ic.scale = 35.0\n # ic.xpos = (x0+15/fit) / ic.scale\n # ic.ypos = 600/fit / ic.scale\n # ic.width = 150/fit / ic.scale\n # ic.height = 75/fit / ic.scale\n # ic.register_svg(ic)\n ic = IC.new(\"Signal\",:register)\n ic.scale = 35.0/fit\n ic.xpos = (x0+15)/fit / ic.scale\n ic.ypos = 600/fit / ic.scale\n ic.width = 150/fit / ic.scale\n ic.height = 75/fit / ic.scale\n ic.register_svg(ic)\n }\n \#{\n # ic = IC.new(\"Memory\",:memory)\n # ic.scale = 35.0\n # ic.xpos = (x0+(15+200+15)/fit) / ic.scale\n # ic.ypos = 600/fit / ic.scale\n # ic.width = 200/fit / ic.scale\n # ic.height = 100/fit / ic.scale\n # ic.memory_svg(ic)\n ic = IC.new(\"Memory\",:memory)\n ic.scale = 35.0/fit\n ic.xpos = (x0+(15+200+15))/fit / ic.scale\n ic.ypos = 600/fit / ic.scale\n ic.width = 200/fit / ic.scale\n ic.height = 100/fit / ic.scale\n ic.memory_svg(ic)\n }\n\n <text font-size=\"\#{30/fit}px\" font-family=\"serif\" font-weight=\"bold\"\n  x=\"\#{x0+15/fit}\" y=\"\#{y0+800/fit}\" >\n Contents of processes and assigments:\n </text>\n <text font-size=\"\#{25/fit}px\" font-family=\"serif\" x=\"\#{x0+25/fit}\" y=\"\#{y0+840/fit}\" >\n Represented as sets of parallel flow charts.\n </text>\n\n // Closing button for the helping panel.\n \#{Viz.closing_svg(\"$help$_close\",20/fit,width-20/fit,0,\"\")}\n</g>\n\n// Control of the helping panel.\n<script>\ndiagram.getElementById('$help$_open').addEventListener(\"click\", (e) => {\n  // For the element.\n  let elem = diagram.getElementById('$help$');\n  elem.setAttribute('visibility','visible');\n});\ndiagram.getElementById('$help$_close').addEventListener(\"click\", (e) => {\n  // For the element.\n  let elem = diagram.getElementById('$help$');\n  elem.setAttribute('visibility','hidden');\n});\n</script>\n\n"
end

.reg2input_name(name) ⇒ Object

Generate an input register name from +name+

# File 'lib/HDLRuby/hruby_viz.rb', line 3978

def self.reg2input_name(name)
  return name + "$I"
end

.reg2output_name(name) ⇒ Object

Generate an output register name from +name+

# File 'lib/HDLRuby/hruby_viz.rb', line 3983

def self.reg2output_name(name)
  return name + "$O"
end

.svg_text_fit(name, width, max_size) ⇒ Object

Generate a script for resizing a font to fit +width+ for text object +name+, with max font size +max_size+ px.

# File 'lib/HDLRuby/hruby_viz.rb', line 4329

def self.svg_text_fit(name,width,max_size)
  return "<script> \n  fitWidth=\#{width};\n  textNode = document.getElementById(\"\#{self.to_svg_id(name)}\");\n  textBB = textNode.getBBox();\n  fitSize = fitWidth / textBB.width;\n  if (fitSize > \#{max_size}) fitSize = \#{max_size};\n  textNode.setAttribute(\"font-size\", fitSize + \"px\")\n </script>\n"
end

.to_svg_id(name) ⇒ Object

Converts to a SVG-compatible id.

# File 'lib/HDLRuby/hruby_viz.rb', line 3973

def self.to_svg_id(name)
  return name.gsub(/ /,"")
end

.to_svg_text(name) ⇒ Object

Converts to a SVG-compatible text.

# File 'lib/HDLRuby/hruby_viz.rb', line 3968

def self.to_svg_text(name)
  return name.gsub(/&/,"&amp;").gsub(/</,"&lt;").gsub(/-@/,"-").gsub(/\+@/,"+")
end