Weatherfire is complete!

It’s been accepted to the Firefox OS marketplace as well!

Also, the code is available on GitHub, and if you want to use the app on a non-FirefoxOS mobile device it’s on GitHub Pages as well.

Main screen
Add screen
Wind info screen
Advertisements

Weatherfire Update 2

Now that Weatherfire is feature-complete (at least for the first release), I just have some little things left to do.

The two biggest things from a user’s point of view is that the help needs to be written and the options screen still has to be implemented.  The only thing that’s going to be on the options screen to start with is a button to choose whether the metric or imperial units should be used, but that’s pretty important.

There are a handful of minor things that need to be done as well. For instance, currently if there is a decimal value for one of the info fields it will display the entire length. “2.66666666667” (or however many digits it is) doesn’t look very good, and instead the number of decimal places will probably be limited to two.

Also, I’m going to work on some optimizations. As the program is right now there are noticeable delays when switching to a new screen, in particular the info screens, as the app is processing a large amount of data and locks up the UI while it’s doing so. This isn’t that big of an issue if the user has only entered in a small amount of data, but as more and more is added the lag will become more obvious.

Some fixes:

  • I’ve just been trying to get this done quickly without really caring about optimizations so far, so there is plenty of redundant code that can be cut. There’s a lot of computing the same data repeatedly within the same functions, so I can remove all the duplicates.
  • I might move the data computing code into a separate worker so it doesn’t block the main thread. The UI would be created and displayed first, with the data filled in once the calculations are complete. I’m not certain that this is a good idea though, as it still makes the app look like it’s lagging.
  • Currently if the info screens are accessed multiple times without additional data being added, the info has to be calculated each time, despite that it will still be the same. It would reduce the delays further if the calculated info was cached, so then if the screen was accessed again the data could simply be taken from the cache.

Weatherfire Update

So it turns out that the name “Weatherfox” is already used, by another Firefox OS app. From now on my app will be called “Weatherfire” instead, or at least until I find that that is used as well.

Aside from that though, the app is progressing nicely. I’ve almost finished with completely implementing the features for version 0.1. The ability to add, view, delete, and clear data is done, and the general info screen is done. That only leaves the other info screens left to do, and now that I’ve got all the base code for those done it shouldn’t take too long. After that I have to write the help page(s), but that will be quick.

Weatherfox

New project!

Weatherfox is a mobile version of WeatherLog for Firefox OS devices. However, as Firefox OS apps are nothing more than web apps that appear to be running natively, Weatherfox should also run in just about any web browser that supports enough of the HTML5 and related specs.*

Weatherfox will work about the same as WeatherLog; it has a main screen for displaying data, the ability to add and remove data, and the ability to view information like averages, ranges, highs and lows, etc.

Some technical details: the interface uses HTML5 and CSS, with jQuery Mobile for the interactive components. The program code is all written in JavaScript, and the data is stored as JSON using localStorage.

Developing the app has been relatively easy so far. Porting the info code from Python to JavaScript was simple, but the UI has been frustrating. Partially due to having to make an interface easy to use on small touchscreens, but mostly trying to get jQuery Mobile to actually behave in a somewhat understandable way.

I’m aiming to have the nearly the same feature set for Weatherfox as Weatherlog has. The only exceptions are profiles and importing and exporting data. Profiles are planned for the second release though.

Weatherfox is still in a pre-alpha state. Currently the ability to add, remove, clear, and display data are implemented, but I haven’t started with the info screens yet. If you’re interested, the code is on GitHub, and I have the app up on GitHub Pages as well.

Here are some screenshots, using the simulator because it’s easier:

Main screen, no data
Main screen, no data
Adding some data
Adding some data
Main screen with data
Main screen with data
Removing data
Removing data
Clearing data
Clearing data
About screen
About screen

* The only exception to this is with the datepicker field in the Add screen. Weatherfox uses dates formatted as “dd/mm/yyyy”, and takes as input either the format “yyyy-mm-dd” (used by Firefox OS) or “Mmm dd, yyyy” (as in “Jan 1, 2014”, used in iOS). Any other format is currently not supported, but may be in the future.

