Thursday, September 12, 2013

Access to the camera roll and dealing photo binary data

Best part of Cydgets, you still have to deal with security:)
</sarcasm>

Simple to access your camera roll, just create and input file.

<input type="file" id="files" name="files[]" multiple />
When you click on the input file it will open the camera roll.

Once you are there it is easily uploaded. The only issue is, we don't want to go pick a background every time we unlock our phone. We need to save this to LocalStorage so it can be used again.

Well it's against security. Meaning if you uploaded an image to a website, the actual location of the file is unknown. The browsers actually put a fake url here. Just for security purposes. While on safari I have access to the name, iPhone I do not.

Seems impossible to get. Well here comes the work around.

Since I have the image loaded, I am able to access the binary data of this image. If we create a file reader, and push through readAsDataURL(), then we can get the image 64base code. Which is not a url, it is basically the whole image.

Great thing is I figured out I can use it as a url:)

Simply by 

getitems = "This would be where I return from images the one your clicked"

 $('#wallpaper').css('background-image', 'url(' + getitems + ')');

Now that getitems ends up being over 100,000 character of code. WAY to much for a cookie.

I was able to store to LocalStorage, then render across not only pages, but cydgets as well. 


Using LocalStorage with Cydgets

If I ask a user for information, I don't want to have to keep asking them.

With Cydgets when you unlock your phone everything resets. Just as if you closed your browser.

Recently i've been using jQuery Cookies, although very frustrating. They worked very well. Which gave me the ability to create amazing things.

Well through my experiments with Cydgets. I finally maxed out my cookies. I needed to return the binary for an image. Which was over 100,000 characters:P So I needed a replacement.

I tried LocalStorage before, but with most doesnt work with winterboard. Reason I chose cookies. (My workaround so to speak)

Gave LocalStorage another shot, and works perfectly. I will explain.

var locale = "32118";

Here is a location code for a weather widget. We need to save it so it doesn't reset.

Make a variable 

var locale = prompt("Enter your ZipCode", "");

save it to LocalStorage

localStorage.setItem('nameoffile', locale);

how to get the file

var getitems = localStorage.getItem("nameoffile");

You can either alert(getitems); console.log or set it to variable

Now we need var locale to be dynamic. We cannot have it just a prompt.

For example.    if(getitems != null){
var locale =getitems;
}

If get items is not empty, then var locale is equal to getitems, which is your LocalStorage
Below its saying if the getitems is empty then show a prompt, then save to localstorage.

else{
var locale = prompt("Enter your ZipCode", "");
localStorage.setItem('nameoffile', locale);
}

Using keyboard for data in Cydgets

Where the fun begins!

Things I have done with lockscreens lately is pretty unbelievable. That doesn't even compare what they can be now.

One great feature is access to a keyboard! YES! I've went to lengths to coding my own keyboards to work with widgets. I am so glad that I can say goodbye. Not only does take alot of time to code a keyboard, but the ram it takes to do the functions is much greater.


I have yet to see anyone else implement keyboards or keypads like I have. I hope this changes it.

In code we use variables for a lot of things. So of course when you give user access to change those variables a lot of great things happen.

One most common, which is what made my decision, to make a keyboard is the location variable.

You know it as var locale. This variable contains your zip code or weather code.

To get this info you leave the lockscreen open a text editor and edit the code. Everyone isn't a coder, and they should NOT have to do this.


Ok now to the meaty stuff. How do I get a keyboard in Cydgets June?

Easy use prompt. Has been on the web for ages. Here is how.

var locale = prompt("Enter your ZipCode", "");

Thats it:) haha. Yes, now your getting it. 

When this locale is called the keyboard will popup and ask for your zip. You enter it accepts.

Now you have to do this every time you unlock/lock. Remember everything resets.


Next post ill explain how to make up for it resetting.



Editing Winterboard Lockscreens to work with Cydgets

For many  this will be an easy transition, only a few things to do.

First off we need to make sure your existing lockscreen is able to work correctly, in 'Webview'.

This is pretty simple the most part. Usually includes adding

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

This allows your html to fit the device screen.


File naming: In cydgets you will need to name your theme. myTheme.cydget

Info.plist: Here you set the name and location of your html. Also you can activate scrolling

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>Configuration</key>
  <dict>
    <key>Homepage</key>
    <string>file:///System/Library/LockCydgets/upload.cydget/index.html</string>
    <key>Scrollable</key>
    <string>NO</string>
  </dict>
  <key>Plugin</key>
  <string>WebCycriptLockScreen</string>
  <key>Tagline</key>
  <string>miLockSimple</string>
</dict>
</plist>

This need to be added to the base folder of your theme.

Thats it.

What is a Cydget?

First off.. Welcome!! 

This blog will be dedicated to cydgets. Reason is my addiction to code.. Yes I said it. So lets move on.

Cydgets - In my own words

Cydgets is Winterboard for Lockscreens.

Easy enough? Maybe, but I know you are leary.


If you are familiar with Winterboard, it will not take you long to get used to Cydgets.

Cydgets is a place to keep all your lockscreens. It doesn't come with an icon.
It has a settings icons in the settings.app

If you open it, you are displayed with a setup similar to winterboard. You have the list of lockscreens. (Which are installed in System/Library/LockCydgets)

You can select as many as you want. Move them around in whatever order you want.
This is because you can switch between lockscreens by using the home button while on your lockscreen.

It will cycle through each one. You still might be wondering why this is useful. Although the above sounds great, why bother.

I will tell you. Cydgets opens up Lockscreens to more iPhone features.

When HTML is run via winterboard it is run in a mobile view, also alot of features are not available. 

Things like Popups, Keyboards, EntryFields, LocalStorage, Fullpage views, and much more. These are available for us in Cydgets. Pretty much the entire iOS is opened and available to be exploited. I have created a few myself and will share them soon.

There is tons more to get into stay tuned for more post.