Bílý vrch
icon TrekBuddy
www.trekbuddy.net
Outdoor companion.
  • internal / bluetooth / simulator GPS
  • offline raster maps
  • smart GPX / raw NMEA logs
  • waypoints and simple navigation
  • custom views
  • MIDP and Symbian phones
  • Blackberry
  • Android
Visit wiki to see all features, guides and howtos. Project tracker.

Partners:    (Polish/Polski)(Polski) Compass mapy      (Polish/Polski)(Polski) Galileos mapy      (Polish/Polski)(Polski) CartoMedia      (Czech/Èesky)(Èesky) Eaglesoft trasy      (Polish/Polski)(Polski) ExpressMap     

 FAQFAQ   SearchSearch   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Diseñando nuestras pantallas CMS
Goto page 1, 2, 3, 4  Next
 
Post new topic   Reply to topic    TrekBuddy Forum Index -> Español
View previous topic :: View next topic  
Author Message
x2fer



Joined: 31 Jan 2007
Posts: 1662
Location: Madrid, Spain

PostPosted: Fri Oct 17, 2008 7:32 am    Post subject: Diseñando nuestras pantallas CMS Reply with quote

TrekBuddy nos ofrece la posibilidad de crear pantallas CMS (Computer Mode Screen) en las que podemos presentar una serie de variables, que nos permiten sacar mayor partido a la información que obtenemos del GPS.

Inicialmente pensada para presentar datos como un "cuentakilómetros" de bicicleta, se le han ido añadiendo nuevas variables con el paso de las versiones, siempre a petición de los usuarios de TrekBuddy, para ser utilizado para diferentes funciones, incluida la ayuda para la navegación en vehículos, aunque muy lejos de ser un navegador. TrekBuddy nunca ha sido, ni pretende ser un navegador.

El listado de variables disponibles, y su significado, se puede consultar en http://www.trekbuddy.net/forum/viewtopic.php?t=1014.

Cada diseño de pantalla CMS, se encuentra en un archivo denominado cms.<nombre>.xml, que debe encontrarse en el sudirectorio ui-profiles, junto a los archivos a los que haga referencia.

Este archivo xml puede editarse con cualquier editor de texto (notepad, por ejemplo). No deben utilizarse editores tipo Word, que añaden caracteres de control.

La estructura del archivo .xml es muy sencilla, fácil e intuitiva, por lo que no resulta nada complicado modificar un diseño CMS existente, para adecuarlo a nuestras necesidades.

Este sería un archivo .xml básico, a partir del que podemos crear nuestro diseño. Es conveniente también tener papel milimetrado a mano... pero su uso ya lo veremos más adelante, lo mismo que algunos trucos de diseño, como el uso de elementos gráficos para presentar datos.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="html.xsl"?>
<cms version="1.0" align="right">
    <units system="metric"/>
    <colors mode="day"   bgcolor="eeeeee" fgcolor="550000" nxcolor="880000" pxcolor="550000"/>
    <colors mode="night" bgcolor="000000" fgcolor="FF6600" nxcolor="66FF00" pxcolor="FF6600"/>
    <fonts>
        <font name="medium" system="400100"/>
        <font name="dig_72px" file="x2fer.dig_72px.png"/>
    </fonts>
    <screen mode="full" background="CMS_01.png" w="176" h="220">
        <area x="21" y="2" w="54" h="17" font ="medium" align="right">
            <value>{time}</value>
        </area>
    </screen>
</cms>


Vamos a explicar lo que significa cada uno de los campos presentes en el archivo.

Quote:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="html.xsl"?>

Estas dos líneas deben estar colocadas obligatoriamente en el principio del archivo, e indican la definición del mismo.

El parámetro encoding="UTF-8" sirve para indicar que se van a utilizar caracteres en codificación UTF-8, lo que nos permitirá, por ejemplo, poner textos con caracteres acentuados.

Quote:
<cms version="1.0" align="right">
.....
</cms>