extmath.js update 2

I added a lot more functions, and quite a few constants as well. In addition, I (finally) wrote up some basic documentation, so you no longer have to hunt through the code to find what something does.

Download

The JavaScript file can be downloaded here, and the documentation is available here.

New Functions

  • Math.midpoint3() – Finds the midpoint of two points in a three-dimensional space.
  • Math.distance3() – Finds the distance between two points in a three-dimensional space.
  • Math.areaSector() – Finds the area of a sector.
  • Math.areaHemi() – Finds the surface area of a hemisphere.
  • Math.volHemi() – Finds the volume of a hemisphere.
  • Math.areaPipe() – Finds the surface area of a pipe.
  • Math.volPipe() – Finds the volume of a pipe.
  • Math.areaKite() – Finds the area of a kite.
  • Math.areaKiteTrig() – Finds the area of a kite, but in a different way.
  • Math.volPyramid3() – Finds the volume of a regular triangular pyramid.
  • Math.volPyramid4()* – Finds the volume of a regular square pyramid.
  • Math.volPyramid5() – Finds the volume of a regular pentagonal pyramid.
  • Math.volPyramidAny() – Finds the volume of any pyramid.
  • Math.gcd() – Finds the greatest common divisor of two numbers.
  • Math.lcm() – Finds the least common multiple of two numbers.
  • Math.lcmArray() – Finds the least common multiple of numbers in an array.
  • Math.maxArray() – Finds the largest number in an array.
  • Math.minArray() – Finds the smallest number in an array.
  • Math.roundTo() – Rounds a number to the specified number of decimal places.
  • Math.deg2rad() – Converts radians to degrees.
  • Math.rad2deg() – Converts degrees to radians.
  • Math.imul() – Performs a C-like 32-bit integer multiplication.
  • Math.umul() – Performs a C-like 32-bit unsigned integer multiplication.
  • Math.toSource() – Returns “Math”.
  • Math.dividesEvenly() – Finds whether a number can be divided evenly by another.
  • Math.reverseFactorial() – Given a number finds what its factorial is.
  • Math.polygonAngles() – Finds the sum of the interior angles in a polygon.
  • Math.average() – This is the same as Math.mean().
  • Math.areaPyramid3() – Finds the surface area of a regular triangular pyramid.
  • Math.areaPyramid4()* – Finds the surface area of a regular square pyramid.
  • Math.areaPyramid5() – Finds the surface area of a regular pentagonal pyramid.

There are a few modifications to the existing functions as well.

* These are the same as the existing Math.volPyramid() and Math.areaPyramid() functions, respectively, but are included for completeness.

New Constants

  • Math.SQRT3 – Square root of 3.
  • Math.GOLDEN – Golden ratio.
  • Math.DELIAN – Delian constant.
  • Math.SIN45 – Sine of 45 degrees.
  • Math.COS45 – Cosine of 45 degrees.
  • Math.TAN45 – Tangent of 45 degrees.
  • Math.SIN30 – Sine of 30 degrees.
  • Math.COS30 – Cosine of 30 degrees.
  • Math.TAN30 – Tangent of 30 degrees.
  • Math.SIN60 – Sine of 60 degrees.
  • Math.COS60 – Cosine of 60 degrees.
  • Math.TAN60 – Tangent of 60 degrees.
  • Math.SIN90 – Sine of 90 degrees.
  • Math.COS90 – Cosine of 90 degrees.
  • Math.TAN90 – Tangent of 90 degrees.
  • Math.SIN180 – Sine of 180 degrees.
  • Math.COS180 – Cosine of 180 degrees.
  • Math.TAN180 – Tangent of 180 degrees.
  • Math.SIN270 – Sine of 270 degrees.
  • Math.COS270 – Sine of 270 degrees.
  • Math.TAN270 – Sine of 270 degrees.
  • Math.SIN360 – Sine of 360 degrees.
  • Math.COS360 – Cosine of 360 degrees.
  • Math.TAN360 – Tangent of 360 degrees.

webworker2: improved JavaScript Worker object

This is a simple library that improves the JavaScript Worker object, for creating web workers (basically allowing code to execute without blocking). It defines two new objects: Worker2 and WorkerFunction.

