early version: modular block files, full template set, tab UI, OpenGL defaults
This commit is contained in:
+370
-29
@@ -3,63 +3,404 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title></title>
|
||||
<title>Visual Programming Tool</title>
|
||||
<link href="style.css" rel="stylesheet">
|
||||
<script src="main.js"></script>
|
||||
</head>
|
||||
<body onload="main()">
|
||||
<body>
|
||||
|
||||
<!-- ─── Flowchart node templates ─── -->
|
||||
|
||||
<!-- Program entry point (top of main()). -->
|
||||
<template id="wc-start">
|
||||
<wc-start>
|
||||
START
|
||||
<button class="hook"></button>
|
||||
<button class="hook" data-direction="out" data-exit="down" data-link-type="logic"></button>
|
||||
</wc-start>
|
||||
</template>
|
||||
|
||||
<!-- Program exit (exit(0)). -->
|
||||
<template id="wc-end">
|
||||
<wc-end>
|
||||
<button class="hook"></button>
|
||||
<button class="hook" data-direction="in" data-exit="up" data-link-type="logic"></button>
|
||||
END
|
||||
</wc-end>
|
||||
</template>
|
||||
|
||||
<!-- Output/print block with a textarea for the format string. -->
|
||||
<template id="wc-output">
|
||||
<wc-output>
|
||||
<textarea id="" placeholder="output string"></textarea>
|
||||
<button class="hook" id="hook-fore">in</button>
|
||||
<button class="hook" id="hook-next">out</button>
|
||||
<textarea placeholder="output string"></textarea>
|
||||
<button class="hook" id="hook-fore" data-direction="in" data-exit="left" data-link-type="logic">in</button>
|
||||
<button class="hook" id="hook-next" data-direction="out" data-exit="right" data-link-type="logic">out</button>
|
||||
</wc-output>
|
||||
</template>
|
||||
|
||||
<!-- Decision/branch block with condition, yes, no, test, and in ports. -->
|
||||
<template id="wc-decision">
|
||||
<wc-decision>
|
||||
<p>BRANCH</p>
|
||||
<button class="hook" id="hook-test">test</button>
|
||||
<button class="hook" id="hook-out1">yes</button>
|
||||
<button class="hook" id="hook-out0">no</button>
|
||||
<button class="hook" id="hook-fore">in</button>
|
||||
<div class="decision-row">
|
||||
<span class="decision-label">if</span>
|
||||
<button class="hook decision-data-in" data-direction="in" data-link-type="data" data-type="boolean" data-exit="left">bool</button>
|
||||
</div>
|
||||
<button class="hook" id="hook-out1" data-direction="out" data-exit="right" data-link-type="logic">yes</button>
|
||||
<button class="hook" id="hook-out0" data-direction="out" data-exit="right" data-link-type="logic">no</button>
|
||||
<button class="hook" id="hook-fore" data-direction="in" data-exit="left" data-link-type="logic">in</button>
|
||||
</wc-decision>
|
||||
</template>
|
||||
|
||||
<template id="wc-datum">
|
||||
<wc-datum>
|
||||
DATUM
|
||||
<button class="hook"></button>
|
||||
</wc-datum>
|
||||
<!-- ─── Measurement node templates ─── -->
|
||||
|
||||
<!-- Quantity definition with 7 SI dimensions and default unit. -->
|
||||
<template id="wc-quantity">
|
||||
<wc-quantity>
|
||||
<div class="quantity-header">
|
||||
<span class="quantity-label">QUANTITY</span>
|
||||
<input class="quantity-name" placeholder="quantity name" value="quantity">
|
||||
</div>
|
||||
<div class="dims">
|
||||
<label>L<input class="dim-0" type="number" value="0"></label>
|
||||
<label>M<input class="dim-1" type="number" value="0"></label>
|
||||
<label>T<input class="dim-2" type="number" value="0"></label>
|
||||
<label>I<input class="dim-3" type="number" value="0"></label>
|
||||
<label>Θ<input class="dim-4" type="number" value="0"></label>
|
||||
<label>N<input class="dim-5" type="number" value="0"></label>
|
||||
<label>J<input class="dim-6" type="number" value="0"></label>
|
||||
</div>
|
||||
<div class="range">
|
||||
<input class="quantity-min" placeholder="min" value="">
|
||||
<input class="quantity-max" placeholder="max" value="">
|
||||
</div>
|
||||
<div class="quantity-footer">
|
||||
<select class="quantity-default-unit">
|
||||
<option value="">(none)</option>
|
||||
</select>
|
||||
</div>
|
||||
</wc-quantity>
|
||||
</template>
|
||||
|
||||
<h1>The anti-vibecoding framework</h1>
|
||||
<!-- Unit of measurement with type, suffix, and SI factor. -->
|
||||
<template id="wc-unit">
|
||||
<wc-unit>
|
||||
<div class="unit-header">
|
||||
<span class="unit-label">UNIT</span>
|
||||
<input class="unit-fullname" placeholder="full name" value="unit">
|
||||
</div>
|
||||
<div class="unit-body">
|
||||
<label>type <select class="unit-type"><option value="">(select quantity)</option></select></label>
|
||||
<label>suffix <input class="unit-suffix" placeholder="suffix" value=""></label>
|
||||
<label>SI <input class="unit-si" placeholder="1" value="1"></label>
|
||||
<span class="unit-resolved"></span>
|
||||
</div>
|
||||
</wc-unit>
|
||||
</template>
|
||||
|
||||
<noscript>bro thinks this works without js 💀</noscript>
|
||||
<button onclick="$('#main-program').newDecisionNode()">new decision</button>
|
||||
<button onclick="$('#main-program').newOutputNode()">new output</button>
|
||||
<button onclick="$('#main-program').newDataNode()">new data</button>
|
||||
<button onclick="$('#main-program').generateCode()">Generate code</button>
|
||||
<textarea id="c-code"></textarea>
|
||||
<div id="draw-area" onclick="linkedFirst=null">
|
||||
<svg id="connections" xmlns="http://www.w3.org/2000/svg">
|
||||
</svg>
|
||||
<wc-program id="main-program">
|
||||
</wc-program>
|
||||
<!-- Boolean variable block: fixed boolean type, no unit/SI. -->
|
||||
<template id="wc-boolean">
|
||||
<wc-boolean>
|
||||
<div class="datum-row">
|
||||
<input class="var-name" placeholder="name" value="flag">
|
||||
=
|
||||
<select class="var-value">
|
||||
<option value="false">false</option>
|
||||
<option value="true">true</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="var-cname">flag</span>
|
||||
<input class="var-comment" placeholder="// comment">
|
||||
</wc-boolean>
|
||||
</template>
|
||||
|
||||
<!-- Scalar variable block: typed quantity with unit and SI conversion. -->
|
||||
<template id="wc-scalar">
|
||||
<wc-scalar>
|
||||
<div class="datum-row">
|
||||
<input class="var-name" placeholder="name" value="x">
|
||||
=
|
||||
<input class="var-value" placeholder="5 km" value="0">
|
||||
<select class="var-unit">
|
||||
<option value="">(unit)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="datum-row">
|
||||
<select class="var-type">
|
||||
<option value="">(no type)</option>
|
||||
</select>
|
||||
<span class="var-si"></span>
|
||||
</div>
|
||||
<span class="var-cname">x</span>
|
||||
<input class="var-comment" placeholder="// comment">
|
||||
</wc-scalar>
|
||||
</template>
|
||||
|
||||
<!-- String variable block: C string (char* + length struct). -->
|
||||
<template id="wc-string">
|
||||
<wc-string>
|
||||
<div class="datum-row">
|
||||
<input class="var-name" placeholder="name" value="s">
|
||||
=
|
||||
<input class="var-value" placeholder="string value" value="">
|
||||
</div>
|
||||
<span class="var-cname">s</span>
|
||||
<input class="var-comment" placeholder="// comment">
|
||||
</wc-string>
|
||||
</template>
|
||||
|
||||
<!-- Array variable block: typed C array with tabular element editor (lives in Data tab). -->
|
||||
<template id="wc-array">
|
||||
<wc-array>
|
||||
<div class="array-row">
|
||||
<input class="var-name" placeholder="name" value="arr">
|
||||
<select class="array-type">
|
||||
<option value="float">float</option>
|
||||
<option value="double">double</option>
|
||||
<option value="int">int</option>
|
||||
<option value="unsigned int">unsigned int</option>
|
||||
<option value="char">char</option>
|
||||
</select>
|
||||
<span class="array-bracket">[]</span>
|
||||
<span class="array-count">0 elements</span>
|
||||
</div>
|
||||
<span class="var-cname">arr</span>
|
||||
<input class="var-comment" placeholder="// comment">
|
||||
<div class="array-elements">
|
||||
<!-- Element rows rendered dynamically by WCArray._renderElements() -->
|
||||
</div>
|
||||
</wc-array>
|
||||
</template>
|
||||
|
||||
<!-- Variable reference block: read-only instance of a Data-tab variable with data output hook. -->
|
||||
<template id="wc-varref">
|
||||
<wc-varref>
|
||||
<span class="varref-label">VAR</span>
|
||||
<select class="varref-select">
|
||||
<option value="">(select variable)</option>
|
||||
</select>
|
||||
<button class="hook hook-out" data-direction="out" data-link-type="data" data-type="scalar" data-exit="down">out</button>
|
||||
</wc-varref>
|
||||
</template>
|
||||
|
||||
<!-- Expression block: mathematical expression with data hooks. -->
|
||||
<template id="wc-expression">
|
||||
<wc-expression>
|
||||
<div class="expr-varhooks"></div>
|
||||
<div>EXPR</div>
|
||||
<div class="expr-row">
|
||||
<input class="expr-name" placeholder="result" value="res">
|
||||
=
|
||||
</div>
|
||||
<div class="expr-formula-container">
|
||||
<textarea class="expr-latex" placeholder="a + b" rows="2" spellcheck="false"></textarea>
|
||||
<div class="expr-rendered"></div>
|
||||
</div>
|
||||
<button class="hook hook-out" id="hook-out" data-direction="out" data-link-type="data" data-type="scalar" data-exit="down">out</button>
|
||||
</wc-expression>
|
||||
</template>
|
||||
|
||||
<!-- Assignment block: assigns a value to a variable. -->
|
||||
<template id="wc-assign">
|
||||
<wc-assign>
|
||||
<div class="assign-header">ASSIGN</div>
|
||||
<div class="assign-row">
|
||||
<select class="assign-target">
|
||||
<option value="">(select variable)</option>
|
||||
</select>
|
||||
<span class="assign-eq">=</span>
|
||||
<input class="assign-value" placeholder="value">
|
||||
<button class="hook" data-direction="in" data-link-type="data" data-type="scalar" data-exit="left">val</button>
|
||||
</div>
|
||||
<div class="assign-index-area" style="display:none">
|
||||
<span class="assign-bracket">[</span>
|
||||
<input class="assign-index" placeholder="0" value="0">
|
||||
<button class="hook" data-direction="in" data-link-type="data" data-type="scalar" data-exit="left">idx</button>
|
||||
<span class="assign-bracket">]</span>
|
||||
</div>
|
||||
<button class="hook" id="hook-fore" data-direction="in" data-exit="left" data-link-type="logic">in</button>
|
||||
<button class="hook" id="hook-next" data-direction="out" data-exit="right" data-link-type="logic">out</button>
|
||||
</wc-assign>
|
||||
</template>
|
||||
|
||||
<!-- ─── Procedure templates ─── -->
|
||||
|
||||
<!-- Procedure definition block (lives in the Procedures tab). -->
|
||||
<template id="wc-procedure">
|
||||
<wc-procedure>
|
||||
<div class="proc-header">
|
||||
<span class="proc-label">PROCEDURE</span>
|
||||
<input class="proc-name" placeholder="proc_name" value="proc">
|
||||
</div>
|
||||
<div class="proc-params">
|
||||
<div class="proc-params-col">
|
||||
<span class="proc-params-heading">inputs</span>
|
||||
<div class="proc-inputs"></div>
|
||||
<button class="proc-add-input">+ input</button>
|
||||
</div>
|
||||
<div class="proc-params-col">
|
||||
<span class="proc-params-heading">outputs</span>
|
||||
<div class="proc-outputs"></div>
|
||||
<button class="proc-add-output">+ output</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="hook"></button>
|
||||
</wc-procedure>
|
||||
</template>
|
||||
|
||||
<!-- Procedure call block (lives in the Algorithm tab). -->
|
||||
<template id="wc-proccall">
|
||||
<wc-proccall>
|
||||
<div class="proccall-header">
|
||||
<span class="proccall-label">CALL</span>
|
||||
<select class="proccall-select">
|
||||
<option value="">(select procedure)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="proccall-name-row">
|
||||
<input class="proccall-name" placeholder="result var" value="">
|
||||
</div>
|
||||
<div class="proccall-container">
|
||||
<div class="proccall-inputs"></div>
|
||||
<div class="proccall-outputs"></div>
|
||||
</div>
|
||||
<button class="hook hook-in" data-direction="in" data-link-type="logic" data-exit="up">in</button>
|
||||
<button class="hook hook-out" data-direction="out" data-link-type="logic" data-exit="down">out</button>
|
||||
</wc-proccall>
|
||||
</template>
|
||||
|
||||
<!-- ─── Page layout ─── -->
|
||||
|
||||
<h1>Visual Programming Framework</h1>
|
||||
|
||||
<!-- Tab bar: Algorithm, Data, and Measurements tabs. -->
|
||||
<div class="tab-bar">
|
||||
<button class="tab-btn active" data-tab="algorithm">
|
||||
<img class="tab-icon" src="icons/git-branch.svg" width="16" height="16" alt="">
|
||||
Algorithm
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="data">
|
||||
<img class="tab-icon" src="icons/database.svg" width="16" height="16" alt="">
|
||||
Data
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="measurements">
|
||||
<img class="tab-icon" src="icons/ruler.svg" width="16" height="16" alt="">
|
||||
Measurements
|
||||
</button>
|
||||
<button class="tab-btn" data-tab="procedures">
|
||||
<img class="tab-icon" src="icons/file-text.svg" width="16" height="16" alt="">
|
||||
Procedures
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Tab content area that fills remaining vertical space. -->
|
||||
<div class="tab-body">
|
||||
<!-- Algorithm pane: flowchart toolbar + drawing surface with SVG connections. -->
|
||||
<div class="tab-pane active" id="pane-algorithm">
|
||||
<div class="pane-toolbar">
|
||||
<button data-action="decision" title="new decision">
|
||||
<img src="icons/diamond.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
<button data-action="expression" title="new expression">
|
||||
<img src="icons/function-square.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
<button data-action="varref" title="new variable">
|
||||
<img src="icons/variable.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
<button data-action="output" title="new output">
|
||||
<img src="icons/terminal.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
<button data-action="proccall" title="new procedure call">
|
||||
<img src="icons/book-open.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
<button data-action="assign" title="new assignment">
|
||||
<img src="icons/arrow-right-circle.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<div id="draw-area">
|
||||
<svg id="connections" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs></defs>
|
||||
</svg>
|
||||
<wc-program id="main-program">
|
||||
</wc-program>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data pane: toolbar for creating variables/quantities + variable area. -->
|
||||
<div class="tab-pane" id="pane-data">
|
||||
<div class="pane-toolbar">
|
||||
<div class="btn-group">
|
||||
<button data-action="variable" title="new variable">
|
||||
<img src="icons/variable.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
<div class="submenu" data-action="variable-submenu">
|
||||
<button data-action="boolean">boolean</button>
|
||||
<button data-action="scalar">scalar</button>
|
||||
<button data-action="string">string</button>
|
||||
<button data-action="array">array</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="variable-area"></div>
|
||||
</div>
|
||||
|
||||
<!-- Measurements pane: toolbar for creating units + node area. -->
|
||||
<div class="tab-pane" id="pane-measurements">
|
||||
<div class="pane-toolbar">
|
||||
<button data-action="quantity" title="new quantity">
|
||||
<img src="icons/sliders.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
<button data-action="unit" title="new unit">
|
||||
<img src="icons/grid.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<div id="data-area"></div>
|
||||
</div>
|
||||
|
||||
<!-- Procedures pane: library sub-tabs + procedure definitions. -->
|
||||
<div class="tab-pane" id="pane-procedures">
|
||||
<div class="pane-toolbar">
|
||||
<button data-action="add-library" title="new library">
|
||||
<img src="icons/folder-plus.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
<button data-action="add-procedure" title="new procedure">
|
||||
<img src="icons/file-plus.svg" width="18" height="18" alt="">
|
||||
</button>
|
||||
</div>
|
||||
<div class="lib-tab-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom toolbar: code generation button and output textarea. -->
|
||||
<div class="global-toolbar">
|
||||
<button data-action="generate">Generate code</button>
|
||||
<button data-action="save">Save</button>
|
||||
<button data-action="load">Load</button>
|
||||
<button data-action="new">New</button>
|
||||
<textarea id="c-code"></textarea>
|
||||
</div>
|
||||
<div id="error-overlay" class="error-overlay">
|
||||
<div class="error-box">
|
||||
<span class="error-close">×</span>
|
||||
<div class="error-ack">-ACK!</div>
|
||||
<div class="error-msg"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.MathJax = {
|
||||
tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] },
|
||||
options: { enableMenu: false, ignoreHtmlClass: 'expr-latex' },
|
||||
startup: { elements: [] }
|
||||
};
|
||||
</script>
|
||||
<script src="lib/mathjax/tex-mml-chtml.js"></script>
|
||||
<script src="dom.js"></script>
|
||||
<script src="helpers.js"></script>
|
||||
<script src="error.js"></script>
|
||||
<script src="draw.js"></script>
|
||||
<script src="wcblock.js"></script>
|
||||
<script src="blocks-algo.js"></script>
|
||||
<script src="blocks-data.js"></script>
|
||||
<script src="blocks-proc.js"></script>
|
||||
<script src="wcprogram.js"></script>
|
||||
<script src="persist.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user