GUI Development Question.

[HISEnberg]

@zach-mx There is an image component for anything that is static (say for example your background). You really only need to use filmstrips for dynamic components such as sliders and buttons. Otherwise you more or less have the process right.

It is usually recommended to export your images 2X larger than your UI and scale them down (in order to deal with different displays). If you can use Hise LAF/Painit Routine for anything, it is usually better than using a filmstrip or image. Keep in mind that the z-level works bottom up, so the last component you add to your UI will be "above" the other components. You can rearrange this in the Component List of the HISE interface.

[zach.mx]

@d-healey said in GUI Development Question.:

@zach-mx What do you mean by textures?

The graphic artist I work with will probably add some visual grain/distortion to whatever layout he designs to give it a sort of "vintage" feeling - or something to that extent.

Say a panel is a solid color but utilizes an overlay of paper/metal overlay + grain in photoshop, does that get imported as an image and applied as overlay essentially? I have a very elementary understanding of the paint routines/how hise is drawing interfaces, so maybe I just need to dig into some more of those tutorials, but I'm sort of proto-typing as I go

[d.healey]

@zach-mx You can create a grain effect directly in a HISE paint routine (or laf) by using the g.addNoise function

HiseSnippet 870.3ocsU00aSiDEclz5tzrKHPhm3Iq9jKpJxNanMKHDkl1rDszRzltU7FZ53qiGU6YrlYLkHDR6ekUhef7Of8N1IMIaqJPjVKkHe+3LyQ264d8PshCFiRSnMOcRAPn+h2nIRaZuTlPRFbHgdOuiYFKn8qccvjBlw.wDJcse24ft45jpmu7hCXYLIGl6hPNSI3vqE4B6buC2+ODYY8Ywvoh7Exty9C3JYOUlpD4yZdgjBF+B1X3DlKsFdjWwLoD5i8hi5Dkzky1saTm1bd6t60921iCrjDX2nmrWmtIcRX7v1D5FGEKrJ8HKyBF7POPEOYTp5RY8EblvHNOCbFQjQ3MW6lzKUjEObVwwPHz0GNuTsVco5gdGKhEW4edI69UA7miXwhFswsQone.JQWfRqWSoG3MhqEE14Qb74m8FHwNHVRfknRctjF+C0qmByPZakyt.5qQiqPDraX3N93ea+rlMw9iw5+dl1eHSBYQ9O2eFxwfsmJuPIQifspCukCS8qsLfcHVfr+opzJjPPRojaEJYv3sa9wlaNtUBJJdYVVfMUXbmVvVmOtVLr0134fYvhiOQILPvGYYEorm5G1Jr6N9FNKC5y3XQ8o9sagrkoAL5rC50JLgCTkxXSP3163mqjJdpVkyrBNlltD9DdA3uYbxWIOQYg2HCp3VyO0z++FJI4Fi4pFZUVFnuwvNAu91.FHKyOGz6f03rR3pDwF7xplM99TM75lyBIpjCjB6aJfo18UYwN0f68qqwHS6t3a+0fCYVlS1M0GlWAnsBGcnGBuGGzqEga5cHXtvpJpxcpjfP+IaUz6NSh5jEDAd02wqVhP9vU6B96y1exhFWJhs3juG8yTBIEDiSsNq8QqYhDL8MN8xG805ULWax.mIUwkYL6xCptUXSCf8gklNbS.RivNYwUb+.Sug25z62KEef2PgkmdybrwMvQrC8+AGmty6tdGgKY414Dbcu9ucUWv8Mt95UEiOlY0BTa3cRY9HrSyA71knhw3z.MbpzZ6PmsqBLBjwUFeEelFLxYSmFLZVPRNiqUuiWO841pdmJOHmjUe0YS7yenseDoZhbw5bNtj+cb9xG00.1dUA9qqJvNqJvmrp.2cUAt2pBr62Fn6avurzVslGGaHjiGdT0JLJ8HICUfUpUx+xKqE3N

For other textures you'll need to use images. Either drawing them on panels or using image components.

[zach.mx]

@d-healey said in GUI Development Question.:

@zach-mx You can create a grain effect directly in a HISE paint routine (or laf) by using the g.addNoise function

For other textures you'll need to use images. Either drawing them on panels or using image components.

Amazing. Good to know there's a grain function. The grain + distortion references is really just one example of something he might do. I'm not 100% sure what sort of techniques he is going to utilize. Really just trying to understand how it will all come together so I can give him appropriate direction when the time comes

Appreciate you @d-healey. I have been devouring as many of your videos and using them constantly as I prototype this instrument I'm building. I'm sure I'll have many more questions.

[tonni]

@zach-mx In mobile application development, designing an intuitive and visually appealing user interface is crucial for user engagement. If you're working with a website development company in Dubai, integrating a graphic designer into your HISE plugin development process makes sense. Starting with a PenPot mockup and exporting it for Photoshop allows for detailed design refinements, including color palettes, textures, and layout improvements. Once the design is finalized, exporting individual layers and vectors ensures a smooth transition into HISE. While film strips are commonly used for animations and dynamic UI elements, standard images and textures can also be implemented directly, depending on the design requirements. David Healey’s tutorials on UI design in HISE should provide valuable insights into best practices for handling images, film strips, and Paint Routines efficiently.

[clevername27]

@tonni I'd welcome hearing more from you the forums…

[d.healey]

@clevername27 pretty sure that's a bot post

[mmprod]

@d-healey and it has 4 upvotes

[tonni]

@d-healey No, dear, not a boat. I am just making my post error-free; that's why it looks like a bot.

[d.healey]

@tonni Ah fair enough, just looked sus