Adaptación pantalla móvil
Quote from rrey on January 30, 2020, 5:00 pmHola,
Tengo una duda sobre si es posible forzar la pantalla a modo paisaje en el móvil. Estoy creando esta aplicación y por defecto se ve en modo retrato (vertical) y deseo que se inicie automáticamente en modo pasiaje.
Aprovecho para comentar si conocéis el código necesario para hacer que una aplicación evite ser traduccida automáticamente por el traductor de google. Ya que cambia los contenidos con resultados extraños.
Saludos,
Hola,
Tengo una duda sobre si es posible forzar la pantalla a modo paisaje en el móvil. Estoy creando esta aplicación y por defecto se ve en modo retrato (vertical) y deseo que se inicie automáticamente en modo pasiaje.
Aprovecho para comentar si conocéis el código necesario para hacer que una aplicación evite ser traduccida automáticamente por el traductor de google. Ya que cambia los contenidos con resultados extraños.
Saludos,
Quote from Gaev on January 30, 2020, 8:20 pm@rrey
At Design Time ...
Project (Menu Header) >>>
Properties (Menu Item) >>>
Size (Tab) >>>
Limit Orientation to: Landscape Only (Radio Button)... will that do ?
At Design Time ...
Project (Menu Header) >>>
Properties (Menu Item) >>>
Size (Tab) >>>
Limit Orientation to: Landscape Only (Radio Button)
... will that do ?
Quote from rrey on January 31, 2020, 12:03 amHola @gaev,
Eso ya lo tenía hecho. Pero lo que me interesa es que cuando el móvil esté en vertical, la aplicación se fuerce para verse en Landscape. Es decir que aunque el móvil esté en vertical la app se vea ocupamdo tod la pantalla en landscape.
Roger
Hola @gaev,
Eso ya lo tenía hecho. Pero lo que me interesa es que cuando el móvil esté en vertical, la aplicación se fuerce para verse en Landscape. Es decir que aunque el móvil esté en vertical la app se vea ocupamdo tod la pantalla en landscape.
Roger
Quote from luishp on January 31, 2020, 11:55 amHola @rrey, actualmente las tecnológias web solo permiten bloquear la orientación si la aplicación se visualiza a pantalla completa. Lo que suelo hacer yo es redirigir la aplicación a una página en especifico cada vez que se detecta un cambio en la orientación a vertical con un mensaje pidiendo que se coloque el dispositivo horizontalmente.
Puedes utilizar el comando "Watch" y la variable [NAB.Orientation] para detectar el cambio de orientación.Aprovecho para comentar si conocéis el código necesario para hacer que una aplicación evite ser traduccida automáticamente por el traductor de google. Ya que cambia los contenidos con resultados extraños.
Google tratará de traducir la aplicación si el navegador y la aplicación están en diferentes idiomas.
Acuérdate de indicar que tu aplicación está en español desde el menú: Project > Properties > Language > Spanish (es)
Esto indicará al navegador que tu aplicación está en español y no intentará traducirla.Un saludo!
Hola @rrey, actualmente las tecnológias web solo permiten bloquear la orientación si la aplicación se visualiza a pantalla completa. Lo que suelo hacer yo es redirigir la aplicación a una página en especifico cada vez que se detecta un cambio en la orientación a vertical con un mensaje pidiendo que se coloque el dispositivo horizontalmente.
Puedes utilizar el comando "Watch" y la variable [NAB.Orientation] para detectar el cambio de orientación.
Aprovecho para comentar si conocéis el código necesario para hacer que una aplicación evite ser traduccida automáticamente por el traductor de google. Ya que cambia los contenidos con resultados extraños.
Google tratará de traducir la aplicación si el navegador y la aplicación están en diferentes idiomas.
Acuérdate de indicar que tu aplicación está en español desde el menú: Project > Properties > Language > Spanish (es)
Esto indicará al navegador que tu aplicación está en español y no intentará traducirla.
Un saludo!
Quote from rrey on January 31, 2020, 7:53 pmHola @luishp,
Pues de momento no lo consigo. Pongo este código en el inicio de página:
Watch [NAB.Orientation] "controlar_orientacion"
Y en la fucnión:
If [NAB.Orientation] == "Portrait"
GotoPage "NewPage3"
endIf
Cuando lo pruebo en el móvil se queda en la primera página.
También he puesto en el inicio de página:
slScaleAppLetterBox 1024 600
slRequestFullScreenSería muy interesante que funcionara, ya que he probado la aplicación en ordenadores y televisiones interactivas y se ve muy bien y ahora me faltaría que funcionara en móviles detectando la orientación para avisar al usuario del giro.
Gracias.
Roger Rey
Hola @luishp,
Pues de momento no lo consigo. Pongo este código en el inicio de página:
Watch [NAB.Orientation] "controlar_orientacion"
Y en la fucnión:
If [NAB.Orientation] == "Portrait"
GotoPage "NewPage3"
endIf
Cuando lo pruebo en el móvil se queda en la primera página.
También he puesto en el inicio de página:
slScaleAppLetterBox 1024 600
slRequestFullScreen
Sería muy interesante que funcionara, ya que he probado la aplicación en ordenadores y televisiones interactivas y se ve muy bien y ahora me faltaría que funcionara en móviles detectando la orientación para avisar al usuario del giro.
Gracias.
Roger Rey
Quote from Gaev on January 31, 2020, 10:42 pm@rrey
When it comes to native Mobile Apps, I am a neophite ... but just in case, if you are using an Android phone, check the "Auto Rotate Screen" setting ... if it is turned OFF, try your App with this setting ON.
Also, in your subroutine control_orientation, insert an AlertBox to show the value of [NAB.Orientation] before the If/EndIf code ... that will tell you if VisualNEOWeb platform is receiving/holding the correct value.
When it comes to native Mobile Apps, I am a neophite ... but just in case, if you are using an Android phone, check the "Auto Rotate Screen" setting ... if it is turned OFF, try your App with this setting ON.
Also, in your subroutine control_orientation, insert an AlertBox to show the value of [NAB.Orientation] before the If/EndIf code ... that will tell you if VisualNEOWeb platform is receiving/holding the correct value.
Quote from rrey on February 1, 2020, 7:08 pm@Gaev
Sí, ya tuve en cuenta activar el modo de desbloqueo de giro en el móvil. Ahora estoy trabajando en el tema para que se adapte bien la pantalla al móvil. Estoy cerca de conseguirlo pero aún falta un poco más.
Muchas gracias.
Sí, ya tuve en cuenta activar el modo de desbloqueo de giro en el móvil. Ahora estoy trabajando en el tema para que se adapte bien la pantalla al móvil. Estoy cerca de conseguirlo pero aún falta un poco más.
Muchas gracias.
Quote from luishp on February 2, 2020, 7:50 am@rrey examina detenidamente el ejemplo que adjunto.
Aunque existe un evento "orientation-change" en Project > Events, no parece funcionar correctamente.
En su llugar he utilizado "OnWindowResize" para detectar el cambio de orientación.Fíjate también en el método que he utilizado para ajustar la app al tamaño de pantalla en dispositivos móviles.
En Project > Properties > Advanced > Custom Metadata > Head he añadido:<meta name="viewport" content="width=1024, initial-scale=1.0">Y desactivado el meta name en Project > Properties > Advaced > Default Metadata
Con esto le digo al dispositivo que la app tiene 1024 pixeles de ancho y que la ajuste adecuadamente.
Para que la página "portrait" mantenga esa anchura y un alto proporcional he añadido el siguiente CSS en Project > Properties > Styles:#portrait{ height:2048px; }Otro truco: para probar la app en tu móvil (conectado a la misma red que tu ordenador) una vez compilada tu app, abre neoPhpServer desde el menú Tools y donde por defecto pone "localhost" cambialo por la IP de tu ordenador (está indicada justo debajo), desmarca la opción "copy config.php" y pulsa el botón "Start". En tu movil abre el navegador web y pon como dirección URL la IP de tu ordenador.
De todos odos revisaré todo esto en la proxima versión para tratar de hacerlo más sencillo.
@rrey examina detenidamente el ejemplo que adjunto.
Aunque existe un evento "orientation-change" en Project > Events, no parece funcionar correctamente.
En su llugar he utilizado "OnWindowResize" para detectar el cambio de orientación.
Fíjate también en el método que he utilizado para ajustar la app al tamaño de pantalla en dispositivos móviles.
En Project > Properties > Advanced > Custom Metadata > Head he añadido:
<meta name="viewport" content="width=1024, initial-scale=1.0">
Y desactivado el meta name en Project > Properties > Advaced > Default Metadata
Con esto le digo al dispositivo que la app tiene 1024 pixeles de ancho y que la ajuste adecuadamente.
Para que la página "portrait" mantenga esa anchura y un alto proporcional he añadido el siguiente CSS en Project > Properties > Styles:
#portrait{
height:2048px;
}
Otro truco: para probar la app en tu móvil (conectado a la misma red que tu ordenador) una vez compilada tu app, abre neoPhpServer desde el menú Tools y donde por defecto pone "localhost" cambialo por la IP de tu ordenador (está indicada justo debajo), desmarca la opción "copy config.php" y pulsa el botón "Start". En tu movil abre el navegador web y pon como dirección URL la IP de tu ordenador.
De todos odos revisaré todo esto en la proxima versión para tratar de hacerlo más sencillo.
Uploaded files:
- You need to login to have access to uploads.
Quote from rrey on February 2, 2020, 1:11 pm@luishp he probado el código y no me funciona en el móvil. Lo he probado con Chrome y Firefox. Al visualizar en vertical sale la página Portrait pero no se ajusta a la pantalla. Se ve solo una parte, solo la letra P. Si, en ese momento, toco la pantalla, sin girar el dispositivo, me salta a la página Landscape aún estando en vertical. Si giro el móvil me ocurre lo mismo, la página Landscape no se ajusta y si toco me salta a Portrait, aunque este en horizontal.
Te envío una captura.
Roger
@luishp he probado el código y no me funciona en el móvil. Lo he probado con Chrome y Firefox. Al visualizar en vertical sale la página Portrait pero no se ajusta a la pantalla. Se ve solo una parte, solo la letra P. Si, en ese momento, toco la pantalla, sin girar el dispositivo, me salta a la página Landscape aún estando en vertical. Si giro el móvil me ocurre lo mismo, la página Landscape no se ajusta y si toco me salta a Portrait, aunque este en horizontal.
Te envío una captura.
Roger
Uploaded files:- You need to login to have access to uploads.
Quote from luishp on February 2, 2020, 5:44 pmEs muy raro, a mi me funciona correctamente.
De todos modos voy a ver si hago un plugin que nos ayude a solucionar el tema.
Un poco de paciencia...
Es muy raro, a mi me funciona correctamente.
De todos modos voy a ver si hago un plugin que nos ayude a solucionar el tema.
Un poco de paciencia...
Quote from luishp on February 7, 2020, 10:34 pm@rrey acabo de terminar el plugin para detectar cambio en la orientación.
También incluye detección de tipo de dispositivo (Desktop, Tablet, Movil) sistema operativo y navegador.
Este plugin lo incluiré en la próxima actualización.
Adjunto el plugin y un sencillo ejemplo.
¡Espero que te sea útil!
@rrey acabo de terminar el plugin para detectar cambio en la orientación.
También incluye detección de tipo de dispositivo (Desktop, Tablet, Movil) sistema operativo y navegador.
Este plugin lo incluiré en la próxima actualización.
Adjunto el plugin y un sencillo ejemplo.
¡Espero que te sea útil!
- You need to login to have access to uploads.
Quote from rrey on February 8, 2020, 9:31 pmMuchas gracias por tu tiempo @luishp . Me parece un pluguin muy completo y he visto que funciona muy bien. He visto que con un temporizador detecta bien el cambio de orientación sin el botón.
Será bueno incluirlo en la próxima versión.
Roger
Muchas gracias por tu tiempo @luishp . Me parece un pluguin muy completo y he visto que funciona muy bien. He visto que con un temporizador detecta bien el cambio de orientación sin el botón.
Será bueno incluirlo en la próxima versión.
Roger
Quote from luishp on February 10, 2020, 2:51 pm@rrey lo del botón es solo como ejemplo. No necesitas temporizador, basta con utilizar neoDeviceOnOrientationChange una sola vez en Project > Events. Si claro, este plugin estará incluido en la próxima versión.
Saludos!
@rrey lo del botón es solo como ejemplo. No necesitas temporizador, basta con utilizar neoDeviceOnOrientationChange una sola vez en Project > Events. Si claro, este plugin estará incluido en la próxima versión.
Saludos!