Teclado Virtual

Programação
#1

evento onscriptinit aplicação controle:

echo "
<link rel=\"stylesheet\" type=\"text/css\" href=\"../_lib/mylibs/keyboard/css/keyboard.css\">
<script type=\"text/javascript\" src=\"../_lib/mylibs/keyboard/js/jquery.keyboard.js\"></script>
<script type=\"text/javascript\" src=\"../_lib/mylibs/keyboard/js/jquery.mousewheel.js\"></script>
<script type=\"text/javascript\" src=\"../_lib/mylibs/keyboard/js/jquery.keyboard.extension-typing.js\"></script>
<script type=\"text/javascript\" src=\"../_lib/mylibs/keyboard/js/jquery.keyboard.extension-autocomplete.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"../_lib/mylibs/keyboard/css/jquery-ui.css\">

<style type=\"text/css\">
    body { font-size: 14px; margin-top: 200px; }
#wrap { display: block; margin: 0 auto; width: 200px; }
</style>";
$_sql="SELECT
   concat('\"',group_concat(distinct o.login order by o.login SEPARATOR '\",\"' ),'\"') as users
FROM
   sec_users o INNER JOIN venda v ON o.Id = v.operador_id
WHERE 
	date(v.datahora) between SUBDATE(current_date(), INTERVAL 60 DAY)  and current_date()";

sc_lookup(ds,$_sql);
if (!empty({ds})) {
	$_users=$ds[0][0];
}	

echo "
<script type='text/javascript'>
var availableTags = [$_users];
</script>
";

método javascript: parâmetro: function TecladoVirtual(availableTags)

$('#id_sc_field_login')
.attr('placeholder',"Entre com seu Login...")
.keyboard({
	layout : 'custom',
	customLayout: { 
	'default': [
		'1 2 3 4 5 6 7 8 9 0 {bksp}',
		'{tab} q w e r t y u i o p',
		' a s d f g h j k l {enter}',
		'{shift} z x c v b n m @ {shift}',
		' {space} {left} {right} {cancel}'
	],
	'shift': [
		'1 2 3 4 5 6 7 8 9 0 {bksp}',
		'{tab} Q W E R T Y U I O P',
		'A S D F G H J K L {enter}',
		'{shift} Z X C V B N M @ {shift}',
		'{space} {left} {right} {cancel}'
	]
	},
    autoAccept: true,
    tabNavigation: true,
    enterNavigation: true,
    visible: function(e, keyboard, el) {
        keyboard.$preview[0].select();
    }
})

.autocomplete({
  source: availableTags
 })
.addAutocomplete()
.addTyping({
    showTyping: true,
    delay: 300
})

$('#id_sc_field_pswd')
	.attr('placeholder',"Entre com sua Senha...")
	.keyboard({
	layout : 'custom',
	customLayout: { 
	'default': [
		' 1 2 3 4 5 6 7 8 9 0 {bksp}',
		'{tab} q w e r t y u i o p',
		' a s d f g h j k l {enter}',
		'{shift} z x c v b n m @ {shift}',
		' {space} {left} {right} {cancel}'
	],
	'shift': [
		'1 2 3 4 5 6 7 8 9 0 {bksp}',
		'{tab} Q W E R T Y U I O P',
		'A S D F G H J K L {enter}',
		'{shift} Z X C V B N M @ {shift}',
		'{space} {left} {right} {cancel}'
	]
	},

    autoAccept: true,
    tabNavigation: true,
    enterNavigation: true,

})

javascript evento onload:

function sc_form_onload() 
{ 
TecladoVirtual(availableTags); 
}

download plugin jquery:

http://www.jquerybyexample.net/2012/04/jquery-ui-virtual-keyboard-plugin.html

TAGS: Teclado Virtual, iwh

#2

Olá Haroldo, parabéns pelo post, funcionou perfeitamente.
Reconheço que foi muita humildade de sua parte repassar esse script.

#3

Ficou SHOW.

Agora fica a SUGESTÃO para a NETMAKE aproveita e coloca algo semelhante no plano de senhas das versões futuras do SC ai bastando a gente
selecionar para ativar ou não o teclado virtual, porque com CELULARES, TABLET, usar esse esquema é bem legal.

#4

Excelente parabéns Haroldo sempre surpreendendo o pessoal!

#5

Haroldo Mestre dos Mestres…
Obrigado por compartilhar.

#6

Parabéns Haroldo, pela contribuição, ficou show de bola.

Att,
Paulo.

#7

Muito obrigado pelo post.
Isso mostra como as pessoas podem se ajudar para tornar as coisas melhores.
Parabéns pela iniciativa.

Agora uma dúvida, a todos que conseguiram implementar.
O que preciso carregar na variável “availableTags”, para que o teclado funcione?
Por ex. no meu controle tenho dois campos, Operador e Máquina, o que preciso informar nessa variável?
E por último, como declaro a função?
Coloco o nome inteiro “TecladoVirtual(availableTags)” no nome da função?
Sei que pode ser simples, mas pra mim que sou iniciante na ferramenta e na linguagem, tá difícil de entender.

