dragOver and dragLeave do not work

p5.js Coding Questions
1

I wanna write a board which hilight when users drag files upon it,
When i run the code the drop() function did work, However the dragOver() and dragLeave() function just do not work,anything wrong with my code? I edit and run this in the p5.js web editor. just feel confused.

image
image.png1667Ă—633 96.6 KB 

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <style>
      
      #drag_zone{
      font-size: 30pt;
      border-style: dashed;
      padding: 24px;
      width:50%
      }
    </style>
    <p id ="drag_zone">Drag your picture here </p>
    <script src="sketch.js"></script>
  </body>
</html>

var drag_zone;
function setup() {
  noCanvas();
  drag_zone = select('#drag_zone');
  drag_zone.dragOver(hilight);
  drag_zone.dragLeave(unhilight);
  drag_zone.drop(getpic);
}

function hilight() {
  this.style('background-color', 'rgb(255,255,0)');
}

function unhilight() {
  this.style('background-color', 'rgb(0,0,0,0)');
}

function getpic(file) {
  img = createImg(file.data);
  img.size(200, 200);
}
1 Like
2

p5js.ProcessingTogether.com/sp/pad/export/ro.CYTkHWj9smgw8Q

3

Hi, I’m really new to P5js, I was watching a tutorial for this same topic and is working perfectly, but I would like to do the same with audio, but it seams like the “.data” method doesn’t work with audio files, I know there is a SounFile object but I cannot figure out how to implemented with this example.

Hope anyone could help me.

Thanks in advance.

4

I can’t figure out what exactly you want to do now but I was just trying this with native Web Audio and this solution worked for me:

If p5.Sound doesn’t allow reading data directly you may need to adapt the code above and wrap it for p5.Sound.

Also meanwhile if you can post a code that you are working on, it may help others to answer :slight_smile:

2 Likes
5

Hi micuat
Thank you so much for your reply, what I want to achieve is to be able to have a drag and drop area for the user to upload audio files, eventually I assume that I will need to save those files on a server (I think I can do it with the getBlob method), but first things first. My code right now is pretty simple, it’s working with images, but my logic on how to combine it with “loadSound” method is not.

let dropzone; 
let img;
function setup() {
  dropzone = select('#dropzone');
  dropzone.dragOver(highlight);
  dropzone.dragLeave(unhighlight);
  dropzone.drop(gotFile, unhighlight);
}

function gotFile(file) {
  createP(file.name + " " + file.size);
  //createP(file.type);
  //createP(file.subtype);
  //(createP(file.size);
  //img = createImg(file.data);
  //save(img, 'myImage.png');
  //img.size(100, 100);
  img = loadSound(file);
}

function highlight() {
  dropzone.style('background-color', '#ccc');

function unhighlight() {
  dropzone.style('background-color', '#fff');
}

I’ll start watching the solution with native web audio that you placed.

1 Like
6

actually without hacking into the native api loadSound can handle file.data:

https://editor.p5js.org/micuat/sketches/etbE7PmHf

2 Likes
7

Ei, @micuat thank you so much!! This is exactly what I was looking for, I already was working with the example that you send before and trying to figure out how to use it, but I think this one already helps me a lot.
I don’t want to keep bothering you, but I don’t compleatly understand how you get loadSound to start working with file.data; do you mind telling me where I can found more resources and information about that.
Again thank you much!

8

I think you had to start the playback - but unlike preload you have to use callback in this case…

For the question “where to find resource” it’s hard to answer because it was a bit of p5.js / javascript knowledge and some guessing work… I think p5.js reference is always a good place to start with, sometimes you need to look into the source code but I know this is intimidating, and you can always ask here when you think what you’re trying is beyond the “standard” p5.js :slight_smile:

1 Like