image

Creating an Ubuntu Live-CD Image

Recently I had the need to re-image some machines a few times in just a period of a week.
When re-imaging just one machine the process of installing the OS, all the updates and extra software is not that bad.
However, when that becomes a routine it can take up some time.

For most of the time I’m having to deal only with Ubuntu, so to solve that problem I installed the OS and all the updates available and also a few extra software packages that I normally use from the get go to create a baseline installation.

So whenever the need arises to re-image a machine or install a fresh copy of Ubuntu, instead of going through the same tedious process all over again, all it takes is to plug-in the pre-built disc image containing the baseline installation of the OS

The steps to create an ISO of the OS to be used as a distro or simple as a backup can be done through the software Remastersys.
In their website they have a short guide explaining the process:

The Synaptic Method:

  1. In Firefox, go to :

http://www.remastersys.com/ubuntu/remastersys.gpg.key

save file as text someplace where you can find it.

  1. In synaptic, go to Settings/Repositories; select “Authentication” tab and “Import Key File” just downloaded.

  2. Still in synaptic, go to “Other Software” tab and click “Add”, then enter the apt line and replace oneiric with either lucid, maverick, or natty to match your Ubuntu version:

    deb http://www.remastersys.com/ubuntu precise main

    or if you are using quantal

    deb http://www.remastersys.com/ubuntu quantal main

  3. Leave the repositories tab and “Reload”.

  4. Search for “remastersys” and select the packages you want to install. Edit/Apply Marked Changes.

The Manual Method

As root – issue ‘sudo su’ in the terminal window prior to the following command.

Download and apply the repository gpg key.

sudo su
wget -O – http://www.remastersys.com/ubuntu/remastersys.gpg.key | apt-key add –

Add the following line that corresponds to your version of Ubuntu to your /etc/apt/sources.list

Remastersys Precise

deb http://www.remastersys.com/ubuntu precise main

Remastersys Quantal

deb http://www.remastersys.com/ubuntu quantal main

Now just apt-get update or reload in Synaptic to have the new Remastersys signed repository ready to use!

The main package you will need to install at the very least is “remastersys”. This is the base package with the cli version of remastersys.

If you want the official remastersys gui, install “remastersys-gui” as well which will provide you with a gui that has more features and a menu item for it.

There is also an alternate gui written in python called “remastersys-gtk” that is available.

Both will provide you with a gui that makes it much easier to use remastersys.

Links:
Link of the tutorial above
Creating custom distros with Remastersys

Creating a bootable USB drive on Mac OSX

Below are the steps needed to create a bootable USB device:

1.Download/create the ISO file you want to load in the USB

Once you have the ISO then it is time to convert to an image file:

[sourcecode]
hdiutil convert -format UDRW -o ~/path/to/target.img ~/path/to/ubuntu.iso
[/sourcecode]

Breaking down the command:
hdiutil description:

hdiutil uses the DiskImages framework to manipulate disk images. Common verbs include attach, detach,
verify, create, convert, compact, and burn.

The -fomat argument specifies the format of the image you want to create, by default UDZO is used.
UDZO stands for “UDIF zlib-compressed” image and UDIF is an acronym for Universal Disk Image
More info about UDIF
However, instead of UDZO we’ll use the format UDRW (UDIF read/write image)
More info on disk image formats

The argument -o defines where the image will be savedScreen Shot 2013-01-21 at 10.19.07 AM

2. Copy the image to the USB device

Before copying the image, find where the usb device is located by running:

[sourcecode]
diskutil list
[/sourcecode]

diskutil description:

diskutil manipulates the structure of local disks. It provides information about, and allows the
administration of, the partitioning schemes, layouts, and formats of disks. This includes hard disks,
solid state disks, optical discs, CoreStorage volumes, and AppleRAID sets. It generally manipulates
whole volumes instead of individual files and directories.

Once you find where the device is located run:

[sourcecode]
diskutil unmountDisk /dev/diskN (N is the number of the device)
[/sourcecode]

Now that the image is created and the usb device is in place it is time to copy the image to the usb:

[sourcecode]
sudo dd if=/path/to/image.img of=/dev/diskN bs=1m
[/sourcecode]

The dd command will copy everything from the standard input to standard output

The if argument is to specify the input
The of the output
And the bs the block size of the data that will be copied, in this case it’s set to 1M, or 1024 bytes
Screen Shot 2013-01-21 at 11.35.02 AM