Sirve para definir el diseño CMS, y su versión. Dentro de este campo se añadarán todos los elementos utilizados para la definición del diseño

El parámetro align="right" sirve para definir el tipo de alineación (justificación) de los textos utilizados para presentar los datos de las variables, pudiendo ser:
    - right ---> derecha
    - left ---> izquierda.


Unidades de medida.
Quote:
<units system="metric"/>

Este parámetro es opcional, y sirve para indicar el sistema de unidades que vamos a utilizar para la presentación de datos en este diseño CMS, independientemente del que tengamos definido en TrekBuddy.

Los valores que puede tomar, y las unidades utilizadas para mostrar la velocidad, distancia y altura son:

    - metric ---> métrico (Km/h, Kilómetros, metros)
    - imperial ---> imperial (Mp/h, Millas terrestres, pies)
    - nautical ---> náutico (Nudos (knots), Millas náuticas (NMi), metros)


La altura en sistema náutico, usado para navegación por mar y aire, debería ser de pies... pero esto aún no se ha corregido.

Colores.
Quote:
<colors mode="day" bgcolor="eeeeee" fgcolor="550000" nxcolor="880000" pxcolor="550000"/>
<colors mode="night" bgcolor="000000" fgcolor="FF6600" nxcolor="66FF00" pxcolor="FF6600"/>

En este apartado se definen los colores que se van a utilizar para presentar los datos en los modos de funcionamiento día y noche. El cambio de modo se realiza pulsando la tecla "0", cuando estamos en el modo CMS.

Los colores a utilizar se indican en formato HEXADECIMAL, y para consultar el valor, podemos utilizar alguna de las muchas páginas disponibles en internet como http://www.webtaller.com/utilidades/csscoder/colores.php.

El significado de los campos es el siguiente:

    -mode ---> modo
      - day ---> día
      -night ---> noche

    -bgcolor ---> color de fondo (background color)
    -fgcolor ---> color del primer plano (foreground color), utilizado para representar los textos.
    -nxcolor ---> color para presentar datos negativos de las variables. (aceleración, altura, etc).
    -pxcolor ---> color para presentar datos positivos de las variables.


Fuentes. Tipos de letra.
Quote:
<fonts>
<font name="medium" system="400100"/>
<font name="dig_72px" file="x2fer.dig_72px.png"/>
</fonts>

En este apartado se definen las fuentes (tipo de letra) que se va a utilizar para representar los textos y datos de las variables.

A cada una de las fuentes definidas definidas se la debe dar un nombre. Este nombre no se debe repetir en diferentes archivos .XML si no tienen la misma definición. Para hacerlo más fácil y evitar errores, definiremos en todos los archivos .XML que utilicemos, las mismas fuentes, aunque no las empleemos.

Las fuentes pueden ser de dos tipos:
    - de Sistema (system), aprovechando las características de nuestro teléfono.
    - Gráficas, definidas por nosotros.


Las fuentes de sistema, dependen de las características de las fuentes incluidas en los terminales de teléfono. Estas varias de unas marcas a otras, e incluso de un modelo a otro en la misma marca, por lo que los diseños realizados utilizando fuentes de sistema pueden verse mal en diferentes modelos de terminales, aunque la pantalla sea del mismo tamaño.

Las fuentes de sistema se definen dando valores en hexadecimal, con el formato FFSSZZ (face-style-size):
    FF - 40 (proporcional), 20 (monoespacio), 00 (sistema)
    SS - 04 (subrayado), 02 (italica), 01 (negrita), 00 (plano)
    ZZ - 10 (grande), 00 (mediano), 08 (pequeño)


En el ejemplo indicado, para la fuente "medium", los valores "400100", indican que se utiliza una fuente proporcional, en negrita, y de tamaño mediano.

Estos valores tampoco tienen que significar lo mismo para cada modelo de teléfono, por lo que hay que hacer pruebas para comprobar los resultados.

