The Menu with Image plugin displays a header image at the top of a list of navigational
options in rows. Touching each row will load a new screen or action. On each row
you can include an icon or small image, a line of title text, and a description line.

New in version 2.0:
-added the ability to include an icon or small image on each row. Only one image is
     required for all devices. There is no need to add the @2x images for iOS.
-added the description line, which displays in smaller text underneath the
     title line
-added iAd (iOS only)

New in version 2.3
Updated for the Android 3.0 Core

New in version 2.4
Correction of some errors in the code.

New in version 2.5
Updated to correct a problem with how iOS7 displays the description text in Buzztouch iOS 3.0 Core.

New in version 2.6 Updates for iOS 7 and Control Panel

New in version 2.7 Updates to iOS7 code.

New in version 2.8 Corrected a bug with the child items.

New in version 2.9 Corrected a bug with how the headerImage saves.

New in version 2.10 Improved the offset of the description line for iOS6.

New in version 3.0 Added the ability to have three image sizes: Small, Medium and Large. In addition, I improved the Title Text spacing on Android rows.

New in version 3.1 Two enhancements: 1)Added the ability to set a color behind the background image. This is useful for iOS devices when they rotate, because the color will stretch to the edges. It is also helpful in Android where to help accommodate the way the various devices interpret the code and settings. 2) Added the ability to set the opacity of the background image. This allows a background image to show through the header image.

Version 3.2 Corrected timing of Android header image animation to a half second.
See line 591 of the .java file if you would like to adjust this.

Version 3.3 Minor adjustments to Android titleText to allow it to be on two lines and also be centered if there isn’t title text. Changed the selection color to gray from blue—see line 180 if you would like to change to another color.

Version 3.4 Corrected a problem with the table layout in landscape in iOS8 (compiled in Xcode 6).

Version 3.5 Corrected another problem with header layout in landscape in iOS8.

Version3.6 Changed the default Android list color to white and the default text color to dark. Setting a background list color avoids the black flashing on Samsung devices.

Version 3.7 Corrected the UITableView layout for iOS iPhone 6 Here is the new line 204 [self.myTableView setFrame:CGRectMake(0, headerImageHeight + top, headerImageWidth, deviceHeight - headerImageHeight)];//sjm

Version 3.8 Updated plugin to work with Buzztouch 4.0 for iOS only. Android update is coming soon.

Version 3.9 Updated plugin to work with Buzztouch 4.0 for Android as well as iOS.

Version 3.10 Made a correction to Android java file.


INSTRUCTIONS

Header Image: Prepare an image that is 1536(w) x 720(h) pixels in a png format
for the Large size image. For the medium size, use 1536 x 400, and for the small
size use 1536 by 245.

The header image can have a transparent background. In fact, if possible use an image
with a transparent background, because this will work best on Android devices where the
aspect ratio can change across devices.

The image will automatically stretch across the width of all screens in portrait mode.
In landscape mode, the image will remain in the same size as the portrait mode. If you use a picture
with dimensions other than the recommended sizes, the image will be placed at its
maximum size without distortion. There is no need to create the @2x files for your
iOS project.

Use all lower case image names (an Android requirement). Do not use
image file names that contain spaces or special characters. It is not necessary to
prepare the @2x images for the iPhone and iPad for this plugin.

Note the instructions below for adding the image to your Xcode or Eclipse project.


Settings in the control panel:

1. Add rows to the menu list: Adding a row to the menu adds a new screen or action to
your project. The Row Title is what will display in the title of the row. Choose a
unique nickname for the screen. As an alternative, with this plugin you can pull menu
items from a remote file using the Screen Data URL. After you add a row, you can add
an icon and a row description.

2. Screen nickname: This field will already be populated, but can be changed in the
event that you receive a warning that two screens have the same name.

3. Top Navigation Bar: Use this to change the default settings.

4. Require Login: Use this require a login for the screen. For advanced buzztouch
developers.

5. Screen Background Color: Select a background color for your screen. You can
enter "clear" for transparent color, "stripes" for the native iOS effect, or a
hexadecimal number. (Do not use the quotes around your entry.)

6. Screen Background Image: Enter your image file name OR the image URL. In addition,
you can choose the scale and position of the image.

7. Header Image: Enter your image file name OR the image URL.

8. List Layout and Color: Modify the default row background color, font title
color, row select color, and row separator color. You can also override the default
list style of square corners with rounded corners, and override the default that
allows for scrolling of the list.

9. List Row Height and Font Size: Modify the default sizes for the row height,
title height, title font size, description font size, list header height, and list
footer height.

