Forum
    • Categories
    • Register
    • Login

    UPDATE // NEW: Online Knob Builder for HISE!! // SVG's has entered the chat ! =)

    Scheduled Pinned Locked Moved Scripting
    lafknobsknob designerscalable knobonline editor
    56 Posts 14 Posters 652 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ChazroxC
      Chazrox @Chazrox
      last edited by Chazrox

      STABLE!

      MyKnobLaf_snapshot (17).png

      StarKnobWickedFixed.gif
      You can truly get wicked now! 😎

      Knob Designer:
      https://rox-knob-builder-for-hise.netlify.app/

      Thank you @ustk for the low down on boundaries! 🙏 ⚡

      dannytaurusD 1 Reply Last reply Reply Quote 3
      • ChazroxC Chazrox marked this topic as a question
      • ChazroxC Chazrox has marked this topic as solved
      • ChazroxC Chazrox marked this topic as a regular topic
      • dannytaurusD
        dannytaurus @Chazrox
        last edited by

        @Chazrox Excellent work! 👏

        Meat Beats: https://meatbeats.com
        Klippr Video: https://klippr.video

        1 Reply Last reply Reply Quote 1
        • ChazroxC
          Chazrox
          last edited by Chazrox

          Major Update! :

          SVG's has entered the chat!

          KnobBuilderV2_SVG_2STEP.gif
          (I just noticed I knocked the svg a little off center but you get the point lol)

          You are now able to import your own SVG file and place it anywhere on the knob.
          Aside from free placement, you can also choose whether or not the image will rotate with knob or not.
          You can also shift the image around the knobs center to get some cool effects (heart examples shown below).

          The process for importing SVG's is easy.

          Step 1: Activate 'SVG BODY' layer element in the layers column to the left of the UI.
          Screenshot 2026-06-28 at 12.48.36 AM.png

          Step 2. Drop in your raw SVG file into the 'SVG Dropzone' (strictly for UI visual reference)
          Screenshot 2026-06-28 at 12.49.14 AM 2.png

          Step 3. Get 'HiseScript Path Number Array' with HISE's built in 'SVG to Path Converter'. Paste this into the second dropzone that accepts the HiseScript Path Number Array.
          Screenshot 2026-06-28 at 12.51.59 AM.png

          Make sure you use the right conversion or else your code will not work. This is the actual path that gets baked into your exported LAF function.
          Screenshot 2026-06-28 at 12.54.29 AM.png

          Paste Hise path number here:
          Screenshot 2026-06-28 at 12.49.14 AM.png

          From this point you can continue to design the rest of your knob!
          These are the available parameters for SVG layers.
          Screenshot 2026-06-28 at 1.28.26 AM.png

          Here's an example of how you can offset the SVG and get some unique results:
          SVG_Offset_Rotation_ExampleWorking.gif

          ENJOY!

          LINK:
          https://rox-knob-builder-for-hise.netlify.app/

          David HealeyD 1 Reply Last reply Reply Quote 2
          • David HealeyD
            David Healey @Chazrox
            last edited by

            @Chazrox it would be better to use the 64 encoded string rather than the array

            Free HISE Bootcamp Full Course for beginners.
            YouTube Channel - HISE tutorials
            My Patreon - More HISE tutorials

            ChazroxC 1 Reply Last reply Reply Quote 0
            • ChazroxC
              Chazrox @David Healey
              last edited by Chazrox

              @David-Healey I tried that first and was running into a couple problems so I tried this method and worked it out. I may try to just add that also as a different import option. Besides making the output code longer, I figured both methods are just as easy to the user. Have you had a chance to out the app? Would love to get some feedback from you!

              David HealeyD 1 Reply Last reply Reply Quote 0
              • ustkU
                ustk
                last edited by

                Since it throws us code, I can really see this as integrated Hise popup or specific tool window

                Hise made me an F5 dude, any other app just suffers...

                ChazroxC 1 Reply Last reply Reply Quote 1
                • ChazroxC
                  Chazrox @ustk
                  last edited by Chazrox

                  @ustk That would be sick! Im slowly building other element designers as well. Just trying to get this one feature complete as possible so I can let it go for a bit.

                  1 Reply Last reply Reply Quote 0
                  • David HealeyD
                    David Healey @Chazrox
                    last edited by

                    @Chazrox I tried the version you sent me the other day but not the more recent ones. My knob requirements are very basic :)

                    Free HISE Bootcamp Full Course for beginners.
                    YouTube Channel - HISE tutorials
                    My Patreon - More HISE tutorials

                    ChazroxC 1 Reply Last reply Reply Quote 0
                    • ChazroxC
                      Chazrox @David Healey
                      last edited by Chazrox

                      @David-Healey Basic is good! Nothing ever wrong with that. I'm also a designer so this is just more intuitive and fun (because why not fun? lol) for me and probably also for people alike. I've seen some pretty interesting knobs with some of the new plugin releases i've been seeing so I just hope this will help Hise users that dont have much coding experience make more and more unique styles faster and easier (which keeps it fun). The knobs i've shown in these examples take less than 5 minutes to make when i've taken hours to make one knob trying to figure out how things work. No more of that. 👍

                      I've already built a 6-State Button Designer that spits out LAF code and PNG filmstrips. Thats coming soon and it will be just as feature stacked!

                      1 Reply Last reply Reply Quote 0
                      • D
                        digi
                        last edited by digi

                        Fantastic work. Would love it if we could also adjust the drop shadow on the x axis. Need to find a way to use this in JUCE.

                        D LindonL 2 Replies Last reply Reply Quote 1
                        • D
                          digi @digi
                          last edited by

                          Utilised https://marketplace.juce.com/products/melatonin_blur and got it rendering in JUCE nicely

                          ChazroxC HISEnbergH 2 Replies Last reply Reply Quote 0
                          • LindonL
                            Lindon @digi
                            last edited by

                            one more vote for x axis on the shadows....

                            HISE Development for hire.
                            www.channelrobot.com

                            ChazroxC 1 Reply Last reply Reply Quote 1
                            • D
                              digi
                              last edited by

                              Separate gradients on the hightlight and shadow of the drop shadow layer would be awesome too.

                              1 Reply Last reply Reply Quote 0
                              • ChazroxC
                                Chazrox @digi
                                last edited by

                                @digi What is this melatonin blur?

                                D 1 Reply Last reply Reply Quote 0
                                • ChazroxC
                                  Chazrox @Lindon
                                  last edited by

                                  @Lindon @digi Sounds reasonable enough. I have a bunch of updates I just added also. I'll do 'Drop Shadow'/ 'X axis offset' too.

                                  D 1 Reply Last reply Reply Quote 0
                                  • D
                                    digi @Chazrox
                                    last edited by

                                    @Chazrox A better way of getting blurs & glows in JUCE as the native stuff isn't great tbh.

                                    ChazroxC 1 Reply Last reply Reply Quote 0
                                    • D
                                      digi @Chazrox
                                      last edited by

                                      @Chazrox Legend, thank you.

                                      ChazroxC 1 Reply Last reply Reply Quote 0
                                      • ChazroxC
                                        Chazrox @digi
                                        last edited by

                                        @digi How do we use this in Hise?

                                        D 1 Reply Last reply Reply Quote 0
                                        • D
                                          digi @Chazrox
                                          last edited by

                                          @Chazrox You don't; it's for JUCE, not HISE.

                                          D 1 Reply Last reply Reply Quote 1
                                          • ChazroxC
                                            Chazrox @digi
                                            last edited by

                                            @digi @Lindon

                                            How does this look? Shadow and highligh shifted on the x-axis.

                                            Screenshot 2026-06-30 at 8.30.05 AM.png

                                            Screenshot 2026-06-30 at 8.31.32 AM.png

                                            Can you give me a small codeblock of how you guys add gradient to a dropshadow?

                                            1 Reply Last reply Reply Quote 1
                                            • First post
                                              Last post

                                            20

                                            Online

                                            2.4k

                                            Users

                                            13.8k

                                            Topics

                                            120.3k

                                            Posts