Single button that switches between multiple panels ?

jssrecording

Screen Shot 2019-05-09 at 8.54.51 AM.png

Doing something similar myself. Here is my method.

//All Select Instrument Button.

inline function onplaySelectInstrControl(component, value)
{

    Console.print("Current select row is " + currentSelectRow);
    
    ++currentSelectRow
    
    if (currentSelectRow > 4){
        
        currentSelectRow = 1;
    }
    
    if (currentSelectRow == 1){
        
            Content.setPropertiesFromJSON("selectInstImage", {"fileName": "{PROJECT_FOLDER}select1img.png"});
            
        } else if (currentSelectRow == 2){
        
            Content.setPropertiesFromJSON("selectInstImage", {"fileName": "{PROJECT_FOLDER}select2img.png"});
        } else if (currentSelectRow == 3){
        
            Content.setPropertiesFromJSON("selectInstImage", {"fileName": "{PROJECT_FOLDER}select3img.png"});
        } else if (currentSelectRow == 4){
        
            Content.setPropertiesFromJSON("selectInstImage", {"fileName": "{PROJECT_FOLDER}select4img.png"});
        }
    
	
};




Content.getComponent("instrSelect").setControlCallback(onplaySelectInstrControl);

jssrecording

I made a better performance update I wanted to share with anyone who needs it. I used 1 image with 4 states. Then I'm scripting through the changes updating the offset.

 ++currentSelectRow
    
    if (currentSelectRow > 4){
        
        currentSelectRow = 1;
    }
    
    if (currentSelectRow == 1){
        
        Content.setPropertiesFromJSON("selectInstImage", {"offset": "0"});
            
    } else if (currentSelectRow == 2){
        
        Content.setPropertiesFromJSON("selectInstImage", {"offset": "150"});
        
    
    } else if (currentSelectRow == 3){
        
        Content.setPropertiesFromJSON("selectInstImage", {"offset": "300"});
    
    } else if (currentSelectRow == 4){
        
        Content.setPropertiesFromJSON("selectInstImage", {"offset": "451"});
    }
    	
};

Content.getComponent("instrSelect").setControlCallback(onplaySelectInstrControl);

d.healey

@jssrecording Might be able to switch your if block for a switch statement. Another option is to put your offsets in an array and use the currentSelectRow value as the index.

jssrecording

Great Idea @d-healey!

Dalart

Im using the code from d.healey here:

// Panel Switcher //

const var panels = [];

for (i = 1; i < 5; i++) {
panels[i-1] = Content.getComponent("Panel"+i);
panels[i-1].showControl(false);
}

var currentPanel = -1;

inline function onBankButtonControl(component, value)
{
if (value == 0) {
if (currentPanel > -1) panels[currentPanel].showControl(false); //Hide previous panel
currentPanel = (currentPanel + 1) % panels.length; //Move to next index
panels[currentPanel].showControl(true); //Show panel
}
};

Content.getComponent("BankButton").setControlCallback(onBankButtonControl);

is there a way to call more than 1 element in: "Content.getComponent("Panel"+i);" ?

For example if I had panels named "PanelA, PanelB, PanelC & PanelD" could I show all of these elements where it displays (Panel"+i) ?

d.healey

@Dalart Sure, just add an extra line for each one..... but.... that sounds like a bad idea to me. You see that loop isn't grabbing 1 element. It's grabbing 4, panel1, panel2, panel3, and panel4. So why not just rename your panels instead of A, B, C, D. Call them 1, 2, 3, 4. Using letters is generally not as useful because you can't iterate letters in a loop like you can with numbers.

Dalart

@d-healey thank you for your input, I will tinker with this and your suggestion and see what happens =). Thank you for your time.

Dalart

@d-healey Ive been tinkering around a little bit without success in showing multiple elements in that one component, could you please give me an example of using an extra line for each element ?

d.healey

@Dalart Post a snippet because I'm not 100% sure what you're trying to do.

Dalart

@d-healey Ok here it is, might not be the best way to do what Im trying but my coding brain is in an infancy stage at the moment, Im trying my best to learn though.

