JS: OnDrop not getting the source ID [solved]

Posted on Updated on

So this problem plagued me for several days before I finally figured it out.

For example, you have the following code and it works:

< script >
function allowDrop(ev) { 
 ev.preventDefault(); 
 } 
function drag(ev) { 
 ev.dataTransfer.setData('text', ev.target.id); 
 } 
function drop(ev, target) { 
 ev.preventDefault(); 
console.log(target.id + " : " + ev.target.id) 
console.log(ev.dataTransfer.getData("text/html")); 
console.log(ev.dataTransfer.getData("text")); 
var data = ev.dataTransfer.getData("text"); 
alert(data) 
 } 
< / script >

<style "type="text/css">
#div1 { 
 width: 350px; 
 height: 70px; 
 padding: 10px; 
 border: 1px solid #aaaaaa; 
 }
</style>
< div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)">
</div >
  
<img draggable="true" ondragstart="drag(event)" 
id="drag1" src="//placehold.it/336X69/ff0000" width="336" height="69" />

However, what if you changed the HTML code to this:

<a draggable="true" ondragstart="drag(event)" id="drag1" href="#">
 <img src="//placehold.it/336X69/ff0000" width="336" height="69" />
</a>

Well, put simply, it won’t work.

This won’t work either – even though the drag code is correct. It simply can’t be in an ‘A’ tag, like the following code.
<a href="#">
 < img draggable="true" ondragstart="drag(event)" id="drag1"
 src="//placehold.it/336X69/ff0000" width="336" height="69" />
 </a>

An “a” won’t return the source id in this instance. Why? I don’t know. But it won’t work, so don’t do it.

To make a drop and drag work properly in all browsers, the ondragstart must not be on an ‘A’ tag. IMG are ok. maybe even LI, or DIV – but not A.

I hope this helps. It took me a long time and a lot of JS code to find alternatives, but it was a simple fix in the end.

This has been confirmed to work on the following:

Safari:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/602.2.14 (KHTML, like Gecko) Version/10.0.1 Safari/602.2.14

Opera:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 OPR/42.0.2393.94

FireFox:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:50.0) Gecko/20100101 Firefox/50.0

Chrome:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36

Opera Dev:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2914.3 Safari/537.36 OPR/43.0.2431.0 (Edition developer)

 FireFox Dev:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:52.0) Gecko/20100101 Firefox/52.0

 

While this code example isn’t perfect, and WordPress keep on messing up the formatting and the actual content of this page, I’ll keep adding to it to get it 100% right.

Please note the extra spaces in the code there, at the script and div tags. This is because WordPress is breaking it on me.

It’s a frustrating state of HTML that the drop and drag currently in. Nothing is ever 100% functional and many features are just cross-browser broken. This is a good example of that.

Here is my answer formatted better:

http://stackoverflow.com/questions/26499462/get-dropped-elements-id-instead-of-drop-target-id/41274540#41274540

Advertisements

Shoutcast. Server.

Posted on Updated on

Ok, so while I’m on the topic of using Winamp on macs and so on, I thought it was time to bust out where to find the instructions of where to download the current ShoutCast DNAS server from.

The name is kind of appropriate, as I’ll be running it from d’NAS… 😉

At the moment Nullsoft seem to be slowly undergoing changes (again) and thus the software is being developed.

However.

They do have the legacy tools still available on their servers. You just have to search for them.

sc_serv2_linux-latest.tar.gz
sc_serv2_linux_x64-latest.tar.gz
sc_serv2_win32-latest.exe
sc_serv2_win64-latest.exe
shoutcast-dsp-2-3-5-windows.exe

There are plenty on how to instructions. The problem is trying to find the software in the first place.

Oh, there is also some other software called ShoutCastGUI, but I found this software frustrating, as it wanted to post my playlist and radio station to an online location somewhere, and had the most annoying NAG screens ever.

So while ShoutCastGUI did a great job at what it was designed to do, it was also not the tool for me. I just wanted to be able to set up a stream inside my house and not publish it. The config was easy, but there was too much other stuff… like a chat server? Why that’s there, I don’t know. But it is what it is. Hat’s off to the devs though, it’s a good program. I just don’t need all the extra stuff.

So for a bare-bones setup, just stick with the above links I’ve listed.

Winamp on Macs

Posted on Updated on

Yes, this has been a long time coming as Winamp seems to have stalled in development for many years. However, even though it’s recently been picked up again I’ve found a solution that will keep (or start) your love of Winamp again if you are using a mac. #win!

