Como Criar Watchfaces Vxp Digital

Olá pessoal que curte watchfaces!

Hoje vou dar continuidade nos tutoriais de criação de watchafces e será para Watchface Digital Vxp. 

Estou sendo muito cobrado via e-mail e até nos comentário para que eu faça esse tutorial, então chegou a hora.... Demorou um pouco para sair devido a falta de tempo.

Vamos aprender!

Bom, para faze-las não tem muito segredo, porém é necessário atenção, alguns programas para a compilação e um programa especial para as coordenadas dos números digitais.

Pra quem já acessou o tutorial de Como Criar Watchfaces Vxp Analógicas com certeza não encontrará muita dificuldade em fazer essas aqui, caso você não tenha lido o tutorial anterior, leia, pois ele ajuda muito a tirar as dúvidas.

Vídeo Tutorial de Como Criar Watchface Vxp Digital

Então vamos começar.

Para se inciar o desenvolvimento vamos precisar dos programas necessários, que são:

MRE SDK;

ADS 1.2;

HxD Hex Editor;

Notepad++ ( opcional, porque você também pode utilizar o bloco de notas do windows );

Visual Basic 2008 - Superior também é para funcionar ( esse programa não é gratuito - porém se encontra na internet); Programas Baixe Aqui

Pasta de Recursos - aqui estou disponibilizando os arquivos para a compilação das watchfaces Digitais, é só baixar. Pasta de Recursos Baixe Aqui  

Também irão precisar desenvolver suas próprias artes para montar suas watchfaces, eu utilizo o Photoshop para isso. Não tem muito segredo, mas você pode usar qualquer outro programa de edição de imagens que possibilite o desenvolvimento do projeto.

Depois de todos esses programas baixados, deve-se instalá-los no mesmo diretório no computador, afim de evitar erros na compilação das watchfaces.

Todos os programas devem estar instalados em C:\Arquivos de Programas\... e utilize a versão Full do VB2008, isso evita que tenhamos erros de compilação e poderemos realizar nosso projeto sem problemas.

Nesse tutorial não vou ensinar a fazer animações, iremos fazer uma watch face digital simples. Esse tutorial será longo, por isso, tenha paciência e tire um tempo para ler todo o tutorial e depois fazer cada etapa. 

Agora que temos tudo instalado e esclarecido, podemos começar o trabalho, bora lá!

Recomendações

Nesse caso iremos criar uma watch face vxp de tamanho 240x240 pixels e as imagens devem ter a extensão .png, sendo assim, a imagem clock_bg.png tem que ter (240x240 pixels), a imagem preview.png será (150x150 pixels) e os números e o AM/PM deverão ser feitos conforme projeto, deverão ficar assim:

Imagens fundo e visualização

-clock_bg.png - imagem de fundo da watchface (240x240 pixels);

-preview.png - Imagem de apresentação da watchface ( essa deverá ser em 150x150 pixels ).

Imagens dos números

num_0.png

num_1.png

num_2.png

num_3.png

num_4.png

num_5.png

num_6.png

num_7.png

num_8.png

num_9.png

tamanho dos números conforme projeto. No meu caso estou usando os números no tamanho 35x50 pixel, o tamanho da fonte é 14 e a fonte é a Arial Bold.

Imagens de AM e PM

am.png

pm.png

tamanho do am/pm conforme projeto. No meu caso estou usando os números no tamanho 45x20 pixel, o tamanho da fonte é 6 e a fonte é a Arial Narrow.

Aqui, nos números e no AM/PM não temos como determinar um tamanho exato, você terá que ir testando os tamanhos que ficam melhor no seu projeto. E ele será seu sistema de 24h/12h, fica muito interessante as watchfaces quando tem esse recurso.

Outra dica super importante, você deve criar o gabarito para as coordenadas dos números e do AM/PM, pois se não os tiver você não vai conseguir finalizar seu projeto.

