Code Monkey home page Code Monkey logo

under-pressure's Introduction

Under Pressure

"Under Pressure" is an educational simulation in HTML5, by PhET Interactive Simulations at the University of Colorado Boulder. For a description of this simulation, associated resources, and a link to the published version, visit the simulation's web page.

Try it!

Click here to run "Under Pressure".

Screenshot

Documentation

The PhET Development Overview is the most complete guide to PhET Simulation Development. This guide includes how to obtain simulation code and its dependencies, notes about architecture & design, how to test and build the sims, as well as other important information.

Quick Start

(1) Clone the simulation and its dependencies:

git clone https://github.com/phetsims/assert.git
git clone https://github.com/phetsims/axon.git
git clone https://github.com/phetsims/babel.git
git clone https://github.com/phetsims/brand.git
git clone https://github.com/phetsims/chipper.git
git clone https://github.com/phetsims/dot.git
git clone https://github.com/phetsims/fluid-pressure-and-flow.git
git clone https://github.com/phetsims/joist.git
git clone https://github.com/phetsims/kite.git
git clone https://github.com/phetsims/perennial.git perennial-alias
git clone https://github.com/phetsims/phet-core.git
git clone https://github.com/phetsims/phetcommon.git
git clone https://github.com/phetsims/phetmarks.git
git clone https://github.com/phetsims/query-string-machine.git
git clone https://github.com/phetsims/scenery.git
git clone https://github.com/phetsims/scenery-phet.git
git clone https://github.com/phetsims/sherpa.git
git clone https://github.com/phetsims/sun.git
git clone https://github.com/phetsims/tambo.git
git clone https://github.com/phetsims/tandem.git
git clone https://github.com/phetsims/twixt.git
git clone https://github.com/phetsims/under-pressure.git
git clone https://github.com/phetsims/utterance-queue.git

(2) Install dev dependencies:

cd chipper
npm install
cd ../perennial-alias
npm install
cd ../under-pressure
npm install

(3) Change directory to chipper cd ../chipper/, then transpile the code to JavaScript by running node js/scripts/transpile.js --watch. This starts a file-watching process that will automatically transpile new or changed files.

(4) In a new terminal/command prompt, start an http-server

(5) Open in the browser: http://localhost/under-pressure/under-pressure_en.html (You will probably need to modify this URL based on your HTTP port and relative path.)

Optional: Build the simulation into a single file

(1) Change directory to the simulation directory: cd ../under-pressure

(2) Build the sim: grunt --brands=adapted-from-phet. It is safe to ignore warnings like >> WARNING404: Skipping potentially non-public dependency, which indicate that non-public PhET-iO code is not being included in the build.

(3) Open in the browser: http://localhost/under-pressure/build/adapted-from-phet/under-pressure_en_adapted-from-phet.html (You will probably need to modify this URL based on your HTTP port and relative path.)

Get Involved

Contact us at our Google Group: Developing Interactive Simulations in HTML5

Help us improve, create a New Issue

License

See the LICENSE

under-pressure's People

Contributors

samreid avatar notsiddhartha avatar jbphet avatar pixelzoom avatar zepumph avatar jonathanolson avatar aadish avatar phet-dev avatar chrisklus avatar jessegreenberg avatar marlitas avatar agustinvallejo avatar katiewoe avatar aaronsamuel137 avatar

Watchers

James Cloos avatar Taliesin L. Smith avatar Andrey Miloserdov avatar  avatar  avatar Ravindra Kompella avatar Alexey avatar  avatar Ariel Paul avatar  avatar Oliver Orejola avatar  avatar  avatar  avatar Martin Veillette avatar Bryan "Bry-Y" Yoelin avatar  avatar Andrea Lin avatar  avatar  avatar  avatar Bryce avatar Maggie avatar Amanda Davis avatar  avatar

under-pressure's Issues

Placement and design of the "Grid" text

When "Grid" is selected, we now see that the text runs over the grey concrete barrier of the pool. This should be moved to the left slightly so that it no longer overlaps.