Para la fuente de tipo gráfico, se hace referencia al archivo .PNG que contiene la definición de los siguientes 24 caracteres:
Quote:
0123456789 +-.:/·"'hkmps

El archivo será de 2 colores, y para cada caracteres se deben utilizar el mismo número de píxeles, preferiblemente múltiplo de 4.



Si queremos definir símbolos gráficos, para poder utilizarlos, al escribir el texto debemos indicar el caracter equivalente de los 24 definibles. En concreto, para definir el cajeado deberíamos escribir "mps".

Únicamente se pueden definir estos 24 caracteres, por lo que la representación de algunas variables, como la posición, o la latitud o la longitud no pueden ser representadas usando librerías gráficas, ya que los caracteres "W", "E", "N", "S" no se pueden definir.

Las librerías gráficas a las que se haga referencia se deben colocar en el subdirectorio "ui-profiles".

Pantalla. Tamaño y definición.
Quote:
<screen mode="full" background="CMS_01.png" w="176" h="220">
......
</screen>

En esta parte de define el tamaño del diseño que vamos a utilizar, indicándolo en píxeles, y también opcionalmente, el fondo de pantalla que queremos utilizar, facilitando mucho el diseño gráfico con líneas, ventanas y textos.

mode="full" Indica el modo de definición de la pantalla. Este dato es fijo, y desconozco si se pueden dar otros parámetros.

background="nombre del archivo.png" Indica el archivo gráfico que queremos utilizar de fondo de pantalla para el diseño CMS. Este archivo debe encontrarse en el subdirectorio ui-profiles.

El archivo puede ser en formato .PNG, o .JPG para los modelos que lo soporten, pero debe estar definido en 2 colores, para que el modo día/noche sea operativo.



Recientemente han salido algunos diseños que utilizan más colores, perdiendo la función día/noche, y ocupando bastante más memoria RAM, haciendo más lento el manejo del programa, y perjudicando seriamente algunas funciones... aunque sea más vistoso.

w="176" h="220" indican el tamaño de la pantalla a lo ancho (wide) y a lo alto (height).

El tamaño de la ventana debe ser el adecuado a la resolución del teléfono que vamos a utilizar. Si utilizamos un diseño con unas dimensiones menores que nuestra pantalla, no ocupará la pantalla completa, y si es de dimensiones mayores, no veremos todos los datos que queremos presentar.

Existe una gran variedad de tamaños, en función de los modelos...

... pero no debemos dejarnos engañar por el tamaño físico de la pantalla, debemos mirar las características donde pone la resolución. Por ejemplo, un N70 tiene la pantalla bastante más grande que mi K750i, pero tiene menos resolución (176x208 frente a 176x220).

Presentación de datos de variables y textos.
Quote:
<area x="21" y="2" w="54" h="17" font ="medium" align="right">
<value>{time}</value>
</area>


En este apartado se define la presentación de los datos de las variables o textos.

En primer lugar hay que definir un área donde se van a presentar los datos, definiendo una ventana con las coordenadas de origen, ancho y alto, el tipo de fuente a utilizar, y la alineación utilizada para presentar los datos.
    x Coordenada horizontal del origen de la ventana (desde la esquina superior izquierda).
    - y ---> Coordenada vertical del origen de la ventana (desde la esquina superior izquierda).
    - w ---> Ancho de la ventana.
    - h ---> Alto de la ventana
    - font ---> Fuente utilizada para presentar los datos. Debe corresponder au uno de los tipo definidos en el apartado <fonts>.
    - align ---> Alineación del texto o datos. Puede ser:
      - right ---> Alineación a la derecha de la ventana.
      - left ---> Alineación a la izquierda de la ventana.


El dato o texto a presentar se debe incluir en el campo <value>. Las variables disponibles se pueden consultar en http://www.trekbuddy.net/forum/viewtopic.php?t=1014. Los datos de las variables se presentarán en el sistema de unidades definido en <units system>.