Crie uma imagem de número ( eu uso normalmente o Zero (0) por ser um número cheio, grande que ocupa o espaço todo), e deixo uma imagem com o fundo com uma cor contrastante com o meu background, como mostra na imagem e também faço o mesmo com o AM/PM, dessa forma podemos partir para as coordenadas do projeto.

Então devemos criar uma imagem, um clock_bg que iremos chamar de coordenadas, nele iremos montar nossa watch face com o números com fundo de cor contrastante e AM/PM também de cor contrastante. Logo voltaremos a falar disso, vamos seguir com o tutorial. 

Na imagem vocês podem ver como iremos construir nosso projeto.

Nº1 - Clock_bg Coordenadas;

Nº2 - Clocl_bg.png;

Nº3 - Preview.png;

Nº4 - Números de 0 a 9 ( num_0.png; num_1.png ...);

Nº5 - Am.png e Pm.png;

É bom lembrar que todos esses arquivos devem ficar com tamanho bem reduzido, 30 a 35 KB, muitos problemas ou defeitos tendem a ser pelo arquivo ficar muito grande.

Sugiro que utilize um compressor de imagens png para reduzir bem o tamanho de suas imagens, deixo aqui o endereço de 3 compressores online.

TinyPng

Compress

Web Site Planet

Localizando as Coordenadas Hexadecimal

A forma de encontrar as coordenadas é você preparar o arquivo clock_bg.png em 240x240 pxl com os grupos de números de horas, minutos e AM/PM em cores contrastantes e usar a nova Ferramenta Hexadecimal do Blog 
Ela é bem mais prática e fácil de usar.

Basta carregar a imagem no sistema e clicar nos pontos definidos como corrdenada dos números.

Vídeo Tutorial de como usar a Ferramenta Hex Tool

Link para Tutorial de Como Usar a Nova Ferramenta Hexadecimal

Link para ir até a Nova Ferramenta Hexadecimal

Vamos dar sequencia na construção da watchface.

Para seguir com o projeto teremos que ter a disposição 14 imagens já prontas e comprimidas, todas elas devem estar em uma pasta nomeada de "pic".

Vamos ao passo a passo

1 Passo

Abra o programa MRESDKWizard.exe, dê o nome ao seu projeto e preencha todos os campos.

Preencha

Wizard Descripition

Name: nome da watchface do seu projeto

Location: escolher desktop

MRE App Version

MRE SDK 2.0

MRE App Style 

MRE Application Project(*.vxp)

Resolution 

176x220

MRE App Descripition

Development info: Seu nome

App Name: nome da watchface do seu projeto

                  

Clique em Finish -  após isso, será criada uma pasta na sua área de trabalho com o nome do seu projeto.

2 Passo

Abra o MRELauncher

Clique em Open Project - Ícone de Pasta

Navegue para escolher a pasta do nome do seu projeto na área de trabalho.

Escolha a pasta onde está seu arquivo -  no nosso exemplo TutDig.vcproj

Clique em "configuração" ícone de engrenagem,

Clique em recurso e marque a caixa de seleção, depois clique em OK.

Clique em Opções

Clique em "avançado" - Advance

Remover "-g" e o espaço que existe ali, nas opções do compilador

Deve ficar assim, clique em Ok.

Não feche o programa, iremos retornar nele daqui a pouco.

3 Passo

Abra a pasta do seu projeto

Abra a pasta "Config"  e depois a pasta  "Default", 

Abra a pasta Default; observe que dentro dela só tem 3 arquivos.

Agora vamos Copiar e colar a pasta "pic" para dentro da pasta Default, nela deve conter: clock_bg.png, Preview.png, os 10 números (num_0.png...num_9.png), o AM/PM.

Também deve colar na pasta Default o arquivo "configtbl.bin" e o arquivo "WATCH_res.lst" que foram fornecidos no link lá em cima no inicio do tutorial.

