<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Prevent Waveform Floating Tile paths clipping at the tile bounds]]></title><description><![CDATA[<p dir="auto">Posting this in case it helps anyone else. I just banged my head against a brick wall for too long before I realised how simple this was! <img src="https://forum.hise.audio/assets/plugins/nodebb-plugin-emoji/emoji/android/1f602.png?v=fba14f4754a" class="not-responsive emoji emoji-android emoji--joy" style="height:23px;width:auto;vertical-align:middle" title=":joy:" alt="😂" /></p>
<p dir="auto">When using a Floating Tile with content type Waveform (to display the waveform of Sine Wave Generator or Waveform Generator, for example) the default waveform path is a filled shape.</p>
<p dir="auto">You can override this with LAF function <code>drawAnalyserPath</code> and draw a line path instead of a filled path:</p>
<pre><code>laf.registerFunction("drawAnalyserPath", function(g, obj)
{
	g.setColour(Colours.white);
	g.drawPath(obj.path, obj.area, 5);
});
</code></pre>
<p dir="auto">However, this means that the path is clipped at the bounds of the floating tile, especially at wider line thicknesses:</p>
<p dir="auto"><img src="/assets/uploads/files/1768433450281-cleanshot-2026-01-14-at-23.30.35-2x.png" alt="CleanShot 2026-01-14 at 23.30.35@2x.png" class=" img-fluid img-markdown" /></p>
<p dir="auto">To prevent the clipping, I fudged around with it for longer than I want to admit before I realised the answer is to simply reduce the area that the path is drawn in, by half the thickness of the path:</p>
<pre><code>laf.registerFunction("drawAnalyserPath", function(g, obj)
{
	g.setColour(Colours.white);
	g.drawPath(obj.path, obj.area.reduced(2.5), 5);
});
</code></pre>
<p dir="auto">Voila! No more clipped paths! <img src="https://forum.hise.audio/assets/plugins/nodebb-plugin-emoji/emoji/android/1f64c.png?v=fba14f4754a" class="not-responsive emoji emoji-android emoji--raised_hands" style="height:23px;width:auto;vertical-align:middle" title=":raised_hands:" alt="🙌" /> Top row is using <code>obj.area</code>, bottom row is using area reduced by half line thickness:</p>
<p dir="auto"><img src="/assets/uploads/files/1768433736513-hise-unclipping-waveform-paths.gif" alt="HISE-Unclipping-Waveform-Paths.gif" class=" img-fluid img-markdown" /></p>
<p dir="auto">You might want the left/right of the path to bleed out of bounds, in which case change the reduction from all-round to y-only:</p>
<pre><code>obj.area.reduced(5) 👈 all-round
obj.area.reduced(0, 5) 👈 y-only
</code></pre>
<p dir="auto">Note: you might need to compile with <code>HISE_USE_SCRIPT_RECTANGLE_OBJECT=1</code> for the <code>reduced</code> and other <code>Rectangle</code> helper functions, as per the docs: <a href="https://docs.hise.dev/scripting/scripting-api/rectangle/index.html" rel="nofollow ugc">https://docs.hise.dev/scripting/scripting-api/rectangle/index.html</a>. Not sure if it's still the same, or if it's built-in to all new builds.</p>
]]></description><link>https://forum.hise.audio/topic/14222/prevent-waveform-floating-tile-paths-clipping-at-the-tile-bounds</link><generator>RSS for Node</generator><lastBuildDate>Wed, 22 Apr 2026 02:40:04 GMT</lastBuildDate><atom:link href="https://forum.hise.audio/topic/14222.rss" rel="self" type="application/rss+xml"/><pubDate>Wed, 14 Jan 2026 23:39:21 GMT</pubDate><ttl>60</ttl></channel></rss>