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.

• .port_base_name(name) ⇒ Object

  Get the base name of the port.

• .port_bit_name(name) ⇒ Object

  Get the bit part of the port name if any.

• .port_bit_name?(name) ⇒ Boolean

  Tell if a port name is for a sub port.

• .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 4393

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).round(3)}\" " +
    "x=\"#{xpos.round(3)}\" y=\"#{ypos.round(3)}\" " +
    "width=\"#{side.round(3)}\" height=\"#{side.round(3)}\" />\n"
  # The cross lines.
  res += "<line stroke=\"#000\" stroke-width=\"#{(side/8.0).round(3)}\" " +
    "stroke-linecap=\"butt\" " +
    "x1=\"#{xpos.round(3)}\" y1=\"#{ypos.round(3)}\" " +
    "x2=\"#{(xpos+side).round(3)}\" y2=\"#{(ypos+side).round(3)}\" " +
    " />\n"
  res += "<line stroke=\"#000\" stroke-width=\"#{(side/8.0).round(3)}\" " +
    "stroke-linecap=\"butt\" " +
    "x1=\"#{(xpos+side).round(3)}\" y1=\"#{ypos.round(3)}\" " +
    "x2=\"#{xpos.round(3)}\" y2=\"#{(ypos+side).round(3)}\" " +
    " />\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 4300

def self.header_svg(name,x0,y0,width,height)
  return <<~SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg:#{name}" width="100%" height="100%" 
   viewBox="#{x0} #{y0} #{width} #{height}" 
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink" >

<script>
const diagram = document.getElementById('svg:#{name}');
const zoom = 1.0;
const deltaR = 100.0;
let x0 = #{x0};
let y0 = #{y0};
let width = #{width};
let height = #{height};
diagram.setAttribute('viewBox', `${x0} ${y0} ${width} ${height}`);

// Create an SVGPoint for conputing the location in the diagram
let pt = diagram.createSVGPoint();

// Get the location of the cursor in the diagram.
function cursorPoint(e){
pt.x = e.clientX; pt.y = e.clientY;
return pt.matrixTransform(diagram.getScreenCTM().inverse());
}

// Zooming function.
diagram.addEventListener("wheel", (e) => {
  let factor = 1.0 / (zoom * Math.exp(e.deltaY/deltaR))
  let loc = cursorPoint(e);
  x0 = x0 * factor;
  y0 = y0 * factor;
  width = width * factor;
  height = height * factor;
  let dx = (-loc.x) * (factor-1);
  let dy = (-loc.y) * (factor-1);
  x0 += dx;
  y0 += dy;
  diagram.setAttribute('viewBox', `${x0} ${y0} ${width} ${height}`);
});

// Moving function.
let isMoving = false;
let prevLoc;

diagram.addEventListener("mousedown", (e) => {
  prevLoc = cursorPoint(e);
  isMoving = true;
});

diagram.addEventListener("mouseup", (e) => {
  isMoving = false;
});

diagram.addEventListener("mousemove", (e) => {
  if (isMoving) {
      let loc = cursorPoint(e);
      let dx = prevLoc.x-loc.x;
      let dy = prevLoc.y-loc.y;
      x0 += dx;
      y0 += dy;
      diagram.setAttribute('viewBox', `${x0} ${y0} ${width} ${height}`);
  }
});

diagram.addEventListener("keydown", (e) => {
  switch(e.key) {
      case 'ArrowLeft':
          x0 -= width/100.0;
          break;
      case 'ArrowUp':
          y0 -= width/100.0;
          break;
      case 'ArrowRight':
          x0 += width/100.0;
          break;
      case 'ArrowDown':
          y0 += width/100.0;
          break;
  }
  diagram.setAttribute('viewBox', `${x0} ${y0} ${width} ${height}`);
});

</script>

SVG
end

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

Generate the help panel and its handling.

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

def self.help_svg(x0,y0,width,height)
  # Compute the fit factor.
  fit = 1024.0/[width,height].min
  return <<~SVG
