Muestra una fórmula matemática atractiva en Android
Es triste ver que la ciencia y las matemáticas nunca reciben suficiente atención en la plataforma Android. Tal vez este sea un problema fácil, pero soy un totaltipo en javascript, así que me cuesta entender cómo resolver este problema.
Lo que quiero hacer es simple:Solo necesito usar la ecuación matemática. Puede ser MathJax o JqMath o cualquier cosa que sea pequeña y rápida. Si tengo que hacerlo en una vista web, ¿cómo puedo mostrar texto sin formato en el párrafo y la ecuación formateada dentro de la misma vista web?
(cualquiera sale con otros métodos que obviamente funcionan, lo consideraré también como una solución)
Lo que he hecho tan lejos:
Comencé usando MathJax para poner la fórmula en webview (No sé si hay algún caso de uso jqMath exitoso por ahí? ¿Alguien quiere compartir su experiencia?) Puedo reproducir todas las funcionalidades como la de los autónomos.Aplicación MathJax. En esa aplicación, un usuario ingresa una cadena en el campo EditText y MathJax renderizará la fórmula en Latex una vez que el usuario presione un botón para confirmar.
No necesito usuario para confirmar. Pensé que esto debería ser más fácil porque no hay interacción del usuario, pero de alguna manera la ecuación nunca se muestra. Sé que debo faltar algo porque los códigos en el MathJax independiente están destinados a la entrada del usuario. ¿Qué parte del código debería modificar para representar directamente una ecuación de una cadena, por ejemplo, \ sqrt {b ^ 2-4ac}? Aquí está el encabezado inicial para webview:
WebView w = (WebView) findViewById(R.id.webview);
w.getSettings().setJavaScriptEnabled(true);
w.getSettings().setBuiltInZoomControls(true);
w.loadDataWithBaseURL("http://bar", "<script type='text/x-mathjax-config'>"
+"MathJax.Hub.Config({ showMathMenu: false, "
+"jax: ['input/TeX','output/HTML-CSS'], "
+"extensions: ['tex2jax.js'], "
+"TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
+"'noErrors.js','noUndefined.js'] } "
+"});</script>"
+"<script type='text/javascript' "
+"src='file:///android_asset/MathJax/MathJax.js'"
+"></script><span id='math'></span>","text/html","utf-8","");
Y aquí es cómo se carga la vista web original cuando el usuario presiona un botón después de la entrada para editar el texto:
WebView w = (WebView) findViewById(R.id.webview);
EditText e = (EditText) findViewById(R.id.edit);
w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
+doubleEscapeTeX(e.getText().toString())
+"\\\\]';");
w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
private static String doubleEscapeTeX(String s) {
String t="";
for (int i=0; i < s.length(); i++) {
if (s.charAt(i) == '\'') t += '\\';
if (s.charAt(i) != '\n') t += s.charAt(i);
if (s.charAt(i) == '\\') t += "\\";
}
return t;
}
Intenté reemplazar con una cadena codificada
w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
+doubleEscapeTeX("sample string")
+"\\\\]';");
pero no funciona, el texto"sample string" Ni siquiera aparecerá en la webview.
[SOLUCIÓN] ver la respuesta de Joe
Para elaborar su respuesta, este es un ejemplo de cómo establecer una oración en texto sin formato y luego mostrar una ecuación formateada en forma de visualización (todo en una sola vista web):
Reemplace la última línea de arriba en
+"></script><span id='math'></span>","text/html","utf-8","");
con
+"></script><span id='text'>This is plain text.</span> <span id='math'></span>", "text/html", "utf-8", "");
Luego llame
w.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (!url.startsWith("http://bar"))
return;
w.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
+doubleEscapeTeX("\\sqrt{b^2-4ac}") + "\\\\]';");
w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
}
});
Esto establecerá una cadenaEsto es texto plano En fuente normal y centro-pantalla la fórmula en webview.
EDITAR (edición de Android 4.4)
A partir de Android KitKat, debes reemplazar todas las líneas.loadUrl(...) conevaluateJavascript(...). Pero esto solo está disponible para KitKat (API 19 o superior), por lo que primero debe realizar una comprobación de la versión del SDK. Por ejemplo:
if (android.os.Build.VERSION.SDK_INT < 19) {
w.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
} else {
w.evaluateJavascript("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);",null);
}
ACTUALIZACIÓN (COMO DE MATHJAX 2.5)
Debido a que hay cambios en las carpetas, el código anterior no funcionará en la última versión de MathJax. Además, la forma recomendada de minimizar el tamaño de MathJax local ahora está utilizandoGruñido. La plantilla para reducir el tamaño de MathJax se puede encontrar.aquí.
Asumiendo que ha reducido exitosamente el tamaño de MathJax, y asumiendo la salida de HTML-CSS, aquí hay una versión simple que puede cargar MathJax:
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final WebView w = (WebView) findViewById(R.id.webview);
w.getSettings().setJavaScriptEnabled(true);
w.getSettings().setBuiltInZoomControls(true);
String Url = "</style>"
+ "<script type='text/x-mathjax-config'>"
+ " MathJax.Hub.Config({" + " showMathMenu: false,"
+ " jax: ['input/TeX','output/HTML-CSS', 'output/CommonHTML'],"
+ " extensions: ['tex2jax.js','MathMenu.js','MathZoom.js', 'CHTML-preview.js'],"
+ " tex2jax: { inlineMath: [ ['A diferencia de la respuesta de Joes, no hay necesidad de separar los tipos de texto o matemáticas, MathJax simplemente los formateará en consecuencia.
Sin embargo, parece que hay un error que la vista web en los dispositivos KitKat no puede representar la letra mayúscula "A". Cualquier persona que conozca una forma es bienvenida para proporcionar una solución para esto.
,'A diferencia de la respuesta de Joes, no hay necesidad de separar los tipos de texto o matemáticas, MathJax simplemente los formateará en consecuencia.
Sin embargo, parece que hay un error que la vista web en los dispositivos KitKat no puede representar la letra mayúscula "A". Cualquier persona que conozca una forma es bienvenida para proporcionar una solución para esto.
] ], processEscapes: true },"
+ " TeX: {" + " extensions:['AMSmath.js','AMSsymbols.js',"
+ " 'noUndefined.js']" + " }"
+ " });"
+ "</script>"
+ "<script type='text/javascript' src='file:///android_asset/MathJax/MathJax.js'>"
+ "</script>"
+ "<p style=\"line-height:1.5; padding: 16 16\" align=\"justify\">"
+ "<span >";
// Demo display equation
url += "This is a display equation: $P=\frac{F}{A}$";
url += "This is also an identical display equation with different format:\\[P=\\frac{F}{A}\\]";
// equations aligned at equal sign
url += "You can also put aligned equations just like Latex:";
String align = "\\begin{aligned}"
+ "F\\; &= P \\times A \\\\ "
+ "&= 4000 \\times 0.2\\\\"
+ "&= 800\\; \\text{N}\\end{aligned}";
url += align;
url += "This is an inline equation \\sqrt{b^2-4ac}.";
// Finally, must enclose the brackets
url += "</span></p>";
mWebView.loadDataWithBaseURL("http://bar", url, "text/html", "utf-8", "");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
if (!url.startsWith("http://bar")) return;
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
view.loadUrl(JAVASCRIPT);
} else {
view.evaluateJavascript(JAVASCRIPT, null);
}
}
});
}
A diferencia de la respuesta de Joes, no hay necesidad de separar los tipos de texto o matemáticas, MathJax simplemente los formateará en consecuencia.
Sin embargo, parece que hay un error que la vista web en los dispositivos KitKat no puede representar la letra mayúscula "A". Cualquier persona que conozca una forma es bienvenida para proporcionar una solución para esto.