Renomeie "WATCH_res.lst" para o nome do seu projeto. Exemplo: TutDig_res.lst

4 Passo

Edite o arquivo MEUPROJETO_res.lst. No nosso Exemplo TutDig_res.lst.

Você pode utilizar o Notepad++ ou o Bloco de Notas para isso.

Altere o "caminho" dos arquivos, colocando conforme o caminho que foi gerado no seu computador.

Salve o arquivo.

Copie o caminho das pastas como mostra a imagem abaixo.

Você encontrará o arquivo assim, com nomes de qualquer outro projeto. Vamos selecionar a primeira linha desde o inicio até a palavra Default.

Vá no Menu Localizar e clique em  Substituir.

Abrirá essa caixa, cole o caminho que copiamos das pastas ( no inicio do passo 4)  na opção Substituir por:

Em seguida clique em Substituir todos e clique em fechar.

Seu arquivo deve ficar assim. Salve e feche.

Agora vamos preparar o arquivo Configtbl.bin, pois é nele que devemos aplicar as coordenadas para que nossos números apareçam corretamente na watchface.

Ele está dentro da pasta Default que acabamos de mexer.

Dê 2 cliques no arquivo.

Ele abrirá assim, como mostra a imagem. Aqui temos que entender que cada grupo de números corresponde a uma coordenada de Horas, Minutos, AM/PM, Sistema Digital, Sistema Analógico, Velocidade de animação e outros. Não vou entrar em detalhes, vou apenas mostrar a programação básica necessária para criar a watchface digital.

Mais precisamos saber o que cada conjunto de números faz, então lá vai a explicação.

1- 0x0 0x1 é a posição de clock_bg.

2 - 0x2 0x3 é ponto de ancoragem (x, y) no modo digital são posição de horas. 

3 - 0x4 0x5 são posição no modo digital para os minutos. 

4 - 0x6 0x7 são posição de "AM PM". 

5 - 0x8 é o espaço de horas. 

     0x9 é o espaço de minutos. 

6 - 0xA é tipo de relógio - analógico ou digital. (0 para analógico e 1 para digital);

7 - 0xB posições fixas do sistema;

     0xC posições fixas do sistema;

     0XD posições fixas do sistema;

8 - 0xE é contagem de quadros clock_bg (Usado para animações),

9 - 0xF é tempo de atraso de atualização do tela. ( Velocidade da animação).

Agora que sabemos tudo, vamos adicionar as Coordenadas que pegamos na programação e que convertemos na ferramenta do Blog, e vamos adicioná-las no arquivo.

Ele deve ficar assim. Salve e feche.

5 Passo

Volte para MRELaunch. Que nós deixamos aberto.

Clique em "Make" ícone de martelo.

Aguarde até que  seja compilado tudo e lhe de a mensagem de sucesso!

Aqui você finaliza o processo clicando no botão fechar ( botão vermelho ), após fechar o MRELaunch, verifique se ele não está rodando ainda em segundo plano, se estiver feche-o e de seguimento no tutorial.

6 Passo

Volte para a pasta do seu projeto (TutDig) de 2 cliques, vá para a pasta "arm"

Copie o arquivo "default.vxp" para uma nova pasta na área de trabalho. Basta fazer qualquer nova pasta no desktop,  ela servirá para abrigar os novos arquivos que serão a finalização da watch face.

Renomeie o arquivo "default.vxp" para o nome do seu projeto. Exemplo TutDig.vxp

Volte para a pasta do projeto, volte para / config / default / pic e copie o "preview.png" para a nova pasta.

Renomeie o preview.png para o nome do seu projeto. Exemplo TutDig.png

Volte para a minha pasta de recursos.

Copie o arquivo WATCH.xml para a nova pasta.

Renomeie o WATCH.xml para o nome do seu projeto. Exemplo TutDig.xml

7 Passo

