Waveform Icons

[Morphoice]

I made these little waveform icons, if anyone has use for them please feel free!
Couldn't find ones that aesthetically pleased me anywhere online so I drew them myself in Illustrator.

Here's the source code to save you the conversion hassle.
you'll need to put a correspondingly named panel for each icon onto your UI

const var labelSine = Content.getComponent("labelSine");
const var labelSaw1 = Content.getComponent("labelSaw1");
const var labelSaw2 = Content.getComponent("labelSaw2");
const var labelSquare = Content.getComponent("labelSquare");
const var labelNoise = Content.getComponent("labelNoise");


const var svg_sine = Content.createSVG("418.nT6K8CVaATLC.XwmXQBHMZa.yhzBWkPkzQoPI.XRHHfRltcFhHhxLSR+8ffD.fD.frPX.7D.CAvSTCNZz7jbrqXcge2s1E0hJ4HgjBp3.BkkzCJQLJkZYdDgjyUdkJUXXD.hISbH4DEA5AIVRKCQ3XhEHjbZ.Y4AknlGBRt7fDTH47HBjFRXDwwRRcM4DQBjnHbPYA5AIHnIJcem0Y+dagO9rM6uKt12R9Mzsu0bwWwE+Uy8cMWuuRFs12Fcpqq8gjSikTxIJZADiEGlr.hlmzlJSCSSECzP.B.AAoAJzLBhweb.Mwjnl39iS8a5VWS705aEYq2Pl+pXacEcuuv0cMYv5UM70m2yXz0tRYFUXycFCU3xN6g5dEis2apZfacWmr85Jer2a532bF..OOnDwz77fo4gIs.+Vt38cEa14Vttig5Yrjo5ycq8GCa5cKT0qMxtaWrc+0XumWXyes399hQEpp6TG6cis58JY1UFeQABP.BhsK2YKDfvQaW6pYBGsn686WbjTEfTvBH0gKeBlyD..lyqiJhJFXZcpv.EDISfT.");

const var svg_saw1 = Content.createSVG("375.nT6K8CVEAz1B.X31PQBLswI.CsFJ3O.5GCwxB3EEF4vydsdXQ1atkojr+KbRCJnfT9PU.jD.6.Pqe2rhpnpFIfTvDHGRTTQRlVTU4knHfb1jOYxjkEAfHRDGTMSOjdPBEE2PDPSr.AUCCGJQRlXbHPAWGjfBplnGNX.44AjhR+pZd.wwTDPRTjdPBBXBoaOmw3ea5hmy8wMY8YXx6U1Z.7cL62M9AUCCEkpYZZgzihCQV.AiihW6ByBSECzH.AjjbzfhcMI8bGHoIhLw3L0.hAiipc3tJs5lQ2UNi70Vx5tSX+9xR9vjgm2G2Y1Bq0TTe6R8geuiRZruapoS+K0LtmkO14r4uIbuKeeoa1ru39sM.3DIYZgwIZgwYQwfqOuqW7wUCWt2Yqkuasu2zq6p4uaxr2Vw9568i5.T+x9lP8O3a8r1425jwucaFg20xm6AO.v.3CTYNiL1ylW6BDBPsGnkSga24PuIMLJhKSfgubpQCnlbjKfT");

const var svg_saw2 = Content.createSVG("378.nT6K8CVGAT3B.XCGRQBHMhZ.yhzhqRAcwYTVLf3CSHkhpX+vcuyMkYaOOJtX.BBv3QvU.nD.7.fpJs9cuJLE15ABHELQpgDk0jjpEFisKSO.47jOYxjkEAbHRjFVOUOnb.gxZY3AoHTbv5YQCkIIUNPDrdoAHjv5Y5QiEPhdHorXWWOOfzn5AIIJTNff.m.e1C0uplMWeW0zcMa7eY2bM224Lp2qnieSacrdVnrVOUUJnhTZHhBGbfVapKNKNSL.i.DfhpACIzrhJ5PRTQDoxAphgzBGnk19Kn8YNaMusJp7YRWe1gO1SkuhL6Iy6HC412qJ1XmoX+FYl2nycW+UQll2jMeG9bmooxbcuKatyMn1mY2zE..zjjpEGnoEGnk0B5YZ9z6xV+KY3u4aeKYQsBYV03qJ1vdi8dGxhXZuwHg6qb1Mx74Me52F1M64E08sN48sSwfC..BAbOfZYfVwSwEfTlV37hetr1pypn.ErAO9xoFMfZxRt.RA");

