December 2011
Messing around w/ HTML5: drag-n-drop
Submitted by mmorsi on Fri, 2011-12-23 00:25In my last html5 blog post we explored using the canvas to recreate a simple version of pong. This time around we'll be using the drag-and-drop features of HTML5 for a simple example. Note I'm pulling in the JQuery UI library to take care of alot of the details and provide a easy-to-use interface to use drag-and-drop.
In this example, we have a list of images which we'd like to pull into a common area. The thing is, the original list should be preserved, once dragged-in, an image should not disappear from its original location.
This is accomplished by using jquery to set the images in the list to being draggable (this registers the necessary event handlers), and to make the common area droppable, eg able to receive draggable objects. JQuery allows us to set the 'helper' attribute, which defines the element being dragged around, to the predefined 'clone' value which makes a copy of the original element. From there we expand the container div to accept only the elements we want to drag in, and override the 'drop' method to set various properties allowing us to position and style the dropped element any way we would like.
All in all the effect is the following:
And the source producing this:
<div id="jquery_drag_drop_example_container"
style="width: 300px; height: 300px; background: #C0C0C0; float:left;">
</div>
<div style="background: #FFFF99; float:left; width: 20%; margin-left: 10px;">
<ul style="list-style-type: none; list-style-position: inside;">
<li><img class="jquery_drag_drop_example_img" src="example_0.png" /></li>
<li><img class="jquery_drag_drop_example_img" src="example_1.png" /></li>
<li><img class="jquery_drag_drop_example_img" src="example_2.png" /></li>
<li><img class="jquery_drag_drop_example_img" src="example_3.png" /></li>
<li><img class="jquery_drag_drop_example_img" src="example_4.png" /></li>
</ul>
</div>
<div style="clear: both;"></div><script type="text/javascript"> $(function(){ $('.jquery_drag_drop_example_img').draggable({ helper: 'clone', }); $('#jquery_drag_drop_example_container').droppable({ accept: '.jquery_drag_drop_example_img', drop: function(event, ui){ var newitem = $(ui.draggable).clone(); $(this).append(newitem); $(newitem).addClass("jquery_drag_drop_example_img_clone"); $(newitem).removeClass("ui-draggable jquery_drag_drop_example_img"); $(newitem).draggable({containment: 'parent'}); $(newitem).css('position', 'absolute'); $(newitem).css('top', ui.position.top ); $(newitem).css('left', ui.position.left); //alert(event.dataTransfer.getData('text')); } }); }); </script>
Thats it until next time. Hope everyone enjoys the holidays!
- mmorsi's blog
- Login to post comments
- Read more
Snap! Updates
Submitted by mmorsi on Tue, 2011-12-20 01:51
Alot of great development on Snap! recently. Here are some updates (see the commit log for the full list):
- incorporated full test harness
- many documentation improvements / fixes
- many code cleanups / optimizations
- starting adding ability to migrate snapshots between OS's (for example Ubuntu to Fedora and vice-versa)
- pushed snap into Fedora! (simply install via 'yum install snap' on Fedora15+ and RHEL6, should be pushed into Debian / Ubuntu soon)
Stay tuned for more updates!
- mmorsi's blog
- Login to post comments
- Read more
Various Quick Tips
Submitted by mmorsi on Mon, 2011-12-19 14:47
Just a bunch of random quick tips, posted together for conciseness
---------------------------
Passwordless SSH'ing as root
When writing the test harness for Snap I needed to setup a few vms which I could ssh into as root automatically, without being prompted for a password. True, I could've setup a ssh key and install that on the vms, but instead for simplicity I wanted to be able to ssh in w/out requiring any credentials (yes insecure, but these VMs are isolated and the test harness makes sure they are shutdown post-invocation).
On Fedora/Ubuntu this is accomplished by:
- editing /etc/ssh/sshd_config an setting 'PermitEmptyPasswords yes'
- Ubuntu requires one additional config change, to /etc/pam.d/sshd, namely comment out '@include common-auth' and replace with 'auth required pam_unix.so nullok'
- restarting ssh: 'sudo service sshd restart'
- setting sshd to come up automatically 'sudo chkconfig --levels 35 sshd on'
- finally delete the root user's password 'sudo passwd -d root'
Now you can ssh root@<ip_address> to login as root w/out a password (obviously use with caution).
Incidentally this is also a means to get a root shell on Ubuntu, which by default does not allow this, requiring the user to run all privileged commands through 'sudo'
---------------------------
xbacklight
I've run into a problem w/ the backlight not resuming normal operation after my laptop has been dock'd. This seems to be a common issue, even on the Linux friendly Lenovo Thinkpad laptops.
After some debugging I was able to resolve this by installing the 'xbacklight' package and running 'xbacklight -set 100'.
---------------------------
C Data Structure Visibility Practices
I've been getting back into C programming (more on this soon). Of course w/ a lower-level language (C is actually a high level language, though usually considered low-level, but I digress) there are many approaches / ways to do things, especially concerning data visibility. Studying the libvirt library header file, I found one useful standard is to:
- define public data structures, eg structures which can be manually instantiated by the user, as you normally would, eg
typedef struct _myData{ ...fields... } myData; typedef myDataPtr *myData;
- define private data structures, or data which can only be instantiated by calling one of your methods, w/ forward declerations in the public header, with the private definitions residing in an internal-only header/implementation file, eg
typedef struct _privateData privateData; typedef privateDataPtr *privateData; privateDataPtr createPrivateData(...params...);
- define public data structures refering to data managed / manipulated by an external entity, as 'info' structures, (these will often be associated w/ private data in some way) eg
typedef struct _externalDataInfo { ...fields about data managed elsewhere... } externalDataInfo; typedef externalDataInfoPtr *externalDataInfo; externalDataInfoPtr getExternalDataInfo(privateDataPtr private_data);
---------------------------
Per Host SSH Key
Many thanks to jkeating for this pro-tip. To set which ssh key to use on a per-host basis, simply create a ~/.ssh/config file (chmod'd to 600) containing the following contents:
Host <hostname>
IdentityFile <path-to-ssh-key>
Also optionally specify 'User <username>' to not have to prefix your remote username to the hostname when logging in w/ a username different than your local one.
---------------------------
- mmorsi's blog
- Login to post comments
- Read more
libvirtd default network on a vm
Submitted by mmorsi on Mon, 2011-12-05 16:12
$ sudo virsh net-destroy default
This is because otherwise the addresses of the libvirt created networks running on the vm and your host machine will clash and cause conflicts / routing errors.
Hope this helps!
- mmorsi's blog
- Login to post comments
- Read more