About

The first, Worker2, is a slight simplification of the built-in Worker object. The constructor takes three parameters: the name of the script to execute, an optional callback function for when the worker uses postMessage(), and an optional callback function for when an error occurs in the worker. The onmessage callback will be passed two parameters: the data sent and the event object. The onerror callback will be passed just the event object.

Example:

worker = new Worker2("myscript.js", function(data, e) { alert(data; });

Worker2 has four methods. The first two are postMessage() and the alias post(). These accept one parameter: the data to be sent. The other two methods are terminate() and stop(), both of which end the worker.

The other object, WorkerFunction, is more complex. It also takes three parameters, but the first is a function instead of a string. This function is used as the worker, so another file isn’t required. The two callbacks are used exactly the same way.

Example:

var myFunction = function(a, b, c) {
    return a + b + c;
};
var myCallback = function(data, e) {
    document.body.innerHTML = "<strong>" + data + "</strong>"
};
var worker = new WorkerFunction(myFunction, myCallback, function(e) { alert("Error: " + e.data); });
worker.post([1,2,3])

WorkerFunction has the same four methods as Worker2. postMessage() and post() work differently, however: they are used to pass parameters to the function if needed. They must only be passed one argument, an array of the parameters. Alternatively, they can be passed nothing if no parameters are needed.

Download

You can download webworker2 here.

extmath.js update 1

This is an update to extmath.js that adds a handful of new functions. The majority have to do with basic geometry, such as finding the area of shapes and surface area and volume of solids. (Although some are simply for completeness. Math.areaRect(), for example; who is actually going to forget how to calculate the area of a rectangle?)

New functions

  • Math.randInt(x, y) – Works the same as Math.random(x, y), with the exception that it only returns integers.
  • Math.pythagorean(a, b, c) – Uses the Pythagorean Theorem to solve for one of the variables. The value you want to find must be null, and the other two must be numbers. For example, Math.pythagorean(5, null, 13) will return 12.
  • Math.distance(x, y) – Finds the distance between two points. x and y are both arrays with two numbers, and are used as the points.
  • Math.midpoint(x, y) – Finds the midpoint of two points. x and y are both arrays with two numbers, and are used as the points. This will return an array with the x and y coordinates.
  • Math.slope(x, y) – Finds the slope of the line containing two points. x and y are both arrays with two numbers, and are used as the points.
  • Math.areaRect(x, y) – Returns the area of a rectangle with sides x and y.
  • Math.areaTri(b, h) – Returns the area of a triangle with base b and height h.
  • Math.areaCircle(r) – Returns the area of a circle with radius r.
  • Math.areaParallel(x, h) – Returns the area of a parallelogram with side x and height h.
  • Math.areaTrap(b1, b2, h) – Returns the area of a trapezoid with bases b1 and b2 and height h.
  • Math.areaRhom(d1, d2) – Returns the area of a rhombus with diagonals d1 and d2.
  • Math.areaEllipse(a, b) – Returns the area of an ellipse with radii a and b.
  • Math.areaSphere(r) – Returns the surface area of a sphere with radius r.
  • Math.areaRectPrism(x, y, z) – Returns the surface area of a rectangular prism with sides x, y, and z.
  • Math.areaCone(r, h) – Returns the surface area of a cone with base radius r and height h.
  • Math.areaPyramid(x, h) – Returns the surface area of a pyramid with base length x and height h. Note that this only works with 4-sided pyramids.
  • Math.areaCylinder(r, h) – Returns the surface area of a cylinder with radius r and height h.
  • Math.volRectPrism(x, y, z) – Returns the volume of a rectangular prism with sides x, y, and z.
  • Math.volSphere(r) – Returns the volume of a sphere with radius r.
  • Math.volCone(r, h) – Returns the volume of a cone with base radius r and height h.
  • Math.volPyramid(x, h) – Returns the volume of a pyramid with base length x and height h. Note that this only works with 4-sided pyramids.
  • Math.volCylinder(r, h) – Returns the volume of a cylinder with radius r and height h.

Download

You can download the updated file here, if you’re interested.