Make demo images click-to-download

[jywarren]

This has been marked as a good candidate for becoming a first-timers-only issue like these, meaning that it's simple, self-contained, and with some extra formatting, could be a great entry point for a new contributor. If you're familiar enough with this code, please consider reformatting or reposting it as a first-timers-only issue, and then ping @publiclab/reviewers to get it labelled. Or, if this is not your first time, try to solve it yourself!

---

Images on the demo should be downloadable by clicking on them:

https://publiclab.github.io/image-sequencer/examples/#steps=ndvi-red,segmented-colormap

That means wrapping this line in an, an <a> with target="_blank" so they open in a new window.

image-sequencer/examples/demo.js

Line 43 in d887f5e

<img alt="" class="img-thumbnail"/>\

and then adding below this line to update the href of the <a> element:

image-sequencer/examples/demo.js

Line 118 in d887f5e

step.imgElement.src = step.output;

[jywarren]

GitMate.io thinks possibly related issues are #3 (CORS Image error on GitHub hosted demos), #4 (demo of image processing using leaflet map tiles), #148 (Create demo bookmarklet code for inverting images on a page), #5 (image cropping module), and #140 (Make demo display corresponding commandline syntax for current sequence).

[marzann]

Could I work on this, or it is first-timers-only? I had one small previous contribution.

[tech4GT]

@marzann welcome to the community😊
It's preferred that first timers solve this issue but you take it up if you want it'll help you get familiar with the project

[marzann]

@tech4GT: Sorry about the delay, I have been busy. Thank you so much for the welcome. I like the project, and would like to go ahead with issue #210. I have never contributed to the publiclab repos. Quick question, for testing, should I use grunt localhost, rather that npm?

[tech4GT]

Yeah that would be better😁✌️

[marzann]

Tysm. I am having trouble showing website on localhost via npm or grunt. What is the preferred way of doing that?

[tech4GT]

@marzan actually we do not host the website on a server in grunt(nice pointing It out, I'll open an issue for this) so for now you should start a simple http-server in the project folder
For that you can use https://www.npmjs.com/package/http-server

[marzann]

@tech4GT, thank you! This worked like a charm, so now I can work on the issue, and test it.

[jywarren]

Solved, thank you @marzann !!!

If you're interested in tackling another one, we'd be happy to help you find something interesting!!

[marzann]

@jywarren, thank you. :) I will look over the open issues. Also, if you could recommend a new contributor issue, that would be great.

[tech4GT]

@marzann have a look at #140 , it's again an issue related to the demo so you should feel comfortable with it. Best of luck👍

[tech4GT]

You can see the cli syntax in the documentation,😄

[tech4GT]

You know what would be cool, a button that says view cli command and it alerts the user with the syntax when pressed. Excited!!

[marzann]

I will look this over, thank you for the suggestion. :)

[marzann]

@tech4GT, could you give me more details for #140?
Would the button be for https://publiclab.github.io/image-sequencer/examples/#steps=ndvi-red,segmented-colormap?
Would the button go next to Choose file, and next to Add Step?

[tech4GT]

Actually I was thinking maybe we can incrementally build this after each step and keep on adding into it

[tech4GT]

For example if I apply invert then I'll get the button next to inverted image and then I apply green channel so next to final image I'll get the button which gives the syntax for the whole sequence before it which is ivert then green channel

[tech4GT]

@marzann does that make sense?

[marzann]

@tech4GT, yes it does make sense.
Could you give me more details on the implementation?

[tech4GT]

Yeah, I think we can modify the html that gets generated by sequencer and add the button there and then use js to set its js to alert the cli syntax on getting clicked, how does that sound?

[marzann]

That sounds good. Could I ask for more pointers, similar to the way they were given in #210 (top of page)?

[tech4GT]

@marzann sorry for this but jeff is actually refactoring the code in demo.js so I think we should get back to this once that’s done so that we don’t break anything in the process. I apologise if you had already started working on this!!

[marzann]

Thank you for the heads up. If after the refactoring this issue is still open, let pick it up from here.

[jywarren]

Hi, @marzann -- sorry, i'll try to put some helpful notes on #140 -- tonight or tomorrow morning! Thanks for your help!!!

[marzann]

That sounds good. Thank you both!