Rotate an Image

d.healey

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

Jay

@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.

d.healey

@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.

Dominik Mayer

HISE Turntable Tapemachine?

Jay

@Dominik-Mayer yes something like this

Jay

@Dominik-Mayer can I have the code ?

Jay

@Dominik-Mayer ???

d.healey

@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?

Dominik Mayer

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

resource:

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

orange

@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...

ossian1961

@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?

orange

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

ossian1961

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 ;)

orange

@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.

d.healey

@orange Almost certainly but I've never done it

Christoph Hart

The & operator is your friend here...

orange

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

d.healey

@orange & is not the same as && - https://www.w3schools.com/js/js_operators.asp

Christoph Hart

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 :)

Dominik Mayer

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.

Rotate an Image

32

1.8k

12.0k

104.2k