Forum

    • Register
    • Login
    • Search
    • Categories

    Has anyone made a custom PNG based keyboard ?

    General Questions
    7
    22
    284
    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.
    • lalalandsynth
      lalalandsynth last edited by

      Looking into this again, I seem to recollect that you can make a keyboard using png´s but IIRC it expects octaves but that assumes keyboards starting and ending at the same note ?

      Can I make a keyboard that starts at say C and ends at an F?
      Taking into account that the starting C and end F would look different the other C´s and F´s.

      Can I skip the native custom keyboard settings and make this entirely with panels
      and therefore control everything I need with the appearance ?

      https://lalalandaudio.com/

      https://lalalandsynth.com/

      https://www.facebook.com/lalalandsynth

      https://www.facebook.com/lalalandsynth

      d.healey 1 Reply Last reply Reply Quote 0
      • d.healey
        d.healey @lalalandsynth last edited by

        @lalalandsynth said in Has anyone made a custom PNG based keyboard ?:

        I seem to recollect that you can make a keyboard using png´s

        https://docs.hise.audio/ui-components/floating-tiles/plugin/keyboard.html
        53cbc905-3122-46c4-aa0f-2cd0868e065a-image.png

        @lalalandsynth said in Has anyone made a custom PNG based keyboard ?:

        Can I skip the native custom keyboard settings and make this entirely with panels

        Libre Wave - Freedom respecting instruments and effects
        My Patreon - HISE tutorials
        YouTube Channel - Public HISE tutorials

        lalalandsynth 1 Reply Last reply Reply Quote 1
        • lalalandsynth
          lalalandsynth @d.healey last edited by

          @d-healey The custom graphics one will not allow me to do the custom start and end notes , as far as i can tell , let me have a look at that video

          https://lalalandaudio.com/

          https://lalalandsynth.com/

          https://www.facebook.com/lalalandsynth

          https://www.facebook.com/lalalandsynth

          d.healey 1 Reply Last reply Reply Quote 0
          • d.healey
            d.healey @lalalandsynth last edited by

            @lalalandsynth

            The custom graphics one will not allow me to do the custom start and end notes , as far as i can tell ,

            It's very limited. You can't do key colours either. I wouldn't use it.

            Libre Wave - Freedom respecting instruments and effects
            My Patreon - HISE tutorials
            YouTube Channel - Public HISE tutorials

            Christoph Hart 1 Reply Last reply Reply Quote 2
            • B
              BWSounds last edited by

              Is it possible to make a custom keyboard and create a callback for each note and key(off the keyboard) on the onNoteOn and onNoteOff? Might take awhile but maybe?

              The keys can be created separately then in HISE placed them together, basically making the keys Buttons.

              Maybe…

              d.healey ustk 2 Replies Last reply Reply Quote 0
              • d.healey
                d.healey @BWSounds last edited by

                @bwsounds said in Has anyone made a custom PNG based keyboard ?:

                create a callback for each note and key(off the keyboard) on the onNoteOn and onNoteOff?

                What do you mean?

                Libre Wave - Freedom respecting instruments and effects
                My Patreon - HISE tutorials
                YouTube Channel - Public HISE tutorials

                1 Reply Last reply Reply Quote 0
                • ustk
                  ustk @BWSounds last edited by

                  @bwsounds Buttons are not recommended, but you can use a panel with an advanced mouseCB/paintRoutine.
                  I believe @d-healey made a video about it, but it might come with its own set of issues...

                  Maybe a panel overlay would work?

                  I can't help pressing F5 in the forum...

                  1 Reply Last reply Reply Quote 0
                  • Christoph Hart
                    Christoph Hart @d.healey last edited by

                    It's very limited. You can't do key colours either. I wouldn't use it.

                    @d-healey Actually I think the best way would be to have a scriptable look and feel for it. I'm currently pretty busy, but if anyone might want to give it a shot, there's a guide of how to add scriptable look and feels here:

                    https://docs.hise.audio/glossary/add_custom_laf.html

                    The first steps are already done, so you just need to subclass this

                    https://github.com/christophhart/HISE/blob/d503b363fd7e449cf9a587607c6c94c913e90546/hi_components/keyboard/CustomKeyboard.h#L64

                    from the script look and feel and register the methods.

                    d.healey 1 Reply Last reply Reply Quote 4
                    • d.healey
                      d.healey @Christoph Hart last edited by

                      @christoph-hart said in Has anyone made a custom PNG based keyboard ?:

                      Actually I think the best way would be to have a scriptable look and feel for it.

                      Oh that's a very good idea

                      Libre Wave - Freedom respecting instruments and effects
                      My Patreon - HISE tutorials
                      YouTube Channel - Public HISE tutorials

                      Christoph Hart 1 Reply Last reply Reply Quote 0
                      • Christoph Hart
                        Christoph Hart @d.healey last edited by

                        @d-healey Ah, I just realized that it won't be of much use unless you can draw images in a look and feel callback which sadly requires my brain skills to implement.

                        d.healey 1 Reply Last reply Reply Quote 1
                        • d.healey
                          d.healey @Christoph Hart last edited by

                          @christoph-hart Yeah I see what you mean.

                          Libre Wave - Freedom respecting instruments and effects
                          My Patreon - HISE tutorials
                          YouTube Channel - Public HISE tutorials

                          Christoph Hart 1 Reply Last reply Reply Quote 0
                          • Christoph Hart
                            Christoph Hart @d.healey last edited by

                            @d-healey Brain Skills -> Applied.

                            https://github.com/christophhart/HISE/commit/f4b0b1761b8db0000da3bc3b204fe078b93ab25c

                            d.healey 1 Reply Last reply Reply Quote 2
                            • d.healey
                              d.healey @Christoph Hart last edited by d.healey

                              @christoph-hart That was quick! 😄

                              So this can be added to any LAF routine?

                              Libre Wave - Freedom respecting instruments and effects
                              My Patreon - HISE tutorials
                              YouTube Channel - Public HISE tutorials

                              Christoph Hart 1 Reply Last reply Reply Quote 0
                              • Christoph Hart
                                Christoph Hart @d.healey last edited by

                                @d-healey Yup.

                                I also noticed that the keyboard look and feel methods are a bit messy, so I'll do it myself. Oh and I'll remove the non-vector default keyboard during the process, I don't think anyone uses them anymore.

                                d.healey 1 Reply Last reply Reply Quote 1
                                • d.healey
                                  d.healey @Christoph Hart last edited by

                                  @christoph-hart Will the Engine.setKeyColour() affect a LAF keyboard or will the LAF override it?

                                  Libre Wave - Freedom respecting instruments and effects
                                  My Patreon - HISE tutorials
                                  YouTube Channel - Public HISE tutorials

                                  Christoph Hart 1 Reply Last reply Reply Quote 0
                                  • Christoph Hart
                                    Christoph Hart @d.healey last edited by

                                    @d-healey Good call, I'll make sure it will get passed on as property into the call.

                                    BTW, I've just pushed a preliminary version. This is a example use case:

                                    laf.registerFunction("drawWhiteNote", function(g, obj)
                                    {
                                    	g.setColour(obj.hover ? Colours.yellow : Colours.white);
                                    	
                                    	g.fillRect(obj.area);
                                    	g.setColour(Colours.brown);
                                    	g.drawRect(obj.area, 1.0);
                                    	
                                    	g.setColour(0x22FF0000);
                                    	
                                    	if(obj.down)
                                    		g.fillRect(obj.area); 
                                    });
                                    
                                    laf.registerFunction("drawBlackNote", function(g, obj)
                                    {
                                    	g.setColour(obj.hover ? Colours.yellow : Colours.black);
                                    	
                                    	obj.area[1] += -4.0;
                                    	obj.area[3] += 4.0;
                                    
                                    	g.fillRoundedRectangle(obj.area, 3.0);
                                    });
                                    
                                    1 Reply Last reply Reply Quote 5
                                    • Christoph Hart
                                      Christoph Hart last edited by

                                      And this is how you use it with filmstrips:

                                      const var laf = Engine.createGlobalScriptLookAndFeel();
                                      
                                      for(i = 0; i < 12; i++)
                                      {
                                      	// use whatever prefix you want
                                      	var prefix = "{PROJECT_FOLDER}Oink/";
                                      
                                      	var d = "down_" + i;
                                      	var u = "up_" + i;
                                      
                                      	laf.loadImage(prefix + d + ".png", d);
                                      	laf.loadImage(prefix + u + ".png", u);
                                      }
                                      
                                      laf.registerFunction("drawWhiteNote", function(g, obj)
                                      {
                                      	g.setColour(Colours.black);
                                      	
                                      	var x = obj.down ? "down_" : "up_";
                                      	x += obj.noteNumber % 12;
                                      	g.drawImage(x, obj.area, 0,0);
                                      	
                                              // fill the key color if it's defined
                                      	if(obj.keyColour)
                                      	{
                                      		g.setColour(Colours.withAlpha(obj.keyColour, 0.2));
                                      		g.fillRect(obj.area);	
                                      	}
                                      	
                                              // draw the hover state
                                      	if(obj.hover)
                                      	{
                                      		g.setColour(0x33000000);
                                      		g.fillRect(obj.area);	
                                      	}
                                      	
                                              // Add the C octave numbers using the best font available
                                      	if(obj.noteNumber % 12 == 0)
                                      	{
                                      		obj.area[3] -= 4.0;
                                      
                                      		g.setFont("Comic Sans MS", 14.0);
                                      		g.setColour(0x77000000);
                                      		g.drawAlignedText("C" + parseInt(obj.noteNumber / 12), obj.area, "centredBottom");
                                      	}
                                      });
                                      
                                      laf.registerFunction("drawBlackNote", function(g, obj)
                                      {
                                      	g.setColour(Colours.black);
                                      
                                      	var x = obj.down ? "down_" : "up_";
                                      	x += obj.noteNumber % 12;
                                      	g.drawImage(x, obj.area, 0,0);
                                      	
                                      	if(obj.keyColour)
                                      	{
                                      		g.setColour(Colours.withAlpha(obj.keyColour, 0.3));
                                      		g.fillRect(obj.area);	
                                      	}
                                      	
                                      	if(obj.hover)
                                      	{
                                      		g.setColour(0x33FFFFFF);
                                      		g.fillRect(obj.area);	
                                      	}
                                      });
                                      
                                      for(i = 60; i < 72; i++)
                                      	Engine.setKeyColour(i, Colours.green);
                                      
                                      d.healey DabDab 2 Replies Last reply Reply Quote 2
                                      • d.healey
                                        d.healey @Christoph Hart last edited by

                                        @christoph-hart said in Has anyone made a custom PNG based keyboard ?:

                                        var x = obj.down ? "down_" : "up_";

                                        I had no idea you could assign with the ternary operator in this way. I have some edits to make to my scripts!

                                        Libre Wave - Freedom respecting instruments and effects
                                        My Patreon - HISE tutorials
                                        YouTube Channel - Public HISE tutorials

                                        1 Reply Last reply Reply Quote 1
                                        • DabDab
                                          DabDab @Christoph Hart last edited by

                                          @christoph-hart Does it only work with New Layout branch or Develop branch ? Or it will work with Master branch as well?

                                          Trance Producer and Presets Designer.

                                          Matt_SF 1 Reply Last reply Reply Quote 0
                                          • Matt_SF
                                            Matt_SF @DabDab last edited by Matt_SF

                                            @dabdab Only new_layout for now

                                            Develop branch
                                            Win10 & VS17 / Monterey & Xcode 13.2.1

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

                                            23
                                            Online

                                            1.1k
                                            Users

                                            6.8k
                                            Topics

                                            62.4k
                                            Posts