Difference between revisions of "Tutorial:Responsive Applets"

Latest revision as of 15:29, 18 March 2020

When designing a GeoGebra applet you should make sure it will work nicely on all devices. This article gives you some advice how to ensure your applets will display correctly and perform better.

Most important point: test as you go in the online version, don’t author offline and then test just at the end (obviously if you identify something that seems slower than expected, please let the developers know and they will check it out).

General advice

Avoid any commands which need to load the CAS engine eg Simplify(), Factor(), Expand(), Asymptote(). Also f == g for functions. You can generally use Polynomial() instead of Simplify() or Expand()
Any user interface elements that are not needed should be hidden
Use fancy styling (hatching, background image) only if necessary
Do not place texts inside the applet unless necessary -- note that on GeoGebra you may place instructions for using the worksheet above and below the applet
Avoid showing unnecessary labels of objects
Grid and axes should be hidden if not needed
If a computed value is used multiple times, it should be assigned to a variable and that variable name should be used

Algebra View:
- If you only need algebraic descriptions of a few objects, create dynamic texts and hide the Algebra View
- You may also reduce the time needed to draw Algebra View updates, by collapsing some of the categories (eg switch Algebra to sort by type and hide all lists) or marking objects as auxiliary

Scripting tips

avoid scripting at all if possible (ask in the Forum if you need help with this)
if you really need scripting then JavaScript is faster than GeoGebraScript (ggbApplet.evalCommand() counts as GeoGebraScript though)
SetValue(a, c + b) will be much faster than a = c + b (to avoid the whole construction being rebuilt) but ggbApplet.setValue() will be even faster as it will need less parsing.
SetValue(a, If(b < 3, 4, 5)) is better than If(b < 3,SetValue(a, 4),SetValue(a, 5)).

Animations

If you have a multi-step animation, build it as separate objects driven by separate sliders, not as one big object driven by one slider

Here’s an example of an efficent way to solve ODEs (by using a variable slider speed) which is much quicker than using scripts/on update events. http://www.geogebra.org/student/m23587

LaTeX

It's simpler to use the TableText Command & FormulaText Command but you can dive into raw LaTeX if you need to.

Images

https://jakearchibald.github.io/svgomg/ can reduce the size of SVGs a lot
https://tinypng.com/ reduces the file size of PNGs a lot (typically 80-90%!)
Make sure you’re not using hi-res images when a smaller one would do (especially in Sequence commands). You can use software like http://www.irfanview.com/ to downsample images

@@ Line 1: / Line 1: @@
+[[category:Tutorial]]
 When designing a GeoGebra applet you should make sure it will work nicely on all devices. This article gives you some advice how to ensure your applets will display correctly and perform better.
-Most important point: test as you go in HTML5, don’t author in Java and then test at the end (obviously if you identify something that seems slower than expected, please let the developers know and they will check it out). HTML5 will always be slower than the Java running on the same hardware.
+Most important point: test as you go in the online version, don’t author offline and then test just at the end (obviously if you identify something that seems slower than expected, please let the developers know and they will check it out).
 ==General advice==
-* Any GUI elements that are not needed should be hidden
+* Avoid any commands which need to load the CAS engine eg <code>Simplify()</code>, <code>Factor()</code>, <code>Expand()</code>, <code>Asymptote()</code>. Also <code>f == g</code> for functions. You can generally use <code>Polynomial()</code> instead of <code>Simplify()</code> or <code>Expand()</code>
-* If you only need algebraic description of a few objects, you may drag + drop them to graphics (or use [[FormulaText Command]] to get their representation) and hide the Algebra View.
+* Any user interface elements that are not needed should be hidden
-* You may also reduce the time needed to update Algebra View by collapsing some of the categories (eg switch Algebra to sort by type and hide all lists) or  marking objects as auxiliary
+* Use fancy styling (hatching, background image) only if necessary
-* Only use fancy styling (hatching, background image) if necessary
+* Do not place texts inside the applet unless necessary -- note that on GeoGebra you may place instructions for using the worksheet above and below the applet
-* If any value is used multiple times in computations, it should be assigned to a variable and that variable name should be used.
+* Avoid showing unnecessary labels of objects
+* Grid and axes should be hidden if not needed
+* If a computed value is used multiple times, it should be assigned to a variable and that variable name should be used
+* ''Algebra View'':
+** If you only need algebraic descriptions of a few objects, create dynamic texts and hide the ''Algebra View''
+** You may also reduce the time needed to draw ''Algebra View'' updates, by collapsing some of the categories (eg switch ''Algebra'' to sort by type and hide all lists) or marking objects as auxiliary
 ==Scripting tips==
-* SetValue[a,c+b] will be '''much''' faster than a=c+b (to avoid the whole construction being rebuilt) but ggbApplet.setValue() will be even faster as it will need less parsing.
+* avoid scripting at all if possible (ask in the [https://help.geogebra.org Forum] if you need help with this)
-* SetValue[a, If[x<3,4,5]] is better than If[x<3,SetValue[a,4],SetValue[a,5]]
+* if you really need scripting then JavaScript is faster than GeoGebraScript (ggbApplet.evalCommand() counts as GeoGebraScript though)
+* <code><nowiki>SetValue(a, c + b)</nowiki></code> will be '''much''' faster than <code><nowiki>a = c + b</nowiki></code> (to avoid the whole construction being rebuilt) but <code>ggbApplet.setValue()</code> will be even faster as it will need less parsing.
-==Lists==
+* <code><nowiki>SetValue(a, If(b < 3, 4, 5))</nowiki></code> is better than <code><nowiki>If(b < 3,SetValue(a, 4),SetValue(a, 5))</nowiki></code>.
-The Sequence[ ] and Zip[] commands are currently quite slow in some cases. The team is working on some ideas to speed this up, in the meantime it’s worth trying out the spreadsheet for building sequences, and using “Conditon to Show Object” to simulate Sequence[ ]
 ==Animations==
@@ Line 24: / Line 32: @@
 ==LaTeX==
-Best to use TableText[], FormulaText[] but basic LaTeX also works well in HTML5:
+It's simpler to use the [[TableText Command]] & [[FormulaText Command]] but you can dive into raw LaTeX if you need to.
-http://www.geogebra.org/student/m33487?mobile=true
 ==Images==
-Make sure you’re not using hi-res images when a smaller one would do (especially in Sequence commands)
+* https://jakearchibald.github.io/svgomg/ can reduce the size of SVGs a lot
+* https://tinypng.com/ reduces the file size of PNGs a lot (typically 80-90%!)
+* Make sure you’re not using hi-res images when a smaller one would do (especially in Sequence commands). You can use software like http://www.irfanview.com/ to downsample images