Co-create a Wurlitzer

[Christoph Hart]

But the name Hurlitzer is definitely a keeper ;)

[hisefilo]

@christoph-hart Hise + Wurlitzer LOL. Will try the orange one but simpler. Dont like gradients into a non realistic UI

[hisefilo]

more testing on additive
https://soundcloud.com/user-830166644/additive-testing/s-B8ePv

[orange]

@hisefilo very cool GUI. Do you use svg files for sliders/knobs? Because it looks so sharp. Can you send an example snippet for a sharp vector knob like this?

[d.healey]

@orange said in Co-create a Wurlitzer:

@hisefilo very cool GUI. Do you use svg files for sliders/knobs? Because it looks so sharp. Can you send an example snippet for a sharp vector knob like this?

The vectors are created within HISE using paint routines, no need for any images of svg files.

[orange]

@d-healey Svg files are scalable vectors too, not images like jpeg or png. Can we make vector shapes like below with paint routines?

[d.healey]

@orange Projucer has a tool to convert svgs to paths which can then be used in paint routines within HISE. This is how I drew the logo for my instrument.

[hisefilo]

@orange hehe I wish I could. This example is a vector made with Adobe Illustrator. It also exports svg but never tried to convert svgs into hises paint routine. I can post the plain svg if u wish

[hisefilo]

@orange https://sampleson.com/temp/ui.svg just save as, or view page source for svg code

[orange]

@d-healey wow sound so cool. can you share an example snippet for a Projucer converted paths on paint routine?

[d.healey]

@orange https://github.com/davidhealey/librewave_woodwinds/blob/master/Scripts/paintRoutines.js

[orange]

@d-healey You are the man :) Thank you so much

[Christoph Hart]

This is also covered by the ScriptPanel tutorial:

(hise.audio)

[Christoph Hart]

Also you can draw something like the big knob directly in HISE:

HiseSnippet 1172.3ocsW8taaaCDmJIJn1aYXEXO.B8SJYxpRJ+EHXaowItKXMoFyccCHnnfQh1hHxjBRzwwXnuI6C6QbuAaGIkhji0Rh6vThYL+c2w6mNd73k9Y7PRdNOCYz5cyRIHiuzbvLlHtaLlxPmcBx3qLOGmKHYVZnimkhyyIQHCiUesDvn0ZH0ye8CGiSvrPREDB8dNMj7F5XpnBM8nehljzCGQdGcbMs24nyB4rt7D9DfOqZ5gRwgWiGQt.KUaESjw5mFQE7rABrfjiLV6XdzrAw7oLs9umlSuJgHm3iF.KjFtGOIRxXIJpaLMIpe46cNBVk9UQgU0Qguw7bZD8N7pnwWqDXUYQ83gwJOD87eb540D8LpQu0zz64lCBynohJIRt8ElmwfMpgXXKnNsz5hV4OV2rKGzfIbGiulzKClbmE16444Xsqm2lGtQ6MZCaD4BqavYV8wLRhu02YUZ6HhnKebJmASregV7KzVI+QC3lSD8gfl3m4SDTFwd3DVnfxY1i1r8uuQaK3Qt5b4JGDbXMj..YauBjJ7o.rHllK8+uRiDw1aVyp3ZR+QBcTr3NwUJcSoRQXA18lEjmwgMNfifZ2XskUvbJTebjqRUhcoENVWdOt8x.mEHzKC9v7jZjLL85LbDEhk8fCE1W5c6vg6ndbr7b8JG.z.0iy8CBK5FkSZMxcHrfmljPSyI1Wx8crjetm0cB1pNZ4RnfKWmF4XIalmikL+yjiv5wCZjiAMyQc.sk5241X57ebmoJoHsVpeXFAV793ZIeot3nnWkEZe4AxffZXZG+8brhgwO3X0IvcaGKXnIGnBt5Jd1d21qmN9Up4H2nL7Tk6Rc.OAD9X9DVTtsuqGDTOXwT7zfGgtAOM9JGs9V0wfcb26wnt9O4tSioBRSrGB4fmeD9e2lWgWgstoxMq3lO27P9tJfjPXiDxpCdtAM9VHI4ajUn.E1cqoNVpu.u6ZK2TB44t+1aEqDs+1cJE..9adX6OAepW1SdoVVWbRxUvsWU08fxdsaUq5y70h.+AGh7kIyzg10E78VxfEfKo671CVT7JovyHoxJt1ZNUuVr.mook8tP881kbxhytfKHusfbs+zBRFNrIQx7qLdRBrdMHU6n+cyrYSFeEIyA1dRlPJ0Ctaa9KOW+oc4YnNWulhb1YLp3sojh4O7s+nhCKv29kyNAhrxabKv.8RIYBpjNFmPtAZkQe+aKySH4WK3oJcKtKDnrPIcixamkQeDEb8yL06Dnauqam+75ilUMgbzTYwopdgnGEqJMUGAsXi.P6H7nIIXw78nHaLqP.D5mqY.4E9rbpXV8F2VhFW7dx8U8To6yM6SEgwMy2UZfuvNz+27snMvMLOc3PRnnhrqY1629b64aInhtqoQmiEYTHmw7hIiG.U4BI.SXPlD3HSiUjYu54dx4xHy.BKRM4ugmBg9x4FEB8KEhFiCy3eLTenT1n4yTH.mXp9saAM9Cys7QpCpZdOF598iggx.QGf4MaQvRaw1KsE6rzVr6RawdKsE6uzVbvCXg7e03USD7w5iE.P+SUknLLNkggrJUFH5e..XlppL

[Jay]

@christoph-hart and what if we want to drag ourself?

[orange]

@christoph-hart Wow! Incredible. Thank you so much guys!

[resonant]

If you are using Adobe Illustrator to make SVG files; you can get the data Path inside the Illustrator. This is the video that shows you how to do this:

Cheers ;)

[Christoph Hart]

@jay said in Co-create a Wurlitzer:

and what if we want to drag ourself?

1. Create a slider
2. Load an empty image as filmstrip and put it on top of the panel (I'll remove this step by adding a "invisible style" option soon)
3. Grab the slider's value in the timer callback instead of the stupid calculation and store it in this.data.v

This is also known as the infamous "Invisible Slider Trick". The advantage of it is that you get the convenient things from the slider (skew factor, value popup, shift click for entering values) without being limited to it's appearance.

[d.healey]

@christoph-hart you can use the slider's control callback too which I assume is more efficient.

[Christoph Hart]

Oh yes, I forgot, that's also possible...