Wednesday, November 5, 2014

Character Generator for 7 segments Display

This is a little WebApp helper, for those who want to experiment with 7-segment displays, and draw numbers or even a few other symbols and letters.
It will generate the arduino code for you. For it just draw the symbol you want, give it a description name and click save to add it to the list. Then use the Generate Code button.

A
F
B
G
E
C
D


Add character to List


Saved characters


Arduino Code

Example code

I wrote a sample code that you can use as example.

Also avaliable on GitHub https://github.com/victornpb/display7

/**
 * 7-segments display example code
 * 
 * This code is distributed under The MIT License (MIT)
 * Copyright (c) 2014 victornpb - www.vitim.us
 * created on 18-nov-2014
 */

#define C_ANODE false
const uint8_t myDisplayPins[8] = {3,4,5,6,7,8,9,10}; //dp A B C D E F G

byte font[] = {
  B1111110, //[0] => "0"
  B0110000, //[1] => "1"
  B1101101, //[2] => "2"
  B1111001, //[3] => "3"
  B0110011, //[4] => "4"
  B1011011, //[5] => "5"
  B1011111, //[6] => "6"
  B1110000, //[7] => "7"
  B1111111, //[8] => "8"
  B1111011, //[9] => "9"
  B1110111, //[10] => "A"
  B0000001, //[11] => "dash"
};

void setup(){
 display7Setup(myDisplayPins); //configure myDisplayPins as outputs
}

void loop(){
  
  display7(myDisplayPins, font[0]); //display "0"
  delay(1000);
  display7(myDisplayPins, font[9]); //display "A"
  delay(1000);
  display7(myDisplayPins, font[11]); //display "-"
  delay(1000);
  display7(myDisplayPins, B00000000); //turn all segments OFF
  delay(1000);

  //count 0 to 9
  for(int i=0; i<=9; i++){
    display7(myDisplayPins, font[i]);
    delay(1000);
  }
}

/* Configure pins as outputs */
void display7Setup(const uint8_t displayPins[]){
  for(uint8_t i=0; i<8; ++i){
    pinMode(displayPins[i], OUTPUT);
  }
}

/* Function that writes a bitmap to a 7-segment display */
void display7(const uint8_t displayPins[], byte bitmap){
  if (C_ANODE) { bitmap = ~bitmap; }
  for (uint8_t i=0; i<8; ++i) {
    digitalWrite(displayPins[7-i], (bitmap & 0x1)?HIGH:LOW);
    bitmap >>= 1;
  }
}
Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied.

Wednesday, December 4, 2013

How to make a Tabbed Panel using CSS without Javascript

    Tabbed Panels are not a new thing, they have been around on your desktop since the first graphic interface. The web is here, but we don't do things like pepperidge farm remembers. A long time ago netscape came up with this client side scripting language, we call javascript, ECMAScript for picky. It has proven very useful for all sort of things. And more recently thankfully or not with the explosion of libraries like jQuery, you probably see Tabbed Panels everyday on the web too.

But Today I was fiddling around and I found something that I though it was very cool and I want to share with you guys that it is possible to make a Tabbed Panel with pure CSS and markup, without Javascript.

Don't get me wrong, I love javascript and I write javascript everyday, but is very cool to see that it is possible to do this kind of things without it.

DEMO

JSFIDDLE http://jsfiddle.net/Victornpb/h2nb6/

Tab 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis diam eget leo dapibus suscipit. Integer vulputate lacinia libero, nec interdum diam consectetur non. Quisque elementum augue lectus, id euismod risus bibendum quis. Integer nec turpis facilisis, vestibulum mi vel, mattis nisi. Integer et sapien odio. Pellentesque enim ipsum, dictum vel malesuada non, elementum sed augue. Curabitur quis lectus libero. Proin vel elementum quam. Nam ipsum ligula, condimentum nec ante vitae, sollicitudin auctor elit. Morbi et elementum lectus. Aenean vulputate lobortis nunc.

Tab 3

