Custom HTML text screen

CUSTOM HTML text Screen, a deeper examination:

****************************************************
@David, The reason I recommend not to use the Custom HTML text screen is that it gives so many people trouble and it doesn’t seem to have a solution. Here @jonathanmiami is saying magic_quotes_gpc = Off is the solution, but you’re saying that’s not the problem. Happily I would blog about what to fix about the backend if we knew what to fix. Using the screen is best done by first having a copy of the file since it’s subject to sudden and arbritary loss. Now mind you I love using the editor (and would love it more of it was mobile friendly). But the uncertainanty of when it will work and when it will not had led me to no longer use it. I can accomplish same without it. For new users it’s frustrating because they’re unaware of the issues.

Perhaps I’m wrong but my understanding is that the screen simply allows the hosting of the file in a server, the server hosting the Control Panel in particular, with the use of the text editor.

If such is correct, then using my own text editor and placing the file online I accomplish same without the uncertainty.

An interesting issue came up the other day. The user need to refresh a dynamic page, but to do needed the pages URL. Don’t exactly remember the setup, but the solution was to not use the screen, but instead use a HTML doc screen via a URL. I assume the Control Panel was masking the URL making the page refresh a problem. This has nothing to do with the backend problem, but just opened up the question, how does the Control handle the URL?

So, my question is how to determine the problem and what’s the solution, otherwise I’ll just sidestep is issue by not using the screen.

Fred

****************************************************

@David a huge constant bug report is the editor not saving the information/code sometimes. It’s caused me so many headaches this past… year?

This is why I do not recommend using custom HTML either unless you backup the html on your computer before saving and leaving the screen – it’s -extremely- erratic when it comes to saving and not saving.

It’s been established that the editor simply doesn’t work and needs fixing/updating/new one -however you guys have been busy (understandable) and haven’t been able to look into it yet (haven’t seen any replies on the bug reports about this). Would love to know if this can be looked at sometime soon!

* Best way to fix this for now is as Fred says: create a html document with another editor, upload it somewhere like drop box and use the custom url screen!

Hope all is well!

David buzztouchmods.com
******************************************************
By David @Buzztouch,

“Makes sense guys.

The only ongoing issue I’m aware of is the order in which the Save button is used. When the screen is re-visited and the Save button is used that NOT under the html / text entry box, like in the advanced settings, it doesn’t save the contents of the text / html entry. This is the way I understand it, could be different.

I’ll find some time to dig into this and update the plugin, we’ll go from there.

****************************************************

Diagnose and fixed @MadRod’s problem. It was NOT related to the “save button.” Here’s what I did…

a) I logged into the self hosted panel and looked at the funky screen. This is a Custom HTML / Text screen. I verified that the HTML was NOT SAVING. An img tag was empty and had no source after adding one then saving.

b) I entered a URL from a random image and saved. Refreshed the page, NOT SAVED. This verified the “not saving” issue.

c) I connected to the server with FTP and downloaded the html file that is created each time you click Save when working with HTML /Text. These files are stored in each applications documents directory. In this case:

/files/applications/[app id]/documents/customHTML_[screen id].html

customHTML_[screen id].html is the file. The file contained the data as expected BUT it contained some additional slashes surrounding the src attribute for the image.

d) Because the extra slashes are being added by PHP “automatically” using php’s built in magic_quotes routine, I adjusted the code to check to see if magic_quotes was on and if it was, I stripped these extra slashes. This was done in save_AJAX.php in the BT_screen_customHTML plugin folder.

I added this on line 195 of save_AJAX.php

if(get_magic_quotes_gpc()){

//remove automatically inserted slashes! $editorContent = stripslashes($editorContent);

}

e) I re visited the screen, added an image src then saved. Fixed.

I’ve added this to the plugin issue list and will get this update included with some other updates I’ve been trying to get released.

Advertisements

Buzztouch & Buttons, Yes We Got Buttons, :-)

BUTTONS, How To Get Started With Buttons:

Buttons Menu Screen or List Menu Screen? Generally I prefer buttons over lists for various reasons. Buttons are intuitive, 16 to 24+ buttons per screen view vs 7 or 8 list menu items. However some tasks lend themselves to list menus. Example, list of neighborhoods, street names, names in general. The following will show you how to create Buttons for a Buttons Menu Screen. Once you accomplish this you should be able to create different types of Button Menu Screens.

. . . it’s advisable to set the images for small and large images because any screen larger than 3.7″ is consider a large device.

Also check out these related posts:

Icons

Rectangular & Odd Shaped Buttons

A Study of Buttons

Custom Buttons

Here’s the quick and simple method to create your first buttons:

In Buzztouch:

1. Create a “Button Menu Screen”,

image

2. Go to “Add a Button to the Menu” section.

Add “Buttons Items” by:

a. Enter a nickname for the button in the “Button Text” box such as Button 1.

b. Enter a “screen name” for an existing screen in the “Load screen with nickname” box. Or,

c. Create a new screen by choosing  something from the drop-down list.

3. Setup the button now or come back later to setup the button. Makes not difference either way.

