Easy Enyo Checkbox Labels

In a recent Enyo project I needed a labeled vertical group of checkboxes for setting the app’s preferences. I was hoping that I could just put a bunch of onxy.Checkbox components from Enyo’s Onxy widget library inside a Group component and use the content property of each checkbox as its label. This is the code:

Unfortunately, the results weren’t quite what I expected:

checkboxes-nocss

The content text was displayed inside the checkbox and the checkboxes were positioned horizontally instead of vertically. Happily, just a little bit of CSS solved the problem:

With the above CSS, the checkboxes were displayed just as I was expecting:

checkboxes-css

So, how does it work? An Onyx checkbox is just a DIV tag with a background image which displays its state (checked or unchecked). First, we set each checkbox to display:block so that it appears on its own line. Next we give it a width:auto so that it takes up the entire width of its containing element. To get the label text (the checkbox’s content property) out of the checkbox itself, we use padding-left to move the text to the right. to vertically center the text, we set the line-height to the height of the checkbox.

While we’re playing around with the CSS, we’ll add some margins to give some extra space between the checkboxes and the containing element.

A nice side effect is that the user can tap on the label as well as the checkbox to select it since the checkbox DIV is now the width of the containing element.

Tested in Windows on Chrome version 25, Firefox version 19 and IE 10 and on Android Chrome version 25.

Tags: , , , , , ,
Posted in mobile, projects, web | 1 Comment »

Peggy 2 Chronodot Clock

The other day I added a Chronodot to my Peggy 2, using the Evil Mad Scientist blog post Peggy 2: Adding a Chronodot as a guide. Instead of buying the 4 pin female header connectors used in the blog post, I used an 8 pin DIP socket from my parts bin that I cut in half with wire cutters and cleaned up by filing it down a bit.

I had written a clock program for Peggy a while back, but it used millis() to keep track of time, which wasn’t as accurate as I would have liked. The time also got reset whenever Peggy lost power. The Chronodot fixes both those issues. Chronodot Clock is a modified version of my original Peggy 2 clock program to read the time from the Chronodot using the Arduino-Chronodot library. It is available on GitHub and on my Peggy 2 Projects page.

Peggy 2 with Chronodot

Peggy 2 with Chronodot

Chronodot Clock

Chronodot Clock

8 Pin DIP cut in half

8 Pin DIP cut in half

8 Pin DIP soldered into Peggy's proto area

8 Pin DIP soldered into Peggy’s proto area. Ignore the round hole from a previous project that didn’t quite work out.

Tags:
Posted in electronic, projects | No Comments »

Enyo 2 Spin For It App on Open webOS and Android

I play a lot of board games and usually the player who goes first is chosen randomly. Rolling a die or Rock, Paper, Scissors are popular ways of doing that. At one game night a player pulled out a little die cut metal pointing hand, placed it on the table and spun it to determine who went first. I thought it was a handy (pun intended) little thing to have, but decided to go one better and create a virtual spinning hand in an app. And that’s how Spin For It was born.

The original app was written for Palm’s (and later HP’s) webOS phones and was written in JavaScript. The second iteration was written in C# for Windows Phone 7. There are project pages for both versions of Spin For It on this site.  Now I’m working on a third iteration using the Enyo 2 JavaScript framework so that the same code will run on multiple device platforms.

I played around with an Enyo 2 version of Spin For It a while back, but didn’t go far with it. However, two recent developments prompted me to take another look at my Enyo 2 Spin For It. The first development was getting Open webOS up and running in VirtualBox and the second was getting a Nexus 4 Android phone to replace my aging Windows Phone 7 phone. I wanted something simple that would show off an app written with Enyo 2 running on different devices with different screen resolutions and operating systems. I also wanted a new version of Spin For It for my new phone, but didn’t want to invest in learning Android development in Java just for a simple app. So, after tweaking the code a bit to resize the pointer based on the screen size, I was ablt to geit it working in both Open webOS and Android by running my app through PhoneGap Build to package it up for Android and copying the application folder over SSH to /usr/palm/applications on Open WebOS running in VirtualBox.

Spin For It still needs some work to get it up to the level of the previous webOS and Windows Phone versions, but it’s workable as-is and my interest has been renewed in adding the features from those previous versions. I’ll create a project page for it once it’s farther along. Meanwhile, I have put the source code up on GitHub.

Links:

Screen Shots:

Open webOS Spin For It running in VirtualBox

Open webOS Spin For It running in VirtualBox

Android Spin For It running on a Nexus 4

Android Spin For It running on a Nexus 4

 

Posted in mobile, projects | No Comments »

Pages for Windows Phone 7/8 apps added

I added pages for two apps I wrote for Windows Phone 7/8 to the site.

Posted in dragongears news, products, Windows Phone 7/8 | No Comments »

RGB LED Glow Ball Project page added

ATtiny2313 RGB LED Glow Ball Project

I added a page with a description of my RGB LED Glow Ball project. It is one of my favorite projects because it’s simple and turned out even better than I planned. I ended up making two more glow balls that I gave to my nieces for Christmas.

Posted in dragongears news, electronic, projects | No Comments »

Dragongears news RSS feed