angulargauge — u_pbt_angulargauge #
← Referência dos componentes · Índice do guia
Mostrador: um valor lido numa escala circular — um ponteiro, um arco cheio ou uma marca no rebordo, intervalos coloridos que dizem se está bem, um objetivo, uma leitura no formato à sua escolha.
▶ Ver ao vivo — Aplicação de demonstração, mosaico Angular gauge : a pré-visualização, o código que o produz e esta página, lado a lado.
Em resumo #
| Userobject | u_pbt_angulargauge |
| Classe de itens | n_pbt_angulargauge_range (of_range(key)) |
| Serve para | Ler uma grandeza num relance — velocidade, temperatura, grau de cumprimento de um objetivo, botão de termóstato |
| Princípio | Você dá uma escala, um valor e intervalos; as marcas, os números, as cores e a animação são connosco |
| Família | Gémeo de gauge: os mesmos métodos, os mesmos eventos e, geometria à parte, as mesmas propriedades — aqui os ângulos e as pontas arredondadas, ali a orientação e a colocação dos intervalos |
Arranque rápido #
// A scale from 0 to 240, a number every 20
uo_dial.id_maximum = 240
uo_dial.id_tick_step = 20
// Three ranges of the scale, each with the tone of what it means
uo_dial.of_add_range(/*key*/ "city", /*from*/ 0, /*to*/ 130)
uo_dial.of_add_range(/*key*/ "fast", /*from*/ 130, /*to*/ 180)
uo_dial.of_add_range(/*key*/ "limit", /*from*/ 180, /*to*/ 240)
uo_dial.of_range(/*key*/ "city").is_tone = u_pbt_angulargauge.TONE_SUCCESS
uo_dial.of_range(/*key*/ "fast").is_tone = u_pbt_angulargauge.TONE_WARN
uo_dial.of_range(/*key*/ "limit").is_tone = u_pbt_angulargauge.TONE_DANGER
// The unit, and the value : the needle turns to it
uo_dial.is_unit = "km/h"
uo_dial.id_value = 96
A escala, o valor e os intervalos #
A escala vai de id_minimum a id_maximum (de 0 a 100 por omissão). O valor id_value relê-se tal como o deu: fora da escala é desenhado no batente da ponta mais próxima e a leitura escreve-o na mesma — um indicador que reescrevesse em silêncio o que a aplicação mediu mentiria duas vezes. Definido pelo código não lança nenhum evento, como SetItem: ue_value_changed diz o que o utilizador fez. NULL é ignorado: o valor anterior fica — teste uma medida que pode faltar (GetItemNumber devolve NULL) antes de a definir.
Os números seguem is_format, o formato de apresentação de um DataWindow (#,##0.0, $#,##0, 0% escreve a PARTE da escala — 50 em 0..200 dá 25 %, como a barra de progresso), com os separadores da língua de apresentação. Sem formato, é a escala que escolhe as casas decimais da leitura — duas para uma escala de 0 a 1, nenhuma para 0 a 100 —, nunca o valor, que escreveria 43 num segundo e 42,55 no seguinte; os números da escala tomam as do seu passo.
Um intervalo colore uma parte da escala: a sua cor é a que dá, senão a do seu tom (TONE_SUCCESS, TONE_WARN, TONE_DANGER, TONE_INFO = o acento do tema, TONE_NEUTRAL — um conjunto de cores por modo claro ou escuro), senão a da paleta. Os intervalos sobrepõem-se pela ordem em que foram acrescentados; of_current_range() diz em qual está o valor. Sob um ponteiro são a banda; sob um arco cheio, um anel no interior. Um intervalo contém o seu início mas não o seu fim: no limite que dois intervalos partilham (60 entre 0–60 e 60–85), o valor está no que começa aí, seja qual for a ordem em que foram acrescentados; a ponta da escala pertence ao intervalo que a atinge. A cor de paleta de um intervalo fica fixada quando é acrescentado: retirar um não muda a cor dos outros. Um intervalo inteiramente fora da escala não é desenhado.
Os ângulos contam-se em graus, 0 em cima, no sentido dos ponteiros do relógio: por omissão a escala começa em -135 (em baixo à esquerda) e cobre 270 graus — um velocímetro. ii_start_angle = -90 e ii_sweep_angle = 180 dão meio mostrador, desenhado duas vezes maior. Um mostrador é um instrumento de medida: não se inverte numa aplicação da direita para a esquerda.
Propriedades #
| Propriedade | Tipo | Omissão | Função |
|---|---|---|---|
is_title | string | "" | O título, acima do mostrador. Marcação aceite; também nomeia o componente para um leitor de ecrã. Sem título, nomeia-o o texto simples da dica (is_super_tooltip_title, senão is_tooltip), senão a palavra « Medidor » na língua de apresentação |
id_value | double | 0 | O valor. Desliza para o seu lugar; fora da escala, desenhado no batente e relido tal qual. Definido pelo código, mudo; NULL é ignorado, o valor anterior fica |
id_minimum | double | 0 | O início da escala. Uma escala cujo mínimo não está abaixo do máximo está vazia: nem marca, nem número, nem intervalo, nem indicador, nem objetivo, e of_current_range() devolve uma cadeia vazia. Para inverter uma escala, ib_reversed |
id_maximum | double | 100 | O fim da escala |
is_format | string | "" | O formato de apresentação de todos os números — leitura, escala, extremos de um intervalo —, com a sintaxe de um formato de DataWindow (#,##0.00, $#,##0, 0%), separadores da língua de apresentação. Vazio = a leitura toma as casas decimais da escala (duas para 0 a 1, nenhuma para 0 a 100), os números da escala as do seu passo (0,0, 0,2… 1,0) |
is_unit | string | "" | Escrito depois do valor na leitura (%, km/h) |
ib_show_value | boolean | true | Mostra a leitura — o valor e a sua unidade — sob o pivô de um ponteiro (sob os números das duas pontas num mostrador pequeno), no meio de um arco cheio. Sem leitura, um mostrador de ponteiro é desenhado maior |
id_tick_step | double | 0 | O passo entre duas marcas numeradas. 0 = escolhido pela escala: um passo redondo (1, 2, 2,5 ou 5 vezes uma potência de dez, depois 3, 4,5 ou 6) que cai nas duas pontas quando existe — de 0 a 90 de 10 em 10, de −50 a 50 de 25 em 25, de 0 a 360 de 60 em 60 —, senão contado a partir do mínimo (de 32 a 212 de 20 em 20). Um passo que der conta-se sempre a partir do mínimo; um passo que desenharia mais de 200 marcas volta ao automático. Cada ponta tem uma marca numerada. Quando os números não cabem todos, escreve-se um em cada k para manter um passo regular, e as duas pontas são sempre escritas. Os números tomam as casas decimais do seu passo. O passo escolhido nunca é mais fino do que o que is_format escreve (de 0 a 3 no formato #,##0: 0, 1, 2, 3); um passo que dá continua a ser o seu, e o formato arredonda os seus números. Num mostrador demasiado pequeno para um círculo de números não se escreve nenhum; num arco cheio pequeno a leitura desloca-se para manter as duas pontas |
ii_minor_ticks | integer | 4 | Marcas pequenas entre duas numeradas (0 a 9) |
ib_show_ticks | boolean | true | Mostra as marcas |
ib_show_labels | boolean | true | Mostra os números da escala; num mostrador demasiado pequeno para um círculo de números não se escreve nenhum — a leitura e os intervalos continuam a falar |
id_target | double | 0 | Um objetivo — uma meta, um limiar —, marcado de través sobre a banda enquanto ib_show_target for verdadeiro |
ib_show_target | boolean | false | Mostra a marca de id_target |
is_pointer | string | needle | Como o valor se mostra (constantes POINTER_*): NEEDLE, um ponteiro; BAR, a banda cheia desde o mínimo — um indicador cheio, o número ao centro; MARKER, um triângulo no rebordo. Desconhecido = NEEDLE |
il_value_color | long | -1 | A cor do valor — o ponteiro, o arco cheio ou a marca; -1 = o acento do tema |
il_track_color | long | -1 | A cor de a banda; -1 = um tom da cor do texto do tema |
ii_thickness | integer | 0 | A espessura da banda, em píxeis (0 a 80, nunca mais de metade do raio); 0 = automática: uma parte do raio, mantida entre 6 e 24 px sob um ponteiro ou uma marca, entre 8 e 36 px para um arco cheio — um mostrador grande continua a ser um mostrador. Os números da escala (11 a 16 px) e a leitura crescem com ele |
ib_reversed | boolean | false | O máximo no início do arco: a escala roda no sentido contrário ao dos ponteiros do relógio. Direita e Cima continuam a rodar no sentido dos ponteiros: num mostrador invertido baixam o valor |
ii_start_angle | integer | -135 | Onde começa a escala, em graus: 0 em cima, 90 à direita, -90 à esquerda (450 relê-se 90) |
ii_sweep_angle | integer | 270 | Quanto do círculo a escala cobre, em graus (10 a 360). Um ângulo negativo vale o seu valor absoluto: para a escala rodar no outro sentido, ib_reversed. O mostrador ajusta-se ao espaço que o ângulo ocupa |
ib_editable | boolean | false | O utilizador move o valor: rodar a agulha em torno do pivô, clicar no mostrador, setas, Page Up / Down (dez passos), Home e End. Um clique perto do pivô, na leitura ou longe do mostrador (para lá da faixa e das marcas ao lado) não põe nada; durante um arrasto a mão pode sair do mostrador, o valor fica na ponta de onde vem e nunca salta a abertura. Direita e Cima rodam no sentido horário, como um botão rotativo, por onde quer que passe o arco (num mostrador invertido baixam o valor). Cada gesto lança ue_value_changed uma vez — uma tecla, como a mão, põe o valor de uma vez, e um arrasto interrompido (caixa de mensagem, Alt+Tab) termina como ao largar; Esc durante um arrasto repõe o valor (um valor escrito pelo seu código entretanto fica) sem premir o botão Cancelar da janela; a tecla Menu nomeia o intervalo em que está o valor |
id_step | double | 0 | O passo da mão e das teclas; 0 = a precisão que a leitura mostra (as casas decimais de is_format, ou as que a escala escolhe): numa escala de 0 a 7 a mão dá 2,6, nunca um 2,61 que o utilizador não leu; uma tecla avança um centésimo da escala, nunca menos de um algarismo mostrado. As duas pontas continuam alcançáveis quando o passo não divide a escala: de 0 a 100 de 30 em 30, o valor passa por 0, 30, 60, 90, 100 |
ib_track_drag | boolean | false | Com ib_editable, opcional: enquanto o utilizador arrasta o valor, ue_value_tracking segue a mão — um volume ouvido em direto, uma pré-visualização redesenhada. ue_value_changed continua a chegar uma só vez, ao largar; quando um arrasto é interrompido (Esc, ib_editable ou ib_enabled postos a false pelo código), ue_value_tracking diz também o valor de onde partiu |
ib_value_tooltip | boolean | true | O painel que nomeia o intervalo sob o ponteiro, com os seus extremos. Não é is_tooltip, a dica do componente inteiro. A dica de um intervalo (o seu is_tooltip) é escrita neste painel, mesmo a false |
ib_value_follows_range | boolean | false | Opcional: o valor — a agulha, o arco cheio ou a marca — toma a cor do intervalo em que está (o desenhado por cima se dois se sobrepõem): vermelho na zona vermelha. Fora de qualquer intervalo mantém il_value_color, senão o acento do tema. Enquanto o valor desliza, a cor segue o valor desenhado |
ib_rounded | boolean | false | Opcional: pontas arredondadas na faixa, no arco cheio e nos intervalos. Cada um é encurtado meia espessura em cada ponta para ficar na sua parte da escala; um intervalo mais curto do que a sua própria espessura torna-se um ponto. Um círculo completo mantém a faixa fechada |
ib_pointer_tooltip | boolean | false | Opcional: o painel nomeia também o valor sob o rato — na agulha, no arco cheio ou na marca — e o objetivo, com o seu número no formato da leitura. Os intervalos mantêm o seu próprio painel (ib_value_tooltip) |
id_origin | double | 0 | Onde começa o arco cheio (POINTER_BAR): um valor abaixo da origem enche no outro sentido — um desvio, uma variância, uma escala de −50 a 50 que começa em 0. Enquanto não for definida — ou depois de reposta a NULL —, o arco começa no mínimo e a propriedade relê o mínimo; fora da escala, na ponta mais próxima. O gémeo de id_origin de gauge |
ib_auto_height | boolean | false | O componente anuncia a sua altura ideal e o userobject ajusta-se (ue_auto_height). A largura dita-a: meio mostrador tem metade da altura |
ib_enabled | boolean | true | A cinzento continua a mostrar o seu valor mas deixa de responder: nem clique, nem teclas, nem arrasto, e sai da ordem de tabulação |
ib_animated | boolean | true | O valor desliza para o seu lugar, imagem a imagem — o ponteiro roda —, e chega desde o início da escala (o seu mínimo) quando o componente se desenha. Uma propriedade alterada durante o deslize (título, unidade, cor, tamanho) não o interrompe. Um posto configurado para reduzir animações nunca anima; a mão do utilizador nunca é animada; um valor definido sob of_set_redraw(false) desliza ao retomar |
ii_anim_duration | integer | 450 | Duração do deslize, em milissegundos (0 a 5000) |
is_anim_easing | string | ease-out | A curva do deslize (constantes EASING_*, os nomes de LiveCharts2): back-out passa e volta, bounce-out ressalta, elastic-out estala. Uma ultrapassagem fica na escala. Desconhecido = ease-out |
is_theme_style | string | "" | Estilo visual do componente (constantes THEME_STYLE_*); vazio = o da aplicação, seguido a cada mudança |
is_theme_mode | string | "" | Variante clara ou escura (constantes THEME_MODE_*); vazio = a da aplicação, seguida a cada mudança |
il_theme_accent | long | -1 | Cor de acento deste componente (-1 = acento do tema) |
is_tooltip | string | "" | Dica simples mostrada ao passar sobre o componente |
is_super_tooltip_title | string | "" | Título da dica enriquecida (tem precedência sobre is_tooltip) |
is_super_tooltip_text | string | "" | Texto da dica enriquecida (marcação rica aceite) |
is_super_tooltip_image | string | "" | Imagem da dica enriquecida |
Métodos #
| Método | Função | |
|---|---|---|
of_add_range ( string as_key, double ad_from, double ad_to { , long al_color } ) | Acrescenta um intervalo colorido de ad_from a ad_to (extremos escritos ao contrário são desenhados no sentido certo); a sobrecarga com cor fixa-a, senão o tom e depois a paleta. Devolve 0 depois de acrescentado, -5 se a chave estiver vazia, contiver / ou ` | , ou já existir (acrescentar nunca substitui), -2` se o componente não estiver criado. A cor de paleta é dada ao acrescentar: retirar um intervalo não muda a cor dos outros |
of_clear_ranges ( ) | Retira todos os intervalos — os seus handles vão com eles —, o valor e as definições ficam. Devolve 0 depois de feito, -2 se o componente não estiver criado | |
of_current_range ( ) | A chave do intervalo em que o valor está agora, uma cadeia vazia se não estiver em nenhum ou se a escala estiver vazia. Onde dois intervalos se sobrepõem, ganha o último acrescentado — o desenhado por cima. Um intervalo oculto não conta; um intervalo que o modo demo não desenha conta: o que este método lê nunca depende da licença. Um intervalo contém o seu início mas não o seu fim: no limite comum de dois intervalos, o valor está no que começa aí, seja qual for a ordem em que foram acrescentados; a ponta da escala pertence ao intervalo que a atinge. Um intervalo fora da escala (não desenhado) também conta | |
of_range ( string as_key ) | O handle n_pbt_angulargauge_range de um intervalo, para ler ou mudar os extremos, a cor, o tom, o nome ou a visibilidade | |
of_remove_range ( string as_key ) | Retira um intervalo; o seu handle é destruído. Devolve 0 depois de retirado, -5 se nenhum intervalo tiver essa chave, -2 se o componente não estiver criado | |
of_reset ( ) | Esvazia os intervalos — handles incluídos — e repõe todas as propriedades no valor de origem. Devolve 0 depois de feito, -2 se o componente não estiver criado |
Eventos #
| Evento | Lançado quando |
|---|---|
ue_value_changed (double ad_value) | Só com ib_editable: o utilizador moveu o valor — uma vez por arrasto (ao largar, ou quando o arrasto é interrompido: uma caixa de mensagem aberta sob a mão, Alt+Tab), por clique, por tecla. Um valor definido pelo seu código não o lança, nem durante um arrasto. Para seguir a mão durante o arrasto: ib_track_drag |
ue_value_tracking (double ad_value) | Só com ib_editable e ib_track_drag, enquanto o utilizador arrasta o valor: cada nova posição da mão, depois — quando o arrasto é interrompido: Esc, ou ib_editable / ib_enabled postos a false pelo seu código — o valor de onde partiu. O valor final continua a chegar uma vez em ue_value_changed |
ue_range_clicked (string as_key) | Um intervalo foi clicado — ou validado com Enter ou Espaço no intervalo do teclado (Tab, depois as setas). Não num componente editável: aí um clique define o valor |
ue_range_rclicked (string as_key, long al_x, long al_y) | Clique direito num intervalo, ou tecla Menu (Shift+F10) no intervalo do teclado — num componente editável, o intervalo em que está o valor: o sítio onde abrir um menu; al_x, al_y: onde abrir o menu, em píxeis de ecrã — o ponteiro, ou pelo teclado (tecla Menu, Shift+F10) o meio do intervalo; um contextmenu abre-se aí tal como estão (uo_menu.of_show(al_x, al_y)) |
ue_auto_height (long al_height) | Com ib_auto_height: o userobject acabou de ser redimensionado para a sua altura ideal |
Propriedades de item #
Um intervalo designa-se pela sua chave: uo_dial.of_range("warn").is_tone = u_pbt_angulargauge.TONE_WARN.
| Propriedade | Tipo | Omissão | Função |
|---|---|---|---|
id_from | double | 0 | O início do intervalo, na escala |
id_to | double | 0 | O seu fim. Extremos ao contrário desenham-se no sentido certo e relêem-se tal qual |
il_color | long | -1 | A sua cor; -1 = a do seu tom, senão a da paleta. As cores de item herdadas (il_accent, il_back_color, il_text_color e as suas variantes ao passar) não têm efeito num intervalo: decidem il_color e is_tone |
is_tone | string | "" | O seu tom (constantes TONE_* do componente): SUCCESS, WARN, DANGER, INFO (o acento do tema), NEUTRAL — um conjunto por modo claro ou escuro, maiúsculas ou minúsculas indiferentes. il_color prevalece; um tom desconhecido vale nenhum tom |
is_label | string | "" | O seu nome, no painel sob o ponteiro e para um leitor de ecrã; vazio = a sua chave. Marcação aceite |
ib_visible | boolean | true | Esconde o intervalo sem o retirar; como uma caixa de verificação, não lança nenhum evento |
is_tooltip | string | "" | A sua dica, escrita no painel que nomeia o intervalo sob o ponteiro — nunca uma segunda bolha. Marcação aceite |
is_super_tooltip_title | string | "" | O título a negrito da sua dica, escrito no painel sob o seu nome |
is_super_tooltip_text | string | "" | O texto da sua dica, no painel. Marcação aceite |
is_super_tooltip_image | string | "" | Uma imagem no topo da sua dica, no painel (caminho do bundle, caminho absoluto ou resources.dll:nome) |
Exemplos #
Um painel que vive #
// Timer event of the window : the needle turns to each new reading
uo_dial.id_value = ids_monitor.GetItemNumber(1, "speed")
// Which range is it in now ? An alert outside the good one
st_alert.visible = (uo_dial.of_current_range() <> "city")
Um meio indicador cheio #
// The band fills from the minimum, the number in the middle
uo_dial.is_pointer = u_pbt_angulargauge.POINTER_BAR
// From the left, over half a circle : the upper half
uo_dial.ii_start_angle = -90
uo_dial.ii_sweep_angle = 180
// A scale from 0 to 1, written as a percentage
uo_dial.id_maximum = 1
uo_dial.is_format = "0%"
uo_dial.id_value = 0.72
Um desvio em torno de zero #
// A scale centred on zero : the filled arc starts at 0, not at the minimum
uo_dial.is_pointer = u_pbt_angulargauge.POINTER_BAR
uo_dial.id_minimum = -50
uo_dial.id_maximum = 50
uo_dial.id_origin = 0
// Below the budget, the arc fills to the left of 0
uo_dial.id_value = -18
Um valor que o utilizador ajusta #
// The user moves the value, by steps of 5
uo_dial.ib_editable = true
uo_dial.id_step = 5
// Event ue_value_changed of uo_dial : apply what the user chose
ii_level = Integer(ad_value)
Um volume ajustado em direto #
// The user drags the value, and the sound follows the hand
uo_dial.ib_editable = true
uo_dial.ib_track_drag = true
// Event ue_value_tracking of uo_dial : the volume heard while the hand moves
inv_player.ii_volume = Integer(ad_value)
// Event ue_value_changed of uo_dial : the volume kept when the hand lets go
ii_saved_volume = Integer(ad_value)
Um indicador moderno #
// A filled arc with round ends, in the colour of the zone it is in
uo_dial.is_pointer = u_pbt_angulargauge.POINTER_BAR
uo_dial.ib_rounded = true
uo_dial.ib_value_follows_range = true
// The goal, and its number under the mouse
uo_dial.id_target = 85
uo_dial.ib_show_target = true
uo_dial.ib_pointer_tooltip = true
uo_dial.id_value = 74
Um menu num intervalo #
// Event ue_range_rclicked of uo_dial : remember the range, then open the menu
// at the pointer of the window
is_menu_range = as_key
m_range.PopMenu(/*xlocation*/ w_main.PointerX(), /*ylocation*/ w_main.PointerY())
Uma imagem do mostrador para um relatório #
// The dial as it is on screen, title and readout included, to a PNG file
uo_dial.of_save_as_png(/*path*/ "C:\Reports\speed.png")
// The same, printed into a PDF file without any dialog
uo_dial.of_print_to_pdf(/*path*/ "C:\Reports\speed.pdf")
Boas práticas #
- No máximo três intervalos, com os seus tons: bem, cuidado, mal. Para além disso, o olho já não lê a cor sob o ponteiro.
- Um formato em vez de um cálculo:
0%numa escala de 0 a 1,$#,##0para dinheiro — o valor continua a ser o do código. - Num painel que se atualiza muitas vezes, mantenha a animação: o valor desliza de onde está, não recomeça.
- Uma cor que quer dizer algo define-se pelo tom; deixe o valor com o acento do tema, ele segue o tema claro ou escuro.
- Para um relatório, a imagem do mostrador tal como está no ecrã vem da base:
of_save_as_png(ouof_save_as_jpg),of_print_to_pdf,of_print— o valor final, nunca um ponteiro a meio caminho.
Herdado da base comum #
Estes membros existem em todos os componentes visuais — não são próprios deste. São detalhados uma só vez, nos capítulos transversais; esta tabela apenas diz onde os ler.
| Membros | Função | Detalhado em |
|---|---|---|
of_count · of_keys_at · of_has | Percorrer o que o componente contém | 3.2 Os items |
of_reset | Repor o componente a zero | 3.6 Repor um componente a zero: of_reset() |
of_register_shortcut · of_clear_shortcuts | Atalhos de teclado do componente | 3.5 Os atalhos de teclado |
of_is_created · of_is_ready · of_get_last_error | Se nasceu, se está pronto, o que falhou | 3.7 Diagnóstico |
of_save_as_png · of_save_as_jpg | Exportar a renderização como imagem | 3.8 Exportar a representação como imagem |
of_set_redraw | Agrupar as alterações num único repinte | 3.10 Boas práticas |
of_preload_icons | Ícones mostrados sem atraso | Apresentação instantânea: of_icon |
of_set_translation | Traduzir uma legenda do componente | 5.2 Adaptar uma etiqueta: of_set_translation |
of_focus_webview | Dar o foco ao componente | 6.4 Teclado e focus |
of_print · of_print_to_pdf | Imprimir, ou escrever um PDF | 6.9 Imprimir |
of_set_property · of_get_property · of_component_name | Controlar uma propriedade pelo nome | 3.1 O motor de propriedades |
is_accessible_name · is_accessible_description | O nome e a descrição que um leitor de ecrã diz | 3.4 Propriedades e eventos opcionais |
Duas ajudas não são herdadas: of_icon e of_escape_markup vivem em n_pbt_utils. Declare um — n_pbt_utils lnv_utils, nada a criar — e chame-as nele.