Rotate an Image



  • @Jay What is your end goal? i.e. why do you want a button to stop the rotation?



  • @d-healey let's say I want to make a plug-in with a bypass button that when I bypass it the rotation stop and when I enable it the rotation start.

    I don't know if it make sense.



  • @Jay said in Rotate an Image:

    @d-healey let's say I want to make a plug-in with a bypass button that when I bypass it the rotation stop and when I enable it the rotation start.

    I don't know if it make sense.

    Well, do you understand the script I gave you? If you can see what starts the rotation you should be able to figure out how to stop it. I don't want to give you the answer, I want you to learn so you fully understand how it works.



  • deskrotate.gif
    HISE Turntable Tapemachine?



  • @Dominik-Mayer yes something like this



  • @Dominik-Mayer can I have the code ?





  • @Jay said in Rotate an Image:

    @Dominik-Mayer ???

    Have you tried to understand the code I gave you? If so, which part are you struggling with?



  • Here is the script with a little embedded Task 😉
    You can surely figure it out.

    resource:
    logo_new.png
    save as logo_bw.png in the Images Folder of your project.

    Content.makeFrontInterface(600, 500);
    
    const var Panel1 = Content.getComponent("Panel1");
    const var Knob1 = Content.getComponent("Knob1");
    const var Button1 = Content.getComponent("Button1");
    
    reg angle = 0;
    reg speed = 0;
    
    Panel1.loadImage("{PROJECT_FOLDER}logo_bw.png", "test");
    
    Panel1.setPaintRoutine(function(g){
        g.rotate(Math.toRadians(angle), [this.get("width")/2, this.get("height")/2]);
        g.drawImage("test", [0, 0, this.get("width"), this.get("height")], 0, 0);
    });
    
    Panel1.setTimerCallback(function(){
        angle = (angle + speed) % 360;
        this.repaint();
    });
    
    
    // Custom Callbacks for Knob1 and Button1
    
    inline function onKnob1Control(component, value)
    {
        // TASK: set something to the value of the Knob
    };
    Content.getComponent("Knob1").setControlCallback(onKnob1Control);
    
    
    inline function onButton1Control(component, value)
    {
        if (value)
        {  
            Panel1.startTimer(40);
        }
        else
        {
            Panel1.stopTimer();
        }
    };
    
    Content.getComponent("Button1").setControlCallback(onButton1Control);
    
    HiseSnippet 1202.3ocsW0saaaCElxIpq1adXEnWrKILv.jwxRTZSyJZwvbiiyfWZRLhyJJvPQ.iDkLQjHEjnZhWP.1ixdT1k6wXOB6MX6PQJK4Fmz3BLcSxg77wy24Gd3wiREdzrLQJxp4ISSnHquvd7TtbR+IDFGMbWj0WYOJhHkTdVBiFQSQ6LMgjkQ8QVVq7SJsrZtJp36e9wcHQDtGsZID5MBlG80rXlrZ0Q81mEEsGwmdBKtl1a0anmf2WDIxAFshsKJg3cNIjdHQoVCaj0CF3yjhzwRhjlgrVcGg+zwSDWv05+FVF6rHpRXSzX3fzKumHxWwX0pn9SXQ9iJ87LDbJiphCqniCO19.lOa150iGpMvUHpGOrZbWzayOQ5YUidqpo2irG6kxRjU6n31maOjKooADHETmVZcQM9qUs6K.M3x0iImS2KEDlgvYaW20vOy0s6Ka2pcKHQjIwumjhGQ3znMw+.tDaHU1WDmH3ffSG81cTnpvrOWb1sCoX2O.wN4Rofe6XL62QytTZHlvCinf9tuTKmkPo9F41szzZ8HAweXLTB4z4pQGezOOn+Imt2Qud2AGecjHTb5YWrdBOryZ3NPBSZNcC1LpbDj1kGKxkLN0IHm6IYBtSX2qZ2BCegqmJToZmCHxIqKEGS7YDdlSA05tF9WkSXYJGwoyELe4jNc23IqgqVbBkENQpV8cJKqOR+TxEFJWvI3XfDiacblCaQG06JTsHId8G5Mpaao8IQQmAWqpbmRuoLfpoO9a0Qzt3uA+zscMzqvfozDUbwolQZ2ZiMv8yyjhXboExvAhxRAB2uLEqTlwifHJtjBXAuPMUpOUD43Ul2WCpMhxoca2xvQvJm7pw6+BL3N3LQLEHDODKE.ynZkwhfBA0IB7Cn2cVEpBLF6NKzLOcJ8vaRZiGc2ztIK.6TJq7gqvX8+n9JyNRRpN+3rkaYsv05+PixnFjK.mHQCqFnqKH7G4dzh8648H0YVycOTHoGA0KstpUyVWeicBBVzVliJRQwatqg62JLGdd7Yzzx.pQOnO37MZsueMZ8zgjZJJ3C4L4QIT9s09EYhiPi3FFRApJKZC+kl1viiX9vSiLna6mYWT5fJ3a8GBQ2FXcHu.bSaS7eAv+kg6RjD0yAFBAjLglJYJ+2ZW56g2Y0ONzzdWZ14PgAXpYYd3oSsYaW9zgp.pvpOzVWLgtrxfecuoUB3dEMblsPO+d51MyV4286gpYplezvyk0e0uxT+QXu3ZiT72I+YL4xZh8jzKkpSYrp0DJSRSFy9MZ8YPxxCBX.FaabpOBcy.vcF2qwqmWmWbike.XYffyGOPm1Ccy2ngIED94vvSyO9fZlIyFPk9buSqdKlmwjSq6OKwLEt26YJtuz8Q1iXRuIKluMV.eU2R9elulIzZaOHHf5IqH6p1681O0wwVBpnGGHDdxOsnN6v73wv.qdTfIb3djpcjUC0EdsrqRVEYFS49EB+K7Y1bSkrkYyMK2DES7REm5o6XnlA7gEq.bhWLJbS6CTx3YMJT7NFFL8TOOUf36.luXDOYoQ7zkFwVKMhmszH1doQ78KMhmeGHT+JfWkCi6nuV.KLZPQCZKqAbBTUUTAh9Ojd9pJF
    

    Greetings,
    d



  • @Dominik-Mayer Can we make this with animation image strips? It will loop the image strip. I tried but coulsn't figured it out. Please help...



  • @orange said in Rotate an Image:

    @Dominik-Mayer Can we make this with animation image strips? It will loop the image strip. I tried but coulsn't figured it out. Please help...

    So you don't need a rotate image function, just an amimated picture... isn't it?



  • @ossian1961 Yes, definately.... Because I've allready made a rotated image animation inside the strip. I only need to loop it.



  • I used do that on KSP... I never tried it on Hise, but I think it could be make a looped slider with buttons that handle on and off and fps into java script... @d-healey surely knows how do it 😉



  • @Christoph-Hart @d-healey Is it possible to make an animated image strip loop view? It will loop from first to last frame, over and over again.



  • @orange Almost certainly but I've never done it



  • The & operator is your friend here...



  • @Christoph-Hart @d-healey Do you mean I should use && operator in an "if else" conditional statement?





  • Oops, my smart-ass me wrote & (logical AND) instead of % (modulo). To my defense these two are equivalent if the loop length matches the formula (2 ^ x) - 1 🙂



  • It works this way:

    the g.drawImage() function takes the filmstrip, the position [x,y,width,height] and the offsets as parameters. (the x-offset doesn't work btw..)

    on each tick you advance to the next frame with the y-offset. Therefore you need to calculate the y-offset position for each frame. The modulo % operator provides a neat trick to divide the increasing index by the amount of the total frames. It returns a "looping" index with which you can cycle through the frames of your filmstrip.

    greetings,
    d

    Resource:
    on_off_64_64_24.png

    reg index = 0; // index of the filmstrip 
    reg total_frames = 24; // total frames in the filmstrip
    reg frame_height = 64; // the height(y) of each frame
    
    
    Panel1.loadImage("{PROJECT_FOLDER}on_off_64_64_24.png", "dot");
    
    Panel1.setPaintRoutine(function(g){
        g.drawImage("dot", [0, 0, this.get("width"), this.get("height")], 0, index * frame_height);
    });
    
    Panel1.setTimerCallback(function(){
        index = (index + 1) % total_frames;
        this.repaint();
    });
    
    // Custom Callback for Button1
    
    inline function onButton1Control(component, value)
    {
    	if (value)
        {  
            Panel1.startTimer(100);
        }
        else
        {
            Panel1.stopTimer();
        }
    };
    
    HiseSnippet 1090.3ocsV8uaiSDDdcaLbIPPbR7.rJRmjCT5kTxUPpBQn4Gn.WaiZJm3DBEs0dc7pZuqk85qMpJua7Hwa.Lq20INsIkK+QspZ6Ny7sy2L6ryriSDtzzTQBxp5UyioHqO2dxbtLnW.gwQi5ir9R6wgDojxSiYzPZB5z4wjzTpGxxZ+eQYkU0Jn7u+4mNkDR3tzUhPn2IXtz2xhXxURG282XggCIdzqXQkrtS2QtBdOQnHCXz91sPwD2aHynmSTlsmMx5SF3wjhjIRhjlhrpbpva9j.wsbs8uikxtNjpVzFMA1Hs3ghPOEiURQ8BXgdiKh7TDrKiWkG1WmG9J6yXdrkxKmOTJvqPTNeXs2SQu1koWqOd5YUhdUzz6k1SbSXwxUZTb6yrGwkzDeBbDTlVZaQ68pJ18DfEb4gQjanCSfEKQ3bbqVGfeSqVMOods50fChTI9CjD7XBmF1F+i3BrynxdhnXAGV3zPqtgB0JLmlIkB91AYz2P6qD5LLi6QuCru0I3W+ZyJgOVFPw9rvnTIDBXsoRgjDN0OAJJRADG0IGRtTrQJiuNRMvbkSCnrYAR.3wFffgZYNyap7Ik3FnsUQt50zQ3ggBh2nHnZzow8iu7hecPuqlN7h21evkKD7oBe+oG2Q8yQcNLlOqwA3FdBoIBMaQJUNFJjjWJxjLN0wOi6JYBtyrl2WuFF9z+d1gdIjaMNSsKGf+S3vA9QFvRU4RmF2x7jAMZVVjNJZz7uxMUmC+50hZEaV7PJotDlziDFdMbaaEmJnTwIii9e9Fb6l3Ws1gvIZCyIRBMVEgNk7T8ZPVtWVpTDgKbC1WrrJQYAiGBIDbgywBtQop9IQD53VT7b.TfElQaVuFvupLerSwZEGtuHEp9JBQIIQGjNs0k2JkKz+gFlRMP2.PQrFWIPKxio+mxZUZ0v7kI1GFRp8rT7dtPRu.x50tuV0ZKdjFe+MoxrUgJJ9XsFtuUXN7rnqoIEYTicPSl06hYu8tXkax5pSIkLTvGwYxKho7s0aCYxiptbFRAlJy6w8Eldb5rFhAsxpZaRgnbFWdNC52G0mHIEaDrmfehoIRlJDr5S+.LGR27rpceZ5MvYKLRY4gGLZQ615EsVU0.4d8E155AzcqbXqtyKuH+xX4Ab5qakkfdrqdxHbKN6ueeWI8NXO9T675ZzCb8ztnGOt.FZI7xf43qOISM91n.pKVajgZr.OkImWd79yx3sOV59R6wLoavl46dafuPovyMeMOVnt8.eepqbEYqXO7Od9eY.ROGY1YDXFGTuXedVzD3sStTfIbnjUc40ZO00L85Vp0pLyDJ2Kew+BeFksUqsLJaWnDEQbSDSc0WNUOG4E4R.NwyeUVU6yTqwKuSp3cD7FoottpDw2BLeyHNZmQ7c6LhN6Lh2ryHNdmQ786Lhe3IPndP5OmASW0WK.AiGj2KzxZ.m.UU4Ufn+CSrMQs.
    

 

3
Online

410
Users

1.4k
Topics

9.9k
Posts