NodeViewVectorDraw

_.md

[ Launch: coffee_templatefux ] ab7d5243e84885fe7131 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6399870 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6382272 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6382237 by zeffii
[ Launch: boomstick_motion_wcolor_coffee ] 6379220 by zeffii
[ Launch: boomstick_motion_wcolor ] 6376715 by zeffii
[ Launch: boomstick_motion2 ] 6365156 by zeffii
[ Launch: boomstick_motion ] 6364686 by zeffii
[ Launch: boomstick ] 6364584 by zeffii
[ Launch: zeffii default ] 6364028 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"NodeViewVectorDraw","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data2.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"util.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"injet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"utils.coffee":{"default":true,"vim":false,"emacs":false,"fontSize":12},"details.ssv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"details.txt":{"default":true,"vim":false,"emacs":false,"fontSize":12},"details.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/rUN41qB.png","ajax-caching":false,"inline-console":true}

inlet.coffee

svg = d3.select("svg")
svg.append("rect").attr({width:"100%", height:"100%", fill: '#c6c6c6'})
  
  
group1 = svg.append('g')
  .classed('group1', true)
  .attr
    transform: 'translate(' + [172, 65] + ')'

theme =
  rx: 10
  ry: 10
  col_body: '#f7f7f7'
  col_header: '#e5e7e3'
  col_head_text: '#343'
  col_main_dividers: '#686868'
  row_height: 20
  VerticesSocket: '#e79b78'
  StringsSocket: '#94e372'
  Socket_radius: 8
  slider_bg: '#222'
  slider_text_color: '#eee'
  socket_label_color: '#565656'
  lr_padding: 32
  slider_nudge_color: '#fff'
  slider_nudge_trangle_height: 10

node_dict =
  width: 185
  name: 'Circle'
  outputs: [
    {name:'Vertices', default:'', typed:'VerticesSocket'}
    {name:'Edges', default:'', typed:'StringsSocket'}
    {name:'Polygons', default:'', typed:'StringsSocket'}
    ]
  params: [
    {name:'Mode', default:'true', typed:'bool'}
    ]
  inputs: [
    {name:'Radius', default:'1.00', typed:'StringsSocket'}
    {name:'N Vertices', default:'24', typed:'StringsSocket'}
    {name:'Degrees', default:'360º', typed:'StringsSocket'}
    ]

  
node_vis_defaults =
  header_y_fill: 18
  slider_height: theme.row_height * 0.92

  # some aliases
style_header = 
  fill: theme.col_header
  stroke: theme.col_main_dividers
  'stroke-width': 1
  
style_body = 
  fill: theme.col_body
  stroke: theme.col_main_dividers
  'stroke-width': 1
  
style_socket =
  stroke: theme.col_main_dividers
  'stroke-width': 1


# additional parsing should happen, params might be complicated for certain nodes.
# think of boxes in layouts..
num_rows = (node_dict.outputs.length) + (node_dict.inputs.length)
  
