Dashed Lines, How?

[Natan]

Hey folks
Anyone got an Example for Drawing a Dashed Line, Like This:

Thanks in advance

[d.healey]

@Natan

Adjust the count, width, and thickness values to get what you want

HiseSnippet 898.3ocsV00aaaCEkzIJHVqcXEX+.HxSxKotxsocCHqnowIovnIoFyYcCXnnfgh1hHRjFRTMwnHOt96s+C5tWQYKmVC2VCL8fAuebHOj7buz8yLBYdtIiPad9jwRB8NdClnswci4JMo2gD5O5cJO2JyXNWGLYLOOWFQnz0dA5f1bcR42Ge1A7DtVHqcQHu1nDxSToJas296+RURxw7H44pz4xd286IL5tlDSAvm07BIi4hK4ijmwwzZ3QnabTjxZxFX4VYNjyAlnIChMWoc4+ZUt5hDIZzgL.lHmaR2XURT+o60bBgtd+5c9Ztc9O6cpJRMye8IvOUFfUiX9y.ZikQoNeGThNGkV2Qo64MPjoFaqif74G75ogKjgb3nddp3xkz3YM75ZfLz11o7KkGmAFyPD7jvvcXvOs1y2GNtysr2wyX84ZYRG1SYSQNRZ6ZRGazfQvVtvagXbCamKs8gCH6eXJrJsLXXgVXUFcvnV9u2uINmbX5rwpbbtNwH3IGXJzQ4A3RWlf.rsPRcBqbbkJxFiNdbkC.t3RMr0Am6BKdyQsGBZmmmjDLclC15hQNMyVsvI1u4PSFKPAHB2ioX+taYfgaucK+l.2Jm4qg3J1uLif+EtzAsXOnJcHsQsix3WcBt6tdG.v1N9sCi+OO5MPhOjc+4HHXurHyLQNdi+Ms1a5IFynOyXkuRGTdx4eiO6yCMb3Big2UYljDY1BCiUWYKCXftH8BY1NfBHoPNKQP9caM8FeaZZgS5LWhFcOsx9pwxJ6iMIQnVEG+kU.jJsGL5O6cH2xwhhJePdikYVERG5gx2AcUbkHM8NTleo0LtL2JAKgtosL5cmV.ghVhBV5M8bBXx00MdNe+I0Fmse4sLg5Q+WJgDKUihsn0G.qoRMH8M9D7g.TVYZsWvwmbc49hpYnOhIpHgaucyErKZU.314VUzXUqNWYmLeW1uiNNgKsiy2JEumWekUDuXN1XAbDt29+fiU8ouq2QCGJE1ZBtt2w+8p1T9qr7t1aiNkayTfhw6rhzAvMsPBqtFzQ4nxnApcc1gnMdBLPpiJMPYRUvNnMsJXmoAIobQl4sBWMI9Rvlkd.NoKe3qI7BLXy5PJqSAbdgsCIoviRuUHvs+8gxoEi4gq.lGsBX1cEv73U.ySVAL+5Jf42VJF7+C77BqI0UN.N5eTYCKJ8HMGTVkpPx+AVLghkB

[Natan]

@d-healey Excellent, Thank you so Much, Sir David, True Legend :folded_hands:

[gorangrooves]

@d-healey
Your script:

const var Panel1 = Content.getComponent("Panel1");

Panel1.setPaintRoutine(function(g)
{
	var a = this.getLocalBounds(0);
	var count = 10;
	var width = 15;
	var thickness = 4;

	g.fillAll(this.get("bgColour"));
	
	for (i = 0; i < count; i++)
	{
		var x = i * this.getWidth() / count;
		g.drawLine(x, x + width, a[3] / 2 - thickness / 2, a[3] / 2 - thickness / 2, thickness);
	}
});

So, if I understand the script correctly: you are not drawing a single dashed line (as you would in a graphic design software), but rather a whole lot of short lines that appear like a single long dashed line. Correct?

[d.healey]

@gorangrooves Correct. And you can do the same thing in a graphic design program by converting your stroke to a path.

[gorangrooves]

@d-healey Yes.

I got chatGPT to help me write a script for a vertical line made up of circles, and it used a similar approach, so I was wondering if that was the only way to do it, or if HISE was able to specify properties of a dashed line. Apparently not.

Now, I am going to try to paint the "fake" line with a gradient and if that is successful, to turn it into a signal meter (slider).

[d.healey]

@gorangrooves You could draw a solid line and place other lines over it to make the gaps. This won't work for circles though.

[gorangrooves]

@d-healey I am rethinking whether this approach will be too complicated.

If the 'y' axes (top) starts moving, as it will be in a meter, then the gradient will constantly shift and defeat its purpose. Could probably offset it with some crazy math which I would rather avoid.

A simple solution is to use an SVG and either cover it from the top down on slider value change, or use trimming to trim the top based on slider value. Is there a trim function in HISE?

[d.healey]

@gorangrooves No trim function. You could use lottie for this.

[gorangrooves]

@d-healey hmmm interesting. I will check out your Lottie video and see if it gives me enough clues to make it happen. Thank you!