Reino Kawaii

Hoje trouxe esse tutorial que acho super útil para quem, assim como eu, gosta de todo tipo de atalho na área de trabalho do pc para facilitar a vida e evitar a fadiga... É sobre como criar uma skin ou widget bem simples na tela do windows para que você já digite o que quer procurar assim que o pc ligar, sem ter que abrir o navegador, basta digitar o que procura e clicar enter. Para isso, eu uso o Rainmeter ou Xwidget, dois programas que sempre recomendo e vocês já devem ter encontrado muitos posts com downloads sobre eles pelo blog. Vou mostrar como criar uma em cada um dos dois programas, com opções de busca em sites que podem ser definidos por você. Mas, se gostou dessas que uso, deixo os links para que possam baixá-las.

Sem mais delongas... vamos começar pelo Rainmeter. Feita com base nesta aqui.

Você vai precisar de: imagens para sua caixinha (as que uso (abaixo) são dos sites de sozai que recomendei), imagens para os botões de redes sociais ou sites de busca, um editor de html.

1. Tendo o programa instalado no pc e funcionando, abra a pasta Documentos do seu computador, procure pela pasta Rainmeter - Skins. Crie uma nova pasta lá com o nome da sua caixa de pesquisa, aqui dei o nome de searchbox. Deixe nessa pasta as imagens que for usar.

2. Nessa caixa de pesquisa eu quero buscar em sites que uso com mais frequência quando procuro por algo, como Google, Facebook, Deviantart, youtube e aqui no blog. Em um editor html (uso o Notepad), cole isso:

Ou seja, você deve colar os links de pesquisa dos sites que preferir. Para obter esses links, só fazer uma pesquisa em algum site e dar uma conferida no que aparece na barra de endereços.

Vamos salvar esse documento dentro da pasta da caixa de pesquisa com o nome links e em tipo, escolha Pascal source file. Esse documento precisa ter a extensão .inc, então basta alterar a extensão do arquivo depois de salvo. Para isso, deixe habilitada a opção de ver extensões de arquivos no windows; depois é só clicar no arquivo e digitar a outra extensão, no caso .inc 

3. No editor de html, vamos criar o documento search.ini (ao salvar escolha o tipo MS ini file). Aí você cola os códigos abaixo (exceto o que está em vermelho):

[Rainmeter]
Author=SEU NOME
Update=
[Variables]
@include=links.inc <= o arquivo criado anteriormente com os links

[bg]
Meter=IMAGE
ImageName=bg.gif <= nome da imagem da caixa de pesquisa e tipo (jpg, png, gif)

X=0<= posiciona a imagem na tela

Y=53<= posiciona a imagem na tela
[button]
Meter=Button
ButtonImage=1.png <= nome da imagem dos botões para mudar de site, no caso usei as flores, uni a imagem em 3 mini botões, como você deve ter visto na imagem dentro da pasta da skin

X=50 <= posiciona a imagem na tela

Y=90 <= posiciona a imagem na tela

