Calling Functions & Drag-n-drop tips

mackavi · June 2, 2018, 9:45am

Before I try and re-invent the wheel, does anybody have any tips for using the following:

I want to call the same function from several elements, but each element needs to pass a unique value. Normally, I’d pass it as a parameter but cannot see an option to do this.

And also, I use drag and drop a lot. Before I start, are there any existing examples of this or is it planned for future releases?

Thanks.

ToanLS · June 4, 2018, 2:37am

Hi,

Besides event handler functions which have fixed list of arguments, Saola Animate also supports normal functions with arbitrary arguments. You can create normal functions and call them in other functions (both normal and event handler functions) by taking the following steps:

Show the Functions pane if it’s hidden: Click View > Functions
In the Functions pane, click New Function button > Normal Function
Define the function: name, arguments, body.
Click OK.
Now you can use the new created function.

Regarding drag and drop feature, it’s already in our TODO list but we still don’t have a fixed plan for it. However, you can use a third-party JS library such as Jquery UI to create drag and drop. Just add the library files or URLs to the Resources pane so that you can use it.

Please check the attachment for a sample of normal functions (makeDraggable, makeDroppable) and drag-n-drop (using jQuery UI).

dragdrop.zip (2.3 KB)

Regards

mackavi · June 4, 2018, 7:13am

Thanks for answers, I’ll have a play with the jQuery today.

I think I must be doing something wrong with the normal function. I can create that with parameters, but when I add an event handle to a rectangular DIV - I can’t see how to call the function as it doesn’t appear in the run JS dialogue

Also, I came across two issue:

Clicking the auto button for the cursor only displays part of the pop-up the rest appears off-screen when the UI is maximised.
When I add audio or video to a scene and then change scene, I get a console error of Invalid URI. Load of media resource failed.

ToanLS · June 4, 2018, 8:25am

Hi,

As mentioned, normal functions have custom argument list so you can’t use it directly as event handlers. Instead, you must create event handlers and call normal functions inside handler functions. For a sample, please see the onSceneActivated handler in my previous attachment.

Regarding the two issues:

Do you use multiple monitors? If so, it may be a bug when working with multiple monitors. We’ll try to fix it in the next update.
It’s the warning message in Firefox when setting audio/video source to empty. It’s incorrect behavior of the browser, you can ignore it.

Regards

mackavi · June 4, 2018, 8:58am

Cheers, will checkout the sample - got side-tracked as I’ve found sprites

Yes, I have multi monitors. And yes, using Firefox Developer.

Thanks.

mackavi · June 5, 2018, 7:55am

Thanks for the jQuery UI example. This is really brilliant and works effortlessly with Saola - opening up all sorts of possibles.

I had a look at the normal function but don’t think it is the solution.For example; say I want to create a simple shopping game for schools.

I would add ten pictures of food to the canvas and clicking on any item would add the cost of that item to the overall cost which is display on screen.

At the moment, it looks like I would have to create a new function for every item of food to add the different prices.

Currently, I can see two ways of solving this.

Firstly, use the e.currentTarget.name and a switch case to call a single function and filter the object / element based on the name set in the UI.

Secondly, on scene activate - use getElement for all the items to set a property value containing the price which can then be accessed by a single function using the event object property.

While both of these work, would it not be possible to have a simpler solution such as:

Functions called directly from an event trigger in the UI can pass parameters:

function fName (dom,e, param1, param2, etc) {}

Or and maybe better, elements in the UI on the canvas could have user defined properties added. IE where name , class name and title are - we could add user values that get stored on the object alongside the existing properties and are passed with the event object.

Regards,

ToanLS · June 5, 2018, 9:33am

Thanks, we’ll consider your suggestions. The ability to set user data to an element directly from the UI would be nice.
Just a comment for your current workarounds: On scene activate, creating a name - value map may be faster than getting all elements to set their corresponding values, e.g.

doc.foodCost = {
   potato: 100,
   bread: 50
};

Then, on element click:

updateCost(doc.foodCost[this.name]); // this is the same as e.currentTarget

Regards

mackavi · June 5, 2018, 6:53pm

Much simpler.

Thanks.

rondfranks · June 19, 2018, 2:20pm

The dragdrop.zip file was very helpful for me. I was able to modify it, but when trying to recreate it something was not working. I copied the scene onSceneActivated function, the makeDraggable function, and the makeDroppable functions. I also created 2 divs labeled dragsource and droptarget. I used all of the default settings that I could find, and those all seemed to match what was in the dragdrop file. I’m missing something but I’m just not sure what it is. Any idea what that might be?