HiseSnippet 1546.3oc0Z0saaaCElJIpM1aYscXWtKD51.rQZSrjcRaQWac8OY0XMoF0ccEnnnPQhNlnxjFRzownnX8oXXON6AXuJCnWsa8H0O1TNJNRprHaNWDyCO+7wOc34HI5ttDKnmGwEnT3YSFAAJeoZuIX5flCLQXPmV.kKq1vzCYAZLYjomGzFnnr5OwmTovZ.+Oe7AMLcLwVv4h.fmSPVvGiFhnyk1s9Oibb1yzF9LzPAsqUuiEA2j3PFy.xppU.iLsdi4QvCL4pshJP4RssQThaOpIE5ATVqAwdRuAj2hCz+4HOzgNP9.cPOliBDuGwwliXtTPyAHG6tQKXO.yKcmu7WMX4+Mp6irQyjOmFtp+DZysPjOTVYYvSWDdURO7TDf2ZAv6Zp8rbQinymgisuPsClBc6axtDHBq.cAq7appMILMvzsFZ9F3dtrAyrnztUpbCscpTo7c2nH+us2Vq6COn8i058qcdVyG09oZauMWN6RjGU6XSWsQlXnim18zd4q7soOwUqDhMV+tZHseTaG1+1byxZuaihZrOAp+RzM0eESmHjbDj1jLbDAyFT55c45b8MQbPrfMa4wHRtUtDmR8Mc7fkuaw2GnFO5bDYM10k4GeuvhwM08wEB6fvPs9iwVTDAqQvMFSoDrQj2rh.vMXqKmwvxaTLDyn9Zk7Eocu6oUY1RIZpXw69r3UNBwhyjHzYr4iP1PsQtviQjwdAFN28KrThGpM0XQ5GBi0VNP7QzAbOtO4XnFknggmP0PXa3Iyc34BLp63.bwyXCT22XFG+dedL4KYgb40KukGWtuuZZ53bHauaoEoZgjqlO5IcZ19ryt5ypO3tjrqZwytBTe4YW7RNr8x7RROTHISvzLjj46ryOISWVIYAwKHIKDwhy7ojjEsThGpvjrfXkxjryEXeRIY5KOISWHIS35vADJ7I3RkK9thEJ99SMS+9IMUnqbftIMKuuk6RLqDd7vCgtQWoC0iU9Nd+A0yt+fX6Kq.JQPQBtCFQexHH9r5Z.B4QV+iuNDTLUo9cO9pvtG8bX4Ft.DqIwUhIRG3iaw93fL6DCY3jpYvIAIAwbRXdgLPRMY3jcjgS1UFbhTt5bKY3jaKCmbGYvIUyGRtZ78NUjhWzkhWLjAsTKeNofZ128kf4IsD9kNsLol7aMNrJGqx2HnKEwKppzh0qyBFbixETaA8dCkLh8nCyZm.TVOHraDcaz71P9QccU+uqCNYd.Q0mLePq5uEYSGLSvG8pO.hNZfvi23UGQgCidLlBWB.lVw2OyjZHJVYMAfU3r.1UTEu4Ee7opvMeRzWBwkpxCXCWDSV0GYx6HKxAQKUQzxc0zJwPZfHNUOyzKm59HmILCA1ed3L5SUwlI3TvbwENPXthoisLRKaop7GIAgrwTGG0Dm87f4gzVJZ+cfHZSAgYjGBq5+qHrpRkvpFivtbpuEiSDqP4ii+RDG1mONlwZfzTPHTaCYVoZJ39IUoZJ3F9hEuPsVZplFiYanKmrJCvmZBSMYlvzH90qTxEF+WgK1QpbgQRadNOtnpr3hbQ.6JUBHeUOVLaHmUNLxTkipR8dbl9cIdONSWdkizkgzTRUNpluLjaIyLjl54XKRSiKTB31Rk.xSMhlUuPIf6HUBHe0HpJmZDUyTMhZxsFwembMh+QB0HZIoZD0RaFxodpeIlhzJOEIZYbwx.5RkAxSUhVUuXY.o9jasxWYhZxoLQsTF74ujG+v98Qg8Ehg8CwB62xKA3sOYHy0ltLsUVQLVpo3MBITTpgPQoO.quniO8QmdU08I1icLowOUW9QYGNAhEOwiOkeDoXODch3Qc+Y4ndSKbulZWD0ZPx3ckDvK.7YGugGb9Fps62GZQmC10T26Ee9OkbvSIioH7Q6aRcQ7bwCFOrGqECqe6.SL+jO44dqve2iAiqDsMoGDa6OXJ6S3j57wJgSpGMIXnokK40VAu7R9QyutuDFlv9+BEJntOer1rW4IG2CQ1nWaYwIhaxPdxVXjYKplYKpkYK1IyVrals3VY1hauDK3+3Ld3XJYXv1Blfts8eWwJJswlrrJ+LPv+Bd65Gy.