Quisque orci metus, elementum et purus vitae, fringilla dictum orci. Sed tincidunt, lectus vitae bibendum vehicula, turpis nisi pharetra ante, et posuere diam sem eget metus. Curabitur id felis non odio aliquam dignissim. Fusce volutpat vulputate enim quis pellentesque. In ut nunc eleifend, rutrum velit non, sollicitudin lectus. Praesent fringilla ipsum lectus, condimentum varius elit accumsan nec. Curabitur hendrerit, orci pretium pulvinar lobortis, nunc metus ultricies elit, vel sodales urna erat et quam. Nulla ac turpis pretium, gravida mauris vitae, interdum arcu. Aenean porttitor, justo a consectetur iaculis, neque est varius nisi, a vulputate eros elit ac justo. Etiam elementum ipsum sit amet dignissim lacinia.




The little magic behind it is a radio button before each tab. By nature of how radio buttons work, when one radio is checked, it's the only one checked, which makes then useful for out TabbedPanel, which will only show one tab at time.

<input type="radio" name="tabs" id="tab1" checked>
<div>
    <!-- Content tab 1 -->        
</div>

<input type="radio" name="tabs" id="tab2">
<div>
    <!-- Content tab 2 -->          
</div>

<input type="radio" name="tabs" id="tab3">
<div>
    <!-- Content tab 3 -->
</div>

This selector will select a div that it's right after a checked radio button

input[type="radio"]:checked+div{
    /* SHOW TAB */
}

But we don't want to show the radio buttons, so we hide then using CSS. But, there's a problem how we are supposed to check a radio button if it's hidden? The answer is a Label. A label let us refer to another element even if it's hidden, so that's what we are using as Tab buttons. The good thing is that allow us to place the tabs in any order we want, also put text and icons inside, even outside the tabbedPane.

<div class="tabBar">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
</div>

The full markup is something like this

<div class="tabbedPanel">
    
    <div class="tabBar">
        <label for="tab1">Tab 1</label>
        <label for="tab2">Tab 2</label>
        <label for="tab3">Tab 3</label>
    </div>
    
    <div class="tabs">
        
        <!-- TAB 1 -->
        <input type="radio" name="a" id="tab1" checked>
        <div>
            <h1>Tab 1</h1>
            <p>Content</p>
        </div>
        
        <!-- TAB 2 -->
        <input type="radio" name="a" id="tab2">
        <div>
            <h1>Tab 2</h1>
            <p>Content</p>
        </div>
        
        <!-- TAB 3 -->
        <input type="radio" name="a" id="tab3">
        <div>
            <h1>Tab 3</h1>
            <p>Content</p>
        </div>
        
    </div>
    
</div>

This is more or less of what like the CSS would be

.tabbedPanel{
    display: table;
}
.tabbedPanel .tabBar{
    display: table-row;
    height: 0;
}
.tabbedPanel .tabBar label{
    display: inline-block;
}
.tabbedPanel .tabs{
   display: table-row;
   height: auto;
}
.tabbedPanel .tabs > input[type="radio"]{
    display: none;
}
.tabbedPanel .tabs > div{
    height: 100%;
    overflow: scroll;
}
.tabbedPanel .tabs > input[type="radio"]:not(:checked)+div{
    display: none;
}
.tabbedPanel .tabs > input[type="radio"]:checked+div{
    display: table-row !important;
}

Adding some quick look and feel

/**** Visual ****/
.tabbedPanel{
    border: 1px solid grey;
    height: 300px;
    width: 300px;
}
.tabbedPanel .tabBar{
    background: #F0F0F0;
    font-family: Helvetica, Arial, sans-serif;
}
.tabbedPanel .tabBar label{
    cursor: pointer;
    
    background: #C0C0C0;
    
    border: 2px outset #CCC;
    border-bottom-color: transparent;
    border-radius: 3px 3px 0 0;
    
    padding: 0.5em;
    padding-top: 4px;
    padding-bottom: 4px;
    
    margin-top: 3px; 
    margin-right: 1px;
}
.tabbedPanel .tabBar label:first-child{
    margin-left: 5px;
}
.tabbedPanel .tabBar label:hover{
    color: #38f;
}
.tabbedPanel .tabBar label:active,
.tabbedPanel .tabBar label.active{
    color: blue;
    background-color: #DDD;
    border: 2px outset #BBB;
    border-bottom: 2px solid transparent;
}
.tabbedPanel .tabBar label:focus{
    outline: 2px solid yellow;
}

.tabbedPanel .tabs > div{
    border: 2px outset #DDD;
}

I'm not sure how and if it can be used in a production environment. I can't answer that, but as-is, probably not. Somehow IE always finds its ways to not work with things properly, and that would kill every hope to let it going to production.

There's limitations. I couldn't figure out how to keep the current Tab button highlighted yet. Radio buttons require a name to work as a radio group, and labels require each radio button to have a unique ID.

Anyway, I hope you find it interesting, if you have any though on this, drop a comment.

Sunday, September 8, 2013

SIME - System Information Menu Editor

SIME was an attempt to do a WYSIWYG editor to design menu interfaces for touchscreen GPS Systems and PocketPCs running WindowsCE.

The tool was used to generate a serialized graphic representation in a  "INI" like format file which is used to generate a menu by the SystemInformation32 application.

SystemInformation is a free german software by ultimatelaunch.de

It was a pretty good exercise writing javascript, everything was built from scratch, no jQuery or other fancy libraries. It uses only javascript css3 and html5 techniques, and there's no server side part.

Unfortunately I never managed to get it completed, but I hope I will get it done someday.

The source code is not minified of obfucated, so feel free to check it out, and if you want to continue this or use it to build another thing maybe, drop me a note on my contact page or social networks.

The documentation for the launcher software can be found here Ini-Beschreibung and here Tutorial, unfortunately texts are only in german, but you can use google for that.

Check it out here http://vitim.us/playground/SIME_SystemInformationMenuEditor/

Resistor WebApp




There are two things that I like doing, writing Javascript and playing with electronics.
Check out my little resistor color code helper.

It supports URL anchors, so you can easily use URLs like these:
vitim.us/playground/resistor/#4K7
vitim.us/playground/resistor/#4.7K
vitim.us/playground/resistor/#1.8MΩ 0.5%
vitim.us/playground/resistor/#brown-green-red
vitim.us/playground/resistor/#brown-black-red-gold
vitim.us/playground/resistor/#brown|black|red|red

pretty cool ha!?

And you can add to your home screen on your iOS Device.

Hope you like it!


Friday, April 26, 2013

SimCity4 Launcher

If you play Sim City 4 this is a must have full featured Launcher! It will let you to play Sim City 4 on a custom resolution, or play in a window while surfing the web or doing other things in the computer.

Have you ever lost hours of progress due to a crash? Forgot to save?

Never loose you progress again, with the auto save feature.

Your game will be automatically saved while playing on a chosen  interval.



Play your game in full 1920x1080p on a huge 21" monitor or any other resolution.

Play in widescreen resolutions.

Play in full-screen or play in a floating window, no more ALT+TAB.

Fully configurable.
Playing windowed while multitasking


You can select between 9 backgrounds or let it randomly choose one every time.
Supports additional parameters.

Option to exit launcher when the game is launched.










List of features:

  • Auto Save Feature - automatically save your game progress while playing.
  • Quick saving - no one have time for long waiting dialogs.
  • Save in a customized interval, you can adjust from every minute up to 120 minutes.
  • Log saving events
  • Custom resolution
  • Detect current resolution
  • Color depth
  • Launch game in full-screen or windowed
  • Rendering mode (Software, OpenGL or Software)
  • Background Loading
  • Ability to turn Music and Sound On and Off
  • Option to skip the Introduction videos
  • Game pausing
  • Choose a custom game data directory
  • Change Language
  • Change process priority
  • Feature to change number of logical core used.
  • Browse for the location of the game
  • Auto detect game executable on common directories
  • Specify custom parameters
  • Change between 9 background images
  • Random background
  • Option to exit the launcher when the game is launched
  • Option to reset defaults
  • Auto save settings to INI file
  • No dependencies, single executable.
  • Works on Wine (Linux, OSX...)

How to use:

  1. Download the executable
  2. Place it in any folder you like
    If you place it inside the SimCity folder it will automatically find the game executable.
        e.g.: ...\Maxis\SimCity4 Deluxe\ or ...\Maxis\SimCity4 Deluxe\Apps\

    If you have the game installed on the default path it will find the game automatically even if you place the launcher in any other folder.

  3. Double click it


If you like this you can always pay me a coffee:


Donate

Donate via PayPal
I will thank you from the bottom of my heart!


Download:





Monday, December 10, 2012

iBattery 2.0




iBattery Gadget 2.0 

A battery meter to the desktop of your Laptop, Notebook or Netbook.

Made for Windows Vista Sidebar or to Windows 7 Desktop


One of the most popular battery gadget, more than thousands of downloads, and now the version 2.0 is here.






New in version 2.0 (30/Oct/11)
  • Now support 5 colors
  • Option to show and hide percent value, time remaing, and status icon
  • Remaing time estimation now is supported by all devices using a built-in algorithm
  • New all engine, rewritten from zero
  • Sound effects
  • 3 sound themes
  • Performance improved
  • Low memory usage
  • Low CPU load
  • Improved response time
  • Update notifications
  • Other improvements
  • Avaliable in English and Portuguese


Version 1.0
  • Transparent
  • Show percent
  • Show charging status
  • Show AC status
  • Show when battery is removed
  • Show remaing time



Download Now


Thursday, October 11, 2012

Toggle visibility of hidden files and folders on Mac OS X



Now you can show and hide hidden files on Mac OS X directly from finder.
This utility allows to simple toggle visibility of hidden files and folders from Finder menu.

I made this utility using the Apple Automator App, works on Mac OS Lion and Mountain Lion.

How to use

Installation

To Mountain Lion Users:

Control+Click or Right-Click > Open



To install just unzip, double click the file, you will be asked to install it, 
just click Install and then click Done.



Download Now

Saturday, December 17, 2011

Vitim.tk moved to Vitim.us

Vitim.tk moved to Vitim.us

I had some issues with the old domain,
sorry for the blog being down for a week.

I'm working hard on this changes, sorry for the inconvenience.

Thursday, November 24, 2011

Skymote




Sky HDTV and Directv Remote Control










Web-App to control your Set-Top Box with this Virtual Remote Control, works with Sky HDTV and Directv, connecting your set-top box to your local network, using a ethernet cable and plugging to your router, few steps, and you have full control on any device, works with Laptops and Desktops using Safari/Chrome/Firefox, iPhone, iPod Touch and iPad.
Add the icon to your home screen, just open Safari and type the url http://vitim.us/sky and follow these 3 steps.


Click on the switch to open configuration panel, and enter the IP of your sattelite receiver.



Instructions:

Compatible with ethernet capable receivers like SKY HDTV and DIRECTV HD DVR







Wednesday, November 9, 2011

iSearch 1.1


iSearch Gadget


The simplicity of doing a search directly from your desktop.






Suported search engines:
  • Google
  • Bing
  • Yahoo!
  • Ask
  • Wikipedia
  • Twitter
  • YouTube
  • Custom search [Watch Tutorial] (45 seconds)

 


Open directly in your default web Browser.
Clean and intuitive interface.
Transparent and rounded conners.
Follows the design of your wallpaper.





iSearch 5 Stars softoxi.com Award!Softoxi: "a cool Windows gadget that allows users to query one of multiple search engines within a smart and intuitive design. 
 This Windows gadget will integrate perfectly with your desktop environment; iSearch looks clean, simple and minimalistic and what's more it feels great to work with." (5/5 Stars Softoxi Award)




 "Softpedia guarantees that iSearch 1.0 is 100% CLEAN, which means it does not contain any form of malware, including spyware, viruses, trojans and backdoors." 






Change log:
Version 1.0 (10/Aug/10)
- Initial version released


Version 1.1 (09/Nov/11)
- Easy way to add custom search engines (see video)
- Improved security
- File size reduced significantly (from about 850KB to 40KB)
- English and Portuguese in a single file version
- Others small changes


Configuring a custom search in less then a minute.





Monday, September 12, 2011

iBrightness Tray

Brightness Control for Windows 7 in the native way.


I always wondered, why Microsoft did not put it natively, but since we can not expect any change on the part of microsoft, so far.




I decided to implement myself brightness control in the style of the native controls of Windows 7 in a friendly flyout.






Some Features...
  • You can fast change the brightness anytime, and fast adjust to the most confortable level.
  • Intuitive and self-explanatory interface.
  • Mouse and Touch friendly, since tablets pc, that has no buttons or key combinations to change the brightness.
  • Show current Brightness level.
  • Native look and feel interface and icon.
  • Small and consumes very few resources.
  • Function to trigger the ScreenSaver.
  • Button to instantly turn off the Monitor, useful saving battery when waiting for a download.
  • Option to Auto Start with windows.
  • Portable, no installation required, just double click to use, to uninstall just drag to trash, no trace is left.
  • Safe, all actions is made by calling Windows recommended API methods.
