1. App Creation Studio
  2. Questions
+1
Answered

Can you call multiple actions on multiple panels by dragging a finger across these panels?

thillsman 12 years ago • updated by icahill (Administrator) 12 years ago • 9
Here's my situation: I've got multiple panels sitting next to each other with "onclick" attributes. Tapping on each panel correctly fires the appropriate action. But I'd love it if I could drag my finger across a few panels to fire a few different actions. Is there a way to do it?

Here's a use case to better illustrate it: If you're building a piano keyboard app and draw out your keys with panels, setting "onclick" to play that note, you can definitely tap keys to hear the right notes. But I want to play a glissando, running my finger from one key to another and playing every note as I hit it. Is there any way to do this?
icahill (Administrator) 12 years ago
Tyler,

Try this code: 




<wire>


<classes>


   <class name="blank">


      <panel name="touch" width="99%" height="25%" xpos="[param:x]" ypos="[param:y]" draggable="yes" dragorientation="horizontal" ondrop="delete" onmove="create" ></panel>


   </class>


</classes>


<main> 


  <panel name="main" alias="MAIN" width="100%" height="100%" background="0000ff">


   <panel name="0" width="25%" height="25%" xpos="10%" background="ff0000" onhover="alpha"></panel>


   <panel name="2" width="25%" height="25%" background="ff00ff" rightof="0" onhover="alpha2"></panel>


   <panel name="3" width="25%" height="25%" background="00ff00" rightof="2" onhover="alpha3"></panel>


  </panel>  


</main> 


<actions> 


  <action name="create" oninit="yes">


    <create class="blank" x="_RW-touchedx" y="_RW-touchedy" target="MAIN"/>


  </action>


  <action name="alpha">


    <sync loop="no" startdelay="0">


      <alpha value="0" time="1" />


      <alpha value="1" time="1" />


    </sync>


  </action>


  <action name="alpha2">


    <sync loop="no" startdelay="0">


      <alpha value="0" time="1" />


      <alpha value="1" time="1" />


    </sync>


  </action>


  <action name="alpha3">


    <sync loop="no" startdelay="0">


      <alpha value="0" time="1" />


      <alpha value="1" time="1" />


    </sync>


  </action>


  <action name="delete">


      <delete/>


  </action>


</actions> 


</wire>
thillsman 12 years ago
Dude. That is beautiful. So we're making an essentially invisible panel where our finger is, and then triggering actions when it hovers over the appropriate panel? Smart.
thillsman 12 years ago
Ok, follow-up. How can I tweak this to also run the action onclick? As it is, it only fires when you drag, but I'd like my keyboard to play notes if they're just tapped on too. I tried adding onclick="alpha" to the panel after the onhover attribute, but that doesn't seem to be doing the trick.
thillsman 12 years ago
I also tried adding onclick="create" to the "touch" panel instead of onmove="create" but that crashes Fusebox hardcore. I'm getting a little stumped. Any tips?
icahill (Administrator) 12 years ago
Have you tried onclickup? Onclick will probably get overwritten. If that doesn't work, if you want to invite me to the portfolio I can have a look.
thillsman 12 years ago
Hm... that doesn't seem to work either. If I put onclickup on the "touch" panel, it crashes. If I put it on the background panel (where the onhover is) it just doesn't work.

Should I invite icahill at rarewire or do you use a different email address?
icahill (Administrator) 12 years ago
icahill@rarewire.com will work just fine.

The trouble here is that we have a panel over all the other objects so it is the first line of contact with a touch. We may have to consider another method if you want to use both action triggers. We could set it to ignore touches but then it wouldn't move onhover....hm.
mrcole13 12 years ago
Did you guys come up with a good solution for this? I have a similar scenario where I want to change a background color and image when the user clicks on a panel, but then when they move their finger around, it changes as you go over each section. Then, when they finally release their finger, it triggers the action associated with the panel. Any thoughts?
icahill (Administrator) 12 years ago
Matt,

The best way to acheive this is to create a transparent panel onclick and use the onhover action to drive any dynamic movements. Similar to the example above. This isn't really something we have spent a lot of time on, but if you have well defined requirements, I could look into it deeper. There might be something we can do to make it work.

Customer support service by UserEcho