4. Create more buttons (I’m not sure there’s a limit. 100+)

5. Sort your buttons by changing the sort order if needed.

6. Click on the “Button name” in the “Tapping this button” section and select an icon to use. (You’ll change this later, so pick any icon, it doesn’t matter which one you select.)

7. Go to “Manage Theme” and,

a. Select “My Generic Theme”,

b. Select “button layout” 

Now make the following changes:

(1)  set the “Label Layout Style” as “bottom”.

(2) Select “black” as the “Label Font Color”.

(3) Select “clear” as the “Button Background” color.

(4) Set “Button Transparency” to “100” (Optional).

(5) SAVE the changes with the little “green save button”.

(6) Now go to “Button  Size” and Set the “button size small device” to “65”.

(7) SAVE the changes with the little “green save button”.

Closed your App, update, Viola! You got “Buttons”.

Next up fine tuning your buttons.

(8) Add button images to the App.

To simplify finding your images later you should name the images as follows:

critters_cat.png

critters_dog.png

critters_bird.jpg

After you add images to the:

BTv1.5 (iOS & Android) BT_Image (folder)
BTv2.0 (Android) Assets > drawable (folder)
BTv2.0 (iOS) GUI (folder)

you need to compile the project, otherwise the images will not show up in the App.

Please note, “compile” doesn’t mean to download the source code.

It means to either :

a. Close the virtual device (Emulator) and restart it,

or,

b. To export the project from eclipse and create a new (updated) APK.

If you create a new APK, post it exactly the same place as the previous APK.

Then force an update by making a change from BT such as adding a screen.

If you’re using the Emulator in Eclipse sometimes you need to close Eclipse and then run (compile) the App for the buttons to appear.

Fred

image

Please note, This is not the one & only way, or even the “Best Way” to create a Button Menu. It’s just one way that’ll teach you about Button & Button Menus. As you learn more you’ll find different ways and methods that’ll work for you.

Sample Menu (Buttons)

Hey this is about buttons, not my graphics skills or lack thereof.

image

A Study of Buttons

Adding Images To BTv1.5 & BTv2.0

You can add images and files to your BTv1.5 & BT2.0 Android App several ways.

For Background Images read this.

This is a How-To: Adding Images to the Android Source Code:

You can add images via Eclipse, or by adding them directly to the Source Code files.

In BTv1.5 I prefer adding the images directly to the Source Code files because it’s easier and less confusing.

In BTv2.0 I prefer adding via Eclipse because as soon as you add an image that not supported because of file type or file name, you’ll immediately get an error in Eclipse, allowing you to remedy the problem.

In BTv2.0 it’s basically the same as BTv1.5 except:
Images go in res > drawable folder
You can’t use UpperCase letters or – in Eclipse.

If you created the Dropbox folder & downloaded your Source Code as I recommended previously, you’ll find in your App’s Source Code a folder called “Assets”.

Inside the Assets folder are several folders:
BT_Audio
BT_Docs (Place HTML Images here)
BT_Images
BT_Video
BT_Jars

Add your files accordingly.

After you add the files to the Source Code you must Compile the App and create and publish a new APK before you’ll see the images in your device.

Tip: Create a folder for all of the images you add to your Buzztouch app. Place copies of your images there. You may (Almost never!) need to re-download the Source Code. If you download the Source Code to the same location all of your images will be lost if you don’t have a backup copy.
Same for docs and other files you add to buzztouch, plus any modifications you’ve made to the Source Code. Yes, see many hours, days, months of work disappear in a fraction of the time it takes you to blink.

You may consider using an image url when building an app to avoid compiling every time you add an image. (I don’t do this, it might be more useful for iOS.)

Consider storing the images locally (in the Source Code) so people wouldn’t have to download them after they’ve already downloaded the app.

HTML Images: I had placed an html file (Map of an area) in an app. I tried placing the .png in the image folder and the HTML in the docs folder but it didn’t work, then placed both in BT_Docs & it worked.

PNG images work the best, as they tend to be smaller in file size. JPG is good for images that are of photographic quality, but generally have bigger file sizes.

In BTv1.5 I give every image in my desktop image folder a prefix, then I select all the items and drag them together into the BT_image folder. Plus it’s easier to locate the image later.

Example:
ahf_cat.jpg
ahf_bird.gif
ahf_dog.png

To manage you images it’s easier to add a prefix to each image. By doing do, all your images will be grouped together in Eclipse. The “ahf” stands for “aHelloFred”. I use the “a” to keep the images at the beginning of the list of images to eliminate needless scrolling.

Note you can use ” – ” and capital letters with BTv1.5, but it’ll be a problem if you try to use those images in BT Server v2.1.6.
So avoid future troubles now, and don’t use ” – ” and Capital letters in you image names.
And you cannot use spaces in the image name.

You store the HTML and css docs needed in your BT_docs folder.

Small Device vs Large Device
If you images don’t appear on Large Devices simply add the image to the Large Device box via the BTv2.0 control panel. Since the image has already been added to the Source Code you don’t need to re-publish the app.

example code to use image in HTML doc:

Royalty Free Images:
http://www.istockphoto.com/ http://www.bigstockphoto.com/ http://www.clipart.com

The End / Fred

Rectangular Buttons & Other Shapes & Sizes

Looking for rectangular buttons? How about other shapes?

Custom Shaped Buttons

The following builds on a reply to a post by David at Buzztouch.

Two square buttons pointing to the same link are in essence a rectangle.

Example 10×10 grid, buttons 3&4 on row 5 point to same link, buttons 6,7,8 point to same link, in effect two rectangular buttons of different sizes. Use combination of different rows and even more complicated patterns.

Something important to remember, The gray square rectangles in Buzztouch, are not Buttons, they’re sort of like place mats, a place to set your buttons (plates).

Here’s the link to David’s orginal  post on how to make rectangular button:

a) Make a background image with your ‘highlighted’ hot spots. Things to click on. This is one plain-jane image you mocked up in photoshop. It LOOKS LIKE a bunch of clickable hot spots with callouts, text, graphics, whatever. The user just kinda gets it that things on this image are clickable. In the case of a map, users will for sure click on text labels and shapes.

b) Set this as the background on a button menu. In the advanced settings of the menu, set no scroll so nothing moves.

c) Next, imagine an invisible grid over the top of the image. Each square in the grid holds a button. All of the buttons are transparent .PNG images. The same image in fact. No icon, no text label, just a transparent image. So far so good, tons of hidden buttons over the background.

d) Next, figure out the optimal size for the squares in the grid. 10 x 10, 50 x 50? It’s up to you and the best size will be determined by the underlying image and it’s fake hotspots.

e) Set the images / buttons to load ‘nothing’ when tapped on the squares that don’t have an underlying hot spot. Set the images / buttons that overlap a hotspot on the underlying image to load the proper screen. It’s likely that many of the buttons will load the same screen, like the adjacent buttons that all overlap the magic text or whatever.

Tip: When doing design work and figuring out all the funky details, use a semi-transparent button image so you can see the underling graphic and the button at the same time. When your done, re-make the image so it’s transparent. Don’t make a new image with a new file name because then you’ll need to modify all the image names in your control panel (each button). Just use the same image and re-save that baby as totally transparent when you’re ready to go live.

Oh, wait, you could also just use the transparency setting in the control panel when you’re done. I think you can set it to 100 for totally visibile and 0 for invisible.

Posted from WordPress for Android by Fredt4

Buzztouch: Whether Your App should be an Online or Offline App

Buzztouch Apps are either Online or Offline apps.

To properly publish and maintain your app you need to understand this feature. Understanding Online vs. Offline apps, is an extensive explanation by @GoNorthWest of how the Refresh process works and how online vs. offline apps behave and how it is related to the Data URL and Report To Cloud URL settings in your control panel and BT_config.txt file.

Once you understand this feature the next question is,  “Whether you should Publish your app as Online or Offline?” and “When to take your app Online or Offline.”

Factors to consider:

  • How complicated is your app?
  • Is it feasible to have a duplicate app?
  • How frequently will you update?
  • How urgent are the updates?
  • Is it possible your app will have latent defects?

Interactive App Development: When initially publish the app consider making the app’s development interactive by having users post questions and suggestions that you can deploy immediately.  Have the users engage in game like competitions, earning points and climbing numbered levels winning bonus content. They can also receive non monetary awards. A new doctor’s website uses this interactive feature by awarding whimsically named prizes, like the “It’s Not Brain Surgery” prize.

Even if you can or wish to have an Offline app you should consider initially publishing the app as an Online so you can immediately fix overlooked and latent errors after upgrading the app. This is especially important if you don’t use the Ad Hoc method for testing. How many of us wish we could correct a post immediately after we post it. Can you deal with a week or more of complaints, refunds, uninstalls and bad ratings because you couldn’t immediately fix an oversight.

Publishing Process should probably be something as follows:

Step One – App Creation & Initial Deployment:

  • Build app
  • Install on device
  • Build ad hoc network (Have others test your app)
  • Fix bugs, oversights
  • Publish Online App
  • (Consider using Interactive Features)
  • Fix bugs, oversights
  • Consider taking app Offline

Step Two – Updating App:

  • (If feasible, use duplicate app to add and test new features.)
  • (If app is an Online app consider taking app Offline to deploy major update.)
  • Add / Test new features
  • Take app Online with updates
  • Fix bugs, oversights

Step Three – App maintainance:

  • Repeat Step Two as necessary.

Updating an Online app (on iTunes or Android Market):

By submitting an update with images you intend to use later but haven’t currently used in the app you can update the app’s static content without going through an approval process.

  • App is live (published) on market/store
  • Option #1: Submit update to app store (Repeat as necessary)
  • Option #2: Submit app with unused images.
    If using Option #2, after update is approved and published, make changes in control panel (You may wish to temporarily take app off-line but not necessary.)
    Next time user opens app, the app updates with latest version.
    This way you can make changes to static (non-dynamic) content on online apps after review by Apple.
    You may need to explain to the Apple reviewer why there’s an update, but by apparent review there no difference.

Fred