On the other scenes, there is a green box with rounded corners which says "3 meters". To conserve space, this should be changed to "3m". On the third scene, the green box should be moved such that it doesn't block the view of the faucet.

Question mark appears in the wrong screen

Test device: Lenovo Z585

Operating System: Windows 8 64-bit

Browser: Firefox, Chrome, IE10

Problem description:
The question mark appears on the first screen in the fluid density box instead of the density slider.

Steps to reproduce:

  1. Open the sim and click on the mystery screen.
  2. Select the mystery planet option then hit the reset all button.
  3. This will return you to the first screen, with the question mark appearing in the fluid density box.

Severity: Medium, makes it impossible to change the fluid density until a different screen is selected

Screenshots:
suprise question mark

Troubleshooting information (do not edit):
Name: Under Pressure
URL: http://www.colorado.edu/physics/phet/dev/html/under-pressure/1.0.0-dev.3/under-pressure_en.html
Version: 1.0.0-dev.3
Features missing: flexbox, touch
User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Language: en-US
Window: 1366x641
Pixel Ratio: 1/1
WebGL: disabled

Windows surface firefox touch delay

Since this is on a surface it is not high priority.

When selecting the faucet knob or sliders, there is a delay before the sim responds - I would estimate in the delay to be about .25 seconds - not enough to make the sim unusable, but certainly noticable.

Scene selection buttons are low resolution

They also don't quite match the look of the scene when you select it. This issue might be best addressed toward the end of redesigns as we would then take higher resolution screenshots of the different scenes when they are in there final version.

You can drag the pressure gauges of the screen.

There is no boundary for the locations that the pressure gauges can be placed. If you click and drag a pressure gauge in any direction until your mouse leaves the web browser window, the pressure gauge will leave the screen and you can no longer access it.
Tested 1.0.0-rc.1
Mac OSX 10.9 with latest chrome.
screen shot 2014-02-28 at 1 32 55 pm

Layout doesn't adapt if translated strings are long

See the screen shot for a look at how the control panels appear when the term 'Mystery Planet' is translated into Macedonian. The panel should get wider to accommodate the contents, and should stay centered above the lower panels. The barometer box should move left or right in response.

up-long-string-in-controls

Gauge behavior when underground

The pressure gauge behavior when in the ground should be slightly different. Namely, there should be no needle, and no box around the dash. See attached screenshot.
gauge_behavior_underground

Text moves when you use faucets. Windows 7, Firefox 27

When you use the faucets the text within the tool box in the upper right hand side with (ruler, grid, atmosphere, units, metric, atmospheres, english) translates left and right very slightly. Particularly the spacing of letters increases and decreases as you add or remove fluid.

Tested on a Windows 7 Enterprise 32-bit, on Firefox 27.0

No gravity box or numbers

Neither the gravity box nor the numbers for fluid density loaded on the iPad mini, even after multiple refreshes.This didn't happen on an iPad 2 or iPad 3.
image

Pressure gauges don't update

Pressure gauges don't update when switching between the first and second screens. See screenshots for examples. The first example shows the gauge reading pressure when it is in the ground, while the second example shows no pressure reading in the water. This can be reproduced by simply placing a gauge anywhere on one of the screens, then switching to the other without moving the gauge (this only happens between the first and second screens). I should also note that this only happens when the levels of fluid are NOT changed.

Example 1: Screen one to two
1 to 2

Example 2: Screen two to one
2 to 1

Gravity and density not resetting

Changing the fluid density and/or gravity on any of the first three screens then switching to the mystery screen and pressing the reset all button does not actually reset the fluid density or gravity.

Ruler position not lined up with top of tank

When the ruler is selected, the zero position should be lined up with the top of the tank. The ruler in the current HTML5 version is not lined up.

Ruler starting position Java
ruler position java

Ruler starting position current HTML5
ruler position html5

There should also be a red "X" at the top left of the ruler so the user may remove it without having to click on the check box again.

Mystery Scene Details

Mystery Fluid and Mystery Planet Details

The fourth screen will contain three mystery fluids (different densities) and three mystery planets (different accelerations of gravity). This scene will be different from the other scenes in the following ways:

A new box will be added underneath the box containing units - see the mockups below
up_bg_scene 4_planet
up_bg_scene 4_liquid

. This box will contain two radio buttons allowing the user to toggle between having a mystery planet and a mystery fluid

A new drop down menu will appear in the dirt between the pool and the fluid density box. When the “mystery planet” radio button is selected, the options in the drop down menu should be “Planet A”, “Planet B” and “Planet C”. The values of the accelerations (in m/s^2) should be 6.5, 14 and 20 respectively.

When the “Mystery Fluid” radio button is selected, the options in the drop down menu should be “Fluid A”, “Fluid B” and “Fluid C”. The values of the densities (in kg/m^3) should be 765, 880 and 1,300 respectively. Below are examples of the colors for the mystery fluids.
mystery purple_2
mystery purple_3
mystery purple_1

Lastly, we recognize that the above details regarding the mystery scene were added late, and so please be sure to update the development cost.

Boundary for the fluid in the scene with weights is incorrect.

If you take a pressure measuring device and bring it to the surface of the fluid, at a slight distance away the pressure changes as if it were in the liquid without the pressure measuring device being in a liquid.
This issue is displayed in the image below. Note that the pressure measuring device on the left is level with the one on the right. Happens with the variety of changes in fluid density and gravity.
Tested on OSX 10.9 dev.5

screen shot 2014-02-17 at 1 26 13 pm

Code review

This sim is nearing completion, so it's time for PhET to do a code review. This ticket will be used to track general comments and as the issue for which commits can be logged against.

Comments in the code will be marked with either //REVIEW or //DOC.

Arrows for changing gravity don't do anything

Using the slider to change gravity works just fine, but clicking on the arrows doesn't change the numerical value shown for gravity, nor does it update the pressure gauges.
Additionally, if the gravity arrows are clicked a few times on any of the first three screens then the sim is switched to the mystery screen and the reset all button is pressed, the sim doesn't return to the first screen and things like this happen when trying to change screens (also notice how the numerical value and position of the slider for gravity don't match):

crazy pressure 1
crazy pressure 2

Change labels on 1st and 4th pool grids to "m" and "ft" instead of "meters" and "feet"

Excerpt of email from @ariel-phet:

In scenes 1 and 4, with the grid on and "metric" could we adjust the "1 meter" so it aligns with the other numbers, the string is obviously a bit shorter since it is "1 meter" and not "1 meters"? Alternatively each of these could be "0 m, 1 m" etc... The more I look at it, I am fine with the abbreviations for "m" and "ft". Seems like it would be cleaner and more consistent all around.

Pressure gauge max wraps all the way around the dial

Zero pressure
zero pressure gauge

Max pressure
max pressure gauge

The gauge should have a maximum which does not wrap all the way around. I think the needle position at zero pressure could be rotated further counter-clockwise than it is now. Then, the max pressure could be placed at the position reflected about the y-axis.

Weights cover up each other

Test device: Lenovo Z585

Operating System: Windows 8 64-bit

Browser: Firefox, Chrome, IE10 (only slightly)

Problem description: The weights on the third screen can cover each other and make it difficult to see all of them.

Steps to reproduce:

  1. Open the sim and select the third screen with the weights.
  2. Place both the 250g weights in first followed lastly by the 500g weight. Wait for the weights to stop moving.
  3. Click the 500g weight, releasing it quickly. This part may be tricky to reproduce. Just try to pick up the 500g weight and place it back immediately, before the two 250g weights have time to rise back up.

Severity: Low, the water still acts correctly.

Screenshots:
covering weights

Troubleshooting information (do not edit):
Name: Under Pressure
URL: http://www.colorado.edu/physics/phet/dev/html/under-pressure/1.0.0-dev.3/under-pressure_en.html
Version: 1.0.0-dev.3
Features missing: flexbox, touch
User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Language: en-US
Window: 1366x641
Pixel Ratio: 1/1
WebGL: disabled

Ground and faucet need to extend further to the sides