const var svg_square = Content.createSVG("411.nT6K8CFaAzHC.XG2SQBLKZU.CGtRigPYNnpFCf0Hyo3vp4saQtBoHIYp8GrsbFQDAn1U.vD..A.b0KM2ct0BuvJmJQJfRjioEUioICy7hogjHmQ4TnPggQ.GlLoAkyDhziJKpECRhdPABJmENVZLMadHPE2CRPAkSCHNVDABRzhheqbfDwwTRzzhziJDzDvgch25PEJuStRs7LbRx2oM16dY0s9agjq2Zc8Va8P4rXQoblSERPKMLQgCMOp01LMLMQL.i.DPRxACH5cJA8mHoGlLadlLhVz7nfrGr2pqOSYnH+XbJ9dSat2RI35rUhcmt0eJCsf2IipSkq2FzmoQ1iaTdW+255uR9rEp42RDVO34dWLC9113+VFJ1AvSioISySCllGF0BKCwd2sRzc6tM1N2Zq8MFuCBJebcuG6Vhweew27Wn6J2vCUFel1huoN4as+Ra1iJ6clF6+zUZfBXhRxQ2AhhqpDiCjDvKwqYkShE.l.HgPohgR.+f3zisKPwXZu.E7AT0C3ONmS+oAnymBxXvi0MwfhHgVjB");

const var svg_noise = Content.createSVG("900.nT6K8CVaET8F.Xfr+IBPuIM.e9TDsLtc69FBdU.6hdLcoZYKqHhT11W9KhGGEUWLWBPZ.fF.nZOa8Sa2q1JOZ75m0f7WnU8bwGVXXd77vfSyxDJXPB6Z3ngiLFvg.DvwghCXb1iSygDw4BJdb.4wgHM3.BCpWwagSWs3RZIw7vhHJnRDJUrvzHkRXCISDwyJuRkJMZHfDTPwDlGOPrvfKLQjKX3.lGMPYQREONfP.yxL.gDXdHABJMDQCDQVXR+Xd.QDTdlHREKNOXAANprb02QzVo2WaNHDeuWaK0urd8TsFEZ78DhNGDlYtdaKttkhSqIY0MkehH0c0bVHV6CSH7199cssV5sl0tq+hx9m4nbanUeFyq18059oyVEqtxTplFw6n05WEsNHDRyinkw549qoxaWREnz2lBWXlt0K8MoILx7pY7WZMZY+khndGk5cu850b84Ty5QmC4C0L+6P8dDuBwoqHzhWUdDoa+8PMdu6CVbyJhaBwEmX05bdomLBUM2IDe0Z561DVW9qg596tzTUwCopNu27o2WpyF2O..QREOMb.QRCFETYdzXMeyRcE2N8w8USOSUWeEOD25YjhMn5Jz5VWmSIlVqmo26wzyy4J8caV9ah18thF1bpstYwOgS85Kzk3o5mYZNY9koHlcd8KZUbeuMHkuRsNVd18Uy6WqhV2xHdzQYpE.HznFHNujUC.RBA.EAA.Y.yX00AP5c.IPbF7x5.YmS4bta1qNmyKQbTfDYpQ2NCQNjaMsAbtozqaGP7fbVrrAiQXFKAiOj0wIxXlWH4VtDpxcZfvpLfd63EJeTuejUlp5C+8vQxdIEJG.AqM.LwgQDCaD7txZ7SXLqtJLe0TG1I.7ZQmLvdOJBsxceFm8ujzMtB56bQJB.p8WC5wxGYBWfM9QupFrg0UBNklYHWEIZ2sqRiIBeWz8AyipcpkV0SL3XJWSM.HO1QmBBny79HHCDIbx8o.NfuyMUMwGavh+e5RiB5ZGLFTsln490Dh.crvp3dI96hiENh6hXKYpGgwUKJv7tEStIll4RIgac0qg1Z.ABDjPeHWE.GgZ9sZVNMF2QthzVrEbU5PoRug0ElbGze218nYtForGfxR4FSg3b95HLP9bu4DSURVp8DMkGoel25vVXL+lltYVeicArLaiD.S.HMhWHGEXF.5Ay2wuC1CkK6kMbLGd1A");


