Forum
    • Categories
    • Register
    • Login

    How to do text links in a settings panel?

    Scheduled Pinned Locked Moved General Questions
    15 Posts 4 Posters 72 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.
    • David HealeyD
      David Healey @dannytaurus
      last edited by

      @dannytaurus I couldn't get the markdown to behave properly, but it's been a while since I tried it. What I've done in the past is just use buttons. However I'm working on something now where I'll probably need text links so I'll explore the markdown idea again.

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

      dannytaurusD 1 Reply Last reply Reply Quote 1
      • dannytaurusD
        dannytaurus @David Healey
        last edited by dannytaurus

        @David-Healey The basics seem to work fairly well, although the links aren't clickable.

        I wonder if that's just in HISE and maybe they work in the compiled plugin?

        The Markdown docs don't say that any other link handling is required.

        I'll have to LAF the font and the colours, and not sure if I can do the dotted underlines. CSS text-decoration isn't mentioned in the CSS Reference, nor is the a selector.

        Might actually be easier to use a small web view for the links section.

        CleanShot 2025-12-13 at 21.46.59@2x.png

        Content.makeFrontInterface(600, 600);
        
        const var Panel1 = Content.getComponent("Panel1");
        
        const var markd = Content.createMarkdownRenderer();
        markd.setTextBounds(Panel1.getLocalBounds(0));
        
        markd.setText("
        Sublime version 1.0.0 - [user guide](https://meatbeats.com) and [changelog](https://meatbeats.com)
        
        Made in the UK by [Meat Beats](https://meatbeats.com) using [HISE](https://hise.audio), [JUCE](https://juce.com) and [Figma](https://figma.com)
        
        Copyright 2026 Meat Beats
        ");
        
        Panel1.setPaintRoutine(function(g)
        {	
        	g.drawMarkdownText(markd);
        });
        

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

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

          @dannytaurus I've just tested and the links don't work in a compiled project.

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

          dannytaurusD 1 Reply Last reply Reply Quote 0
          • dannytaurusD
            dannytaurus @David Healey
            last edited by dannytaurus

            @David-Healey Yeah, same here. Maybe it's because it's rendered in a plain panel and the link handling is only built into the MarkdownPanel floating tile? 🤔

            Well, I'm looking at using a Web View now. It's going well except the links are opening within the web view, instead of the user's default browser. Just need to sort that out.

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

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

              @dannytaurus said in How to do text links in a settings panel?:

              using a Web View now.

              Doesn't work on Linux so not an option for me

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

              dannytaurusD 1 Reply Last reply Reply Quote 0
              • dannytaurusD
                dannytaurus @David Healey
                last edited by

                @David-Healey I'm a bit wary of using one too to be honest. But I don't know how else to do it without a load of old school hacks like an array of x,y coords and a mouse broadcaster, or invisible buttons on top of text.

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

                David HealeyD ChazroxC 2 Replies Last reply Reply Quote 0
                • David HealeyD
                  David Healey @dannytaurus
                  last edited by

                  @dannytaurus Use fewer links in the design :)

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

                  dannytaurusD 1 Reply Last reply Reply Quote 0
                  • dannytaurusD
                    dannytaurus @David Healey
                    last edited by

                    @David-Healey 😂

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

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

                      @dannytaurus I just used a straight up button and changed the text to the url link. Laf for hovers and clicks etc.

                      1 Reply Last reply Reply Quote 1
                      • Oli UllmannO
                        Oli Ullmann @dannytaurus
                        last edited by

                        @dannytaurus
                        The safest way would probably be to use a panel with its PaintRoutine and MouseRoutine.

                        To ensure that the area for mouse interaction is correctly positioned over the link on every operating system, you could perhaps use Engine.getStringWidth(String text, String fontName, float fontSize, float fontSpacing) for the calculation.

                        dannytaurusD 1 Reply Last reply Reply Quote 1
                        • dannytaurusD
                          dannytaurus @Oli Ullmann
                          last edited by dannytaurus

                          Got it working nicely with a WebView. Very easy to implement but I'm a bit wary of using it.

                          I notice using CSS throws an 'experimental' warning in the console, but WebView doesn't.

                          Are WebViews production-ready? Who's using them in plugins right now?

                          CleanShot 2025-12-14 at 09.20.29.gif

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

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

                          43

                          Online

                          2.1k

                          Users

                          13.0k

                          Topics

                          113.1k

                          Posts