So to summarize what Im trying to do here in this snippet is have button 2 choose the panels and button 1 would choose the 1 of the 3 panels within that panel.

I have it partly working where I have "FaderChoiceA"+i, so I was trying to get the other options to show as well, "FaderChoiceB"+i, and so on. Probably just not building the idea right would be my guess.

Thank You for your time !

d.healey

@Dalart

I see. Panels inside panels. Well there are a few ways to do this. For me the most straightforward is to use a 2D array for the inner panels that use the outer panel as the first index and the inner panel as the second index. And I replaced A,B,C with 0,1,2 for the reasons I said before.

HiseSnippet 1563.3oc0Z0saaaCElJMps1adscXO.DYX.1HsIVRNosn+L233rZrlTi5rtMDTzoHQGyTYRCIpzZTDf9ns2j8DLfd0tMiT+XSYqjZ6Hgk4aR3g7b3G+NGcNTTrsK0B44QcAJE1e3.DP4qU6Ljv50nmIl.ZsMP4FpaY5gs.aMbfomGxFnnbseRzoRgkAA+97OtkoiIwBMVD.7ZJ1B8BbeLarz10+YriyNl1n8w8kFcs5srnjFTGpOGHWSsJXfo06LOBsmoXXKoBTtdSaLi51gYxPd.kk2hZOrSO56Igi+0XO7gNHQCMPGtgBEuC0wVfXgTPidXG61wKXO.2JsGu7uV3x+6T2EaiGIeLMb6fNfi0PlOTV5hfmlL7pN6vSQBdKGBu6n1wxEOfMtGA19J0VDFxsqI2EHCqvwBV5uTUaP4ifvVqu46P63xaLRixaVs5cgaTsZkGUpXohbGgGCdhoKbfIA43AeB7f27HY4c49O2H4v0WWeanoqq4vRE6Rcgkw7NzdDDCeLbC9eVc0JvOVpHj+KzdGfum1a3iIFPGgXMn8GPI7FkWosXLqrJVfkIzYMONeJzxk5TtqoiGJDvhgEBoXSGf2.wB.cbHfNlCnZ7+HAnIzbsA9d8JmNtDwr7fAQL8JqVlO5JqdbkXPNgcN33yAsAC9zhmFpk.6quNr8y1q4Kfc90V6234MeEmOKUTPxV9tt7YNfO3KfpAKULwASPvt9DKFlRfTxV9LFknGOQVwH9tbOkiOpRohQqUbWX4.QvmvsVBJPzUho6oP95Kl5k6I0UEGxOGaifCbQmfo9dgJN17SrRRNUqB4yzODMWq4fHGw5Ir3tzSPPFERPefAwDazGFavuHvXt9g3R7DX3vCo9REOMfGS2GGwkqTYMOg7.a0vzw4PdtnxSR0gwdAdvFO+ksZzLoKL1AK4JCBg9htRsrxUFNcgtxnfyDL1Axi6x3XiWWIm3HGaZy7L5lmSPeob5ZWrSWSxoK4w1ixPujTtRwOVrPwSmpmtcSqqHS4fbSqWQcQ2KPsxD+9GhbiiIhFGu7Px5Opme8G4xiVgThz.ojVDL6kCPjyqpDHhG40m91HPwGJKn5z2DUcpiCOtwEf4EgtUBQZf.bKuOAvbaD8rvHFygQBCBRXjn3hr.I0xBirQVXjMyBNIS7N2OKLxCxBi7vrfSLVLjb6jO6TMSrhVlXE8rfVpsXFof57+zWJpm1R3WZssIyTr06nrb7LeCPtLrHopx175fVnvMhWPcaj26XzA7WMYT4DfxMCm1RwaSWTFJXVuoZv+qA9v3IDWe33FaW+8XaVuQB9rW8dH7Q8jd8Iu5XFpe7qIU35.vYUCryHo5xhUVVBXENOfcKUo81VMA9.fgxM9h3yp9.SQ0YY9HdYKibUEADSf5PQBZejp2XlqoLqP9OObJH+6SC4IIDfTeEmMVT++TV7j3h872KcQHT8bkP0WDB03+0DpQtRnFIHzaLyac4bvzmvSjHhifY.SiXTvrjzIZz5YY1vy.OMsrgmAtafXYm3xyRF6DrrVNkXTGbYCtpkmAWZI8myHWoeUkq1HW4J8EgqLtpxUalqb0hkzROeRZoOWIsLxzsvc12m5V3NKKRZomSIsLtzAW2OOCtzWjjV55WU4pGjqb0hjzR23pJW8vbkqVrjVF4SRKi4JoUsrMo0emdRq+ICRZYjSIsps.AWSc.L4Xzkwhj0xP+JKYkquVtwhj1xv3JKYkquxswhk2pV9j2p1LBlwmxmDL1RNy0qmDF+wTv3w0wd6R6ymJSWtlJKIO2pyvQDdNy8mPSY3o+V82VcWpsuiIK40HPb2Ih5.ymO4uWu3axS7vrgx2shb4tELqv8NpswLqdoi2kRAu.Pti2napQI0lc6hrXiA6xp67a4+0x.7JpOCSNZWSlKlGentme+N7ZfVHNRHhOMs3biVRbXzgsqFdNR.PGDwNnwY7eQcpIZqD0oVbmf9lVtz2ZEdZ1h6BxMCjvwDI3JwTPcWQa3ny.Wf69Xa7asrDDw83HOcMzmaMLlaMpM2ZrwbqwlysF2et03AWfFhaCzy7Yz9gOVvEztYvGOPQoIwjGUEDAB9WPp7ZmD

