/visual-programming-language

User Friendly Visual Programming Language

Primary LanguageJavaScript

Visual Programming Language

User Friendly Visual Programming Language

Laws

  • Parent Components Sets The Scene: the child must ass it's .g to the scene (add its svg group to scene set by parent)
  • All Controls Have Ports: a control no matter how large or small can paint ports.
  • method naming scheme: add + Window + Component = action Parent Class + Class Of Object
  • all Controls have this.anchors where named anchors must be stored
  • Externally, you may not interact with object's properties directly, only via methods (creating an api, and taking care of minot config)
  • root container always has a node, node always has an origin, origin has a root

TODO

  • Developer Tooling

  • Live Cycle Management

  • HORIZONTAL LAYOUT! for toolbox

  • BUG: vector-effect: 'non-scaling-stroke'; belongs on SVG element

  • Junctions

  • Project Save

  • Generator

  • Selection Manager

  • make plug-ins/visual-editor/VisualEditor.js load nodes, junctions, and edges

  • add a special I/O node set, each time I is added or removed number of input ports change.

  • legitimize on stop on start in Universe

<script>
  import fsm from 'svelte-fsm';

  const simpleSwitch = fsm('off', {
    off: { toggle: 'on' },
    on: { toggle: 'off' }
  });
</script>

<button value={$simpleSwitch} on:click={simpleSwitch.toggle}>
  {$simpleSwitch}
</button>

  • Create worlds to visualize this program

  • make the tray into a draggable Window

  • give trays connections

  • create special IO nodes in the node world, when added it makes a port in the world box

  • add a Generator

  • give worlds their nodes, and make the code generator visit

  • Wherever properties are used they must be shut down

Architecture

  • index.html calls src/index.js
  • src/Root.js Root Window is created
  • Workspace is created

Scene

Parents set the .scene for child components to append themselves to. Parents set the .parent property to "this" as well.

Program Ideas

  • Split Screen App Example (in->f->out)
  • ELIZA Chatbot
  • Wiki Wiki
  • ExpressJs/KOA Route Builder
  • Sharp Image Processor
  • Request Response Patter Builder
  • State And Reducers Pattern Builder
  • Image Gallery Builder ★★☆☆☆
  • Static Site Generator: Antwerp Yutani ★☆☆☆☆
  • Atom/Pulsar Plugin For Application Structure Visualization ★☆☆☆☆
  • Prompt Builder ☆☆☆☆☆
  • Ask AI for a list, go over each item refining it with greater detail ☆☆☆☆☆
  • Drop a node anywhere in a web page, monitor/send events and data ☆☆☆☆☆
  • Video Slideshow Generator ☆☆☆☆☆
  • RxJs GUI ☆☆☆☆☆
  • ffmpeg GUI ☆☆☆☆☆

Acknowledgments

  • Bootstrap Icons