Once the dd command is finished, a popup window might show up:
Screen Shot 2013-01-21 at 11.34.51 AM

Just to make sure check if the usb was ejected:

[sourcecode]
diskutil list
[/sourcecode]

Find where the device is located and if it is still there:

[sourcecode]
diskutil eject /dev/diskN
[/sourcecode]

That’s all, you should have a bootable USB device by now :)

Links:
Install Ubuntu using USB drive
hdiutil man page
diskutil man page
dd man page
dd command info
Disk Images

Inspecting an Image object

To inspect all the properties of an image object, I first created an object with javascript.Then set the source to an image url, and for testing purposes created a new property in the object

     
 var img = new Image();  
 img.src = ‘gnu-head.jpg';  
 img.NewAttribute = ‘Adding new attr';  

Then I tried to loop through all properties of the image object, and dump the content of its keys in the page. For some reason, when I did that the page simple didn’t load. It just gave this error on the console : Uncaught Error: HIERARCHYREQUESTERR: DOM Exception 3

I started debugging and found that whenever one of the keys in the Image object was an object. Dumping its values on the screen would throw the HIERARCHYREQUESTERR

I then added an if statement to check if the key wasn’t an object and then dump the content of the key. If the key was an object I added to an array so I could inspect later on the console
It worked, I could see all the keys and its values.

    
 $.each(img, function(index, value) {  
 if (img.hasOwnProperty(index)) {  
 $("#dump").append(index + ": ");  
 if (typeof value !== ‘object’) {  
 $("#dump").append(value);  
 }  
 else {  
 console.log("objArr[" + (counter++) + "]: " + index + ": " + value);  
 objArr.push(value);  
 }  
 $("#dump").append(‘

‘);  
 }  
 });  

So I started digging to find why when I dumped a key that had an object in it was crashing the page.
On the console I started inspecting all the objects

I was surprised to see that inside the image object was the document object and the body element.

But then I realized that all the objects the image had stored in itself, were references to other objects in the page. That’s how the DOM navigation happens. Each element has references to other elements, so then you can go back and forth and navigate through all elements in the DOM.

The goal for all this is to create from scratch an image object with just enough functionality to work inside a webworker. And by doing so loading images in the worker, and then sending them back to the main page.

Here is the dump with all the properties of an image element:

NewAttribute: Adding new attr
scrollHeight: 0
complete:
spellcheck:
nodeType: 1
clientLeft: 0
offsetParent: [object HTMLBodyElement]
offsetWidth: 0
isContentEditable:
hidden:
lowsrc:
children: [object HTMLCollection]
previousElementSibling: null
localName: img
ownerDocument: [object HTMLDocument]
webkitdropzone:
nodeValue: null
lastElementChild:
height: 0
x: 8
offsetLeft: 8
tagName: IMG
className:
prefix: null
innerHTML:
border:
namespaceURI: http://www.w3.org/1999/xhtml
width: 0
crossOrigin:
id:
childElementCount: 0
scrollLeft: 0
longDesc:
lastChild: null
innerText:
clientHeight: 0
align:
textContent:
nextSibling: [object HTMLBRElement]
scrollWidth: 0
useMap:
vspace: 0
offsetHeight: 0
name:
clientWidth: 0
nodeName: IMG
style: [object CSSStyleDeclaration]
lang:
src: http://workspace.local/gladiusHacks/gnu-head.jpg
scrollTop: 0
offsetTop: 13
childNodes: [object NodeList]
baseURI: http://workspace.local/gladiusHacks/imageInspec.html
nextElementSibling: nextElementSibling: [object HTMLBRElement]
classList:
title:
firstChild: null
dataset:
hspace: 0
isMap:
alt:
outerText:
parentNode:
clientTop: 0
naturalWidth: 0
tabIndex: -1
naturalHeight: 0
contentEditable: inherit
dir:
outerHTML:
attributes:
previousSibling:
parentElement:
firstElementChild:
draggable:
y: 13

All the bold attributes are the ones listed on the w3c page http://www.w3schools.com/tags/tag_img.asp

The attributes in italic and underline are the ones that provide the DOM navigation.

offsetParent: [object HTMLBodyElement]
children: [object HTMLCollection]
previousElementSibling: null
ownerDocument: [object HTMLDocument]
lastElementChild:
nextSibling: [object HTMLBRElement]
childNodes: [object NodeList]
nextElementSibling: nextElementSibling: [object HTMLBRElement]