6 ms·
Show HN: αlphaPun.ch
- dgunn 15y agoBecause I'm at work and can't use my preferred browser (chrome), I am forced to know nothing about the site other than the creator’s appreciation for internet memes and the sites apparent need for canvas support. You should really make sure every visitor becomes a fan of your idea even if they can't use it until they upgrade their browser (or get home from work). Now, I may not remember to check this out when I get home because nothing grabbed my attention. FYI, I'm not trying to be a jerk. I found your no-canvas alternative to be very humerous. But you should really have told me something about your site instead of making me laugh.
- newtron 15y agoI don't think you're being a jerk, I think it's great feedback. :) I appreciate your candor about forgetting to revisit. I'm hoping to add better fallbacks shortly.
- wccrawford 15y agoThat's a neat idea, but I'm not sure I've ever needed it. :)
- newtron 15y agoThanks! Now if you do need it, you'll have options. :)
- aw3c2 15y agoYour "no drag and drop" fallback is so utterly useless that I have not the slightest idea what this site is about.
- newtron 15y agoAs a Safari user, I actually totally agree, and it was a hard choice to leave it out of the first iteration. The reason was that this was made for the 10K Apart contest (10k.aneventapart.com) and I was really, really struggling to get the code in under 10k. Having the extra functionality pushed me over the edge. I will definitely be making it support more browsers over time, and adding more options. Or, you could always fork it on github and add it yourself. (https://github.com/nwtn/alphapun.ch https://github.com/nwtn/alphapun.ch) :)
- tripzilch 15y agoThat's wonderful. What does your site do?? :-/
- newtron 15y agoIt lets you upload a transparent PNG or GIF and will trace the opaque parts. It then spits out some HTML/CSS/JS that you can put on your site that allows you to click through the transparent parts of the image.
- sequoia 15y agoEdit: I am/was wrong, see below. Sorry! :$ Really, people? From the site: "αlphaPun.ch will trace the opaque part of your PNG or GIF image. It will then punch through the alpha channel (i.e. the transparent bit), so you can click on things behind it." What are we having trouble understanding here? EDIT: Here I am, using elinks: http://i.imgur.com/UaX0M.png http://i.imgur.com/UaX0M.png I'll remind you that elinks's support for drag-and-drop is, err- limited. I nonetheless have no trouble understanding what alphapunch does.
- to3m 15y agoNonsense! - the site is a picture of 'Y U NO man', saying "WEB BROWSER - Y U NO DRAGNDROP?!"...
- sequoia 15y agooops! My apologies; I tried the site with firefox then with elinks, it wasn't until I tried IE that I hit the sweet spot of too-few-features-but-not-so-few-the-feature-check-doesn't-work. Sorry to3m et al.; you are right that fallback is horrendous and unacceptable, no matter the limitations of the contest.
- newtron 15y agoThe limitations of the contest were that it must support current versions of Chrome, Firefox, and IE10pp2, which it does in this launch version. Now that it's working in those browsers, further browser support and better fallbacks are my top priority. Yes, the fallback is not adequate for a general release tool, so maybe I should have waited before posting it here. But, I thought people might still find it interesting, and I wanted some feedback before submitting it for the contest. Apologies to those that are being frustrated by these limitations at launch.
- AlexC04 15y ago<quote>WHAT IS THIS? An image with a transparent background is like a painting on a window: you can see all sorts of exciting things behind it, but you can’t reach through to touch them. αlphaPun.ch changes that! αlphaPun.ch will trace the opaque part of your png or gif image. It will then punch through the alpha channel (i.e. the transparent bit), so you can click on things behind it. WHAT’S REALLY GOING ON? αlphaPun.ch creates a mask for the opaque part of your pic, along with masks for the clickable content behind it. These masks are placed above the actual image. Clicking a link’s mask will trigger a click on that link. </quote> Essentially, if you put a hyperlink under a PNG, alphapunch will create a click-mask that allows you to click anything that is clickable underneath the PNG's transparent areas (alpha-channels) "Punch Through" the "Alpha"
- sinaiman 15y agoI have come across a need for this many times, often there's a simple trick you can do to get by it (i.e. setting an image as a background of an input element, rather than overlaying the image on top, or using transparent backgrounds along with z-index fiddling) however, I would definitely consider using this tool for rapidly building a layout. I like your presentation as well, clear layout with a brief to-the-point message. My only concern would be performance, right off the bat I see a few nested for-loops in the code and am wondering what sort of performance hit you'd be looking at if you use this for several images on a single page. I didn't thoroughly trace through the code or anything, I am just thinking out loud here.
- newtron 15y agoPerformance is a valid concern, but so far in the tests I've run I haven't hit any real problems. If you encounter any slow downs or real performance issues, I'd love to hear about them (and hopefully eliminate them!) Thanks!
- ahmetalpbalkan 15y agodragging an image from my filesistem to the area is not working in OS X Lion, Chrome (flash and js enabled)..
- deleted 15y ago[deleted]
- newtron 15y agoBTW, I have a write-up about it here: http://davidnewton.ca/introducing-alphapunch http://davidnewton.ca/introducing-alphapunch
- yock 15y agoIt seems as if you've allowed your UI to get in the way of your service, given that you've chosen features that are inavailable on so many web browsers. Was your intention to provide a service or to push the limits of UI design? I can't tell.
- newtron 15y agoFor the initial launch, my intention was to build something interesting using new HTML5, CSS3 and JavaScript features and techniques. Now that it is launched and working in the browsers targeted by the contest (current Firefox, Chrome and IE10pp2) my goal will be to expand it to work with browsers that don't support all these features.
- zokier 15y agoFirefox can't find the server at www.αlphapun.ch. Also, no Swiss puns, I'm disappointed.
- newtron 15y agoI don't have it registered with the α unicode character, only the normal roman a -- http://alphapun.ch http://alphapun.ch or http://www.alphapun.ch http://www.alphapun.ch.
- nimbix 15y agoCould be useful for complex cases, but "pointer-events: none" CSS usually does the trick just fine.
- newtron 15y agoThat's really cool, I didn't know about that. Thanks! The difference here is that with alphaPun.ch you're only clicking through the transparent parts of the image; the opaque parts still block clicks. If I understand that document correctly, pointer-events would only allow you to click through the whole image. (Except with SVG?) Is that right?
- nimbix 15y agoYes, that's right; pointer-events in HTML can only be applied to whole images.
- jri 15y agoRedditors will like what happens when they view the page without javascript enabled. It made me laugh.
- dominik 15y agoAnd here I thought the site was going to be about generating "alpha" puns via artificial intelligence.
- slig 15y agoI had to do something similar once. I ended up using ImageMagick and ptrace get a nice "silhouette" of my image and use the generated data to draw a path using Raphael. convert IMAGE.png -channel matte -separate +matte -flip ppm:- | potrace -k 0.95 -u 1 -s
- newtron 15y agoThat's interesting, I'll definitely take a look at Raphael. Did you just need the silhouette, or did Raphael let you do the click through thing too?
- slig 15y agoI was able to do the click through using the invisible path. The project was a kind of weird puzzle, so the click through was a must. I upped my prototype here: http://dl.dropbox.com/u/491131/puzzle/puzzle.html http://dl.dropbox.com/u/491131/puzzle/puzzle.html You can only drag the camel. Eventually I gave up because I wasn't able to drag the piece correctly if it was rotated.