Zooniverse add-on idea: Would it be feasible/easy to implement?

Add-ons Development
#1

Several projects of the zooniverse network are designed to randomly show photographs taken e.g. with wild cams (such as on WildcamGorongosa.org or SnapshotSerengeti.org), to be then analyzed by the volunteers (e.g. “Which animals do you see?” etc.). These are only pictures and not videos, so it would be helpful for the volunteers to have a look at the pictures taken before/after the image they’re looking at. And as it happens, the photos are stored on the server in such a way that usually, several photos from one camera are given consecutive file names - consider the following pictures and their file names:

http://zooniverse-export.s3-website-us-east-1.amazonaws.com/21484_1000_D35_Season%202_Set%201_EK006076.JPG

http://zooniverse-export.s3-website-us-east-1.amazonaws.com/21484_1000_D35_Season%202_Set%201_EK006077.JPG

As you can see, “consecutively named” means here that the number in the end of the file name increases with every picture. This is usually works for ~5-30 pictures in a row, then there will be pictures from another camera.

What I’m imagining to have is this:

I’d like to have an add-on that will manifest itself in the browser in the form of a “back” and a “forward” button, allowing us to look through the pictures easily. Having some IT knowledge (- I’ve never created a firefox add-on though), I’d say that implementing a widget that will increase/decrease the “number in the end of the file name” sounds relatively simple. How right am I? Can you give me any advice, or even minor hints on how this could be done?

And by the way, you are of course very welcome to participate in the projects yourself!

#2

That shouldn’t be too hard. Although it depends a bit on what “some IT knowledge” entails, haha.

Do you know any programming, preferably javascript?

#3

You may also want to take a look at pilfer: https://addons.mozilla.org/en-US/firefox/addon/pilfer/ both the addon and the source may be useful for you.

#4

This looks like a fun addon you should make it man! Jump on IRC if you need help, people are nice.

https://client02.chat.mibbit.com/?url=irc%3A%2F%2Firc.mozilla.org%2F%23jetpack

I would make an about: page HTML5applicaiton for this, I would use something like Magnific popup and load a gallery with ajax: http://dimsemenov.com/plugins/magnific-popup/

#5

@MartijnJ I should have said that some time ago, I took a number of IT/Programming lectures at university, so while I can’t guarantee that I remember enough of it, I’ve certainly heard of languages like Java and C - JavaScript I only played around with a bit myself, i.e. I’ve skimmed the jQuery documentation a little a few years ago, stuff like that.

#6

Here you go man I started you off. It took like 20min I did some side self-learning on some angular plugins. I made it here with just angular no plugins, no styling, you should make it pretty.

So when you take over this project, use the angular documentation: http://angularjs.org/

To get more languages for localization upload it to babelzilla: http://beta.babelzilla.org/
Then post a topic here like i did for my addon here: http://www.babelzilla.org/forum/index.php?showtopic=7665&hl=nativeshot

People will submit different languages to you.

I called the addon ZooniverseXpert.

To install from the github repoistory use github extension installer:
https://addons.mozilla.org/en-US/firefox/addon/github-extension-installer/

You should take this version and release it on AMO to your buddies, I already set your name as author. Take over this addon, make it nice. :slight_smile: Looking forward to seeing it on AMO!

Fully localized. HTML5 application. Go to about:zoo. When firefox gets an application launcher your icon for this app will show on it (as its registerd as an about: page). I might even write up an application launcher addon: https://github.com/Noitidart/AppLauncher

1280×984 97 KB

You should make it popup on click of the image so it shows it a nice dialog and a form which allows user to just type and submit without leaving the site.

Screenshot:

1 Like
#7

That’s good.
I actually learned most my JavaScript from messing around with Firefox add-ons.

I don’t know if your going to go with @noitidart’s project, or if you still want to start something yourself.
But if you do, I suggest simply beginning with the “getting started” tutorial:
https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_(jpm)

The first step you’ll be taking is installing jpm.
I hope your not scared of the command line, it’s only a few commands.

The tutorial makes you build a button that opens a tab with a link, which is about half the functionality of your add-on.

1 Like
#8

Thanks, @noitidart! I’ll definitely take a close look at the source code… Your solution might even be a little too “big” for my purposes - what you have to imagine is that the add-on should simply be a measure to make typing new numbers into the browser address bar unnecessary. As soon as you have to do significantly more than typing a number, it might start becoming to cumbersome (is this the right word? sorry, non-native speaker here) to be actually used by anyone :wink:
Anyways, thanks a lot for your effort!

#9

Thanks, @MartijnJ, I’ll definitely take a look at the links!
For future reference, I’m using Windows 7 here, but I have cygwin installed.

#10

Cool.
When you’re ready report back and I’ll gladly point you to the following steps for your add-on.

#11

Its a very simple html5 app. The only advantage its taking right now (of the addon system) is that its an about page (about:zoo) so it gets icon and link from about:about and any future launcher pages.

But I think i see what you mean, you have an existing tab, and you want to load the next page just by taking the current url and modiying the id in it.

About the app and learning:
When it will take more advantage of the addon system, is when you make it so you can submit straight from that addon page. HTML5 apps on the web can’t do cross site http requests, with this you can.

Other advantages is you have the AMO statistics tracker, to see how people are using your addon, which is real nice.

