Create new sim screenshots to match HTML5 aspect ratio

[oliver-phet]

We need to generate new screenshots for all of our "legacy" Java and Flash sims (that do NOT have an HTML5 version). The aspect ratio of the new screenshots will need to be the same as the existing HTML5 screenshots (2048x1342 with navbar) - which means a new screenshot resolution of 1024 x 672.

The screenshots should not include the File menu, only the tabs.

There is a utility called 'Sizer' for Windows: http://www.brianapps.net/sizer/ May be an option for Mac here: http://www.labnol.org/software/resize-mac-windows-to-specific-size/28345/ https://agilewarrior.wordpress.com/2012/09/07/how-to-resize-a-mac-window-to-exact-dimensions/

File naming should be "[sim name]-screenshot.png" without [] and ""

For example: energy-forms-and-changes-screenshot.png (sized at 1024x672)

[oliver-phet]

It may be faster/easier to resize the window to a specified size (including the border and menu at the top) then batch process the images to crop out the border to yield 1024x672.

[oliver-phet]

Here is a Gspreadsheet with suggested file names for all the sims: https://docs.google.com/spreadsheets/d/1msEVN4Z-0Au7b5SZrYVRko8kWMv9GLsyL_aM4c5xVmA/edit?usp=sharing

[samreid]

Just a detail that we agreed on today that I didn't see mentioned above. We requested that the screenshots be generated on OS X (except for the 2 sims not supported on latest OS X).

[oliver-phet]

After your meeting, I realized that since we are cutting out the border and menu bar, there won't be any Mac-specific styling visible. Also, when I was browsing for utilities that allow the screen to be sized to a particular resolution, I got the impression that finding something that would work on a Mac would be harder. @arnabp Investigate what you can find out for doing this on a Mac, but if it turns out to be more time/effort, just take the screenshots on Windows.

[samreid]

After your meeting, I realized that since we are cutting out the border and menu bar, there won't be any Mac-specific styling visible.

The buttons + controls within the simulation will also look different for Win vs Mac (more recent sims with Piccolo components will look the same across platforms, but older sims will look better for Mac).

[bryo5363]

for this task should I only take snapshots of the simulations that have not been converted to HTML5?

[oliver-phet]

Yes, just take screenshots of the Java and Flash sims, but at the same aspect ratio as the HTML5 screenshots. However, for these new screenshots, don’t include the File menu or the window border (like the example above).

[bryo5363]

Here is an example of the screenshots I have been producing.

[bryo5363]

I cannot resize the Lasers simulation, not sure what is going on. I will retry when I make it into the office

[samreid]

@bryo5363 some simulations such as lasers are known to have window resizing disabled. Not sure what is best to do in this case, though I recall we had some discussion about it a few weeks ago. I'm curious what happens if you set your monitor resolution as close as possible to the desired resolution before launching the sim. How close can that get you?

[ariel-phet]

@bryo5363 and @orejolaphet - this task is becoming a higher priority since we are making nice progress on changes to our sim pages.

I think it would be good to go through all the sims that can be easily resized to the correct aspect ratio first, and we will then figure out how to deal with the outliers.

@bryo5363 - how many of the sims have you done so far?

[orejolaphet]

@bryo5363 which java sims have you taken screen shots of?

[bryo5363]

I did all of them except for the ones w/o adjustable aspect ratio. I believe those are lasers and one of the quantum sims. I have a dropbox full of the screenshots On Mar 25, 2015 10:01 AM, "Oliver Orejola" notifications@github.com wrote:

@bryo5363 https://github.com/bryo5363 which java sims have you taken screen shots of?

— Reply to this email directly or view it on GitHub https://github.com/phetsims/tasks/issues/132#issuecomment-86095173.

[ariel-phet]

@bryo5363 can you put a link to the dropbox in this issue?

[bryo5363]

https://drive.google.com/folderview?id=0B7WUaZM7uvVKbXhjMEs4Rm1OVU0&usp=sharing

On Wed, Mar 25, 2015 at 10:11 AM, Ariel Paul notifications@github.com wrote:

@bryo5363 https://github.com/bryo5363 can you put a link to the dropbox in this issue?

— Reply to this email directly or view it on GitHub https://github.com/phetsims/tasks/issues/132#issuecomment-86099471.

[amanda-phet]

I found 11 missing screenshots. I also noticed that the HTML5 sims with a legacy version are not on the list- shouldn't we also have resized screenshots of those sims? They will definitely show up in the list of sims when viewing the site in a different locale.

@ariel-phet please comment. I think with so many sims to look through, a table would be helpful to check off as we go so I'm going to make that and share it on google drive.

[ariel-phet]

Yes, we will probably need those as well.

[amanda-phet]

@bryo5363 Can you look at this spreadsheet and add notes in the next column about the issue with the screenshot? If the window can't be resized, for example. That way I know which sims to look at more closely.

@ariel-phet Until I have more information I won't make any new screenshots.

[aaronsamuel137]

It looks like there are still some missing screenshots - I haven't looked to closely but it seems like all of the sims the have HTML versions need legacy screen shots as well as some other random ones like circuit-construction-kit-dc.

[amanda-phet]

@aaronsamuel137 Based on the spreadsheet being filled in it looks like @bryo5363 is still wrapping up this project and is checking them off as he goes. I don't think they are all in the drive folder that is linked above.

[aaronsamuel137]

OK great! All of the screenshots I have are on phet-dev now. Any ones that look like they are the wrong size are one's I haven't received yet.

[aaronsamuel137]

@bryo5363, please take a look at my comments in #203 to see the correct naming convention.

[amanda-phet]

We have determined that this is in a "good enough" state. Closing.

[amanda-phet]

This project needs to be completed. It is good enough for the current state of the website, but all of our sims need to have a high-res screenshot that lives in this folder: https://drive.google.com/folderview?id=0B7WUaZM7uvVKbXhjMEs4Rm1OVU0&usp=sharing. Please add any here that were done but are missing.

Please complete this spreadsheet as the screenshots get done: https://docs.google.com/spreadsheets/d/1mBiWoz1ff0yMqyCkwXzDVfKI5x8KXa7MKYInMuqh5PQ/edit#gid=0

The folder lists 96 files but the spreadsheet says 130 are done, so definitely make sure these two items accurately reflect each other.

[bryo5363]

@amanda-phet I have compiled most of the screenshots that needed to be taken into a new file. I was not able to capture 8 screenshots; the information is available on the spreadsheet you created.

There is no Java version of ph scale basics so I was not able to produce a screenshot for this sim. Everything else either has Mac compatibility issues or will not let the user adjust aspect ratio.

[amanda-phet]

Can you point me to the place where all of the screenshots are located? Even better, can you put them in the linked google drive folder so they are all in the same place?

[amanda-phet]

Thanks @bryo5363 All of the screenshots are now in one folder, shared with the team. Closing.