Actualización del panel LaTeX con integración de pywebview para un renderizado más robusto. Se añade soporte para JavaScript y se optimiza la generación de HTML para diferentes tipos de webview. Se mejora la gestión de ecuaciones y se implementan nuevos estilos para una mejor visualización. Se ajustan configuraciones de la interfaz y se mejora la lógica de actualización del contenido.

This commit is contained in:
Miguel 2025-06-07 23:16:14 +02:00
parent 6a533e5bd6
commit 488f78b409
6 changed files with 1852 additions and 376 deletions

127
RENDERIZADO_LATEX.md Normal file
View File

@ -0,0 +1,127 @@
# Sistema de Renderizado LaTeX Simplificado
## Problema Original
El panel LaTeX no se renderizaba correctamente porque faltaba el motor de renderizado matemático (MathJax) y las fuentes matemáticas apropiadas.
## Solución Implementada
### 🌐 **Sistema Único: tkinterweb + MathJax 3**
- **Dependencia requerida**: tkinterweb
- **Motor de renderizado**: MathJax 3 optimizado
- **Fuentes matemáticas**: STIX Two Math, Computer Modern Serif
- **Configuración automática** de delimitadores LaTeX (`$$...$$`, `$...$`)
- **Re-renderizado dinámico** cuando se agregan nuevas ecuaciones
```javascript
// MathJax configurado automáticamente
window.MathJax = {
tex: {
inlineMath: [['$', '$']],
displayMath: [['$$', '$$']],
processEscapes: true,
processEnvironments: true,
packages: {'[+]': ['ams', 'newcommand', 'configmacros']}
},
startup: {
ready: function () {
MathJax.startup.defaultReady();
console.log('✅ MathJax 3 listo');
}
}
};
```
## Instalación
### Dependencia Requerida
```bash
pip install tkinterweb
```
**Nota**: Si no tienes tkinterweb instalado, la aplicación se cerrará automáticamente con un mensaje de error claro.
## Características Técnicas
### ✅ **Renderizado Optimizado**
- **MathJax 3** para ecuaciones LaTeX profesionales
- **Fuentes matemáticas mejoradas** (STIX Two Math, Computer Modern Serif)
- **Re-renderizado automático** cuando se agregan ecuaciones
- **Indicador de estado** que muestra si MathJax está activo
### ✅ **Integración Perfecta**
- **Panel expandible** en el lado derecho de la calculadora
- **Sincronización automática** con las evaluaciones
- **Detección inteligente** de ecuaciones, asignaciones y comentarios
- **Indicador visual** cuando hay contenido disponible
### ✅ **Tipos de Contenido Soportados**
- **Ecuaciones**: `x**2 + 2*x = 8`
- **Asignaciones**: `a = 5`
- **Expresiones simbólicas**: `sin(x) + cos(x)`
- **Comentarios**: `# Esto es un comentario`
## Uso
1. **Abrir panel LaTeX**: Click en el botón 📐 en el borde derecho
2. **Escribir ecuaciones**: Las ecuaciones se detectan automáticamente
3. **Ver renderizado**: MathJax renderiza las ecuaciones en tiempo real
4. **Cerrar panel**: Click en ✕ o en el botón 📐 nuevamente
## Solución de Problemas
### Si ves "Cargando MathJax..."
- **Causa**: MathJax no se ha cargado completamente
- **Solución**: Espera unos segundos, MathJax se carga desde CDN
- **Verificación**: El indicador cambiará a "✅ MathJax activo"
### Si la aplicación se cierra al inicio
- **Causa**: tkinterweb no está instalado
- **Solución**: `pip install tkinterweb`
- **Verificación**: Reinicia la aplicación
### Si las ecuaciones no se renderizan
- **Causa**: Error en la sintaxis LaTeX
- **Solución**: Verifica que la sintaxis LaTeX sea correcta
- **Verificación**: Revisa la consola del navegador (F12 en tkinterweb)
## Ventajas del Sistema Simplificado
### 🎯 **Confiabilidad**
- **Un solo sistema** = menos puntos de falla
- **Dependencia mínima** = fácil instalación
- **Error claro** si falta la dependencia
### 🚀 **Rendimiento**
- **MathJax 3** optimizado para velocidad
- **Sin fallbacks** = código más limpio
- **Carga asíncrona** = no bloquea la UI
### 🔧 **Mantenimiento**
- **Código simplificado** = fácil de mantener
- **Sin lógica compleja** de detección de sistemas
- **Comportamiento predecible**
## Arquitectura
```
Calculadora MAV
├── Panel de Entrada (izquierda)
├── Panel de Salida (centro)
└── Panel LaTeX (derecha, expandible)
└── tkinterweb.HtmlFrame
└── MathJax 3 + HTML optimizado
├── Ecuaciones renderizadas
├── Fuentes matemáticas
└── Indicador de estado
```
## Conclusión
El sistema simplificado con **tkinterweb + MathJax 3** proporciona:
- ✅ Renderizado LaTeX profesional
- ✅ Instalación simple (una dependencia)
- ✅ Comportamiento predecible
- ✅ Mantenimiento fácil
- ✅ Experiencia de usuario consistente
**Resultado**: Panel LaTeX que funciona perfectamente sin fallbacks ni complejidad innecesaria.