Abra o Programa HxD e abra o arquivo TutDig.vxp  que está na nova pasta.

Agora preste atenção, aqui é diferente da watch face analógica. Aqui nessa parte teremos que encontrar no arquivo o nome do autor do projeto, encontrando o nome, conte de 7 a 10 linhas a cima e você encontrará a referencia de números:

Desça até o final do arquivo, e volte procurando pelo nome do autor que estará no lado direito.

Localizando o nome do autor, conte de 7 a 10 linhas acima, observe bem do lado esquerdo e você encontrará o F2..........31.....

procure em baixo no código o seguinte número

2F 00 00 00 04 00 00 00 01 00 00 00 

entre ele a sequencia

31 00 00 00 04 00 00 00 01 00 00 00

Você os verá assim: 2F 00 00 00 04 00 00 00 01 00 00 00 31 00 00 00 04 00 00 00 01 00 00 00

Imediatamente antes do número 31 00 00 00 04 00 00 00 01 00 00 00  você deve colocar a sequencia:

34 00 00 00 04 00 00 00 01 00 00 00

Então ficará assim

2F 00 00 00 04 00 00 00 01 00 00 00 34 00 00 00 04 00 00 00 01 00 00 00 31 00 00 00 04 00 00 00 01 00 00 00

Esses valores eu disponibilizei em um arquivo que está na pasta de recursos. ( Guide_Edit_Hex).

Salve o projeto.  Será criado um novo arquivo dentro da nova pasta, ficando assim.

Esse arquivo que foi criado, ele é apenas um backup da programação que acabamos de fazer. Ele não será usado para a instalação mais ele é importante, deixe-o aí.

8- Passo final

Você precisa editar o arquivo TutDig.xml você pode usar notepad++ ou o bloco de notas.

Você precisa alterar: 

<appname>, 

<receiver_id> 

<vxpname> e 

<iconname>.

Dê 2 cliques no arquivo TutDig.xml, selecione a inscrição conforme imagem, vá no menu Localizar.

Aqui no menu Localizar vá em Substituir

Você verá essa tela, coloque o nome do nosso projeto em Substituir todos ( mais tem que escrever igual ao nome do projeto, caso contrário não funcionará).

Clique em Substituir todos.

Clique em fechar e salve o arquivo.

É isso aí, sua watchface foi criada e está pronta para ser instalado no seu relógio.

Basta copiar o arquivo TutDig.vxp, TutDig.xml e TutDig.png para o seu telefone na pasta appmanager e instalar no seu relógio.

Pronto! Agora é só desfrutar da sua bela watchface Digital.

Atenção
Para que o projeto tenha sucesso você deve prestar atenção em tudo, cada vez que for necessário renomear um arquivo ou caminho de arquivo eles devem serem feitos corretamente, não pode ter letras  amais ou a menos, sempre devem ser iguais ao nome original do seu projeto.

Quando se coloca um nome diferente, ou uma letra a mais, ou um espaço que não existia no nome original do projeto, ele dá defeito. Você consegue finalizar a watchface, porém, ela não instala no seu relógio, e se instalar pode não aparecer a imagem de preview ou clock_bg, isso se ela não brickar seu relógio. Por isso tenha atenção nos nomes e caminhos.

Não use nomes com acentos, isso gera caracteres inválidos para o projeto e pode acontecer da watchface não funcionar.
Respeite os espaço, se quiser usar um nome composto, você deverá separa-lo usando _ (underline) como mostro aqui Meu_Projeto, caso contrario o sistema não reconhece e aí vai dar bug.

Como Instalar watch face Vxp

Como Criar Watch face Analógica

Se você ainda tiver alguma duvida a respeito de como fazer essa watch face, deixe um comentário que respondo assim que possível.

Bons projetos! 

[ Se esse artigo foi útil para você, comente e compartilhe. Isso faz com que outras pessoas  compreendam melhor o assunto e também expressem suas opinião. ]