mackavi · June 19, 2018, 3:31pm

Did you add the jQuery and jQuery UI files to the resources?

rondfranks · June 19, 2018, 3:45pm

That’s got to be it. Thanks!

Steven_Reff · May 25, 2019, 5:50pm

Thank you for creating the Drag and Drop file (zip) June 18.

I want to create multiple draggable items that drop into a certain target areas. I copied and pasted your original drag element and drop target and gave them the names:

dragsource_1
droptarget_1

I then added the JS code for the scene as:

function onSceneActivated(doc, e) {
// init drag drop
makeDraggable(doc.getElement(‘dragsource’));
makeDroppable(doc.getElement(‘droptarget’));
makeDraggable(doc.getElement(‘dragsource_1’));
makeDroppable(doc.getElement(‘droptarget_1’));

}

I only want dragsource to fall into ONLY droptarget and dragesource_1 to fall into ONLY droptarget_1. What happens now is dropsource and dropsource1 can be dropped into either droptarget or droptarget1. Can you make a suggestion on how I might correct my JS so that different draggable items only drop into certain target areas?

By the way, I just purchased Saola and it is going to help me immensely as I transfer my material from Adobe Flash to Saola. Thank you very much.

Live, laugh, and love life,

ToanLS · May 27, 2019, 6:54am

Hi Steven,

You can use accept option of the droppable to control which draggable elements are accepted by the droppable.
The code will look like this:

function onSceneActivated(doc, e) {
  // init drag drop
  makeDraggable(doc.getElement('dragsource'));
  makeDroppable(doc.getElement('droptarget'), {
    accept: function(draggable) {
      return doc.getElement('dragsource').dom == draggable[0];
    }
  });
  
  makeDraggable(doc.getElement('dragsource_1'));
  makeDroppable(doc.getElement('droptarget_1'), {
    accept: function(draggable) {
      return doc.getElement('dragsource_1').dom == draggable[0];
    }
  });
}

Steven_Reff · May 27, 2019, 8:34pm

Hey, toanis,

Thank you so much for the help with this.

With your help, I was able to create a quick drag and drop for 12 terms in the first lesson in economics (Factors of Production). I was able to create this within a half an hour. Thanks again.

Live, laugh, and love life,

Steven_Reff · November 4, 2019, 9:05pm

Hi, Toan Li,

Is there a way to drag and drop to a specific spot (x and y) rather than a specified area? I have been trying to find this through a google search with no such luck. Thank you if you can help me on this.

Live, laugh, and love life,

ToanLS · November 5, 2019, 6:40am

Hi,

You can resize the drop target to make it small enough, but it’s difficult for the viewer to drop into a small area.

If you want to keep the drop target area but anchor the drag source to a specific point in that area, you need to add script to change the drag source position when it’s dropped. Please share your project if you need help in this case.

Regards

Steven_Reff · November 9, 2019, 9:16pm

Hi, Toan Le,

I am trying my best to make a supply and demand graph move in Saola Animate similar to how it currently moves in Macromedia Flash. Here is my Flash graph: http://reffonomics.com/sd.html Notice how I can make both curves (supply and demand) move just by grabbing the mouse on any part of the supply or demand curve and moving them up or down. In my attached saola animate project, I can only graph the S on the supply curve and the D on the demand curve and move those to target areas. I want to be able to drop the S or the D at a specific spot inside the green target area. Any help would be appreciated. Thanks.DragDemandandSupply3.saola (77.3 KB)

ToanLS · November 12, 2019, 4:36am

Hi Steven,

Project file only (.saola) doesn’t contain resources, so in the next time, please send project package (File > Save As > Package) or entire project folder.

Saola Animate doesn’t allow to click through transparent area yet, so you can drag the S and D line. To fix it, please see this thread: Events of transparent areas

To make your project works the same as the Flash version, you need to write script to adjust position of S, D lines and their intersection when dragging. You can refer to the JQueryUI Draggable manual for writing the script.

Here’s your project updated: DragDemandandSupply3_fixed.saolapack (5.2 KB)

Regards

Steven_Reff · November 15, 2019, 4:05pm

Hi, Toan Le,

You and Saola Animate are the MOST amazing individual and company. I cannot say enough GREAT things about you! Can I make a donation to you and/or Saola Annimate for helping me with this? My email address is: reffonomics@yahoo.com

Live, laugh, and love life,

Reff

ToanLS · November 16, 2019, 6:31am

Thank you, Steven.
We don’t accept donations.
Please feel free to ask whenever you need help.

Regards