> For the complete documentation index, see [llms.txt](https://docs.wiclax.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wiclax.com/es/usando-wiclax/transmision-de-resultados-en-vivo/pantallas-live.md).
# Pantallas Live
Enjoy the full power of Wiclax to display your results in real time, with no style compromise.
The G-Live app enables designing any kind of **custom screens** which will display race data in real time, following your requirements. They will be useful in a range of situations like those ones:
* spectators have to be in touch with the race as it's ongoing, watching at a giant screen or at their smartphones
* you'd like to emphasize some races or some split points from your event so the race speaker can give the best of it without hassle
Gracias a su diseño basado en estándares **HTML** y **CSS**, ofrecen infinitas posibilidades de personalización. Nos esforzamos para que el máximo de ellas sean accesibles directamente, sin necesidad de conocimientos técnicos específicos. Dicho esto, cualquier persona con conocimientos de tecnologías web o simplemente con curiosidad por experimentar encontrará un terreno de juego perfecto para añadir un toque personalizado a las pantallas.
El menú principal `G-Live / Pantallas` da acceso a las plantillas de pantalla definidas en su PC y a su diseño.
{% hint style="info" %}
Las plantillas de pantalla se pueden compartir mediante las funciones de importación y exportación que manejan algunos archivos con extensión *.screenconfig*. También se pueden guardar y volver a importar en otra PC junto con su cuenta de usuario en la nube.
Para un inicio más fácil o para beneficiarte de algunas inspiraciones agradables, no te pierdas los ejemplos que puedes cargar desde el mismo menú.
{% endhint %}
## Diseño
La herramienta de diseño facilita la creación de una pantalla totalmente basada en sus necesidades.
Las propiedades generales de una pantalla son su nombre, su color de fondo y sus dimensiones indicativas en píxeles para el caso de que estuvieras trabajando en un scoreboard de resolución fija, por ejemplo.
Luego, el contenido de la pantalla se construye con algunos componentes llamados widgets, que son los bloques lógicos y gráficos básicos.
En el modo de diseño, trabajas directamente en una vista previa de la pantalla donde puedes seleccionar widgets. Está llena de datos lo más realistas posible para que puedas ver los efectos de los cambios de inmediato. Los widgets se pueden mover y redimensionar directamente con el mouse.
### **Widgets**
Los widgets son componentes lógicos y gráficos. Puedes agregarlos, eliminarlos, duplicarlos o editarlos desde la lista que aparece en el lado derecho de la vista previa y el panel de propiedades que la acompaña. No dudes en darles un nombre útil para que las cosas sean más fáciles.
Los tipos de widgets que puedes elegir son los siguientes:
#### **Reloj**
Diseñado para mostrar una reloj de carrera o simplemente la hora del día. Puede utilizarse como cuenta atrás para un evento con una duración fija conocida, en cuyo caso representa el tiempo de carrera restante.
#### **Label**
Aimed at displaying a text content. This text can include some variables, which can be inserted with the button below. For instance a number of finishers, the name of the active race, ...
#### Imagen
Para incorporar algunos gráficos, como por ejemplo un logo de carrera.
#### Lista de resultados
Una lista de resultados muestra una tabla de datos. El tipo de lista que seleccione determinará su contenido y comportamiento:
* `Recent passings`: the table fills up itself dynamically with the athletes data right after they cross a timed line (either finish or an intermediate split)
* `Ranking`: the table displays the leaders of an individual ranking, either the final one or for a specific split point or segment.
* `General classification`: the table displays the leaders of the event [general classification](broken://pages/ZJtAd3MtzpM9nIV4IHMX#general-classification) (stage race)
* `Team ranking`: the table displays the first teams of the main team ranking, either after finish or for a specific intermediate split point or segment
* `Participant list`: usable when the current event/heat holds a limited number of participants - the table displays a list of them
* `Competitors at start`, `Competitors in race`: specific to the time trial mode, the table lists competitors according to their individual start time (which is eventually preset). Those awaited as the next starts in the first case, and those awaited on the finish line in the second one. Their race time and their virtual rank gets actualized in real time.
* `Time Trial line`: combines in a single component a dynamic view for a timed line in a Time trial race. Data show ongoing competitor and leader performance, time diffs to leader. Can be combined with a spotter line placed ahead.
Hay varias configuraciones disponibles para personalizar una lista, las principales son:
`Número de fila`: el número máximo de filas que la tabla debe mostrar
`Title`: the list title/caption - optional - which gets positioned above it. It can include some variables. Some CSS style rules can be specified for it if they are appended after a semicolon separator. For example: `Male ranking;font-size:120%;font-weight:bold`
`Columns`: the list columns which can be set as you wish. You can add/delete some, resize or reorder them. The data property determines what a column will show at runtime.
The same way than for title, a column caption if we specify it can be completed by some style rules.
Se pueden ingresar opcionalmente algunas coordenadas X, Y para lograr, por ejemplo, una visualización de varias filas (es decir, varias líneas de datos para una sola fila de lista).
`Filtro Hombres/Mujeres:` además de los filtros generales de raza y splits, puedes solicitar que la lista se dirija solo a hombres o mujeres.
`Animations`: an auto scrolling mode can be activated for the list. By playing with its settings - delay between 2 steps, sliding direction and distance in pixels, rendering speed - you can achieve some pretty nice animations.
Layout: you can have data organized into several blocks/columns, laid out vertically or horizontally. And in the case of a recent passing list you can also chose whether the last passed athletes will show up on top or on bottom of the list.
#### **Generic**
Para necesidades más específicas, el widget genérico permite incorporar un fragmento HTML personalizado.
## Gráficos y estilo**s**
Cada widget o columna de una lista se puede personalizar simplemente editando propiedades como la fuente del texto, el tamaño del texto, el color de fondo, etc.
Los widgets de lista de resultados se pueden diseñar rápidamente aplicando uno de los agradables estilos predefinidos:
Además, cualquier otra personalización es posible añadiendo algunas reglas de estilo CSS.
### **CSS**
El lenguaje CSS (Cascading Style Sheet) es un estándar muy conocido, ampliamente documentado en la web. En un diseño de pantalla, puedes agregar código CSS en diferentes lugares, principalmente en los siguientes:
* En el nivel general: aquí las reglas pueden aplicarse potencialmente a todos los widgets. Por ejemplo, para establecer un borde en todos los elementos reloj en una única definición.
* A nivel de un widget: las reglas que ingrese aquí se aplicarán solo a él
* A nivel de una columna de widget lista
The CSS rules you add can rely on *classes* that characterize elements of the screen. You'll discover them the easiest way by using the developer console of your browser. For example to focus on a list row representing a female athlete, to add a blink animation for somebody qualified or who just broke the lap record time... Here we give a few suggestions (simplified) to give a flavor of what's possible:
* `.row.female {color: red} /* red font for women in a list */`
* `.row>div:first-child {background: yellow} /* first column of a list in yellow */`
* `.flag {border-radius: 50%} /* rounded flags */`
* `body[race='10K'] #w536453 {font-size: 200% !important} /* style d'un widget adapté lorsque la course active est le 10Km */`
Applicable **units** for element sizing and positioning are not limited to pixels. By using for example `vw` and `vh` units which are percentages of the viewport (the visible part of the page), you will be able to create some responsive contents, i.e. that adapt themselves to fit in the context (TV resolution, smartphone, ...).
Character fonts proposed by default are the Google fonts, in order to simplify the deployment process. More specifically when your screens have to be made accessible from the web.
La representación de pantalla involucra la biblioteca [Less](https://lesscss.org/) , por lo que puedes aprovecharla, por ejemplo, para declarar algunas variables de estilo reutilizables.
La directiva *!important* a veces es necesaria para imponer la activación de una regla contra otra con mayor prioridad en la cascada.
## **Display, projection**
### Pantalla independiente
El diseñador muestra la dirección que puedes escribir en cualquier navegador conectado a la red local para cargar la pantalla. Es básicamente la misma dirección que la de G-Live, enriquecida con la palabra clave de pantalla y el ID de pantalla actual. Puede copiarlo y pegarlo o solicitar su apertura en el navegador predeterminado de su PC.
\| | \ |
\| ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
{% hint style="info" %}
The Live session must be started for a screen to be reached by a browser. By clicking on `Open the Live page` in the G-Live menu, it will start automatically if it wasn't yet and the page will open up in your default browser.
{% endhint %}
{% hint style="info" %}
The refresh button aside the address on the design screen allows to update all screen instances alive, local or remote. This is equivalent to reload pages in the browser, but triggered from Wiclax.
{% endhint %}
### Integrado a G-Liv**e**
It's also possible to bind a screen to a Wiclax event, in order to make it accessible through the standard G-Live app. Big pro in this case is that the access is a unique address, simply the one for G-Live. The binding is made in the Event publication screen in Wiclax. There several screens can be added, and you can chose whether the standard live display will still be proposed to end users.
También puedes obtener una pestaña Live independiente con una dirección de este tipo: `http://192.168.8.39/live`
### En la Web
Si la pantalla está integrada con el archivo de evento, se puede cargar de manera independiente agregando un argumento `live=1` a la URL de G-Live.
In the opposite case, the address has to be built following the template provided by the designer, adapting it to your website and to its architecture. Important: the configuration file of the screen (*.screenconfig* extension) has to be prior uploaded into the G-Live public folder, on the server.
{% hint style="info" %}
Live sessions on the web will be available only if the Web Services option is active on your current user license.
{% endhint %}
### Proyecció**n**
En la mayoría de los casos, se utilizará una estación de trabajo independiente para transmitir la pantalla a una pantalla LED.
This step, independent from Wiclax, consists in forwarding the web browser graphics to the display board, using the software and hardware provided by its manufacturer.
Then you've got 2 means to work on a projected screen:
* Using the control screen which gets displayed when a browser loads the screen page. The window displays a replica of the screen as well as a list of its widgets on which you can play: make them visible or hidden, modify the races and splits they're bound to.
* Using the embedded controller from the screen page itself. In this case you can act directly from the browser without requiring any access to Wiclax. Convenient thus if you're managing the projection from another station. The controller gets displayed by simply clicking somewhere on the page.
## **Races and splits**
Each widget of the screen can be independently bound to a race and/or a split point. For example you may want to display the ranking for 10K race at the 2.5km intermediate split.
The race and split assignment can be done from multiple places:
* in design mode, for a preset of requested data
* from the screen's control window, for dynamic changes according to the event ongoing
### Reglas de asociación widgets-carrera
The main rule is that one: the race identified for a widget is in priority the one it's bound to. Dans le cas où il n'y en a pas à ce niveau - course du widget = toutes - alors c'est la course associée à l'écran qui est prise en compte.
In case we are only interested in one race at a time, it will be wise to leave the widgets without a race filter and to modulate the race associated with the screen globally. In this way we can make a change of race in a single operation and all the widgets will follow.
Selecting the active race for the screen is done from the control window that opens when the screen is loaded in a browser:
{% hint style="info" %}
A ranking kind of list will remain empty if the event is made of many races and no specific race can be identified for the widget.
{% endhint %}
{% hint style="info" %}
The screen or a widget can be bound to the [focused race](broken://pages/ZJtAd3MtzpM9nIV4IHMX#focused-race). In this case switching from a race to another will happen automatically once you designate a new race as the focused one.
{% endhint %}
A recent passing list can request the display of a selection of races (vs a single one). By default it will display all passings regardless the race they're belonging to and thus a mix of races. This is what you want actually when many races are ongoing at the same time.
### Resolución de problemas
If for some reason a list remains empty despite what you're trying, remember to check these points:
* the list is a ranking and no race is elected for the widget (obviously if the event holds many races)
* the list is about recent passings: make sure that some passings are actually present in the history for the split point, in particular after the reopening of the file. Eventually try to feed it by entering a passing manually.
* the Men/Women filter can be activated on the widget
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.wiclax.com/es/usando-wiclax/transmision-de-resultados-en-vivo/pantallas-live.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
| \
{% hint style="info" %}
Live sessions on the web will be available only if the Web Services option is active on your current user license.
{% endhint %}
### Proyecció**n**
En la mayoría de los casos, se utilizará una estación de trabajo independiente para transmitir la pantalla a una pantalla LED.
This step, independent from Wiclax, consists in forwarding the web browser graphics to the display board, using the software and hardware provided by its manufacturer.
Then you've got 2 means to work on a projected screen:
* Using the control screen which gets displayed when a browser loads the screen page. The window displays a replica of the screen as well as a list of its widgets on which you can play: make them visible or hidden, modify the races and splits they're bound to.
* Using the embedded controller from the screen page itself. In this case you can act directly from the browser without requiring any access to Wiclax. Convenient thus if you're managing the projection from another station. The controller gets displayed by simply clicking somewhere on the page.
## **Races and splits**
Each widget of the screen can be independently bound to a race and/or a split point. For example you may want to display the ranking for 10K race at the 2.5km intermediate split.
The race and split assignment can be done from multiple places:
