26
October
2006
Quite a while ago now in fact I was working on some sexy CSS buttons. Not only did I want them to look good, I also wanted them to be bulletproof, elegant and technically simple but visually complex, with minimal image usage all at the same time.
Why are these buttons bulletproof? The actual dimensions are set to grow and shrink based on text size and the images are placed using spans, so that the icons can be themed. There is not one single img tag to be seen, it relies on background images, which right now can’t be scaled because CSS doesn’t yet support background image scaling. The button can still be readable without any images being present, because the text, is erm, well it’s text and so aids speech readers and search engines. Why create buttons out of images and place the text in the image? Surely only a webmaster with limted time would hard code the text inside the image in photoshop (please ignore my site header).
See the buttons in action on this page.
All code contained within the example page
Aside from all the niceness I wanted to allow a server side team to easily include the CSS and related HTML and change the orientation of these buttons based on selecting a class name. I chose to use unordered lists so that without CSS the links, which is essentailly what the buttons are, would still function. Plus of course the UL structure allows me to change the orientation of the buttons in CSS, by stating “display : inline”, or “display : block;”.
The main aim I had in mind was trying to visually tell the user when they had already clicked on one of these buttons and I did this using the pseudo class “:visited” on the a selector, to choose a different icon, of course this works in IE6 too because the a selector is the only thing IE6 supports this technique on. Beautiful code, well tested, well conceived, using bulletproofing to ensure the elements look right in any circumstance and the design isn’t too bad either, who said these had to be square, they could be splodges of paint on a childs painting game.
Filed under: Code, CSS | No Comments »
26
October
2006
Recently I have bashed togther a windows based PVR system which records straight to Divx, which you can see in action here, that’s the background.
So yeah I was bored of getting up to use the keyboard to navigate around mplayer. So within five minutes I had a bluetooth HID (Human Interface Device) profile for my mobile phone, which maps the relevant phone keys to the computers keyboard. Quite niffty eh, who needs one of those pesky “one for all remotes” anyway?
You can download the hid profile here to try yourself, if you have Mplayer of course. You’ll have to bluetooth the file to your phone for best reults. I use the Sony Ericsson W810 walkman phone and the Belkin 10m bluetooth USB dongle, which actually still allows me to control mplayer from downstairs, even though the PC is upstairs!! Oh you may also need the screen image which is here.
Welcome to Lazy Town!
The joypad left and right jogs playback by 10 seconds, up and down by 60 seconds with the centre button being play/pause. Volume control is mapped to the phones erm, volume control buttons and there’s a range of niffty actions in there like playback speed of 4 times normal speed, the ability to go full screen, to cycle frame dropping modes, to bring up the OSD, to mark EDL points for advert breaks and the list is almost endless. Mplayer is extreamly flexible in its control, I just got tired of using the computer to control it that’s all. Hey it’s fun to play with stuff like this too.
The playback in GB-PVR is rubbish which is why I use mplayer, mainly because I know a heck of a lot of those little tricks you can do with filters and -vf this -ovc that.
Cutting out the adverts
It doesn’t stop there, oh no, I have a collection of mencoder scripts, which will to take a recorded TV show from a suitable PVR system (such as GB-PVR), set edit points to an EDL file when I press the ” i ” key, which I have to refine and clean up. The “chop” script can use the EDL file to skip over time periods, say from 300 seconds to 500 seconds, thus cutting out adverts it can then transcode and change the bitrate and aspect of that TV show and clean it up by adding blur or sharpen filters. Why do this? So I can cut out the adverts of course and set the aspect to work on a widescreen TV downstairs, when burned to a data DVD. Our DVD player can play Divx files and those scripts produce files which work in Windows Media Player as long as Divx is installed. It’s also nice to clean up file sizes and squish as much as possible onto a DVD.
Filed under: Code, Projects | No Comments »