I usually don’t recommend starting learning basics of javascrpit, if you do that you’ll end up doing fundamental js forever, and never get to actual production. You start with a goal and get whatever help you can and improve on the help you got. Like for me, if i took people advice and started with fundamentals i would still be studying hex, but i learned it as i got stuff to work in some nice production work, and as i wanted my project to be awesome, i got more involved and improved the perf and mem stuff and learned more about the hex and stuff than i would have by reading articles. And to top it off, firefox got more win because i got some production stuff out, rather then be stuck reading some general stuff i probably wouldn’t be needing for the production anyways.

Angular is super good. If you study general javascript then try to make a gui, you’ll see what a headache it is (attach event listeners, maintain them, remove them when not needed, keep perf in mind, mem in mind, etc), angular handles it all in the background. so if you want to study basics of anything, do it of angular, their main home page has a video, its really good.

You’ll learn the basics of js as you hack on improving your project which you now have in hand. I think it’s the best way to learn, as thats what works best for me. But everyone’s different.

Learning jpm is awesome and if you do go that way, share your knowledge with me!

#12

Hey guys, I sat down the other night and worked my way through the jpm tutorial. I seemed possible to create something helpful (for the project) in relatively few steps from that point, mainly just by adding another button and a few event listeners (this is what I’ve managed to put together so far). For now, these questions have come up though:

  • For some reason, the add-on only runs as long as the firefox “private mode” is turned off. Can I make it run in private mode as well?
  • What could I do in order to achieve that the buttons are only active when the url matches a pattern (see the file names above, or simply “*.jpg”)?
  • If you press the buttons too quickly, the pictures are loaded slower than the counter (the badge of buttonReset) is increased. Is there a nice way in javascript to make sure that the counter doesn’t outrun the pictures (maybe something like a semafore?)
  • Is there a more reliable way to count the “position” of the picture in relation to the one you started with than just to increase/decrease the badge counter whenever you click?

(Maybe I’ll add more later. Remember: For now this is purely experimental, so any kind of advice is welcome.)

1 Like
#13

Really nice man!

You need to explicitly opt-into private browsing in your package.json. This is to prevent add-ons saving private data by accident.

I think that tying a function to the pageshow event in the tabs object would be enough to detect url changes. The function will be passed a tab object from which you can get the url.
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs#Events_2

You’ll be able to test if the url matches your pattern with this module:
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/util_match-pattern
Although you might have to work with Regular Expressions, which is a bit of a language of it’s own :confused:
I usually use this site to help me construct a Regular Expression http://regexr.com/.

And then you can pass the disabled state and the tab to the button:
https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_button_action#state()

You could save the url you are going to on the tab itself, i.e. tab.targetURL = incrementedURL. And increment that url next time. This way your users will be able to spam the forward button 10 ahead and still end up on the correct page. (Not sure if this is the problem you are having)

Is there a more reliable way to count the “position” of the picture in relation to the one you started with than just to increase/decrease the badge counter whenever you click?

In what way do you consider this unreliable?

1 Like
#14

Thanks for your answers. I’ll look into that.

I usually use this site to help me construct a Regular Expression http://regexr.com/.

regexr.com doesn’t seem to work properly for me… Looks odd, anyway.

You could save the url you are going to on the tab itself, i.e. tab.targetURL = incrementedURL. And increment that url next time.

I’m not sure if I understand what you mean by that. I think you got my point though: I just want to be able to go forward 10 pictures, go back all the way and be at 0 again for my original picture. By 'a more reliable way to count the “position” ’ I mean just that - a counter that reliably counts the pictures. Sorry for being unclear.

Best regards

Edit: I think I know what you’re trying to say. Anyway, I updated the addon on github - but I feel like there should be a better, faster solution. I added a “number” variable that is updated only whenever the counter is at zero - and whatever else happens (including loading new pictures) works with that number…

#15

One way could be to extract the number from the url and save it as the startingNumber. And when you go to the next picture, you extract the number again, subtract the startingNumber and you’ll have the index.
The benefit of this would be that using the history buttons won’t screw up the index.
But I think this would only work if all the pictures would have the same nice incremental number system as in your examples.

Another way would be to keep a mapping between the urls and indices:

donkey_013.jpg => 0,
donkey_014.jpg => 1,
donkey_015.jpg => 2

So when the history buttons get used you can just get the index from the mapping.

Also, start your buttons in disabled state and only set the enabled state when your url tests positive. And when it tests negative set the state for the tab to null, because that will return it to the default state.

Something like this:

tabs.on( "pageshow", function( tab ){
    if( /*url tests positive*/ ) {
        buttonforward.state( tab, { /*enabled state*/ } );
    } else {
        buttonforward.state( tab, null );
    }
} );
#16

“Its not a bad idea to have captions beforehand if the goal is to accomplish code”

From what I understand although enabling functions is preferred There is also the fact that ways to handle performance is key.

/** * {?onJSLoad} hitCounter * {*._!--// planetMotorsport //--_.} theAboveTotal */ init: function(hitCounter, theAboveTotal){ var redirectOn = (theAboveTotal) new theAboveTotal(this._theAboveTotalSpec) : undefined;}

init: function(){with(typeof redirectOn !== ‘undefined’) redirectOn : { hitCounter : undefined }}