screen-shot-2016-11-17-at-23-29-59

Firstly, I must point out that using the built in WineBottler version of Winamp caused issues for me on El Capitan with a Wine error of “ntlm_auth cannot be opened because of a problem”.

screen-shot-2016-11-17-at-23-29-47

So, for whatever reason unfortunately that wasn’t an option. Instead what I did was find a copy of Winamp 2.91 and downloaded it. I tried the most recent release of 5.666 redux and just just failed.

So, the secret to this working…

Download WineBottler from Mike’s site. Install it in to your Application Path. Make sure you grab and install the Wine app as well.

Then, run the WinAmp setup file.
http://download.oldapps.com/Winamp/winamp291_full.exe

screen-shot-2016-11-17-at-23-36-56

After the normal setup process, you should then be able to run Winamp…

The exe file will probably be in /Users/{USERNAME}/Wine Files/drive_c/Program Files/Winamp/winamp.exe

Double Clicking on it should probably give the prompt above, and it should run. If not, I’m sure you can figure out how to make it work there… right click, Open With… etc

screen-shot-2016-11-17-at-23-38-34

However, in this modern world, you’ll probably want to play .m4a files too (thanks iTunes). So, grab this file as well and run it using Wine.
http://ncu.dl.sourceforge.net/project/faac/MP4%20plugin/in_MP4%202.0%20RC3/in_mp4-2.0-rc3.exe

Execute that install file and then you should be able to add the .m4a files.

You may find issues because of the stupid Mission Control program Apple has installed… but, to get the menu up (such as searching), you should be able to hit “Option-F3” or “Option-J” etc.

screen-shot-2016-11-17-at-23-44-23

The skins are a bit quirky and I’m happy with the standard one. Give it a go on others and let me know how you go! 😀

Enjoy! 😀

Mouse and keyboard – Virtual KVM

Posted on

Hey, if you’ve got a few computers that you need connected to each other on a network and only want to use one keyboard and mouse for all of them, you can use VNC connections, a KVM switch or… software!

Check out Synergy.

I found an older version of the software that still works well.

I’m currently trialing this out. So time will tell if I stick with it long term.

Using 2 StationPlaylist computers over a network

Posted on Updated on

So, sometimes you have a few computers and you want to run a radio station and be able to use them both. Well, you can with StationPlaylist.

We run the software in a unique method, where by we use it in a network situation. This  can create problems, but can create also redundancy and you can do more with two computers over one. We use two computers as a complete system.

One computer is used for play-out, and the other for scheduling. Both computers have the same drive letters mapped to the same locations, so they see the same thing. M Drive for Music, Programs and the Imagining and S for SPL specific things such as the main log.

This way, everything talks well, and the scheduling computer can be set up to do voice-tracking while you still have another person live in the studio.

As for redundancy, in the case where the main playout computer goes down, you can simply remap the network drives to your backup NAS (for example), and be up and running again off the scheduling computer until the studio computer is rebuilt – or the other way around. But, backing up the data is the key thing.

There are of course down sides to doing this method as well. You can only schedule from one computer and not both – unless you do some form of special database sycronisation, in which you’ll probably mess up your registration details anyway.

Another downside is if all the audio is stored only on one of the machines and you have no backups. But, you’d never do that would you?

We have successfully used the redundant method to bring a schedule computer back to being the master, while the studio computer was being repaired as it died. It’s not ideal, but in the circumstances, it was the best option, and it was fixed remotely too.

As will all radio station computers, your biggest single failure are your hard drives, and as such, you must be prepared in the instance that a drive will fail. They do, and they will, so make sure you have a backup plan that will save you.

Also, with the backup plans, test out your theory. It may also be worth having a second computer ready to go with a pre-made selection of songs, programs and ids that you can run while you are bringing your computers back online.

So, while StationPlaylist is not specifically designed for network use, you can use it over a network.

For a new product that will actually let you do basic control of StationPlaylist over a network, try my newest software pisk-lite.

Reseting Printer Cartridges

Posted on Updated on

I have a laser printer. It’s a Brother FL-3170CDW. It’s good. It works (usually).

These are the main details:

Model Name               Brother HL-3170CDW series
Serial no.               E71877G5J8XXXXX
Main Firmware Version    1.25
Sub1 Firmware Version    1.05
Memory Size              128MB

