search

mozilla / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
http://brackets.io
MIT License
176 stars 278 forks source link

Add support for CSS Instagram Filters #492

Closed humphd closed 7 years ago

humphd commented 9 years ago

http://una.im/CSSgram/ is very cool, very small, and very easy for us to bake into Bramble. It would be cool if we allowed people to do this somehow inside the tool.

One way we could use this is in the selfie taker, and expand the preview to also allow you to pick from versions with the filter applied. Or maybe there is some other clever thing we could do here that lets it work for any image? I'm not sure about that one.

cc @flukeout, @Pomax

Pomax commented 9 years ago

on any image would be pretty neat, if you could pick your filter in the preview iframe and had that change the HTML in the editor.

timmoy commented 7 years ago

I'd like to try adding this functionality to Bramble.

Pomax commented 7 years ago

@timmoy nice! @humphd has written extensions before so is probably the best person to advise on where to get started.

humphd commented 7 years ago

I think the best way to approach this would be to add this feature to the Selfie Taker. All of that code lives in here: https://github.com/mozilla/brackets/tree/master/src/extensions/default/BrambleUrlCodeHints. You'd need to bundle the filter js library in there, then modify the HTML/CSS for the selfie taker dialog to include these filters as an option you can select.

Ask questions in here as you go, and we'll help you.

timmoy commented 7 years ago

So I've been toying around with ideas and it seems that adding the filters could be done by including the cssgram library in the BrambleCodeHints directory and adding it as a stylesheet (for modularity) and modifying the selfie-photo div's class here. My proposed alternative methods currently are:

-adding a select list for each filter and having the selected value add the cssgram class to the preview photo if it is selected -adding a button for each filter and having the selected value add the cssgram class to the preview photo if it is selected -adding a separate full-sized preview photo for each filter into the selfie-gallery (requires duplication of the selfie-photo div into other unique ids)

The first two will keep the UI uncluttered, and could use simple javascript like document.getElementById("selfie-photo").className = "polaroid [filtername]"); to change the filters. As for the code of changing the filter, I plan to put it here. At worst, I'll code it into the html file when testing.

The multiple full sized picture solution would need a lot of space, but would be easier (and possibly faster since they don't need to click the filters they don't know to preview it) to use for users.

Personally, I like the first solution for easy management of filters as it doesn't get cluttered as much as the others. It is the least visual though... so that's one thing to consider.

Of course, the original idea of doing what instagram does and having each filter show in an individual clickable thumbnail to change the normal sized preview image would be desirable. Though for that method, the layout might get messy and require a table to hold the thumbnails (which I worry could get clunky)

@humphd Any suggestions on which method would be most in line with what Thimble users would expect to use?

humphd commented 7 years ago

I would start by doing the easiest thing possible, and focus on getting it to work at all. Then, we can tweak the UI when it's in review. Don't block on figuring things out perfectly; focus on getting something working.

timmoy commented 7 years ago

I've added my WIP pull request here.

Filters are working (via the select list solution and embedded javascript atm), but saving the image doesn't have the filter applied.

Pomax commented 7 years ago

@timmoy github specifically needs the word "fixes #....", otherwise it won't create the crosslink between the issue and the PR. In this case you used "addresses #..." which github does not pick up on.

timmoy commented 7 years ago

I've created a new branch for the Caman.js implementation for this issue here.

Currently, the code is working to support 1 filter and reset of the image. Saving works like a normal photo as well, but the preview and the editing photo are separate for the time being.

The UI definitely needs work, so I'll create a pull request once I clean up the code, add some filters and get a decent looking UI.

Pomax commented 7 years ago

no need to wait with a PR, just create one, put [WIP] in the title, and then just keep working on it.

timmoy commented 7 years ago

I've created a new pull request for this issue.

Currently it works and is able to save photos with filters applied, but the UI is a bit rough.

timmoy commented 7 years ago

Just a quick update to let everyone know that another pull request has been created since we are changing the feature from being located in the selfie-taker to the image-viewer.

The pull request can be found here.