// Helping button.
<g id="$help$_open">
<rect fill="yellow" stroke="#000" stroke-width="3"
 x="#{(x0+width-62/fit).round(3)}" y="#{(y0+2/fit).round(3)}" width="#{(60/fit).round(3)}" height="#{(30/fit).round(3)}" />
<text style="text-anchor: middle; dominant-baseline: middle;" 
      font-family="monospace" font-size="#{(20/fit).round(3)}px"
      x="#{(x0+width-32/fit).round(3)}" y="#{(y0+17/fit).round(3)}" >
  Help
</text>
</g>

// Helping panel.
<g id="$help$" visibility="hidden">
<rect fill="#ffffd7" stroke="#000" stroke-width="6"
 x="#{x0.round(3)}" y="#{y0.round(3)}" width="#{width.round(3)}" height="#{height.round(3)}" />
 <text font-size="#{(40/fit).round(3)}px" font-family="serif" font-weight="bold"
  x="#{(x0+width/2).round(3)}" y="#{(y0+40/fit).round(3)}" >
  Help
 </text>

 <text font-size="#{(30/fit).round(3)}px" font-family="serif" font-weight="bold"
  x="#{(x0+15/fit).round(3)}" y="#{(y0+100/fit).round(3)}" >
 Navigation:
 </text>
 <text font-size="#{(25/fit).round(3)}px" font-family="serif" x="#{(x0+25/fit).round(3)}" y="#{(y0+140/fit).round(3)}" >
 Zoom in/out:
 </text>
 <text font-size="#{(25/fit).round(3)}px" font-family="serif" x="#{(x0+190/fit).round(3)}" y="#{(y0+140/fit).round(3)}" >
 mouse wheel.
 </text>
 <text font-size="#{(25/fit).round(3)}px" font-family="serif" x="#{(x0+25/fit).round(3)}" y="#{(y0+170/fit).round(3)}" >
 Move diagram:
 </text>
 <text font-size="#{(25/fit).round(3)}px" font-family="serif" x="#{(x0+190/fit).round(3)}" y="#{(y0+170/fit).round(3)}" >
 left click and drag, or arrow keys.
 </text>
 <text font-size="#{(25/fit).round(3)}px" font-family="serif" x="#{(x0+25/fit).round(3)}" y="#{(y0+200/fit).round(3)}" >
 Open element:
 </text>
 <text font-size="#{(25/fit).round(3)}px" font-family="serif" x="#{(x0+190/fit).round(3)}" y="#{(y0+200/fit).round(3)}" >
 left click on element.
 </text>
 <text font-size="#{(25/fit).round(3)}px" font-family="serif" x="#{(x0+25/fit).round(3)}" y="#{(y0+230/fit).round(3)}" >
 Close element:
 </text>
 <text font-size="#{(25/fit).round(3)}px" font-family="serif" x="#{(x0+190/fit).round(3)}" y="#{(y0+230/fit).round(3)}" >
 left click on the close button at the top right of the element.
 </text>

 <text font-size="#{(30/fit).round(3)}px" font-family="serif" font-weight="bold"
  x="#{(x0+15/fit).round(3)}" y="#{(y0+300/fit).round(3)}" >
 Types of elements:
 </text>
 #{
 ic = IC.new("Instance",:instance)
 ic.scale = 35.0/fit
 ic.xpos = (x0+15)/fit / ic.scale
 ic.ypos = 330/fit / ic.scale
 ic.width = 300/fit / ic.scale
 ic.height = 100/fit / ic.scale
 ic.instance_svg(ic)
 }
 #{
 ic = IC.new("Continuous assignment",:alu)
 ic.scale = 35.0/fit
 ic.xpos = (x0+(15+300+15))/fit / ic.scale
 ic.ypos = 305/fit / ic.scale
 ic.width = 300/fit / ic.scale
 ic.height = 150/fit / ic.scale
 p0 = Port.new("in0",ic,:input)
 p0.side = LEFT
 ic.ports << p0
 p1 = Port.new("in1",ic,:input)
 p1.side = LEFT
 ic.ports << p1
 p2 = Port.new("out",ic,:output)
 p2.side = RIGHT
 ic.alu_svg(ic)
 ic.ports << p2
 ic.alu_svg(ic)
 }
 #{
 ic = IC.new("Combinatorial process",:process)
 ic.scale = 35.0/fit
 ic.xpos = (x0+15)/fit / ic.scale
 ic.ypos = 480/fit / ic.scale
 ic.width = 300/fit / ic.scale
 ic.height = 100/fit / ic.scale
 ic.process_svg(ic)
 }
 #{
 ic = IC.new("Clocked process",:clocked_process)
 ic.scale = 35.0/fit
 ic.xpos = (x0+(15+300+15))/fit / ic.scale
 ic.ypos = 480/fit / ic.scale
 ic.width = 300/fit / ic.scale
 ic.height = 100/fit / ic.scale
 ic.clocked_process_svg(ic)
 }
 #{
 ic = IC.new("Time process",:timed_process)
 ic.scale = 35.0/fit
 ic.xpos = (x0+(15+300+15+300+15))/fit / ic.scale
 ic.ypos = 480/fit / ic.scale
 ic.width = 300/fit / ic.scale
 ic.height = 100/fit / ic.scale
 ic.timed_process_svg(ic)
 }
 #{
 ic = IC.new("Signal",:register)
 ic.scale = 35.0/fit
 ic.xpos = (x0+15)/fit / ic.scale
 ic.ypos = 600/fit / ic.scale
 ic.width = 150/fit / ic.scale
 ic.height = 75/fit / ic.scale
 ic.register_svg(ic)
 }
 #{
 ic = IC.new("Memory",:memory)
 ic.scale = 35.0/fit
 ic.xpos = (x0+(15+200+15))/fit / ic.scale
 ic.ypos = 600/fit / ic.scale
 ic.width = 200/fit / ic.scale
 ic.height = 100/fit / ic.scale
 ic.memory_svg(ic)
 }

 <text font-size="#{(30/fit).round(3)}px" font-family="serif" font-weight="bold"
  x="#{(x0+15/fit).round(3)}" y="#{(y0+800/fit).round(3)}" >
 Contents of processes and assigments:
 </text>
 <text font-size="#{(25/fit).round(3)}px" font-family="serif" x="#{(x0+25/fit).round(3)}" y="#{(y0+840/fit).round(3)}" >
 Represented as sets of parallel flow charts.
 </text>

 // Closing button for the helping panel.
 #{Viz.closing_svg("$help$_close",20/fit,width-20/fit,0,"")}
</g>

// Control of the helping panel.
<script>
diagram.getElementById('$help$_open').addEventListener("click", (e) => {
  // For the element.
  let elem = diagram.getElementById('$help$');
  elem.setAttribute('visibility','visible');
});
diagram.getElementById('$help$_close').addEventListener("click", (e) => {
  // For the element.
  let elem = diagram.getElementById('$help$');
  elem.setAttribute('visibility','hidden');
});
</script>

SVG
end

.port_base_name(name) ⇒ Object

Get the base name of the port.

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

def self.port_base_name(name)
  return name.sub(/\[.*\]\z/,"")
end

.port_bit_name(name) ⇒ Object

Get the bit part of the port name if any.

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

def self.port_bit_name(name)
  return name.match(/\[.*\]\z/)[0]
end

.port_bit_name?(name) ⇒ Boolean

Tell if a port name is for a sub port.

Returns:

• (Boolean)

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

def self.port_bit_name?(name)
  return name =~ /\[.*\]\z/
end

.reg2input_name(name) ⇒ Object

Generate an input register name from name

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

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 4294

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 4581

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

.to_svg_id(name) ⇒ Object

Converts to a SVG-compatible id.

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

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 4279

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