This will be buggy though because all the inner panels are sharing the same variable currentFader you'll need to modify this so each panel gets it's own variable. BTW a panel can have a value panel.setValue() so you could use this to store the currently selected fader for the panel rather than creating a separate variable. There are many ways to do this kind of thing.

Dalart

@d-healey Thank You again, I think I might have figured this out with your help !

Dalart

@d-healey said in Single button that switches between multiple panels ?:

@Dalart

I see. Panels inside panels. Well there are a few ways to do this. For me the most straightforward is to use a 2D array for the inner panels that use the outer panel as the first index and the inner panel as the second index. And I replaced A,B,C with 0,1,2 for the reasons I said before.

HiseSnippet 1563.3oc0Z0saaaCElJMps1adscXO.DYX.1HsIVRNosn+L233rZrlTi5rtMDTzoHQGyTYRCIpzZTDf9ns2j8DLfd0tMiT+XSYqjZ6Hgk4aR3g7b3G+NGcNTTrsK0B44QcAJE1e3.DP4qU6Ljv50nmIl.ZsMP4FpaY5gs.aMbfomGxFnnbseRzoRgkAA+97OtkoiIwBMVD.7ZJ1B8BbeLarz10+YriyNl1n8w8kFcs5srnjFTGpOGHWSsJXfo06LOBsmoXXKoBTtdSaLi51gYxPd.kk2hZOrSO56Igi+0XO7gNHQCMPGtgBEuC0wVfXgTPidXG61wKXO.2JsGu7uV3x+6T2EaiGIeLMb6fNfi0PlOTV5hfmlL7pN6vSQBdKGBu6n1wxEOfMtGA19J0VDFxsqI2EHCqvwBV5uTUaP4ifvVqu46P63xaLRixaVs5cgaTsZkGUpXohbGgGCdhoKbfIA43AeB7f27HY4c49O2H4v0WWeanoqq4vRE6Rcgkw7NzdDDCeLbC9eVc0JvOVpHj+KzdGfum1a3iIFPGgXMn8GPI7FkWosXLqrJVfkIzYMONeJzxk5TtqoiGJDvhgEBoXSGf2.wB.cbHfNlCnZ7+HAnIzbsA9d8JmNtDwr7fAQL8JqVlO5JqdbkXPNgcN33yAsAC9zhmFpk.6quNr8y1q4Kfc90V6234MeEmOKUTPxV9tt7YNfO3KfpAKULwASPvt9DKFlRfTxV9LFknGOQVwH9tbOkiOpRohQqUbWX4.QvmvsVBJPzUho6oP95Kl5k6I0UEGxOGaifCbQmfo9dgJN17SrRRNUqB4yzODMWq4fHGw5Ir3tzSPPFERPefAwDazGFavuHvXt9g3R7DX3vCo9REOMfGS2GGwkqTYMOg7.a0vzw4PdtnxSR0gwdAdvFO+ksZzLoKL1AK4JCBg9htRsrxUFNcgtxnfyDL1Axi6x3XiWWIm3HGaZy7L5lmSPeob5ZWrSWSxoK4w1ixPujTtRwOVrPwSmpmtcSqqHS4fbSqWQcQ2KPsxD+9GhbiiIhFGu7Px5Opme8G4xiVgThz.ojVDL6kCPjyqpDHhG40m91HPwGJKn5z2DUcpiCOtwEf4EgtUBQZf.bKuOAvbaD8rvHFygQBCBRXjn3hr.I0xBirQVXjMyBNIS7N2OKLxCxBi7vrfSLVLjb6jO6TMSrhVlXE8rfVpsXFof57+zWJpm1R3WZssIyTr06nrb7LeCPtLrHopx175fVnvMhWPcaj26XzA7WMYT4DfxMCm1RwaSWTFJXVuoZv+qA9v3IDWe33FaW+8XaVuQB9rW8dH7Q8jd8Iu5XFpe7qIU35.vYUCryHo5xhUVVBXENOfcKUo81VMA9.fgxM9h3yp9.SQ0YY9HdYKibUEADSf5PQBZejp2XlqoLqP9OObJH+6SC4IIDfTeEmMVT++TV7j3h872KcQHT8bkP0WDB03+0DpQtRnFIHzaLyac4bvzmvSjHhifY.SiXTvrjzIZz5YY1vy.OMsrgmAtafXYm3xyRF6DrrVNkXTGbYCtpkmAWZI8myHWoeUkq1HW4J8EgqLtpxUalqb0hkzROeRZoOWIsLxzsvc12m5V3NKKRZomSIsLtzAW2OOCtzWjjV55WU4pGjqb0hjzR23pJW8vbkqVrjVF4SRKi4JoUsrMo0emdRq+ICRZYjSIsps.AWSc.L4Xzkwhj0xP+JKYkquVtwhj1xv3JKYkquxswhk2pV9j2p1LBlwmxmDL1RNy0qmDF+wTv3w0wd6R6ymJSWtlJKIO2pyvQDdNy8mPSY3o+V82VcWpsuiIK40HPb2Ih5.ymO4uWu3axS7vrgx2shb4tELqv8NpswLqdoi2kRAu.Pti2napQI0lc6hrXiA6xp67a4+0x.7JpOCSNZWSlKlGentme+N7ZfVHNRHhOMs3biVRbXzgsqFdNR.PGDwNnwY7eQcpIZqD0oVbmf9lVtz2ZEdZ1h6BxMCjvwDI3JwTPcWQa3ny.Wf69Xa7asrDDw83HOcMzmaMLlaMpM2ZrwbqwlysF2et03AWfFhaCzy7Yz9gOVvEztYvGOPQoIwjGUEDAB9WPp7ZmD

This will be buggy though because all the inner panels are sharing the same variable currentFader you'll need to modify this so each panel gets it's own variable. BTW a panel can have a value panel.setValue() so you could use this to store the currently selected fader for the panel rather than creating a separate variable. There are many ways to do this kind of thing.

How exactly would panel.setValue() be used in the example here ? I havent a clue.

d.healey

@Dalart Well each parent panel is going to need it's own currentFader variable. So you could have currentFader1, currentFader2, etc. Or you could just use the parent panel's value instead. panels[0].setValue(), panels[1].setValue(), etc.

Single button that switches between multiple panels ?

31

1.9k

10.7k

93.0k