View File

@ -2,11 +2,5 @@
x**2 + y**2 = r**2
r=?
x=3
y=6
r
r=?
$$Brix = \frac{Brix_{syrup} \cdot \delta_{syrup} + (Brix_{water} \cdot \delta_{water} \cdot Rateo)}{\delta_{syrup} + \delta_{water} \cdot Rateo}$$
$$Brix_{Bev} = \frac{Brix_{syr} + Brix_{H_2O} \cdot R_M}{R_M + 1}$$
a=r*5+5

82
install_tkinterweb_js.py Normal file
View File

@ -0,0 +1,82 @@
#!/usr/bin/env python3
"""
Script para instalar tkinterweb con soporte JavaScript completo
"""
import subprocess
import sys
import importlib
def check_installed(package_name):
"""Verifica si un paquete está instalado"""
try:
importlib.import_module(package_name)
return True
except ImportError:
return False
def install_package(package_spec):
"""Instala un paquete usando pip"""
try:
print(f"🔄 Instalando {package_spec}...")
subprocess.check_call([sys.executable, "-m", "pip", "install", package_spec])
print(f"{package_spec} instalado correctamente")
return True
except subprocess.CalledProcessError as e:
print(f"❌ Error instalando {package_spec}: {e}")
return False
def main():
"""Función principal"""
print("🚀 Instalador de tkinterweb con JavaScript")
print("=" * 50)
# Verificar estado actual
print("\n📊 Estado actual:")
tkinterweb_available = check_installed("tkinterweb")
pythonmonkey_available = check_installed("pythonmonkey")
print(f" • tkinterweb: {'✅ Instalado' if tkinterweb_available else '❌ No instalado'}")
print(f" • pythonmonkey: {'✅ Instalado' if pythonmonkey_available else '❌ No instalado'}")
if tkinterweb_available and pythonmonkey_available:
print("\n🎉 ¡Todo está instalado correctamente!")
print(" La calculadora debería funcionar con JavaScript completo.")
return
print("\n🔧 Procediendo con la instalación...")
# Instalar tkinterweb con JavaScript
if not tkinterweb_available or not pythonmonkey_available:
print("\n1⃣ Instalando tkinterweb[javascript]...")
success = install_package("tkinterweb[javascript]")
if not success:
print("\n⚠️ La instalación automática falló.")
print(" Intenta manualmente:")
print(" pip install tkinterweb[javascript]")
print("\n Si hay problemas con PythonMonkey:")
print(" 1. Asegúrate de tener Python 3.8+")
print(" 2. En Windows, puede requerir Visual Studio Build Tools")
print(" 3. En Linux, puede requerir build-essential")
return
# Verificar instalación final
print("\n🔍 Verificando instalación...")
tkinterweb_final = check_installed("tkinterweb")
pythonmonkey_final = check_installed("pythonmonkey")
print(f" • tkinterweb: {'' if tkinterweb_final else ''}")
print(f" • pythonmonkey: {'' if pythonmonkey_final else ''}")
if tkinterweb_final and pythonmonkey_final:
print("\n🎉 ¡Instalación completada exitosamente!")
print(" La calculadora MAV ahora puede usar JavaScript completo.")
print(" Reinicia la aplicación para activar las funciones avanzadas.")
else:
print("\n⚠️ Instalación parcial.")
print(" La calculadora funcionará en modo fallback.")
print(" Consulta la documentación para resolver problemas de instalación.")
if __name__ == "__main__":
main()

