---
title: BSTicker
slug: develop/es/bsticker
docTags: 
createdAt: 2025-03-11T07:07:17.199Z
---

Para obtener más información sobre los métodos disponibles, consulte la entrada *roTextWidget* . Este objeto se puede usar para mostrar un ticker de desplazamiento de texto.

BSTicker utiliza rutas de estilo BrightScript en lugar de rutas nativas (una ruta de estilo Unix o un URI).

:::hint{type="info"}
Este objeto admite modos de desplazamiento tanto de derecha a izquierda como de izquierda a derecha (por ejemplo, árabe, hebreo), según el idioma de la primera cadena o archivo agregado al widget. Para cambiar la dirección de desplazamiento, primero elimine todas las cadenas del ticker.
:::

## Creación de objetos

`BSTicker(in unsigned long x, in unsigned long y, in unsigned long w, in unsigned long h, in long rotation);`

Los enteros `x` e `y` especifican la posición del widget ticker (a través de la esquina superior izquierda), mientras que los enteros  `w` y `h` especifican el tamaño del widget. El parámetro `rotación` acepta los siguientes valores (la rotación es en sentido antihorario desde el modo horizontal):

- `0`: 0 grados
- `90`: 90 grados
- `180`: 180 grados
- `270`: 270 grados

:::hint{type="info"}
El parámetro `rotación` solo afecta el texto dentro del ticker; no altera las coordenadas de pantalla del propio widget. Si está creando un ticker vertical o rotando el ticker para que coincida con contenido HTML en modo vertical, deberá usar los parámetros de coordenadas `x, y, w, h` para que coincidan con la rotación del texto.
:::

## Métodos