Pedi encarecidamente ao Haroldo, o qual prontamente me atendeu, um exemplo (o post em questão), já me ajudou muito, pois não sabia o que colocar em que lugar. Mas ainda assim tô meio perdido quanto ao parametro “availableTags”.

Att

#8

availableTags é uma variável javascript que contem a lista para auto preenchimento, quando alimentada uma combo surge com uma lista de possíveis valores que podem ser selecionados ( é um auto complete).

Durante o teclar esta lista surge.

No caso do exemplo, uma lista com os logins que começam com as primeiras letras tecladas.
No site do plugin explica em isso.

#9

Acho que entendi.
Então se eu não quero ter essa funcionalidade é só chamar a função sem parâmetros?

Bem fiz isso, mas o teclado não é chamado? Será que coloquei a chamada no lugar certo?
Eu coloquei o código no evento onLoad, mas nada aconteceu.

Abri o código da pagina que foi gerada e não há um chamada para essa funcão. Onde será que errei?

Att

#10 
$('#id_sc_field_pswd')
	.attr('placeholder',"Entre com sua Senha...")
	.keyboard({
	layout : 'custom',
	customLayout: { 
	'default': [
		' 1 2 3 4 5 6 7 8 9 0 {bksp}',
		'{tab} q w e r t y u i o p',
		' a s d f g h j k l {enter}',
		'{shift} z x c v b n m @ {shift}',
		' {space} {left} {right} {cancel}'
	],
	'shift': [
		'1 2 3 4 5 6 7 8 9 0 {bksp}',
		'{tab} Q W E R T Y U I O P',
		'A S D F G H J K L {enter}',
		'{shift} Z X C V B N M @ {shift}',
		'{space} {left} {right} {cancel}'
	]
	},

    autoAccept: true,
    tabNavigation: true,
    enterNavigation: true,

})

olhe o exemplo. habilite o teclado para dois elementos, um deles habilita o autocomplete, o outro não.

#11

Ok. Entendi essa parte.

O que estava errado era a chamada da função.
Tinha colocado no evento onLoad, e o correto é JavaScript, objeto Form e evento onLoad.

Agora funcionou certinho.

Uma dúvida.
Se eu precisar usar um outro plugin qualquer, é sempre dessa forma o seu uso?

Att

#12

“A princípio sim”.

Mas tem que estudar o plugin sempre antes.

#13

Certo.
Obrigado pela ajuda.
Abraços

#14

Haroldo vc é o cara mesmo! Show!!! <3

#15

Haroldo,
Tem como colocar este teclado ao lado do campo login, para ser chamado quando usuário desejar ?
Ex: Uma imagem de um teclado ao lado do campo, tem como?

Att,
Paulo.

#16

As propriedades, métodos do plugin você encontra em:

http://www.jquerybyexample.net/2012/04/jquery-ui-virtual-keyboard-plugin.html

#17

Legal, vou dar uma olhada no link.

#18

Teclado Virtual 2:
Tela de Login
Uma outra alternativa ao teclado do Haroldo.
Ferramentas necessárias:

  • Boa vontade.
  • Determinação.
  • Baixar no dropbox os seguinte arquivo teclado contendo:
    – CSS
    – Javascript - com vários idiomas basta escolher o da sua preferência, no meu caso escolhi jquery.keypad-pt-BR.js
    – link-> https://www.dropbox.com/s/beq7iekd7smom4y/teclado.zip?dl=0
    Dentro do seu projeto na pasta _lib crie uma pasta chamada mylib dentro dessa pasta descompacte o arquivo baixado que deverá criar uma pasta chamada teclado ficando assim a estrutura de pasta:
    seuProjeto
    _lib
    mylib
    teclado
    css
    js
    Eventos:
    OnScriptinit[code]echo "

";[/code]

Agora clique em Javascript conforme figura abaixo:

Selecione o objeto login e depois no evento escolha onClik porque é nesse evento que o teclado vai aparecer para o usuário.

Insira o seguinte código na janela que se abre:

$('#id_sc_field_login').keypad({keypadOnly: false, layout: $.keypad.qwertyLayout});
Repare que esse (id_sc_field_login) é o nome do campo após a app ser gerada pelo SC e executada pelo usuário como ilustra a figura abaixo.

Agora vamos fazer o mesmo com o campo senha cujo o nome dele é (id_sc_field_pswd)

Me perdoe os feras em SC por detalhar demais o processo, detalhando assim eu aprendo mais um pouco também.

Lembrando que sem o Haroldo nada disso teria acontecido.

Mais uma vez obrigado por compartilhar.

#19

Celso R.
Muito bom, funcionou perfeiramente

#20

Maravilha, Celso. Obrigado por compartilhar. Vou implementar aqui também.

Abraços,