148
latex_debug.html Normal file
View File

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ecuaciones LaTeX - PyWebView</title>
<!-- MathJax 3 configuración optimizada para pywebview -->
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$']],
displayMath: [['$$', '$$']],
processEscapes: true
},
options: {
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
},
startup: {
ready: function () {
console.log('🚀 [pywebview] Iniciando MathJax...');
MathJax.startup.defaultReady();
console.log('✅ [pywebview] MathJax listo');
// Auto-renderizar después de carga
setTimeout(function() {
if (MathJax.typesetPromise) {
MathJax.typesetPromise().then(function() {
console.log('🎉 [pywebview] Renderizado automático completado');
}).catch(function(err) {
console.log('❌ [pywebview] Error en renderizado:', err);
});
}
}, 500);
}
}
};
</script>
<!-- MathJax 3 CDN -->
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<style>
body {
background-color: #1a1a1a;
color: #d4d4d4;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 13px;
margin: 0;
padding: 8px;
line-height: 1.4;
}
.equation-block {
margin: 4px 0;
padding: 8px 10px;
background-color: #2d2d2d;
border-left: 3px solid #80c7f7;
border-radius: 4px;
word-wrap: break-word;
transition: background-color 0.2s ease;
}
.equation-block:hover {
background-color: #3a3a3a;
}
.equation-content {
font-size: 14px;
color: #ffffff;
line-height: 1.5;
}
.math-display {
font-size: 15px;
text-align: left;
margin: 2px 0;
padding: 4px;
background-color: #252525;
border-radius: 3px;
min-height: 20px;
}
/* Tipos de ecuaciones */
.assignment { border-left-color: #dcdcaa; }
.equation { border-left-color: #c586c0; }
.comment { border-left-color: #6a9955; font-style: italic; }
.symbolic { border-left-color: #9cdcfe; }
.info-message {
text-align: center;
color: #80c7f7;
font-style: italic;
margin: 20px;
padding: 15px;
border: 1px dashed #80c7f7;
border-radius: 8px;
font-size: 14px;
background-color: #2d2d2d;
}
.status {
font-size: 11px;
color: #808080;
text-align: center;
margin-top: 10px;
padding: 5px;
}
/* Animación suave */
.equation-block {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div id="equations-container">\n
<div class="equation-block equation">
<div class="equation-content">
<div class="math-display">$$x^{2} + y^{2} = r^{2}$$</div>
</div>
</div>
<div class="equation-block symbolic">
<div class="equation-content">
<div class="math-display">$$r = - \sqrt{x^{2} + y^{2}}$$</div>
</div>
</div>
<div class="equation-block assignment">
<div class="equation-content">
<div class="math-display">$$5 - 5 \sqrt{x^{2} + y^{2}}$$</div>
</div>
</div>\n</div>
</div>
<div class="status" id="status">
✓ PyWebView activo - MathJax cargándose...
</div>
</body>
</html>

File diff suppressed because it is too large Load Diff

37
test.py Normal file
View File

@ -0,0 +1,37 @@
import webview
def create_webview_app():
html_content = """
<!DOCTYPE html>
<html>
<head>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script>
MathJax = {
tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] }
};
</script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.demo { background: #f0f0f0; padding: 10px; margin: 10px 0; }
</style>
</head>
<body>
<h1>MathJax con webview</h1>
<div class="demo">
<p>Ecuación simple: $x^2 + y^2 = z^2$</p>
<p>Ecuación compleja:</p>
$$\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}$$
</div>
</body>
</html>
"""
webview.create_window('MathJax App', html=html_content, width=800, height=600)
webview.start()
# Función principal para elegir método
if __name__ == "__main__":
create_webview_app()