Las variables siempre deben ir entre "llaves" {variable}, en caso contrario se presentará el texto literal.
Quote:
Ejemplo de texto:
<area x="5" y="100" w="172" h="17" font ="medium" align="right">
<value>Esto es un texto....</value>
</area>

_________________
Sony Xperia M4 Aqua || N500 || C5-03 + BT-Q810 + TrekBuddy 1.33 (Español)


Last edited by x2fer on Mon Nov 03, 2008 2:03 pm; edited 5 times in total
Back to top
View user's profile Send private message Visit poster's website
jffer



Joined: 09 Apr 2008
Posts: 10

PostPosted: Mon Oct 20, 2008 7:42 am    Post subject: Reply with quote

A partir del archivo basico, ¿se puede crear cualquier CMS? Puede servir el Microsoft_XML_Notepad_2007_2.4 .
Back to top
View user's profile Send private message
x2fer



Joined: 31 Jan 2007
Posts: 1662
Location: Madrid, Spain

PostPosted: Tue Oct 21, 2008 7:19 pm    Post subject: Reply with quote

Si, pero tendrás que definir todo lo que le falta... es decir, los datos que quieres presentar.

También puedes recurrir a editar un archivo creado por otro, y cuyo diseño se ajuste a tus necesidades. Wink

Para editarlo te sirve cualquier editor de texto que no añada caracteres especiales. Yo utilizo también "Macromedia Dreamweaver".

_________________
Sony Xperia M4 Aqua || N500 || C5-03 + BT-Q810 + TrekBuddy 1.33 (Español)
Back to top
View user's profile Send private message Visit poster's website
x2fer



Joined: 31 Jan 2007
Posts: 1662
Location: Madrid, Spain

PostPosted: Mon Nov 03, 2008 2:04 pm    Post subject: Reply with quote

El post inicial está terminado... el que tenga dudas, que pregunte.
_________________
Sony Xperia M4 Aqua || N500 || C5-03 + BT-Q810 + TrekBuddy 1.33 (Español)
Back to top
View user's profile Send private message Visit poster's website
georgedelajungla7



Joined: 23 Jul 2008
Posts: 19

PostPosted: Mon Nov 03, 2008 7:27 pm    Post subject: Reply with quote

"Pos fale", vamos a preguntar.
He instalado TB en un SE K 800i y por supuesto, he cargado los CMS de información de satélites y de ciclocomputador de x2fer que tengo en mi K 750i, y como es lógico, no ocupan toda la pantalla, que es de 240x320.
Dado que quiero los dos teléfonos con la misma configuración y estos dos CMS me gustan mucho (los otros que he visto por estos foros son muy recargados), mi pregunta es: ¿puedo adaptar los CMS simplemente cambiando en el apartado "screen mode" los parámetros w=... y h=... de los archivos .xml, o hay que cambiar más variables? (Que conste que me he descargado el Notepad, y he intentado hacerlo, pero no tengo ni idea de como se utiliza ese editor de textos !!!)
O más fácil, ¿están disponibles esos CMS en 240x320?
Gracias por anticipado, x2fer.

P.D. He estado experimentando con el dichoso editor y parece que ya voy entendiendo como se utiliza, pero tal y como temía, cambiando sólo los datos de la resolución, no parece que funcione el tema.
También he revisado de nuevo los CMS disponibles de 240x320 y, la verdad, me gustaría seguir con los que utilizo, pero tal y como estoy leyendo en algún hilo, sospecho que para adaptarlos hay que variar todas las medidas de todas las áreas, fuentes, etc...(demasiado complicado para mí, aunque digas que es fácil), por lo que parece que me voy a quedar con las ganas...
Back to top
View user's profile Send private message
x2fer



Joined: 31 Jan 2007
Posts: 1662
Location: Madrid, Spain

PostPosted: Mon Nov 03, 2008 9:43 pm    Post subject: Reply with quote

Quote:
¿puedo adaptar los CMS simplemente cambiando en el apartado "screen mode" los parámetros w=... y h=... de los archivos .xml, o hay que cambiar más variables?