10. Screen Data URL: With this plugin you can manually enter individual menu items
or you can pull menu items from a remote file using the Screen Data URL. For
advanced developers.

11. iAd Advertising Option: Set iAd for your iOS projects


INSTRUCTIONS FOR iOS PROJECT
------------------------

*Drag your image into the BT_Images file in your Xcode project.

The files you need for this plugin are automatically included in the project
package you download from the Download Source Code screen in your control panel.
The files are in the folder named, "wb_screen_menuImage", and include the
WB_screen_menuImage.h and WB_screen_menuImage.m files.




INSTRUCTIONS FOR ANDROID PROJECT
------------------------

*Drag your image into the res -> drawable file in your Android project.

The files you need for this plugin are automatically included in the project package
you download from the Download Source Code screen in your control panel. There
are three files for this plugin:

1) in scr -> com.YOUR_PROJECT_NAME, you will find the file: WB_screen_menuImage.java

2) in res -> layout, you will find the file: wb_screen_menuimage.xml, wb_screen_menuheader.xml and wb_screen_menuimage_row.xml

Note: While it is possible to have icons on some rows and not others, the results can be inconsistent. The plugin will work best if you either use an icon on all rows or no rows.

Note: On some Android devices, the background turns black while scrolling. This problem can be avoided by setting a row background color.

JSON Data
------------------------

If you manually enter the menu item data, the JSON data for this item in the BT_config.txt
includes a child items array holding individual BT_menuItem items. Each item produces a row.


     "BT_screens":
{
     "itemId":"1111",
     "itemType":"Menu_with_image",
     "itemNickname":"Home Screen",
     "navBarTitleText":"Home Screen",
     "navBarBackgroundColor":"#330066",
     "navBarStyle":"solid",
     "navBarRightButtonType":"infoLight",
     "navBarRightButtonTapLoadScreenNickname":"Rabbits",
     "navBarRightButtonTapLoadScreenItemId":"3333",
     "navBarRightButtonTapTransitionType":"fade",
     "imageFileName": "my_picture.png",
     "headerImageSize":"Large",
     "listRowBackgroundColor":"#9900FF",
     "listTitleFontColor":"#660000",
     "listDescriptionFontColor":"#003300",
     "listRowSeparatorColor":"#FFFF00",
     "listStyle":"round",
     "preventAllScrolling":"0",
     "listRowSelectionStyle":"gray",
     "listRowHeightSmallDevice":"80",
     "listTitleHeightSmallDevice":"35",
     "listTitleFontSizeSmallDevice":"20",
     "listDescriptionFontSizeSmallDevice":"12",
     "listRowHeightLargeDevice":"70",
     "listTitleHeightLargeDevice":"35",
     "listTitleFontSizeLargeDevice":"22",
     "listDescriptionFontSizeLargeDevice":"16",
     "backgroundColor":"#CCCC00",
     "includeAds":"1",
     
     "childItems":[
{
     "itemId":"menu_1",
     "itemType":"BT_menuItem",
     "titleText":"This is row 1",
     "loadScreenWithItemId":"1234",
          "descriptionText":"My description text",
          "iconName":"magnify.png",
          "rowAccessoryType":"none" },
{
     "itemId":"menu_2",
     "itemType":"BT_menuItem",
     "titleText":"This is row two",
     "loadScreenWithItemId":"5678" ,
          "descriptionText":"My description text",
          "iconName":"magnify.png",
          "rowAccessoryType":"none" }
]
}

If you provide menu item data from a remote file there is no childItems array in the
screen definition in the BT_config.txt file. Instead, the menu items are pulled from a
remote file.

{
"itemId":"1111",
"itemType":"Menu_with_image",
"navBarTitleText":"My Simple Menu",
"dataURL":"http://www.domain.com/theMenuItemData.php"
}

In this case the menu items would come from a backend script at the dataURL. Loading
the dataURL in your browser would produce output like this....

{
"childItems":[
{
"itemId":"menu_1",
"itemType":"BT_menuItem",
"titleText":"This is row 1",
"loadScreenWithItemId":"1234"
},
{
"itemId":"menu_2",
"itemType":"BT_menuItem",
"titleText":"This is row 2",
"loadScreenWithItemId":"5678"
},
{
"itemId":"menu_3",
"itemType":"BT_menuItem",
"titleText":"This is row 3",
"loadScreenWithItemId":"2948"
}
]
}


Note: If using a URL, use: "imageURL":"http://mypicture.com/myimage.png", instead of "imageFileName": "my_picture.png",