Avaliable Languages 


Requeriments:

- Windows Vista (32bit or 64bit)
- Windows 7 (32bit or 64bit)
- Windows 8 (32bit or 64bit)

- Laptop/Notebook/Tablet.
- Video card must be installed properly, with the drivers provided by your laptop manufacturer.


* Since I don't have a lot of diferent laptop models to test, and this is 1.0, if you found some issue, please tell me using the www.vitim.us/contact or on Twitter.





Softpedia guarantees that iBrightness 1.0 is 100% CLEAN, which means it does not contain any form of malware, including spyware, viruses, trojans and backdoors. [read more >]









Download Now




Sunday, August 28, 2011

JovemPan Tuner

O JovemPan Tuner é um player para Windows, para escutar a radio no seu computador sem precisar abrir o navegador.




 O Aplicativo possui menos de 1 megabyte de tamanho e consome pouca CPU. Possui interface compacta, é exelente para escutar musicas, sem atrapalhar o desempenho nem as tarefas no computador. Não requer instalação e nenhum tipo de pré-configuração, pode ser colocado em pendrives. Para desinstalar apenas mova para lixeira, nenhum tipo de rastro é deixado no computador.


Voce pode fixar a barra de tarefas do seu computador e pronto, você pode curtir o melhor da rádio JovemPan a um clique de distancia! Você pode selecionar a transmissão da cidade que voce quer escutar.

Para alterar clique no nome da Cidade.
Em breve mais cidades serão adicionadas.
* São Paulo
* Belo Horizonte

 Este aplicativo não é oficial! É apenas um "fan" player.
Site oficial: http://jovempanfm.com.br/

 Pré-requisitos:
+ Computador rodando Windows XP / Vista / 7
+ Conexao com a Internet
+ Earphones / Headphones ou Speakers
Flash Player
+ Windows Media Player

Aviso:
     Ao baixar e utilizar o aplicativo, você concorda com o termo acima.






Sunday, August 7, 2011

EasyDeclare

Since I started programming in Delphi, I always hated the way that is declared functions and procedures, so I created a small application that generates a standard code. With a GUI is more intuitive to declare a function. And yes! this is an application for lazy.
In the future I intend to make an app that generates more code, not just an empty function.
I'm open to any suggestion.
Sorry, but this time I do not have a version in Portuguese. US version only.
 







Monday, January 31, 2011

Updates comming

Hello,

I'm writting this to keep this blog up to date, not a true update but just to not leave the blog abandoned.

So, i'm working a lot with Javascript, and major updates is comming to all of my Gadgets, iBattery, iSignal and iSearch, and on a fourth new Gadget to my collection.
This post, is why the gadgets update is taking longer than I wanted, but when I started coding I decided to re-write the entire source-code, that is for improvements reasons, and maybe to continue in my self-journey in learning programming, so i decided to keep all the code clean and Object Oriented, and I'm writting my own API's, that means no thrid part libraries or codes is used, all written by me. Wondering what's is the difference? this is change what? simple, no unecessary code is used, when a ready library is used this never happen, and I have all the source code under my control, this is much easer when we need something new in a program.

So if you have any suggestions, any ideas, some feedback to help me to make any improvements, Please, do not hesitate to tell me, using the "Contact" link.

Thank you for comming!

Victor.

Saturday, August 28, 2010

iSignal


iSignal Gadget Monitor Wireless Signal Level.


Still working after resume of sleep/hibernate.
Auto Refresh when disconect or change of network.





  • New engine!
  • Show Signal Percent.
  • Show SSID.
  • Show IP Address.
  • Changeable color. (Blue,Red,Green,Orange,Pink)
  • With Flyout Panel.















Change Log (1.1):
- Added IPv6.
- Bug fix in wireless networks with SSID longer than 18 characters.
- Bug fix in wireless networks with SSID longer than 20 characters on flyout panel.
- Flyout background changed to match the style of the gadget.
- Some minor changes in CSS of flyout panel.


Change Log (1.0.1):
- Correction of some typos.


Change Log (1.0):
- First release.




Download Now