# top header
draw_node = (node_dict) ->
    
    h = body_height = num_rows * theme.row_height
    fillet = theme.ry

	half_rounded_rect = (x, y, dir, h, w, f, sw) ->
      'M ' + [0,y] +
      'l ' + [0, h*dir] +
      'a ' + [f, f, 0, 0, sw, f,(f*dir)] +
      'l ' + [w - (2*f), 0] +
      'a ' + [f, f, 0, 0, sw, f,(-f*dir)] +
      'l ' + [0, -h*dir] + 
      'z'

    ''' header '''

    group1.append('path').classed('node-header', true)
      .attr
        d: () ->
          f = theme.ry
          w = node_dict.width
          h = node_vis_defaults.header_y_fill
          y = f + h
          half_rounded_rect(0, y, -1, h, w, f, 1)
      .style style_header
    
    group1.append('path').classed('node-header-min', true)
      .attr
        d: () ->
          l = theme.lr_padding/2/2 # horizontal offset
          u = -2 # vertical offset
          dim = 12 # triangle dimension
          dim2 = dim/2
          'M ' + [l, dim+u] + 'l ' + [dim, 0, -dim2, dim] + 
          'z'
          
    group1.append('text').classed('node-header-text', true)
       .text(node_dict.name)
       .attr
          x: theme.lr_padding
          y: 20
    
    ''' body '''

    group1.append('path').classed('node-body', true)
      .attr 
        d: () ->
          f = theme.ry
          w = node_dict.width
          h = num_rows * theme.row_height + (1.7*theme.ry)
          y = f + node_vis_defaults.header_y_fill
          half_rounded_rect(0, y, 1, h, w, f, 0)
      .style style_body

    draw_sockets = (sockets, xpos, ypos) ->

      ratio = 0.828
      r = theme.Socket_radius
      for socket, idx in sockets
        this_style_socket = style_socket
        this_style_socket.fill = theme[socket.typed]
        
        sheight = node_vis_defaults.slider_height
        y = ypos + (theme.row_height *idx) + (1.5*r)
        
        group1.append('circle').classed('socket-in', true)
          .attr
            r: r
            cy: y
            cx: xpos
          .style this_style_socket

        xloc = theme.lr_padding/2
        

        if mode == 'outputs'
          group1.append('text')
            .text(socket.name)
            .attr
              x: node_dict.width - (theme.lr_padding/2)
              y: y + theme.Socket_radius - 2
              'text-anchor': 'end'
              'font-size': sheight * 0.6
              fill: theme.socket_label_color

        if (mode == 'inputs') and (socket.default)
          ''' slider background '''
          group1.append('rect')
            .attr
              rx: 8
              ry: 8
              width: (node_dict.width - theme.lr_padding)
              height: sheight
              x: xloc
              y: y - 8
            .style
              fill: '#333'
              stroke: '#555'

          """ rawr """
          group1.append('path')
            .attr
              d: () ->
                self_xpos = theme.lr_padding/2
                a = theme.slider_nudge_trangle_height
                b = a/2
                
                x1 = self_xpos + 2
                x2 = node_dict.width - x1
                path = 'M ' + [x1, b] + 'l' + [a, -b, 0, a] + 'z'
                path += 'M ' + [x2, b] + 'l' + [-a, -b, 0, a] + 'z'
                path
                
              transform: () ->
                self_ypos = y - (theme.slider_nudge_trangle_height/2)
                'translate(' + [0, self_ypos] + ')'
            .style
              fill: '#aaaaaa'
              stroke: '#111'
          
          '''label '''
          group1.append('text')
            .text(socket.name)
            .attr
              x: theme.lr_padding
              y: y + theme.Socket_radius - 2
              'text-anchor': 'left'
              'font-size': sheight * 0.6
              fill: theme.slider_text_color

          '''value display '''
          group1.append('text')
            .text(socket.default)
            .attr
              x: node_dict.width - theme.lr_padding
              y: y + theme.Socket_radius - 2
              'text-anchor': 'end'
              'font-size': sheight * 0.6
              fill: theme.slider_text_color

          
          
          
    ''' output sockets '''
    mode = 'outputs'
    ypos = theme.ry + node_vis_defaults.header_y_fill      
    xpos = node_dict.width
    draw_sockets(node_dict.outputs, xpos, ypos)

    ''' internal body params '''
    body_size_between_sockets = 
       sockets = (theme.row_height * (node_dict.params.length + node_dict.outputs.length))
    
    # special parsing would happen here
    for item, idx in node_dict.params
      if item.typed == 'bool'   #  if 'box'..
        group1.append('text')
          .text(item.name)
          .attr
            y: theme.row_height * (idx + node_dict.outputs.length) + 44
            x: theme.lr_padding
            'font-size': theme.row_height*0.6
        group1.append('rect')
          .attr
            rx:3, ry:3, height: 11, width: 11,
            x: theme.lr_padding/2
            y: theme.row_height * (idx + node_dict.outputs.length) + 34
          .style
            fill: '#ddd'
            stroke: '#333'
            
            

    '''output sockets '''
    mode = 'inputs'
    xpos = node_dict.width
    draw_sockets(node_dict.inputs, 0, ypos + body_size_between_sockets)
      
      
    
draw_node(node_dict)

style.css

.cm-s-elegant.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-elegant div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-elegant span.cm-variable { color:#22EFFF; }
.cm-s-elegant span.cm-variable-2 { color: #FFCCB4; }
.cm-s-elegant span.cm-variable-3 { color: white; }
.cm-s-elegant span.cm-string { color: Chartreuse; }
.cm-s-elegant span.cm-string-2 {color: Chartreuse;}
.cm-s-elegant span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-elegant span.cm-bracket { color: #EBEFE7; }
.cm-s-elegant pre { color:#FFF; }
.cm-s-elegant span.cm-qualifier { color:#C0C0C0; }
.cm-s-elegant span.cm-comment { color: #AFB4B4;}
.cm-s-elegant span.cm-property {color: #FDA676;}
.cm-s-elegant span.cm-number { color: #FF92EE;}
.cm-s-elegant span.cm-keyword { color: #FFFF18; }
.cm-s-elegant .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-elegant .CodeMirror-gutters {background: #505050;}
.cm-s-elegant .CodeMirror-linenumber {color: #D3D3D3;}