- `SetRectangle(en unsigned long x, en unsigned long y, en unsigned long w, en unsigned long h)` boolean: Modifica la posición (`x,y)` y el tamaño (`w,h)` del widget ticker. Cambiar el tamaño del widget restablecerá la animación del ticker. Mientras el tamaño del widget permanezca sin cambios, modificar la posición no interrumpirá la animación del ticker. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `AddString(en DOMString str)` int: Agrega una cadena a la cola. Este método devuelve un entero `string_id` que se puede usar para identificar qué cadena se eliminó cuando se genera el evento `ontickerstringremoved`; un valor de retorno cero indica que el método no pudo agregar la cadena. Agregar demasiadas cadenas sin extraerlas de la pila hará que `AddString()` devuelva un valor distinto de cero (el número exacto depende del tamaño de fuente de cada cadena). El número máximo recomendado de cadenas almacenadas es 64.
- `AgregarSurface(en ImageData image)`int:  Agrega una imagen de mapa de bits a la lista de cadenas que se mostrarán. La imagen debe ser del tipo `DatosDeImagen`. Este método devuelve un entero `string_id` que se puede usar para identificar qué superficie se elimina cuando se genera el evento `ontickerstringremoved`. Consulte el código en la parte inferior de esta página para ver un ejemplo de uso de un lienzo/imagen con este método.
- `PopStrings(in unsigned long count)` boolean: Elimina la cantidad designada de cadenas de la cola. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetAutoPop(in boolean)` boolean: Si este método se establece en `Verdadero`, las cadenas se eliminan automáticamente (se extraen de la pila) una vez que se han desplazado fuera de la pantalla.
- `SetForegroundColor(en unsigned long argb)`boolean: Especifica el color de primer plano como un número de 32 bits en formato ARGB (Alpha, Red, Green, Blue). Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetForegroundColor(en unsigned long a, en unsigned long r, en unsigned long g, en unsigned long b)`boolean: Establece el color de primer plano en rojo, verde y azul (los valores alfa de primer plano actualmente no son compatibles y este método los ignora, aunque esto puede cambiar en futuras versiones de firmware). `a, r, g` y `b` son valores enteros entre 0 y 255. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetBackgroundColor(en unsigned long argb)`boolean: Especifica el color de fondo como un número de 32 bits en formato ARGB (Alpha, Red, Green, Blue). Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `EstablecerColorDeFondo(en unsigned long a, en unsigned long r, en unsigned long g, en unsigned long b)`boolean: Establece el color de fondo en alfa, rojo, verde y azul. Mientras que los valores alfa estándar están entre 0.0 y 1.0, los valores en BSTicker son `sin signo largo` (o los 8 bits superiores de un `sin signo largo`). Los valores se asignan entre 0x00 y 0xff para corresponder a 0.0 y 1.0. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetSeparatorString(en DOMString str)`boolean: Utilice una cadena de texto para separar mensajes individuales. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetSeparatorCircle()`boolean: Utilice un círculo para separar mensajes individuales. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetSeparatorDiamond()`boolean: Utilice un rombo para separar mensajes individuales. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetSeparatorSquare()`boolean: Utilice un cuadrado para separar mensajes individuales. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetPixelsPerSecond(en unsigned long pps)` unsigned long: Establece la velocidad del ticker.
- `EstablecerFuente(en DOMString fuente)` boolean: Especifica una fuente para BSTicker (así como para el objeto BrightScript roTextWidget). Este método acepta una lista de nombres de font-family (similar a la propiedad CSS \<font-family>). La cadena también puede tener un prefijo `font-face:` para indicar que esta es una descripción de fuente (por ejemplo, `font-face:DejaVu Serif,Serif Italic Bold`). Las fuentes deben agregarse al widget HTML usando el método `roHtmlWidget.AddFont()` antes de que puedan utilizarse en una instancia de BSTicker. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetSyncManager(en DOMString domain)` boolean: Especifica un dominio BSSyncManager para usar al ejecutar la llamada `SetMultiscreen()` . Cuando se llama a este método, crea un dominio interno basado en el dominio BSSyncManager existente y utiliza los mismos parámetros de red. Recomendamos utilizar este método en lugar de pasar una dirección IP multicast y un puerto al propio método `SetMultiscreen()` . Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
- `SetMultiscreen(en unsigned long offset, en unsigned long size, en DOMString ip_address, en unsigned long port) ` boolean: Llame al método `SetMultiscreen()` para crear un ticker que se desplace suavemente a través de múltiples pantallas. Este método devuelve `Verdadero` en caso de éxito, o `Falso` en caso de error.
  - `desplazamiento:` Determina el punto de inicio izquierdo (en píxeles) en la matriz multipantalla. El valor del parámetro siempre será 0 para la pantalla más a la izquierda. Este parámetro debe calcularse utilizando la longitud del ticker multipantalla, *no la longitud total de la pantalla multipantalla*. Por ejemplo, utilizar un offset de 1920 en una matriz de dos pantallas de 1920x1080 especificaría este reproductor como la pantalla derecha (maestra). Para crear un ticker que se desplace suavemente a través de múltiples pantallas, llame al método `SetMultiscreen()` en cada página. 
  - `tamaño:` El ancho total (en píxeles) de la matriz multipantalla en todas las pantallas. Este parámetro debe tener el mismo valor para cada llamada a `SetMultiscreen()` . Tenga en cuenta que el tamaño de un ticker multipantalla puede ser diferente del ancho total de una pantalla multipantalla (por ejemplo, si el ancho de un widget BSTicker es menor que el ancho de la pantalla). Definir un tamaño de 3840 especificaría una matriz de dos pantallas de 1920x1080.
  - `dirección_ip:` Una cadena que especifica la dirección IP multicast para el proceso de sincronización PTP (por ejemplo, "239.192.0.0")
  - `puerto:` Una cadena que especifica el puerto multicast para el proceso de sincronización PTP (por ejemplo, "1234").

El siguiente diagrama de ejemplo y fragmentos de código especifican una pantalla multipantalla con dos monitores. El ancho de cada monitor es de 1024 píxeles, mientras que el ancho de cada ticker es de 768 píxeles:

![](https://api.archbee.com/api/optimize/511c8QBH-VHiwWnyzIwUb/maynzvzhidgbr8b-X5h8X_setmultiscreen-diagram.png)

## Eventos

`bsTicker.ontickerstringremoved`

Este controlador de eventos se activa cuando una cadena ha sido eliminada y ya no es visible. El evento contiene la propiedad `string_id` , que es devuelta por una llamada exitosa a `AddString()`.

## Ejemplos

El siguiente script muestra cómo utilizar muchos de los métodos disponibles de *BSTicker*:

```text
var bsTicker = new BSTicker(10, 110, 600, 30);
 
function addText1()
{
    console.log('############ addText1');
    bsTicker.AddString("addText1");
}
function addText2()
{
    console.log('############ addText2');
    bsTicker.AddString("addText2");
}
function addText3()
{
    console.log('############ addText3');
    bsTicker.AddString("addText3");
}

function setBackground1()
{
    console.log('############ setBackground1');
    bsTicker.SetBackgroundColor(0xFFFF0000);
}
function setBackground2()
{
    console.log('############ setBackground2');
    bsTicker.SetBackgroundColor(0xFF00FF00);
}

function setForeground1()
{
    console.log('############ setForeground1');
    bsTicker.SetForegroundColor(0xFF007700);
}
function setForeground2()
{
    console.log('############ setForeground2');
    bsTicker.SetForegroundColor(0xFF000077);
}

function setSeparatorString()
{
    console.log('############ setSeparatorString');
    bsTicker.SetSeparatorString(" ### ");
}
function setSeparatorCircle()
{
    console.log('############ setSeparatorCircle');
    bsTicker.SetSeparatorCircle();
}
function setSeparatorDiamond()
{
    console.log('############ setSeparatorDiamond');
    bsTicker.SetSeparatorDiamond();
}
function setSeparatorSquare()
{
    console.log('############ setSeparatorSquare');
    bsTicker.SetSeparatorSquare();
}

function setTickerSpeed()
{
    console.log('############ setTickerSpeed');
    var speed = bsTicker.SetPixelsPerSecond(180);
    console.log('############ SetPixelsPerSecond(180), Resulting speed: ' + speed);
}
```

Los siguientes ejemplos permiten agregar un canvas o una imagen al ticker con el método `AddSurface()`:

```text
//Loading a canvas
var ctx = canvas.getContext("2d");
var img = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);

ticker.AddSurface(img); 

//Loading an image
var imageObj = new Image();
imageObj.onload = function() {
	canvas.width = this.width;
	canvas.height = this.height;

	var ctx = canvas.getContext("2d");
	ctx.drawImage(this, 0, 0); // Use getImage Data as above
 };
 imageObj.src = "filename.jpg";
```