En principio, solo con redistribuir los datos en pantalla es suficiente, de modo que quede todo bien organizado.... con un poco de papel milimetrado te pintas las posiciones actuales... y donde las quieres colocar.

Lógicamente, si modificas las fuentes y aprovechas todo el espacio se verá mucho mejor, pero mejor ir paso a paso.

Al disponer de más espacio, puedes añadir algunas variables que te sean útiles y que no están puestas en el diseño actual.

Quote:
Que conste que me he descargado el Notepad, y he intentado hacerlo, pero no tengo ni idea de como se utiliza ese editor de textos !!!

Puedes utilizar cualquier editor de textos o archivos XML, que no añada caracteres especiales... el WORD no vale... pero hay muchos que sí, elige uno que sepas utilizar, pero más fácil que el Notepad, donde no hay que hacer nada, va a ser difícil.

Quote:
O más fácil, ¿están disponibles esos CMS en 240x320?

Se trata de aprender.. no de que nos lo den hecho.

Quote:
P.D. He estado experimentando ...

Papel milimetrado... Wink

_________________
Sony Xperia M4 Aqua || N500 || C5-03 + BT-Q810 + TrekBuddy 1.33 (Español)
Back to top
View user's profile Send private message Visit poster's website
karlos7



Joined: 23 Jul 2008
Posts: 9
Location: Barcelona (SPAIN)

PostPosted: Wed Nov 05, 2008 12:35 pm    Post subject: ¿Papel milimetrado? Reply with quote

En vez de papel milimetrado, mi pregunta es, ¿ se puede utilizar un cad para conseguir lo mismo? coordenadas de posición y medidas de objetos...
Gracias y un saludo.

_________________
http://rutasgarraf.blogspot.com está parao...
Back to top
View user's profile Send private message Visit poster's website
x2fer



Joined: 31 Jan 2007
Posts: 1662
Location: Madrid, Spain

PostPosted: Wed Nov 05, 2008 2:02 pm    Post subject: Reply with quote

Puedes usar lo que quieras... se trata de conseguir referencias, y si para ti es más cómodo usar un programa de CAD, pues tu mismo.

También se puede utilizar algún programa de diseño de imágenes para aplicaciones en LCD, como FastLCD. Tiene ya unos años.. pero para ayudarnos a diseñar la imagen de fondo si nos sirve, solo que la imagen la guarda en formato BMP, y después habría que convertirla a PNG.




Fastlcd.zip
 Description:

Download
 Filename:  Fastlcd.zip
 Filesize:  83.41 KB
 Downloaded:  167 Time(s)


_________________
Sony Xperia M4 Aqua || N500 || C5-03 + BT-Q810 + TrekBuddy 1.33 (Español)
Back to top
View user's profile Send private message Visit poster's website
Riviera



Joined: 09 Mar 2009
Posts: 20

PostPosted: Mon Mar 23, 2009 9:25 am    Post subject: Reply with quote

¿Hay alguna fuente de sistema más pequeña que 400008?

Tengo esa fuente para mostar las coordenadas en un CMS Digiblue-beta4 (240x320) en un siemens SXG75, y los caracteres se salen de su espacio. he probado con otras fuentes definidas por png que también están en el mismo CMS, pero no se ven bien... las coordenadas se ven mucho mejor con fuentes del sistema.

Otra cosa, hay alguna posiblidad de poner un esquemar de color adicional a noche y día, es decir, poner 3 modos seleccionables con la tecla 0.
Back to top
View user's profile Send private message
x2fer



Joined: 31 Jan 2007
Posts: 1662
Location: Madrid, Spain

PostPosted: Mon Mar 23, 2009 10:20 am    Post subject: Reply with quote

Quote:
¿Hay alguna fuente de sistema más pequeña que 400008?

Prueba con 000008 y 200008... a ver que tal.

Para representar las coordenadas no puedes usar otras fuentes que no sean las de sistema....

Quote:
Únicamente se pueden definir estos 24 caracteres, por lo que la representación de algunas variables, como la posición, o la latitud o la longitud no pueden ser representadas usando librerías gráficas, ya que los caracteres "W", "E", "N", "S" no se pueden definir.


El problema es que cada modelo de teléfono tiene unas fuentes de sistema diferentes, por lo que tendrás de adecuarlo a tu modelo concreto.

Quote:
hay alguna posibilidad de poner un esquema de color adicional a noche y día, es decir, poner 3 modos seleccionables con la tecla 0.

No.... a no ser 2 CMS iguales, pero con diferentes colores definidos.

_________________
Sony Xperia M4 Aqua || N500 || C5-03 + BT-Q810 + TrekBuddy 1.33 (Español)
Back to top
View user's profile Send private message Visit poster's website
Riviera



Joined: 09 Mar 2009
Posts: 20

PostPosted: Mon Mar 23, 2009 11:32 am    Post subject: Reply with quote

x2fer wrote:
Quote:
¿Hay alguna fuente de sistema más pequeña que 400008?

Prueba con 000008 y 200008... a ver que tal.



Sin éxito, se ve igual, investigaré sobre las fuentes de mi teléfono... sí que he conseguido reducir una de las fuentes gráficas, simplemente cambiando de tamaño el archivo png, y dejándolo con tamaño múltiplo de 4.



Quote:
hay alguna posibilidad de poner un esquema de color adicional a noche y día, es decir, poner 3 modos seleccionables con la tecla 0.

No.... a no ser 2 CMS iguales, pero con diferentes colores definidos.[/quote]

Ok, y al correr las pantallas, repetiría la misma ventana, pero con el color que yo haya escogido, no?
Back to top
View user's profile Send private message
mac-eden



Joined: 11 May 2009
Posts: 3

PostPosted: Wed May 13, 2009 6:31 pm    Post subject: compases [course.g-sliding] [wpt azi.g-siding] no me van Reply with quote

Hola a todos
he bajado algun cms donde encontre unos valores que me interesan pero no funcionan.

se trata de los compases [course.g-sliding] y [wpt azi.g-siding].

estoy usando la version (0.9.83) pero no tengo la lista de los valores nuevos que aparecen en ella...
vamos, que si hay algun detalle a tener en cuenta para hacerlos funcionar.

gracias y un saludo
Back to top
View user's profile Send private message
x2fer



Joined: 31 Jan 2007
Posts: 1662
Location: Madrid, Spain

PostPosted: Wed May 13, 2009 6:41 pm    Post subject: Reply with quote

Esos parámetros solo funcionan con la versión 0.9.84 devel, que aún está en fase de desarrollo.
_________________
Sony Xperia M4 Aqua || N500 || C5-03 + BT-Q810 + TrekBuddy 1.33 (Español)
Back to top
View user's profile Send private message Visit poster's website
haraldh



Joined: 06 Aug 2009
Posts: 49
Location: Helsinki, Finland

PostPosted: Fri Aug 14, 2009 8:23 am    Post subject: Reply with quote

I took the liberty of adding N97 & 5800 Xpressmusic sizes to the screen-size image in the first post. See attachment.

agradecimiento, ¡perdone



screensizes.png
 Description:
 Filesize:  7.19 KB
 Viewed:  39980 Time(s)

screensizes.png


Back to top
View user's profile Send private message Visit poster's website
marake



Joined: 31 Aug 2009
Posts: 13
Location: Vitoria

PostPosted: Mon Sep 14, 2009 3:53 pm    Post subject: Ver CMS Reply with quote

Hola a tod@s, sabeis si hay alguna manera de visualizar los CMS en el PC antes de pasarlos al movil.
Gracias de antemano.
Saludos.
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    TrekBuddy Forum Index -> Español All times are GMT
Goto page 1, 2, 3, 4  Next
Page 1 of 4

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group