<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Neural Network Design blog &#187; code</title>
	<atom:link href="http://janbogaerts.name/index.php/tag/code/feed/" rel="self" type="application/rss+xml" />
	<link>http://janbogaerts.name</link>
	<description>My take on neural networks, AI and more</description>
	<lastBuildDate>Thu, 15 Dec 2011 18:43:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Debugging: Attached variables</title>
		<link>http://janbogaerts.name/index.php/2011/01/03/debugging-attached-variables/</link>
		<comments>http://janbogaerts.name/index.php/2011/01/03/debugging-attached-variables/#comments</comments>
		<pubDate>Mon, 03 Jan 2011 18:40:56 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[N²D]]></category>
		<category><![CDATA[attached variables]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[code editor]]></category>
		<category><![CDATA[debugging]]></category>

		<guid isPermaLink="false">http://janbogaerts.name/index.php/2011/01/03/debugging-attached-variables/</guid>
		<description><![CDATA[Note: Deprecated! Debugging time!!! (when isn’t it.) I sort of forgot about this one, until a couple of days ago, when I ran into a similar problem as for which I originally created this (ahem) simple little trick.  To explain you what attached neurons are for, perhaps first a little explanation on how I have [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><em><strong>Note: Deprecated</strong></em>!</p></blockquote>
<p>Debugging time!!! (when isn’t it.) I sort of forgot about this one, until a couple of days ago, when I ran into a similar problem as for which I originally created this (ahem) simple little trick.  To explain you what attached neurons are for, perhaps first a little explanation on how I have been designing my neural algorithms. (Caution: this is advanced stuff, not for the faint-hearted).</p>
<p>As with all algorithms, I take some input and process it to generate some output. The input with neural algorithms, is always expressed using neurons. The process to execute is defined through the meaning of a link (which also maps to a neuron). The link starts from the input neuron and usually points to some value that needs to be compared against or searched for,…, but this can also be something else.</p>
<p><a href="http://janbogaerts.name/wp-content/uploads/2011/01/image1.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding-top: 0px; border: 0px;" title="image" src="http://janbogaerts.name/wp-content/uploads/2011/01/image_thumb1.png" border="0" alt="image" width="323" height="132" /></a><br />
The problem is the ‘split’ instruction. This is a very powerful thing indeed, which allows me to write simple, massively parallel code. It does, exactly as the word says, it ‘splits’ the current process into x nr of similar processes. They are similar, but not exactly the same: ‘the input neurons’ have been duplicated so that they contain the same values, but using new neurons, so that the process will eventually lead to a different result neuron. Also, the ‘variable’ that was supplied with the split instruction, has a unique value in each process (the value items are declared in the split instruction, they  determine the nr of new processes in the split). And finally, globals can be declared  as having to ‘duplicate’ their content when a split occurs. All this means that each process is similar (most variables point to the same neurons), but not exactly the same. (Mount Everest stuff, I know.)<br />
The key thing to keep in mind here are the duplicated input neurons: when a split occurs, the idea is that each process will work on it’s own input and result data. But, sometimes, for various reasons, one or more of these neurons can spill over to other processes. And that’s when ‘contamination’ can occur, or when one process modifies the input/result of an other process, which is very bad indeed and excruciatingly difficult to trace using traditional debugging methods like breakpoints.</p>
<p>Thus come attached variables to the rescue. The idea is very simple: Whenever a ‘variable’ that has been signaled in the designer as ‘attach required’, gets it’s first value assigned, it attaches this ‘value’ to the  process in which this assignment occurred. If, from that point on, another  process tries to change  this value-neuron, all alarms go off as if it were WOIII. And that’s basically it. From there on, it’s up to you to use the <a href="http://janbogaerts.name/wp-content/uploads/2011/01/image2.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; float: right; padding-top: 0px; border-width: 0px;" title="image" src="http://janbogaerts.name/wp-content/uploads/2011/01/image_thumb2.png" border="0" alt="image" width="279" height="141" align="right" /></a>presented information (where and who), to figure out the why.</p>
<p>For practical use, I have found that the ‘CurrentFrom’ system variable, really is the most useful variable for this trick, though it is possible to put it on any other. You can even attach neurons manually to a process, if you’ve paused and selected one. This is done on a code editor, using the context menu item ‘attach to  processor’. To activate the monitoring of a variable, make certain that it is added to the left most pane in the debugger view and select checkbox  in the ‘attach’ column before you provide the network with some input.</p>
<p>Like I’ve already mentioned, it doesn’t take much to use and activate it. This little trick’s usage field isn’t very broad, it only traces down 1 specific type of bug, but one that is very hard to find otherwise. Also, if not used correctly, you can get a lot of false errors, since it’s very common for multiple processes to modify the same neurons. So use with caution!</p>
 <img src="http://janbogaerts.name/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=532" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://janbogaerts.name/index.php/2011/01/03/debugging-attached-variables/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Structured editors: a first impression</title>
		<link>http://janbogaerts.name/index.php/2010/12/20/structured-editors-a-first-impression/</link>
		<comments>http://janbogaerts.name/index.php/2010/12/20/structured-editors-a-first-impression/#comments</comments>
		<pubDate>Mon, 20 Dec 2010 15:58:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[.net]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[code editor]]></category>
		<category><![CDATA[code images]]></category>
		<category><![CDATA[designers]]></category>
		<category><![CDATA[editing]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[structured editor]]></category>
		<category><![CDATA[WPF]]></category>

		<guid isPermaLink="false">http://janbogaerts.name/index.php/2010/12/20/structured-editors-a-first-impression/</guid>
		<description><![CDATA[For a while now, I’ve been working fairly intensely with the designer and it’s many structured editors. Long enough for me to get a feeling for them and find a good rhythm in working with them. So I thought it perhaps time to put down my experiences and ideas for future improvements. To tell you [...]]]></description>
			<content:encoded><![CDATA[<p>For a while now, I’ve been working fairly intensely with the designer and it’s many structured editors. Long enough for me to get a feeling for them and find a good rhythm in working with them. So I thought it perhaps time to put down my experiences and ideas for future improvements.<br />
To tell you the  truth, I took a big risk when I decided to make all the editors, including the one for code, as <a href="http://en.wikipedia.org/wiki/Structure_editor" target="_blank">structured editors</a> (aka not text-based). The reasons are simple:</p>
<ul>
<li>I had never made something like that, while I had plenty of experience <a href="http://users.telenet.be/GeneCompiler/" target="_blank">designing languages</a>,</li>
<li>I didn’t really know what the end product would look like or how it would behave,</li>
<li>and apart from some ‘UML designers’ that render classes, I had never used such a thing for editing code myself.</li>
</ul>
<p>So then, what made me decide to use this approach instead of the more conventional and traditional way of using text?  First of, a major part of the answer lies in the previous statement <img class="wlEmoticon wlEmoticon-winkingsmile" style="border-style: none;" src="http://janbogaerts.name/wp-content/uploads/2010/12/wlEmoticon-winkingsmile.png" alt="Winking smile" /> . Other reasons were:</p>
<ul>
<li>Guided editors (can) lower the entrance level, when done properly (something I needed,… seriously).</li>
<li>I new I would be needing some good debuggers (lessons learned!!). I could try and incorporate these into some existing editors, or turn out one of my own. At the time, it seemed a better idea to have full control from top to bottom, if I wanted to do this properly.</li>
<li>I had a bit of experience working in WPF, which gave me some confidence that it was possible.</li>
<li>Also, I came across this, <a href="http://blogs.msdn.com/b/kirillosenkov/archive/2009/09/08/first-videos-of-the-structured-editor-prototype.aspx" target="_blank">rather serious attempt at structured editors </a>(originally for C#), which raised my hopes as well.</li>
<li>Did I already mention you that I was hoping this would make things a bit simpler for other people to understand?</li>
</ul>
<p>In the end, it turns out I am glad I decided to use this approach, though not exactly for the reasons as previously stated.<a href="http://janbogaerts.name/wp-content/uploads/2010/12/image.png"><img style="background-image: none; padding-left: 0px; padding-right: 0px; display: inline; float: right; padding-top: 0px; border-width: 0px;" title="image" src="http://janbogaerts.name/wp-content/uploads/2010/12/image_thumb.png" border="0" alt="image" width="111" height="142" align="right" /></a> Except perhaps for the debugging, which really was fairly easy to implement this way. No, the thing that convinced me was the way that it changes how you program. This didn’t happen over night, I only began noticing this the last couple of months, after some 1,5 years of (trying to) program this way.<br />
So what changed: well, over time, when I needed a ‘variable’, instead of thinking ‘variable’ I began to think ‘purple’. This is a shift from thinking in words to thinking in color. The best evidence for this, came in the form of me, continually trying to put a conditional in an assignment as if it were a global (cause I thought I had picked up a global). If you look at the picture to the right, you can probably understand why I erred: the blue colors are just to close to each other.<br />
What’s more, over time I also began to think more and more in visual structures instead of ‘if-else’ or ‘while-do’. When I think about an ‘if’, I think:</p>
<p><a href="http://janbogaerts.name/wp-content/uploads/2010/12/image1.png"><img style="background-image: none; margin: 0px auto 10px; padding-left: 0px; padding-right: 0px; display: block; float: none; padding-top: 0px; border-width: 0px;" title="image" src="http://janbogaerts.name/wp-content/uploads/2010/12/image_thumb1.png" border="0" alt="image" width="461" height="155" /></a> In short, when programming, I am thinking more and more in terms of: blue square, red hexagon, white circle with line below (the conditional part),… Or in other words, it feels as if I am programming like building with <a href="http://www.lego.com/en-gb/default.aspx" target="_blank">Lego</a> blocks!!! <img class="wlEmoticon wlEmoticon-smile" style="border-style: none;" src="http://janbogaerts.name/wp-content/uploads/2010/12/wlEmoticon-smile.png" alt="Smile" /><br />
I can’t explain exactly how or why this is, but it appears to free the mind for thinking about other stuff. At times, I find myself, just mindlessly putting blocks together to build up the picture that I had previously constructed in my head.  Very pleasing.</p>
<p>So, as a first try, I am very happy with the result, well enough for me to continue this path, and with some minor corrections here and there, keep the design. That is not to say there isn’t room for improvement, I have bucket-loads already of those, just not the time, so most of these will not be for the near future.  Others might be implemented sooner, depending on needs.</p>
<p>Basically, most of the concerns are centered round work speed (the number of movements and clicks required for an operation), maintainability and overview:</p>
<h4>Speed</h4>
<ul>
<li>To start with, the toolbox needs some redesign. I currently have 2 pages: one for general items, and a separate tab for all the instructions. I find myself continually switching between the 2, which is time consuming and unnecessary. The solution is simple: split them up in separate toolboxes.</li>
<li>The toolbox currently only supports drag-drop operations. So to get 5 objects of the same type, you need to perform 5 drags. Better would be to have a ‘paint’ tool, like graphical apps, and many (UML) designers have.</li>
<li>The code designer really could use some more keyboard support, so it can be used like a regular text editor (sort of). This seems a logical next step to do, just haven’t gotten there yet.</li>
<li>I have been thinking a lot about using WPF’s new <a href="http://www.davidezordan.net/blog/?p=1136" target="_blank">multi-touch libraries</a> to add support for using 2 mice while coding. I don’t really make use of the left hand during the GUI coding, apart from the occasional copy/paste or editing a label. At times, I could definitely work with 2 hands at the same time. It’s a bit like using both hands for searching and placing blocks.<br />
I had also thought about using this new <a href="http://www.xbox.com/en-GB/kinect" target="_blank">kinect</a> toy, which appears to have been <a href="http://www.engadget.com/2010/11/16/kinect-hack-explained-follow-along-at-home-guide-lets-you-rever/" target="_blank">hacked</a> already for PC usage. This would even resemble more like building with Lego (or like <a href="http://singularityhub.com/2010/12/10/mit-uses-xbox-kinect-to-create-cheap-minority-report-interface-video/" target="_blank">Tom cruise is doing in Minority report</a>) . But then I figured: ok how would you feel after 2 weeks of keeping  your arms up in the air? Ok, I don’t know how I’d feel after 2 weeks like that, but my shoulders and neck definitely do!!!<br />
So that plan was canceled.</li>
</ul>
<h4>Overview</h4>
<ul>
<li>As I’ve previously mentioned, I often simply recreate the picture that’s already in my head. The annoying thing is that the designer only shows a small part of the object (algorithm) that I’m working on, while at times I have more a need for a birds view approach. That’s why I added the zoom support, but more can be done such as:
<ul>
<li>make the code templates (the drawings) a bit smaller. I’m no good at designing, which shows.</li>
<li>provide a bread-crumb like ability (for drilling down and going back up again), much like the windows file explorer provides using it’s breadcrumb approach for directories.  I could use this for sub blocks.</li>
<li>See what I can do about providing support for multiple screens.</li>
<li>Buy a new big sized monitor, but given the massive resources at my disposal, that’s not an option <img class="wlEmoticon wlEmoticon-sadsmile" style="border-style: none;" src="http://janbogaerts.name/wp-content/uploads/2010/12/wlEmoticon-sadsmile.png" alt="Sad smile" /></li>
</ul>
</li>
<li>Also previously stated: some of the colors can use a little tuning, the same perhaps for some shapes, to make them more distinguishable from each other.</li>
<li>Currently, the drop area for the arguments is displayed as a simple, single square. The thing is: the argument requirements are known for each instruction, so it’s perfectly possible to display a custom set of boxes, with correct labels, for each instruction. This, by the way, would also free some space, since no drop area needs to be shown when all arguments are provided.</li>
<li>I could also try to implement some sort of 3D-view on the network model, but I think I’ll need to extend my skill-set for that one.</li>
</ul>
<h4>Maintainability</h4>
<p>The single major issue I have with code maintainability is concerning documentation. I added support for this by allowing to add some ‘rich-text’ string to each neuron. The idea being that you’d put all the comments concerning what’s going on, in there. Unfortunately, it doesn’t really work very well for code documentation because:</p>
<ul>
<li>neurons can be reused. This is different compared to regular text code: when this is compiled, each line of code will get it’s own output (or better, each compiled instruction corresponds with exactly 1 location within the text). With this neural network however, things are a bit different: it’s perfectly possible to use the same assignment in 2 (or more) different places. This is something I do extensively, by the way, to speed up coding and to keep the nr of links down.  What I noticed is this: though the code is shareable, the reason usually isn’t. I am currently solving this by stacking the different comments in the same text-blob, when needed. But better solutions are possible.</li>
<li>I also find it annoying having to select an object in order to see it’s comments within the code view. It appears to be easier/better when you can quickly scan a document for all comments and read the one you need, without thinking about selection.</li>
</ul>
<p>To solve this, I have been thinking about adding support for comments within the ‘project’ documents. These would maintain and display (as call-out balloons) all the comments for the neurons that they contain. The location of the comments would be determined by the comments themselves, so they can be floating, closest to the neuron that they are attached to. This would also allow me to display the comments, even if the actual neurons aren’t visible, but collapsed.</p>
<h4>Final note</h4>
<p>As a final note, for those who would like to build their own structured editor in WPF, perhaps a word of advice: <a href="http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.aspx" target="_blank">stay away from</a> ItemsControl or any of it’s descendants. The paradigm sounds grate: manage a list of items and display them any way you want through styling and templates. What’s not mentioned is that this only works for 10 objects or so. Any more, and your app slows down to a crawl or worse: crashes just as bad as the good old win32 apps would, perhaps even worse at times. Instead, go lower level: inherit from panel and roll out your own Measure/Arrange or go even further down and overwrite the rendering routines.</p>
 <img src="http://janbogaerts.name/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=513" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://janbogaerts.name/index.php/2010/12/20/structured-editors-a-first-impression/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The new code editor</title>
		<link>http://janbogaerts.name/index.php/2010/05/08/the-new-code-editor/</link>
		<comments>http://janbogaerts.name/index.php/2010/05/08/the-new-code-editor/#comments</comments>
		<pubDate>Sat, 08 May 2010 16:59:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[N²D]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[code editor]]></category>
		<category><![CDATA[code images]]></category>

		<guid isPermaLink="false">http://janbogaerts.name/index.php/2010/05/08/the-new-code-editor/</guid>
		<description><![CDATA[Note: Deprecated! The new code editor is beginning to work:]]></description>
			<content:encoded><![CDATA[<blockquote><p><em><strong>Note: Deprecated</strong></em>!</p></blockquote>
<p>The new code editor is beginning to work:</p>
<p><a href="http://janbogaerts.name/wp-content/uploads/2010/05/image2.png"><img style="border-right-width: 0px; margin: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" src="http://janbogaerts.name/wp-content/uploads/2010/05/image_thumb2.png" width="870" height="258" /></a></p>
<p><a href="http://janbogaerts.name/wp-content/uploads/2010/05/image3.png"><img style="border-bottom: 0px; border-left: 0px; margin: 0px; display: inline; border-top: 0px; border-right: 0px" title="image" border="0" alt="image" src="http://janbogaerts.name/wp-content/uploads/2010/05/image_thumb3.png" width="688" height="519" /></a></p>
 <img src="http://janbogaerts.name/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=232" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://janbogaerts.name/index.php/2010/05/08/the-new-code-editor/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The debugger</title>
		<link>http://janbogaerts.name/index.php/2009/06/09/the-debugger/</link>
		<comments>http://janbogaerts.name/index.php/2009/06/09/the-debugger/#comments</comments>
		<pubDate>Tue, 09 Jun 2009 18:36:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[N²D]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[bugs]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[code editor]]></category>
		<category><![CDATA[debugging]]></category>

		<guid isPermaLink="false">http://janbogaerts.name/index.php/2009/06/09/the-debugger/</guid>
		<description><![CDATA[Note: Deprecated! This is the very first debugger I have written, and I am pretty proud about it! It’s not a masterpiece, but functional.&#160; The code definitely could use some tidying up and some speed tuning wouldn’t hurt at all, but you can trace bugs, inspect values and follow the program flow, and that’s already [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><em><strong>Note: Deprecated</strong></em>!</p></blockquote>
<p>This is the very first debugger I have written, and I am pretty proud about it! It’s not a masterpiece, but functional.&#160; The code definitely could use some tidying up and some speed tuning wouldn’t hurt at all, but you can trace bugs, inspect values and follow the program flow, and that’s already something I guess. To explain the debugger to you, I thought it perhaps best to do it using some of the demo’s.&#160; Simply open the ‘<em>Echo words</em>’ project to get started.</p>
<h4>Set up</h4>
<p>Before we send some input to the network, we need to set up the designer so that it is ready to debug:</p>
<ol>
<li>We need to&#160; put a breakpoint&#160; on a statement. You can do this in a code editor. The very first code block that gets called in this network is the <em>rules</em> code on the ‘<em>Contains Word</em>’ neuron, so simply double click on the ‘<em>Code: Contains Word</em>’ node in the <em>Projects</em> tab.       <br />To set the breakpoint on the first statement, expand the ‘<em>CheckStartTextBlock – space insertion</em>’ code block and click in the little circle on the ‘<em>if</em>’ statement. This should make it turn red. </li>
<li>The designer also needs to be set in design mode.&#160; You can do this by the drop down box on the main toolbar or on the debugger tab’s toolbar. There are 3 possible modes:
<ul>
<li>Off: no debugging is possible.&#160; This mode runs faster. </li>
<li>Normal: The debugger stops whenever a breakpoint is encountered. When a breakpoint is encountered or a processor was paused, it is possible to inspect values.&#160; This is how most other debuggers provide debug capabilities. </li>
<li>Slow motion: In this mode, the debugger automatically pauses and continues on every statement, creating a <em>movie</em> of the execution process. You can use the throttle bar on the left of the combo box to select the speed, which is updated real time. It’s possible to pause and continue this movie using the pause and play buttons on the debugger tab’s menu.&#160; I have included this type of debugging mode because I believe it is sometimes useful to see the path that is taken to a specific point of interest. With this feature, you don’t have to keep pressing <em>F6</em> to advance. </li>
</ul>
</li>
<li>It’s also possible, but not required, to let a processor stop when an error was encountered. This is done by activating the ‘<em>Break on error</em>’ button. This only works when the error happened on a processor in debug mode. </li>
</ol>
<p></p>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image15.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="615" alt="image" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb15.png" width="768" border="0" /></a> </p>
</p>
<p>Note that it is not possible to switch between different modes while a processor is running. You can only specify the debug mode for newly created processors. </p>
<p>An overview of all the breakpoints in the project can be found on the right side of the debugger tab. Currently it simply lists all the breakpoints, but new features should be added to this list shortly.</p>
<h4>Start a processor</h4>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image16.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 0px 0px 10px; border-right-width: 0px" height="473" alt="image" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb16.png" width="378" align="right" border="0" /></a> To get started, we need to send&#160; some data to the network through it’s text-sin (sensory interface), so make certain that the ‘<em>Echo channel</em>’ is opened (a communication&#160; channel is the visual interface for a sin). Go to <em>View/Communication Channels/Echo channel</em>, and make certain it is checked (and that the tab is selected).</p>
<p>Once the channel is open, type some text in the input section and send it to the network by pressing enter (or the <em>send</em> button). You should see a neuron appear in the left upper screen, which represents the input event (the neuron that will be solved by the processor). Your text will also appear as a string in the centre dialog screen. There will also appear an object in the centre screen of the debugger tab. This represents the processor that was started and which is handling the input event. </p>
</p>
<p>The processor overview contains 2 numbers. The first number represents the name of the processor. This value can be changed and is used to identify it between multiple processors. The second number represents the number of neurons that are left on the stack + the current neuron that&#160; is being solved. </p>
<p>The buttons represent, from left to right:</p>
<ul>
<li>a toggle button that can be used to open and close the detailed view for the processor.&#160; </li>
<li>An indicator that is selected when the processor is paused. This is used to inform you on the run state, it’s not an interactive button. </li>
<li>An indicator that lets you know that the processor is still running or not. When this is no longer selected, an irrecoverable error occurred in the processor and it is actually dead (in other words, you’ve got a problem when this is no longer selected). </li>
</ul>
<p>Once a processor is started, the middle square in the right side group on the status bar will be blue.&#160; This will remain so for as long as the network has still a processor running. </p>
<h4>Detailed view</h4>
<p>If you press the first toggle button, a detailed view of the processor should open in a new tab (using the same name as that of the processor). </p>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image17.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="484" alt="image" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb17.png" width="637" border="0" /></a>&#160;</p>
<p>This tab is divided into 3 sections (from left to right):</p>
<ul>
<li>The content of the execution stack.&#160; This stack contains the neurons that have to be solved by the processor.&#160; You can add and remove neurons from/to this stack using the Pop and Push instructions (The first neuron is automatically added). In our demo, there is only 1 item currently on the stack, that’s the one being solved. This item displays&#160; a square in the stack UI element. </li>
<li>All the neurons that were assigned as meaning to the links starting from the solvable neuron. The top one will be executed first.&#160; A special case is the ‘Actions’ neuron, which will only be solved when all the others have been, no matter where it is found in the list. </li>
<li>A stack containing all the processor frames.&#160; A frame represents a single cluster’s code that is being executed by the processor. Since some statements call other clusters, like conditional statements, code blocks,… a processor will usually have a number of frames active. This provides an exact view of the processor’s current execution location.      <br />The following info is provided for each frame, from top to bottom
<ul>
<li>The code, in textual form. Each code unit can easily be selected separately for debugging purposes (check out the context menu on each item to see what you can do with it).&#160; It’s not possible to edit in this window though (you have to open the editor for this). </li>
<li>The name (or id when no name is defined) of the neuron that defines all the code. </li>
<li>The relationship between the neuron that defines the code and the actual cluster containing the code.&#160; This can be:
<ul>
<li>Children: in this case, the neuron that defines the code, is the cluster that contains the code. </li>
<li>Rules: the neuron that defines the code has a link with meaning ‘Actions’ to a code cluster. </li>
<li>Actions: the neuron that defines the code has a link with meaning ‘Actions’ to a code cluster. </li>
</ul>
</li>
</ul>
</li>
</ul>
<p>The detailed view is great to have an overview of where we are in the processing stage, but it isn’t very useful to&#160; debug a program flow. It’s better to use the code editor for this because it provides a better overview of the connection between the statements.&#160; To do this, open the editor containing the code and make certain the the processor in the debugger tab’s center screen is selected.&#160; This last action is very important for the following reason: a detailed view is opened for a specific processor, so a single tab always links to a single processor.&#160; Code however is not specific to a processor, it can be called by many processors. So it needs to know the processor context for displaying debug information.&#160; It uses the processor that is selected in the&#160; debugger overview for this purpose.&#160; This has a nice&#160; side effect: when you have multiple processors running, you can quickly switch between active processor and view where each one is in the code. Note that the code editor will put a red square around the statement that will be executed next, to indicate execution location.</p>
<h4>Do the debug</h4>
</p>
</p>
<p> <a href="http://janbogaerts.name/wp-content/uploads/2009/06/image18.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="669" alt="image" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb18.png" width="801" border="0" /></a><br />
<h5>Code flow</h5>
<p>We are ready now to start debugging the network. The first thing you can do is walk through the code using the following commands:</p>
<ul>
<li><strong>Run (F5)</strong>: continue execution until the next breakpoint or until the processor is finished (only active when paused). </li>
<li><strong>Next step (F6)</strong>: execute the next step only and&#160; pause again (only active when paused). Note, when&#160; you do a <em>step next</em> on a split instruction that creates multiple sub processors, all sub processors will also wait on the next statement, they wont run wild, but wait until you tell them what to do, which is very useful for inspecting stuff. </li>
<li><strong>Pause</strong>: stop execution and wait until the <em>Run</em> or <em>Next step</em> command have been given (only active when running). </li>
<li><strong>Stop</strong>: Ok, this sounds silly, I know, but I haven’t yet implemented the stop.&#160; I’ve always been able to stop in other ways (I’m running the debugger inside another debugger which is great for creating a schizoid coding mind). If you feel an urgent need for this command, let me know, otherwise, it’ll get in there,&#160; I just have absolutely no time frame for this. </li>
</ul>
<h5>Inspecting values</h5>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image19.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 0px 0px 10px; border-right-width: 0px" height="186" alt="image" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb19.png" width="275" align="right" border="0" /></a> When a processor is paused, it is possible to inspect the value of any item that returns a result, this includes: variables, globals, result statements, bool expressions and ByRefs. You can do this by selecting the item you want to inspect with the mouse, and pressing <strong>F7</strong> or through it’s context menu (Inspect value). This opens a dialog with the debug info of the result.&#160; This can be empty, 1 or multiple neurons.</p>
<p>Debug info for a neuron contains the following info:</p>
<ul>
<li>All the incoming links, where they point to and the meaning of the link (note that the meaning UI element still has to be changed into a debug neuron). </li>
<li>All the outgoing links, where they point to and the meaning of&#160; the link. </li>
<li>All the clusters that contain the parent node. </li>
<li>When the parent node is a cluster, all it’s children. </li>
<li>When the parent is a cluster, the meaning of the cluster is depicted, in brackets, after it’s name.&#160; This is also a debug UI element. </li>
</ul>
<p>The debug info is depicted recursively for all neurons. This type of debug visualization is used in multiple places throughout the designer.&#160; You might have noticed that the <em>echo channel</em> uses this UI element to depict the incoming and outgoing neurons. The detailed view of a processor also uses it to depict most of the neurons. </p>
<h5>Watches</h5>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image20.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="162" alt="image" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb20.png" width="451" align="left" border="0" /></a> A final feature of the debugger is watches.&#160; These allow you to observe the content of variables and globals in a list for a single processor or across all processors for those that are paused.&#160; </p>
<p>This feature is best experienced using the ‘<em>English language definition</em>’ demo since this performs some splits while processing text input. I have put a breakpoint in the ‘<em>Code: Stage 1.1</em>’ page on the second <em>if</em> statement&#160; (first child <em>if</em> in the left-side path of the only root <em>if</em>) and ran it until ‘<em>Found == Sentence(flow</em>)’ to get the screenshot on the left.</p>
<p>To add watches, drag a variable or global and drop it in the left part of the debugger tab.&#160; This will add it at the bottom of the list. If you are dragging it from a code editor, it is best to hold the <em>ctrl</em> key pressed, so that the item stays at it’s original position.&#160; Note that it’s currently not yet possible to drag from the toolbox.&#160; This is a small bug that still needs fixing. Also note that it’s not yet&#160; possible to remove variables (except by editing the designer file).&#160; This command will be added very soon (just goes to show how fresh the debugger still is).</p>
<p>By default, a list of watches with their values for the selected processor is depicted.&#160; The left side is the name of the variable (or it’s id if no name has yet been assigned). To the right of the name, the content of the variable is displayed. This can be empty, 1 or more neurons, all of which are depicted using the debug UI element for neurons.</p>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image21.png"><img title="image" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 0px 0px 10px; border-right-width: 0px" height="207" alt="image" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb21.png" width="521" align="right" border="0" /></a> </p>
</p>
</p>
<p>If you switch to variable view, the left section of the debugger tab will only display a radio button for each watch. The middle section, which contains processor info, will now display the contents of the selected watch for each processor.&#160; </p>
<p>Also note that, when a processor gets split up into multiple sub procs, the view will switch to a tree.&#160; The root node shows the number of processors contained by the node. If a new input event is sent to the network before the previous has been processed, it is added as a list item, at end of the list. If sub processors split up, more sub nodes are created as children of the nodes that triggered the split (tree structure). This allows you to see how processors are related to each other.&#160; At the moment you can only see the current state, through the tree/list structure.&#160; In the future, an extra view might be added that shows a line view over time to show when and how may processors did a split and when they died out, although that’s just an idea at the moment, so don’t put your hopes up to see it any time soon, there are still far more important things to do.</p>
<h5>Errors and warnings</h5>
<p>If there are any errors generated by the code, either through the <em>Error</em> or <em>Warning</em> instruction or because of an error in the code, you can view exactly where it occurred. All messages are stored in the log tab. When they are blue, you can double click on them. This will open a code editor with the statement selected&#160; that caused the log item (note: if it is somewhere in a sub section, this is not expanded automatically) Because you can use the same statement in multiple locations, only the first few will be selected, this is to take care of some problems with WPF’s standard controls (will be fixed in the future).</p>
<p>As you can see, it’s all still fresh,&#160; but functional. The debugger has already become a central point of usage for me and I suspect this will only increase, so this will get some extensive testing early on. There are plenty of things that still need adding like conditional breakpoints, counts on breakpoints, enabling-disabling of breakpoints, more commands on the breakpoints-list (like clear, enable/disable all,…),… These things will probably be added as needed.</p>
<p>I am certain there is plenty more to say about NND’s debugger, I just can’t think of anything&#160; anymore, so I guess I’ll leave it by this for today. It’s already turned out a long enough post.</p>
 <img src="http://janbogaerts.name/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=134" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://janbogaerts.name/index.php/2009/06/09/the-debugger/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Designing code: Tips and tricks</title>
		<link>http://janbogaerts.name/index.php/2009/06/05/designing-code-tips-and-tricks/</link>
		<comments>http://janbogaerts.name/index.php/2009/06/05/designing-code-tips-and-tricks/#comments</comments>
		<pubDate>Fri, 05 Jun 2009 15:13:04 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[N²D]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[code editor]]></category>

		<guid isPermaLink="false">http://janbogaerts.name/index.php/2009/06/05/designing-code-tips-and-tricks/</guid>
		<description><![CDATA[Coding tips and tricks.]]></description>
			<content:encoded><![CDATA[<blockquote><p><em><strong>Note: Deprecated</strong></em>!</p></blockquote>
<p>Note: this is the second part of in a<a href="http://janbogaerts.name/index.php/2009/06/05/designing-code-editing-techniques/" target="_blank"> group of 3</a>.</p>
<p>N2D is still in proto type stage, so there are plenty of idiosyncrasies to work around. Here are some tips and tricks that might make things a bit easier.</p>
<ul>
<li><span style="text-decoration: line-through;">When there is lots of code visible, things can slow down fast.</span> (fixed)  To avoid this, use the drill down/up arrows on some statements like conditional statements to close as much as possible.  If you are drilling down and need to see more code, you can always open sub items into a new code editor.  This will speed up things dramatically. You can do this on conditionals, their parts and code blocks</li>
<li><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image11.png"><img style="display: inline; margin: 0px 0px 0px 10px; border-width: 0px;" title="image" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb11.png" border="0" alt="image" width="217" height="255" align="right" /></a> Be careful with copying items around (or using shift drag). The editor displays items that are used in multiple places, but you can still be surprised when you change something to an argument only to see it changed it multiple places. The same goes for breakpoints: if an item is used in multiple places and it has a breakpoint defined, it will break everywhere the statement is used.  Keep this in mind while using copy or shift-drag.</li>
<li>I use the <em>sync with explorer</em> command (F4) a lot. This was mainly because the copy paste system wasn’t working yet.  But it’s still useful I think: it’s a quick route into the explorer.</li>
<li>The Toolbox is really useful to build code.  If you select the ‘Instructions’ section, you get a good overview of all the available instructions, grouped by functionality.  To quickly collapse and expand the groups, you can use the context menu of the toolbar.</li>
<li>It’s possible to add items to the toolbox, although this currently has to be done by hacking the “XXXdesigner.xml” file.</li>
</ul>
<h4>Final note</h4>
<p>There are still a number of shortcomings in the editor that need to be worked out, more specifically:</p>
<ul>
<li><span style="text-decoration: line-through;">CPU and memory usage are a problem resulting in a very slow view when there is lot&#8217;s of visible data. This needs be solved by a custom control.</span> (Done<span style="text-decoration: line-through;">)<br />
</span></li>
<li>Keyboard entry functionality, similar to the flow editor must still be implemented, this should speed up code editing significantly, compared to the all drag-drop or copy-paste solution.</li>
<li>Clean up the views some so that they are clearer, compacter,…</li>
</ul>
<p>Next up will be the debugger, I guess.</p>
 <img src="http://janbogaerts.name/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=106" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://janbogaerts.name/index.php/2009/06/05/designing-code-tips-and-tricks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Designing code: Statements</title>
		<link>http://janbogaerts.name/index.php/2009/06/05/designing-code-statements/</link>
		<comments>http://janbogaerts.name/index.php/2009/06/05/designing-code-statements/#comments</comments>
		<pubDate>Fri, 05 Jun 2009 15:12:34 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[N²D]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[code editor]]></category>

		<guid isPermaLink="false">http://janbogaerts.name/index.php/2009/06/05/designing-code-statements/</guid>
		<description><![CDATA[Note: Deprecated! Note: this is the second part of in a group of 3. All the different statement types, the general neuron types, some common static neurons, all the operators and the instructions can be accessed from the toolbox. You can easily drag and drop them on the editor. Assignment An assignment is used to [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><em><strong>Note: Deprecated</strong></em>!</p></blockquote>
<p>Note: this is the second part of in a<a href="http://janbogaerts.name/index.php/2009/06/05/designing-code-editing-techniques/" target="_blank"> group of 3</a>.</p>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image1.png"><img style="border-right-width: 0px; margin: 0px 0px 0px 10px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="right" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb1.png" width="187" height="695" /></a>All the different statement types, the general neuron types, some common static neurons, all the operators and the instructions can be accessed from the toolbox. You can easily drag and drop them on the editor.</p>
<h4>Assignment</h4>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image2.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb2.png" width="331" height="43" /></a></p>
<p>An assignment is used to assign one or more neurons to a variable. After the operation, the variable will reference the result of the right part of the assignment. The left part must always be a variable: regular or global, but no system variables are allowed.&#160; What exactly is assigned to the left part, depends on the type of the right part.</p>
<ul>
<li>If it is another variable, the contents of the right part are assigned to the left part. </li>
<li>It can also be a result statement, in which case the statement is executed and it&#8217;s result is assigned to the variable. </li>
<li>ByRef statements are also resolved: the content of the ByRef statement will be assigned to the variable. This is useful if you want to assign a variable or a result statement to a variable and not it&#8217;s contents or results. </li>
<li>In all other cases, the right part is assigned to the left part, so if you put a code block in the right section, it will not executed, instead, the variable will point to the code block. </li>
</ul>
<h4>(Result) Statement</h4>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image3.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb3.png" width="199" height="46" /></a></p>
<p>A statement is used to call an instruction and provide all the parameter values for this instruction. You can call any type of instruction with a statement, even those that return values, although that&#8217;s not very useful cause any result values are lost when used in a statement.</p>
<p>You select the instruction using the drop down box.&#160; The instruction itself is also just another neuron, that the statement links to.&#160; This has some consequences.&#160; For instance, if you want to find all the statements that use a specific instruction, just check the incoming links on the instruction.</p>
<p>Most instructions require 1 or more arguments. The values for these arguments are displayed in a list that comes after the instruction. This is a regular drop list, like a code list. Each&#160; instruction should have a little description (you can see/edit this in the description tool-frame if you select the instruction in the toolbox).&#160; This description should say all the required arguments and any possible result values.</p>
<p>A result statement works similar to a normal statement, except that it return a value and tend to be used as part of another statement, like an assignment, a Boolean expression or as an argument value.&#160; Result statements are depicted using the same template, but with a slightly different color to make a distinction.</p>
<h4>Code block</h4>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image4.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb4.png" width="108" height="46" /></a></p>
<p>A code block is used to group other statements together. This allows you to reuse common functionality.&#160; It is a bit similar to a <em>function</em> in traditional programming languages (like C, Pascal,..), except that there are no arguments allowed and it doesn&#8217;t allow for local variable values (scope locality), see Variables for more info on this one. Internally, a code block stores all the statements in a cluster that is linked to the statement.</p>
<p>It is possible to see the statements of a code block inline, by using the expand button in front of the name.&#160; Note that this can slow the editor down dramatically.&#160; Better is to open the code block in a new editor frame (make certain that ‘<em>Statements</em>&#8216; tab is selected).&#160; You can do this through the context menu’s ‘<em>View code</em>’ command (can also be triggered from the main toolbar). If you want to reuse a code block, you can simply drag it from the explorer frame to the editor.</p>
<p>Even though you define parameters on code blocks, it’s still possible to pass along argument values.&#160; Because the content of a variable isn’t reset when a code block is called, you can create some Variables that function as parameters, fill them before you call the block and access them inside the subroutine.&#160; The same can be done for result values, you can return as many as you want, simply&#160; define some variables and assign a value to them in your code block.</p>
<h4>Conditional statement and it’s parts</h4>
<p>A conditional statement is used by the processor to perform execution jumps (if, case, while, foreach,…).&#160; Each conditional should contain at least 1 conditional part, but can have more. This depends on how it is set up. You add parts by dropping them in the ‘<em>Children</em>’ section of the UI element (which moves to the right).&#160; You can also move them around, just make certain that the entire part is selected, and not just the ‘<em>conditional</em>’ section. When correctly selected, the part will have a selection border.</p>
<p>Visually, a conditional statement is always represented as a horizontal split in the vertical code branch.&#160; When there is a repetition in the statement (for-each, looped, until, case-looped), 2 vertical lines are also visible, making the conditional statement boxed in. This is an easy visual queue to identify repetitions (so you can have a bit of a birds eye on the code to see the structure, without the details).</p>
<p>There are currently 5 different types of conditional statements (which can be selected from the drop down box): these are:</p>
<h5>If statement</h5>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image12.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb12.png" width="452" height="189" /></a></p>
<p>An ‘<em>If</em>’ statement can be compared with a <em>structural language’s </em>if statement. It can contain multiple parts, with only the last one allowed to have no condition. The first part who’s condition evaluates to true will have it’s code executed, all other parts are skipped from then on (so there is no fall through possible like in C’s case statement). After all the code in the part has been executed, the next statement after the if is performed, so there is no repetition in this type of conditional.</p>
<p>Adding statements to a part is done by dropping them in the ‘<em>children</em>’ section of the UI element. Because a condition must evaluate to either true or false, a Bool expression tends to be used, but a result statement can also be used. Simply drop an item in the ‘<em>condition</em>’ section.</p>
<h5>Case statement</h5>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image5.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb5.png" width="550" height="112" /></a></p>
<p>The case statement is, like the ‘if’ statement, very similar to it’s structural equivalent: the content of a value is compared against a number of different possibilities.&#160; Each possibility is provided through the ‘<em>condition</em>’ of the part, which can be a static or another statement that returns a result. Only the last part can be empty, which will be executed if none of the previous values matched the variable.&#160; An empty part is not required though. There is no fall through possible (unlike the <em>switch</em> in C).</p>
<p>When you select this type of conditional statement, the UI element will display an extra drop target for you to specify the variable&#160; who’s content needs to be checked.&#160; This has to be a variable (or global).</p>
<h5>Looped statement</h5>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image13.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb13.png" width="633" height="112" /></a></p>
<p>A looped conditional is comparable with&#160; the ‘while’ statement, but with a twist: it is possible to define multiple parts.&#160; It’s actually a bit like C’s <em>while</em> and <em>if</em> combined. The loop will run for as long as the condition in one of the parts evaluates to true.&#160; Like the if statement, this part’s sub-statements will be executed.&#160; The last part doesn’t require a condition, in that case, the loop will run for ever and will only stop when a break or one of the exit instructions is called. These instructions will always terminate a loop. If there&#160; is no ‘<em>empty</em> part, the loop will stop when none of the conditions evaluates to true.</p>
<h5>Until statement</h5>
<p>The <em>until</em> conditional is similar to the <em>looped</em> variant in that it is repetitive, but it only allows 1 part that must always have a condition which is evaluated after all the sub statements have been executed.&#160; When the condition evaluates to <em>true</em>, the repetition is stopped. This type of conditional is very similar with C’s <em>do until</em> loops.</p>
<h5>Case looped statement</h5>
<p>This conditional is a looped statement, but instead of using an ‘<em>if</em>’ kind of testing style, a <em>case</em> is used. This means that you need to provide an extra <em>case item </em>variable, like the case statement. The statement will loop for as long as a condition in one of the parts equals to the content of the case variable. The conditions in the parts should be static values, result statements, ByRefs, bool expression, variables or globals (so anything that can return a result). You can also specify an empty condition in the last part which will be activated if all of the other parts were different than the case variable.&#160; This results in a never ending loop, which will only stop when the <em>break</em> or one of the <em>exit instructions </em>is called.</p>
<p>The case looped statement is a bit of a strange beast.&#160; It’s origins can be traced back to <a href="http://genelib.tigris.org/" target="_blank">Gene</a>, where it made a lot of sense for parsing or generating stream.&#160; Id don’t know if it’s useful in this context, so I simply left it in, you never know where this might end up: could be the dumpster, could be some cool trick.</p>
<h5>For each statement</h5>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image14.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb14.png" width="310" height="140" /></a></p>
<p>This type of conditional statement can probably best be compared to C#’s ForEach loop: it executes a peace of code for each neuron&#160; in a list. Only 1 part is allowed. It’s condition should be a statement that returns some neurons.&#160; This can be a variable or global that contains multiple items, or a result-statement that returns a number of items, like the one that returns all the children of a cluster.</p>
<p>When this type of conditional is selected, an extra drop target is visualized, which should reference a variable (or global) that will receive the current item from the list, as it’s content. This allows you to reference the loop item from within&#160; the subroutine.&#160; After the loop is done, this will still reference the last item in the list.</p>
<h4>Bool expression</h4>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image6.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb6.png" width="429" height="47" /></a></p>
<p>A Boolean expression is evaluated to the ‘<em>True</em>’ or ‘<em>False</em>’ neurons. It can be used as a conditional part’s condition. The left part is compared with the right part, using the specified operator. This statement type is probably recognizable from more classical programming languages.&#160; There are a couple of important twists to this type of statement though:</p>
<p>First of all, because the operator is also a neuron, it can just as well be another result statement, or variable.&#160;&#160; As long as you have something that can be evaluated to 1 or more operators, it’s ok. And this brings us to the second wrinkle:</p>
<p>Because variables, globals and result statements can return a list of neurons, so that the left, operator and/or right sides can have multiple items, the expression evaluates the lists using the following algorithm:</p>
<ul>
<li>If the left part has no result (no neurons) and all the operators are all ‘!=’ and the right side is not empty, true is returned, otherwise false. </li>
<li>Otherwise: for all items in the left part, compare each item in the right using every operator. </li>
</ul>
<p>Note, when there are multiple operators, it is like having an ‘and’ operator for conditions that work with the same left and right side, but different operators.&#160; This will probably not be used a lot (I haven’t yet).&#160; It’s just a result of the structure, so I let it be available.</p>
<p>All the operators are represented by statically declared neurons (so you can’t add your own). Most are recognizable from classical programming languages like C(++). You have:</p>
<table border="0" cellspacing="0" cellpadding="2" width="347">
<tbody>
<tr>
<td width="63" align="right">==</td>
<td valign="top" width="10">&#160;</td>
<td valign="top" width="272">equal</td>
</tr>
<tr>
<td width="63" align="right">&lt;</td>
<td valign="top" width="10">&#160;</td>
<td valign="top" width="272">less than</td>
</tr>
<tr>
<td width="63" align="right">&lt;=</td>
<td valign="top" width="10">&#160;</td>
<td valign="top" width="272">less or equal than</td>
</tr>
<tr>
<td width="63" align="right">&gt;</td>
<td valign="top" width="10">&#160;</td>
<td valign="top" width="272">more than</td>
</tr>
<tr>
<td width="63" align="right">&gt;=</td>
<td valign="top" width="10">&#160;</td>
<td valign="top" width="272">more or equal than</td>
</tr>
<tr>
<td width="63" align="right">!=</td>
<td valign="top" width="10">&#160;</td>
<td valign="top" width="272">different</td>
</tr>
<tr>
<td width="63" align="right">||</td>
<td valign="top" width="10">&#160;</td>
<td valign="top" width="272">logical or</td>
</tr>
<tr>
<td width="63" align="right">&amp;&amp;</td>
<td valign="top" width="10">&#160;</td>
<td valign="top" width="272">logical and</td>
</tr>
<tr>
<td width="63" align="right">contains</td>
<td valign="top" width="10">&#160;</td>
<td valign="top" width="272">contained in the child or clustered-by list</td>
</tr>
</tbody>
</table>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image7.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb7.png" width="275" height="44" /></a></p>
<p>The ‘Contains’ operator is a bit different. First of, there is no equivalent in traditional programming languages and it&#160; requires a little more information to work properly: it needs to know which list to search: in the child list (in which case the left part should be a cluster),&#160; or in the clustered-by list, which contains all the clusters that contain the neuron (this list is available in every neuron type, so the left part can be any type).</p>
<p>There is no operator precedence defined as in most traditional languages, since it is the structure of the neurons that defines the order.&#160; This is visually verifiable by the statement’s container: first the left part is evaluated, next the operator and finally the right part.&#160; If left or right has a sub bool expression, this is recursively repeated.</p>
<h4>Search expression</h4>
<p>This type of statement has already become deprecated. It’s been surpassed by the instructions, which provide more functionality and flexibility.&#160; Nothing more to say about this, I guess.</p>
<h4>Variable</h4>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image8.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb8.png" width="112" height="30" /></a>A variable is a neuron that is able to store a reference to other neurons in the context of a processor. That is to&#160; say, the content of a variable is only valid for as long as the processor running the code is still alive.&#160; The contents of a variable can also be different for each processor. It will also be reset after the processor has completed evaluating all the links on a neuron and when a split callback function is called (scope locality).</p>
<p>A variable doesn’t have an initial value by default. It is possible to provide one though.&#160; You need to unfold the drop location to make it accessible. This value can be another result statement, variable, global byref, or bool expression, in which case it is first resolved. In all other cases, the value is treated as a static.</p>
<h4>Global</h4>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image9.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb9.png" width="381" height="28" /></a></p>
<p>A global is similar to a variable, except that it has a different scope.&#160; Globals are able to retain the same value for as long as the processor is alive while normal variables are reset at different times during the execution process of a processor. This is useful to pass along data generated during the execution of one link to another one.</p>
<p>Globals are also able to define what should happen during a split operation.&#160; Possible values are:</p>
<ul>
<li>Empty: clear all values from the global in the new processors </li>
<li>Duplicate: create duplicates from the content of the globals. A duplicate is a neuron with the same incoming and outgoing links, same value (in case of Int-, double- and Text-Neurons) and same children, but a different ID and not clustered by any item (so the clustered-by list is not duplicated, cause the clusters don’t get new neurons added because of a split). </li>
<li>Copy: simply copy the content of the global to the new processors. </li>
</ul>
<h4>ByRef</h4>
<p><a href="http://janbogaerts.name/wp-content/uploads/2009/06/image10.png"><img style="border-right-width: 0px; margin: 0px 10px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2009/06/image-thumb10.png" width="85" height="30" /></a></p>
<p>The ByRef statement can best be compared with C’s ‘&amp;’ operator, but instead of getting the address of the memory location, in a neural network, it prevents a statement that return a result (like a variable, result statement, bool expression) from calculating that result, but instead returns the statement itself.</p>
<p>Although this statement probably wont be used that much, it is very important for the split instruction to work properly, since this requires a variable neuron as one of it’s arguments.&#160; Often, this statement is the only way to provide this value.&#160; There are other situations where this statement can be used, but less often.</p>
<h4>Lock</h4>
<p><a href="http://janbogaerts.name/wp-content/uploads/2010/07/image2.png"><img style="border-bottom: 0px; border-left: 0px; margin: 0px 10px 0px 0px; display: inline; border-top: 0px; border-right: 0px" title="image" border="0" alt="image" align="left" src="http://janbogaerts.name/wp-content/uploads/2010/07/image_thumb2.png" width="184" height="96" /></a> (Added 11/July/2010) The lock is used to combine a number of statements into a single&#160; unit of execution, relative to 1 or more neurons and/or links. This statement can best be compared with C#’s <em>lock</em> keyword. When you lock a link, you need to specify <em>from</em> and <em>to</em>, but not the meaning, so each link lock actually requires 2 neurons to lock.</p>
<p>When you lock a neuron, the entire object is locked: incoming and outgoing links, value, parent cluster list and children. When you lock a link, only the incoming or outgoing section of the neuron is locked. This is important to keep in mind, if the locked items are operated on from other processors.</p>
<p>Don’t use the ‘duplicate’ instruction or perform any splits (with the split instruction) inside the lock. Although technically possible and allowed, it is not advised since this can and probably will cause deadlocks. Any object that needs to be duplicated during a split and which references the locked object, will cause the network the hang in a deadlock (although you can still terminate all the processors from the designer). </p>
<p>This concludes the overview of all the different statements.&#160; Up next, some <a href="http://janbogaerts.name/index.php/2009/06/05/designing-code-tips-and-tricks/" target="_blank">tips and tricks</a>.</p>
 <img src="http://janbogaerts.name/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=103" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://janbogaerts.name/index.php/2009/06/05/designing-code-statements/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Designing code: Editing techniques</title>
		<link>http://janbogaerts.name/index.php/2009/06/05/designing-code-editing-techniques/</link>
		<comments>http://janbogaerts.name/index.php/2009/06/05/designing-code-editing-techniques/#comments</comments>
		<pubDate>Fri, 05 Jun 2009 15:09:54 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[N²D]]></category>
		<category><![CDATA[AI]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[code editor]]></category>

		<guid isPermaLink="false">http://janbogaerts.name/index.php/2009/06/05/designing-code-editing-techniques/</guid>
		<description><![CDATA[Note: Deprecated! Today, I&#8217;d like to talk a bit about the code editor which is used to create and view executable data. Notice that I used the verb &#8216;designing&#8216; instead of &#8216;writing&#8216; code in the title. There&#8217;s a very simple reason for this: N2D doesn&#8217;t yet define a syntax for textual input of code, instead, [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><em><strong>Note: Deprecated</strong></em>!</p></blockquote>
<p>Today, I&#8217;d like to talk a bit about the code editor which is used to create and view executable data. Notice that I used the verb &#8216;<em>designing</em>&#8216; instead of <em>&#8216;writing</em>&#8216; code in the title. There&#8217;s a very simple reason for this: N2D doesn&#8217;t yet define a syntax for textual input of code, instead, there is the code designer which provides a visual view on the raw assembly code (so there is no complex conversion required). The idea is that it will eventually (I hope sooner rather than later) be able to understand natural language, making a custom syntax not necessary.  Because designing a good language, with accompanying parser can be tricky and time consuming, I opted to skip this step and instead rely on WPF for me to build a powerful designer with.  This has sort of worked.</p>
<p>Before you get started with this post, might I suggest you to check the <a href="http://janbogaerts.name/index.php/2009/03/12/demos-explained-echo/" target="_blank">Echo words demo explanation</a> for a more general introduction on how to use the code editor. This provides a good introduction for most of the general concepts. This post will deal with some more technical details.  Because of the length, I decided to split it into 3 posts:</p>
<ul>
<li>editing techniques: that’s this post</li>
<li>all the different <a href="http://janbogaerts.name/index.php/2009/06/05/designing-code-statements/" target="_blank">code statements</a></li>
<li>and: <a href="http://janbogaerts.name/index.php/2009/06/05/designing-code-tips-and-tricks/" target="_blank">tips and tricks</a>.</li>
</ul>
<h4>Editing techniques</h4>
<p>Code editing is currently based on a drag drop paradigm in which you drag statements to the editor and drop them at the appropriate location.</p>
<ul>
<li>Drop locations are indicated using a gray, rounded border, containing the name of the drop target, like &#8216;Args&#8217;, &#8216;Children&#8217;,&#8230;</li>
<li>To add statements at the bottom, simply drop them somewhere in the white space below or at the side.</li>
<li>To insert items, drop them on the little black line above the statement.  The previous statement will be moved down.</li>
<li>When you drag an item and drop it somewhere else, it will be moved, except if the &#8216;shift&#8217; key is pressed, in which case the item will remain at it&#8217;s original position and will be copied to the drop target (no duplicate, but the same neuron is referenced. <strong>This is important</strong>!)</li>
<li>You can also copy and paste items. During the copy process, the id&#8217;s of all the selected items are placed on the clipboard.  A paste will get the id&#8217;s from the clipboard, transform them into neurons which are put in the selected place.  You paste in drop targets, simply click in the drop target (there is no visual queue yet to indicate that the drop target is selected, this still needs some work) and paste. Note that copy-paste doesn&#8217;t yet work across multiple applications.</li>
<li>If you press delete while an item is selected, it&#8217;s reference will be removed from the editor.  If the underlying neuron is no longer referenced anywhere else, it is removed.  All neurons that it references which are also no longer referenced are also removed (cascading delete).  This is the most used deletion method in code editing.  This means that when you delete a statement, all the parameter values that are no longer used, are also deleted. Or, if you delete a code block, all the statements that are no longer used anywhere else, are also deleted from the network.</li>
<li>If you want more deletions options, use the &#8216;Delete special&#8217; (ctrl+del)  command.  This shows a dialog which allows you to specify the deletion method you want:
<ul>
<li>simply remove the reference, but always leave the neuron in the network</li>
<li>Remove the reference and when  no longer used, delete it (as with the normal delete)</li>
<li>Always delete the neuron.Referenced neurons can be</li>
<li>left alone: they are not deleted</li>
<li>deleted when no longer referenced</li>
<li>always deleted</li>
</ul>
</li>
<li>All neurons can have a &#8216;<em>display title</em>&#8216;. When the designer finds one for a neuron, this is displayed when possible.  You can easily change this name by pressing &#8216;F2&#8242; or through the context menu of the selected item.  This is very useful for variables and globals.</li>
<li>Most statements have a little circle in the front of the image.  This is a toggle button to enable/disable a breakpoint on the item. This is part of the debugger integration into the editor (more on that later).</li>
<li>It’s also possible to change a statement from one type to another one through the context menu.  A warning though about this command, you might loose data with this command, that can’t yet be undone (no proper undo support yet for this command).</li>
<li>If you simply need to move a statement up or down, you can also use the context menu, which has a submenu for moving items around.</li>
</ul>
 <img src="http://janbogaerts.name/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=82" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://janbogaerts.name/index.php/2009/06/05/designing-code-editing-techniques/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