But this printer has a problem. If the toner gets low or empty, (so it thinks) it stops printing. (I also have to switch it on and off between print jobs too because Mac OS X El Capitan can’t seem to connect to it, but that’s another story.

I hate it when printer companies do this. However, today, I thought I’d try something.

After following these instructions I got my printer going again and it now thinks that the black toner is full once again.

As per the fix I found, this is it.

The Solution:

The secret behind the continual use of the toner cartridges is the ability to reset the counters so the printer thinks the cartridges are new again.  I will continue to do this until print quality decreases.  Below are the steps to reset the counters.  I always reset all cartridges…just to save myself time.

  1. Open the top lid of the printer and leave ajar.
  2. Press and hold the “Secure” and “X Cancel” buttons.
  3. Use the arrow keys to select the cartridge model you would like to reset and press “OK”.
  4. Press the UP arrow to reset the cartridge.
  5. Once reset is selected you will see “ACCEPTED” on the screen.

After you perform the reset for the needed cartridges just close the printer lid and hit “X Cancel” to exit back to the main menu.  DONE!

screen-shot-2016-10-14-at-10-51-58

As you can see, the Black cartridge is now “full” again.

screen-shot-2016-10-14-at-14-33-27

And… I just did the other 3 cartridges too. TA DA! 😀

Strangely enough, clicking on their “Visit the Genuine Supplies Website” button, doesn’t even give me an option to purchase. It’s just marketing crap. Ridiculous if you ask me.

All I can say is I’m glad the tricked worked, because this toner is very expensive. They want $391 AUD for a 4 pack. Just to print.

TN251BK (Genuine) Black X1
TN251C (Genuine) Cyan X1
TN251M (Genuine) Magenta X1
TN251Y (Genuine) Yellow X1

I hope this works for you!

Afterwards, this will be my next test.

Dealing with Large Media sets after traveling

Posted on

I have recently come back from a trip to Israel, and in doing so, I took thousands of photos and hours of video. Some of these ranged from quick happy snaps, time-lapses and some panoramas.

The photos, video and audio were recorded on several media devices, namely Canon 7D MkII, LG V10, GoPro Hero 4 Black, Olympus TG 4, Panasonic DMC-FZ100, Atomos Ninja 2, Rode Video Mic and a Zoom H4N. The optics I used was a Canon EF 70-200mm f2.8 L, Sigma 24-70mm f2.8 EX DG and the Canon EF-S 10-22mm f3.5-4.5.

One such project of managing all the media, is to handle it correctly. Of the nearly 600Gig of data (300GB on the Ninja2 alone using QT ProRes 422 LT) I’ve got much processing to do.

Part of the problem with the organisation of this amount of data is to keep everything in a chronological order so that it all be located later and to make editing easier, as much of it will be edited in Photoshop or Aperture (give me some bucks and happily use Capture One).

I first organised the filing system and moved the video and images in to their correct areas. The biggest problem is keeping the directories synced so they have the same names. The question is how do you copy just a directory structure, but not the file names? Well, Opening up the Mac Terminal and entering the following will give you the result you want (or similar):

$ rsync -a "/Volumes/Media1/Israel 2016/organised/Photos/" "/Volumes/Media1/Israel 2016/organised/videos/" --include \*/ --exclude \*

The syntax is this:

$ rsync -a /path/from/ /path/to/ --include \*/ --exclude \*

Of course, if you have spaces in your directory paths, you’ll need to put them in “quotes”.

 

One of the processes to do is that of stitching the panorama photos together. While Adobe Photoshop CC 2015.5 is great at doing simple stitching, it often doesn’t work for more complicated stitches, such as where there are multiple columns and rows involved.

A large project I wanted to do was stitch 137 photos on the view of the Temple Mount in Jerusalem  using Hugin as the stitcher. It took about 2-3 hours, using about half an hour  used just to find the point matches in the photos. My MacPro4.1 is worked on overtime with all 8 cores working to the max (so glad it’s multi-threaded), so there’s some serious number crunching that happened.

After trying several attempts to stitch the photos and multiple failure attempts at full res, which was over 90,000px wide, I dropped it to about 9k and it worked. The stitching itself worked, but I had an extra hat in the image from a person standing in the way. I guess it’s hard for the software to figure out everything sometimes… So finally after trying, I dropped the resolution to it’s maximum recommended  and after trying multiple times… it didn’t want to work.

I guess I try something else another time.

Back to editing!