MouseOverAction=!Execute [!RainmeterShowMeter google_text][[!RainmeterRedraw]
MouseLeaveAction=!Execute [!RainmeterHideMeter google_text][[!RainmeterRedraw]
LeftMouseDownAction=!Execute [!RainmeterShowMeterGroup google][!RainmeterHideMeterGroup fb][!RainmeterHideMeterGroup da][!RainmeterHideMeterGroup yt][!RainmeterHideMeterGroup rk]<= aí você muda os nomes dos grupos de acordo com os sites, google, fb (facebook), da (deviantart), yt (youtube), rk (reinokawaii)
[button1]
Meter=Button
ButtonImage=1.png
X=20r <= posiciona a imagem na tela

Y=90 <= posiciona a imagem na tela

MouseOverAction=!Execute [!RainmeterShowMeter fb_text][!RainmeterRedraw]
MouseLeaveAction=!Execute [!RainmeterHideMeter fb_text][!RainmeterRedraw]
LeftMouseDownAction=!Execute [!RainmeterHideMeterGroup google][!RainmeterShowMeterGroup fb][!RainmeterHideMeterGroup da][!RainmeterHideMeterGroup yt][!RainmeterHideMeterGroup rk]

Para aparecer um texto => !RainmeterShowMeter

Para ocultar um texto => !RainmeterHideMeter 

Para adicionar mais um botão, repita o que houver a partir de [button1], mudando o número para 2 [button2] e assim por diante, fiz isso criando button2, 3 e 4, de acordo com o número de sites de pesquisa. Quando terminar, vamos criar um texto que aparece ao passar o mouse sobre cada um dos botões com os nomes das redes e sites:

[google_text] <=texto do google, mude de acordo com o site, como fb, yt...

Meter=STRING
Text=Google <= mude de acordo com o site, como facebook, youtube...

X=82 <=posicionamento

Y=15 <=posicionamento

FontColor=ff99bb <=cor do texto

FontSize=20 <=tamanho da fonte

FontFace=Sacramento <=tipo da fonte

StringAlign=Center <=alinhamento do texto

AntiAlias=1
Hidden=1

Faça isso para cada um dos sites que deseja que o nome apareça ao passar o mouse sobre o botão. Em seguida, vamos adicionar a área em que o texto da pesquisa será inserido:

[measureInput]
Measure=Plugin
Plugin=InputText.dll
SolidColor=254,186,240,111 <= plano de fundo da área de texto com opacidade (111)

StringAlign=Center <=alinhamento

FontColor=000000 <=cor da fonte

FontFace=Sacramento <=tipo da fonte, que deve estar instalada em seu pc

FontSize=15 <=tamanho da fonte

X=9 <=posicionamento

Y=60 <=posicionamento

W=180 <=largura

H=24 <=altura

FocusDismiss=1
DefaultValue=""
Command1=!Execute ["#google#$UserInput$"] DefaultValue=""
Command2=!execute ["#facebook#$UserInput$"] DefaultValue=""
Command3=!execute ["#deviantArt#$UserInput$"] DefaultValue=""
Command4=!execute ["#youTube#$UserInput$"] DefaultValue=""
Command5=!execute ["#reinokawaii#$UserInput$"] DefaultValue=""
UpdateDivider=86400

Para a palavra search ficar visível e você clicar para pesquisar:

[meterSearch]
Meter=STRING
FontColor=ff99bb <= cor da fonte

FontFace=Sacramento <=tipo da fonte

FontSize=15 <=tamanho da fonte

StringAlign=Center <=alinhamento

AntiAlias=1
X=47 <=posicionar

Y=58 <=posicionar

W=190 <=largura

H=18 <=altura

Text="Search..." <=mude o texto search para qualquer outro se preferir

LeftMouseUpAction=!RainmeterPluginBang "measureInput ExecuteBatch 1"
Group=google <=mude o grupo de acordo com o site de pesquisa

Repita o código abaixo de acordo com a rede social ou site de busca, em ExecuteBatch coloque os números em sequência (2,3,4...):

[meterSearchfb]
Meter=STRING
FontColor=ff99bb
FontFace=Sacramento
FontSize=15
StringAlign=Center
AntiAlias=1
X=47
Y=58
W=190
H=18
Text="Search..."
LeftMouseUpAction=!RainmeterPluginBang "measureInput ExecuteBatch 2"
Group=fb
Hidden=1

Ao terminar e salvar tudo, clique com o botão direito sobre o ícone do Rainmeter na sua barra de tarefas e em Atualizar tudo. Depois clique de novo com o botão direito no ícone, Skins e escolha a sua caixa de pesquisa. Quando passar o mouse sobre os botões (as rosas, nesse caso), o nome dos sites aparecerá, clique no botão do site em que deseja pesquisar, digite alguma coisa e clique enter; seu navegador abrirá já com pesquisa e seus resultados.

**Dê duplo clique no arquivo baixado para instalar.

Já no Xwidget é bem mais fácil... Eu só não me lembro do widget no qual eu pude ter acesso aos códigos do script, se eu encontrar por aqui deixo o link ok?

A fadinha fica animada, como se estivesse voando!!!

1. Com o programa instalado, clique com botão direito no ícone do Xwidget na barra de tarefas e em Criar widgets, dando um nome e tals... aqui dei o nome de search. Aí defina o tamanho do seu widget e em Funções do widget deixe assim:

2. Estou usando só essa imagem abaixo (encontrada aqui).
É uma fadinha que funciona como enfeite e como enter, para procurar o que você digitou. Depois de definir o tamanho do widget, cliquei duas vezes em Imagem (nos componentes) e importei ela para o widget; em Animar deixei que nem na imagem abaixo para que pareça que ela fica flutuando.

Em funções, deixe assim:

3. De novo, clique em Imagem nos Componentes, só que dessa vez não adicione imagem nenhuma. Vamos estabelecer apenas o tamanho, borda e preencher com cor.

4. Criaremos o espaço para digitar o texto. Lá em Componentes, clique duas vezes em Editar (Edit). Isso cria o edit1. Na área de texto e fonte você deixa como preferir. Se quiser baixar a mesma fonte que eu tô usando, clica aqui.

Aí você especifica tamanho em Métrica e define o Preenchimento de cor para nada, para que o background que criamos em bg apareça.

Em funções, na opção Teclado para baixo digite como na imagem abaixo:

5. Em Menus, vamos definir os sites de pesquisa. Eles aparecem quando você clica com o botão direito sobre o widget, para que escolha em qual pesquisar. Deixei 3 opções, aqui do blog, no google e no bing, mas pode ser qualquer site. Clique em Add MenuItem e nos atributos deixe assim:
Lá em título, coloque o nome do site. Em um clique, quando adicionar o segundo, terceiro... site, mude o número, por exemplo, menuitem1OnClick, menuitem2OnClick, menuitem3OnClick,... Faça o mesmo em Nome, menuitem1, menuitem2...

6. Por fim, cole o código abaixo em Código:

function edit1OnKeyDown(Sender,Key,KeyChar,Shift)
{
  if(Key == 13)image1OnClick();
}

function kawaii()
{
   if(edit1.text=="") return;
   var url = "http://reinokawaii.blogspot.com/search?q=" + encodeURIComponent(edit1.text) + "&ie=UTF-8&oe=UTF-8";
   openURL(url);
   edit1.text = "";
}

function google()
{
   if(edit1.text=="") return;
   var url = "http://www.google.com/search?q=" + encodeURIComponent(edit1.text) + "&ie=UTF-8&oe=UTF-8";
   openURL(url);
   edit1.text = "";
}

function bing()
{
   if(edit1.text=="") return;
   var url = "http://www.bing.com/search?q=" + encodeURIComponent(edit1.text) + "&ie=UTF-8&oe=UTF-8";
   openURL(url);
   edit1.text = "";
}

function menuitem2OnClick(Sender)
{
   menuitem2.checked = true;
   menuitem1.checked = false;
   menuitem3.checked = false;
}

function menuitem1OnClick(Sender)
{
   menuitem1.checked = true;
   menuitem2.checked = false;
   menuitem3.checked = false;
}

function menuitem3OnClick(Sender)
{
   menuitem3.checked = true;
   menuitem2.checked = false;
   menuitem1.checked = false;
}

function image1OnClick(Sender)
{
   if(menuitem1.checked)kawaii()
   else if(menuitem2.checked)google()
   else if(menuitem3.checked)bing()
}

function widgetOnLoad()
{
   menuitem2OnClick();
}