labelSine.setPaintRoutine(function(g)
{	
	g.drawSVG(svg_sine, this.getLocalBounds(0), 1);
});
labelSaw1.setPaintRoutine(function(g)
{	
	g.drawSVG(svg_saw1, this.getLocalBounds(0), 1);
});
labelSaw2.setPaintRoutine(function(g)
{	
	g.drawSVG(svg_saw2, this.getLocalBounds(0), 1);
});
labelSquare.setPaintRoutine(function(g)
{	
	g.drawSVG(svg_square, this.getLocalBounds(0), 1);
});
labelNoise.setPaintRoutine(function(g)
{	
	g.drawSVG(svg_noise, this.getLocalBounds(0), 1);
});

[Shelest]

Sorry for what may be a stupid question, but how do you convert a SVG file to Base64?

[Morphoice]

@Shelest theres a conversion tool in the HISE tools menu

[Shelest]

@Morphoice Thank you very much! This was the greatest example of carelessness on my part. I didn't even think to look for it inside HISE. And I didn't find any adequate external tools.

[d.healey]

@Shelest said in Waveform Icons:

I didn't find any adequate external tools

There's also one included in Projucer

[Shelest]

There's also one included in Projucer

Thanks a lot David, I'll take a look.

[d.healey]

@Shelest said in Waveform Icons:

Thanks a lot David, I'll take a look.

Na use the one in HISE, it's better.

[Shelest]

@d-healey OK, thank you!

[Morphoice]

@d-healey what sort of data is this anyways? it looks like Base64 but that shouldn't have dots in them should it? doesnt register as valid Base64. I wonder how to convert it back, should someone want to make changes to the color etc. It didn't work without the color info

[d.healey]

@Morphoice Says Base64 Path, not sure of the details. I don't think colour information is included, you'd assign the colour within your paint routine/laf.

[Morphoice]

@d-healey in my case the svg was set to white, it wouldnt take color from the paint routine, it still always came out white

[d.healey]

@Morphoice said in Waveform Icons:

in my case the svg was set to white, it wouldnt take color from the paint routine, it still always came out white

Show me your code

[Morphoice]

@d-healey it's all there in the first post, no more to it

[d.healey]

@Morphoice I don't see anywhere in that code where you're setting a color though

[Morphoice]

@d-healey I didn't because it wasn't changing the color, so i removed it. It was really just the example from the docs

[d.healey]

@Morphoice Oh interesting, I just realised you're using g.drawSVG. I've never used that function I always use drawPath or fillPath, which take the colour. But it seems drawSVG doesn't.

[Morphoice]

@d-healey I assume the path information is the same? I remember during conversion that sometimes the tool needs only the path info, sometimes it takes the complete svg... I really can't tell when it works and when it doesn't I was just glad it went well with the icons. non-connected paths or things with multiple paths sometimes break. I had a logo once where all letters worked fine, one just wouldnt

[d.healey]

@Morphoice said in Waveform Icons:

I assume the path information is the same

Not necessarily. I just tried it with your sine icon and it doesn't work.

[ustk]

@d-healey g.drawSVG takes the colour inside the SVG and cannot be overwritten (what a pity...)

[d.healey]

@ustk said in Waveform Icons:

(what a pity...)

That's probably a good thing, no? Does it work with multi-colour SVGs?