The ground and the upper faucet need to extend further to the left and right sides. The problem can be seen in this version: http://www.colorado.edu/physics/phet/dev/html/under-pressure/1.0.0-dev.1/under-pressure_en.html

The screen shots below show the current html5 version vs the original Java version. Please use the Java version as the reference for how far these nodes should go.

Current HTML5 full screen:

up-html5-full-screen

Java full screen:

up-java-full-screen

Current HTML5 wide and short:

up-html5-short-and-wide

Java wide and short:

up-java-short-and-wide

Pool lining on second scene is behind fluid, and gauge gives reading

On the second scene, there is a portion of the lining of the pool which is drawn behind the fluid, unlike the other scenes and the rest of the lining on this scene. The boundaries of the fluid/pool lining should be redrawn such that the behavior is the same for all parts of the pool lining.

pool lining correction

Pressure gauges resetting incorrectly

When the needles of pressure gauges are placed anywhere below the red line (see screenshots) and the reset all button is pressed, the gauges return to their box incorrectly. The red line applies to any screen and is in the same position.
crazy gauges

After resetting:
crazy gauges 2

Pool grids should all have 1 meter resolution

The 2nd and 3rd pool grids have 1/2 meter resolution. This is consistent with the Java sim, but is a bit odd. The original developer of the Java sim doesn't recall why it was done this way, so for consistency, the grids should all have 1 meter resolution.

Faucet features cut off in the second scene

On the second scene, a portion of the faucet has been cut off due to the angle of the tank.

faucet cut off_html5

This should be changed such that all of the features of the faucet are visible.

faucet not cut off

Text Disappearances

In IE11, after opening the sim for the first time, the word "Pressure" disappears from the top pressure gauge (so additional gauges dragged from the pile will look correct) and the word "Density" or the word "Fluid" in the Fluid Density box disappears (it was not consistently one or the other that went away for me). Furthermore, the words "Under Pressure" along the menu bar at the bottom leave. It should also be noted for those trying to reproduce that sometimes it takes a few seconds before anything goes missing. This issue is easily fixed by refreshing the tab (in the browser, not the reset all button) and reloading the sim, but will continue to appear every time it is opened for the first time in a browser. Seen on a Windows 8 64-bit Lenovo Z585 laptop and 1.0.0-rc.4.
Also: #42 is also present, where the PhET icon is missing. I'm assuming this is related.

Weights and water "fly" off screen

Test device: Lenovo Z585

Operating System: Windows 8 64-bit

Browser: Firefox

Problem description: When a different tab in the browser is left open for long enough and the sim is returned to, the weights and water "fly" off screen (see screenshot). Occasionally the weights return.

Steps to reproduce:

  1. After opening the sim, switch to the third screen with the weights and place any amount of weights into the water.
    2.Open another tab in your browser and switch to it and stay on it for about 45sec-1min.
  2. Switch back to the sim tab.

Severity: High, this is incorrect physics after all

Screenshots:
flying water

Troubleshooting information (do not edit):
Name: Under Pressure
URL: http://www.colorado.edu/physics/phet/dev/html/under-pressure/1.0.0-dev.3/under-pressure_en.html
Version: 1.0.0-dev.3
Features missing: flexbox, touch
User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0
Language: en-US
Window: 1366x641
Pixel Ratio: 1/1
WebGL: disabled

translation of new strings

need translations for all languages to new strings (file under-pressure-strings_en.json).
List:

"mars":"Mars",
"jupiter":"Jupiter",
"mysteryFluid":"Mystery Fluid",
"mysteryPlanet":"Mystery Planet",
"planetA": "Planet A",
"planetB": "Planet B",
"planetC": "Planet C",
"fluidA": "Fluid A",
"fluidB": "Fluid B",
"fluidC": "Fluid C"

Mystery Gravity and Mystery Fluid values revealed by toggling

On the mystery pool scene, if you switch between Mystery Fluid and Mystery Planet it reveals the fluid density for you. Similarly flipping between these reveals the mystery gravity. It seems that when these radio buttons are toggled the gravity should always return to the Earth value, and the density should always return to the water value. Not sure how deep the code needs to be dug into to fix the issue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.