Simulator Skins for Ryuzine Machine are really easy to create!

Probably the easiest way is to download one of the existing skins and modify it.  Skins really only consist of (minimally) two images and a stylesheet.  You can optionally add a background image to be shown behind the simulated device.

You really only need one really good, face-on image of the device you want to simulate.  Then, in Photoshop or GIMP you need to scale it until the screen size of the device image is correctly scaled to browser pixels.  This can be a little tricky since devices use "dips" (device independent pixels) not actual pixels and devices often "lie" about their screen dimensions (for example an iPhone 4 has a 640x960 actual pixel screen, but it "blows up" all web content by 2x, so to simulate how the Ryuzine publication will look on an iPhone 4 you still use 320x480).

1. Create a new image that is just a black background and scale it to the desired pixel width and height @ 72 dpi.
2. Copy and paste that image as a new layer in your device image file (centered).
3. Scale the device image layer until it's screen area matches the black screen layer.
4. If you want more dimensionality make sure the device image has a transparent background and add drop-shadow
5. Save as a transparent PNG
6. Rotate 90 degrees (clockwise or counter-clockwise doesn't matter) and save for the other device orientation.

Now, open the "skin.css" stylesheet file in a plain text or code editor.

In the header there is a comment section with info about the skin like:

/* New Device Skin Name*/
/* @ Ryuzine Machine*/
/* @ version 0.9.3*/
/* Width: 1024*/
/* Height: 768*/

 The "@ Ryuzine Machine" indicates this is a skin for the Ryuzine Machine authoring app, the "@ version 0.9.3" indicates the minimum version with which this skin works.  The "Width" and "Height" are the pixel dimensions of the screen of the simulated device.

Below that you have the actual classes that need to be defined:

.simbox {} = the background behind/under the simulated device

.device_tablet_port {} or .device_phone_port {} = the size and positioning of the device/bezel in portrait orientation.  This minimally must include:

top: 50%;/* first step of vertical centering */
left: 50% ;/* first step of horizontal centering */
height: 1297px;/* height of the portrait device image you created */
width: 1031px:/* width of the portrait device image your created */
position: relative;/* do not change this to "fixed" or "absolute" */
margin-top: -648px;/* 2nd step of vertical centering.  Always negative half the image height. */
margin-left: -515px;/* 2nd step of horizontal centering.  Always negative half the image width */
background: transparent url('YourImage_portrait.png') 0 0 no-repeat;/* The portrait image file name */

.device_tablet_port #screen {} or .device_phone_port #screen {} = the positioning of the simulated screen overlay on the simulated device image.  Needs to be scaled and align with the "screen" space of the device.

position: relative;
left: 134px;/* how far the screen is inset from the left edge of the device image */
top: 140px;/* how far down the screen is from the top edge of the device image */
width: 768px;  /* width of the simulated screen */
height: 1024px;/* height of the simulated screen */ 

Then you do the same thing for the landscape orientations, flipping the values for the height, width, margin-top, and margin-left:

.device_tablet_land {} or .device_phone_land {}
.device_tablet_land #screen {} or .device_phone_land #screen {}

And, lastly, you have to remember the simulated device image can be turned off and just the simulated screen shown, so we need to set the positioning without the device/bezel:

.device_none_port {
top: 50%;
left: 50%:
margin-top: -512px;/* negative half the screen height */
margin-left: -384px;/* negative half the screen width  */
}

.device_none_land {
top: 50%;
left: 50%;
margin-top: -384px;
margin-left: -512px;
}

 Then, just drop your portrait and landscape images (and a background image if you used one) and the "skin.css" file into a folder and name the folder after the device (in all lowercase with dashes or underscores instead of spaces).  Then put the folder in the "ryu_dev/skins/" sub-folder.

 

Adding Skins to Ryuzine Machine

There are two ways to add your new skin to Ryuzine Machine.  The first way is to hard-code it into the machine.config.js file list of devices:

var devices = 5;// Increase this one for each skin you add //

Then copy one of the existing arrays and paste it to the end of the section:

deviceList[n][0] = "YourDevice"; // Device Name
deviceList[n][1] = 1024; // Screen Width (landscape)
deviceList[n][2] = 768; // Screen Height (landscape)
deviceList[n][3] = 50;// StatusBar
deviceList[n][4] = 50 //Top Toolbar (Nav Bar)
deviceList[n][5] = 0; // Bottom Toolbar (Tab Bar)
deviceList[n][6] = "tablet"; // Device Profile (phone | tablet)
deviceList[n][7] = "Android3"; // Device OS
deviceList[n][8] = "my_device"; // Skin Folder Name

n = change this to the next incremental number in the array.

That will make the device skin available to all browsers and platforms running your copy of Ryuzine Machine.

The second way of adding skins is on a per-browser basis (they are added using a browser cookie file, so the device will only be available in that specific browser).  To do it this way use the [+] next to the device drop-down list and you'll see the "Add Custom Device" dialog box.  You'll see radio buttons and text entry boxes for all the same information in the array method above.

Enter your data and hit submit.  Your custom device will be immediately available in the drop-down list.