+ Reply
Page 1 of 3 123 LastLast
Results 1 to 20 of 56

Your favorite Apple, iPhone, iPad, iOS, Jailbreak, and Cydia site.


Thread: Test Your Lockscreen, Springboard or iWidget Using Chrome

is a discussion within the

iPhone 5 New Skins / Themes Launches

forums, a part of the

New Skins / Themes Launches

section;
Hello Coders and Modders! After browsing many of the theme threads here, one of the biggest issues that I have come across when seeing a widget posted is "Can you
...
  1. #1
    King Kong ain't got nothing on me! King_O_Hill's Avatar
    Join Date
    Apr 2011
    Location
    USA
    Posts
    8,125
    Thanks
    37,536
    Thanked 15,117 Times in 5,494 Posts

    Default Test Your Lockscreen, Springboard or iWidget Using Chrome
    Hello Coders and Modders!

    After browsing many of the theme threads here, one of the biggest issues that I have come across when seeing a widget posted is "Can you make that for the iPhone 4"? Sometimes it goes the other way too! Anyway, one of the typical responses is "I don't have an iPhone 4/5". Well, worry not!

    There is no need to actually have to own a device of each size! With a few simple steps, you can easily test your HTML code by using a web browser!

    But there many web browsers you say!

    I know, right!

    While there are other web browsers that will work, my browser of choice is Google Chrome!

    I will explain how to make this work on both a Mac and a PC.

    Ok, we'll enough of that let's just get going!

    Just so that everyone knows, I have tested this on a PC running win XP & 7. I have not tested it on a Mac, but I know that it works there too and I will include those instructions, as their not much different.

    1. You must close all open windows of Chrome, I learned this the hard way!

    2. You must have the entire widget that you are testing saved on your PC/Mac.

    This can be run from a command line, but where's the fun in that? Great if you are only going to use this once! But come on, you know you will use it over and over again!

    So what I did was to create a new shortcut to chrome on my desktop.
    (I think for you Mac users its an "alias" - maybe someone with a Mac can PM me some parallel instructions so I can include them accurately).


    (Yes, I renamed my shortcut )

    I then did a right click on the new shortcut and selected "Properties".

    You will get this popup window:



    Click in the box that reads "Target" and go to the end of the path.
    Then add the following switch without the quotes:

    " --disable-web-security --enable-file-cookies"

    Yes, there is a space between the end quote and the dash!

    Once that is done, hit the "OK" button.

    Now the moment of truth! Make sure that all Chrome browsers are closed, and open Chrome with your new shortcut!

    Oh no, you didn't get that yellow warning bar did you???

    Ah, that's normal! If you don't see it, then something went wrong!



    Now that we have this working, we need to make sure that your widget will display properly. If your are using a widget that uses woeid/GPS you can just enter your woeid and set GPS to "false". If you are using a woeid only widget, then you have no choice!
    Once that is set, just drag and drom the HTML file into a blank tab in the browser!



    What's that? You want to use GPS? Maybe be able to enter whatever coordinates that you want! Sure, why not, here's how!

    Set GPS to "true" and open your location.js file. Right near the top and just a few lines after your variables, you will see these lines:

    Code:
    jQuery.get('file:///private/var/mobile/Documents/myLocation.txt', function(appdata) {
    //jQuery.get('myLocation.txt', function(appdata) {
    all you need to do is remove the double forward slashes from the second line and add them to the first line, like this:

    Code:
    //jQuery.get('file:///private/var/mobile/Documents/myLocation.txt', function(appdata) {
    jQuery.get('myLocation.txt', function(appdata) {
    Now, take a copy of your myLocation.txt file from your iPhone and place it in your main theme folder like this:



    Then just drag and drop into the browser like I said above!

    OK, here is the best part. So your making some changes to the CSS file and you want to see how its going right. Just make sure that you have saved all your files and then guess what. Give up? That's right, just hit the refresh button in the browser and BAM, instant changes. Damn I love America! (wipes a single tear from eye)

    OK, I got more stuff to share, as Chrome has 1000's of useful extensions to make editing these widgets even easier. But that's all for tonight, I should finish it up over the weekend.

    I also want to throw out a quick thanks to Marty McFly for helping me originally and to Ian Nicoll for providing UniAW6 that I used for the Screen shots. Go visit his thread here:

    UniAW6

    Also Dacal for the auto detect phone size code! Get his Topaz theme here, you won't be disappointed!

    Topaz

    ********** Under Construction **********

    Next up:

    How to change between iPhone 4 and 5 previews!

    How to make my LS auto detect my phone size!

    If there is something that you would like me to add, just post it!

    Hopefully someone will help me with the Mac instructions too!
    Last edited by King_O_Hill; 05-29-2013 at 08:19 AM.
    Widget-Weather App Now Available! Also with MyLocation Support!
    Check out the thread here - Widget-Weather
    To install the Widget-Weather app, just go to Cydia and install. This will also remove MyLocation, as it is built in!
    Want to protect your JailBreak! Add this repo http://cydia.myrepospace.com/iLEXiNFO/ & Install "iLEX R.A.T."
    It will allow you to bring your phone back to a fresh jailbroken state!

  2. The Following 48 Users Say Thank You to King_O_Hill For This Useful Post:

    A11AST3R (08-23-2013), alexse25 (11-16-2013), Alfroggy (12-23-2013), azaleea (04-03-2014), Azon3 (03-19-2014), blkmini (05-07-2013), Bulldog5278 (12-15-2013), chevymusclecar (05-03-2013), cl1ck4207 (05-02-2013), CrazyChester (05-04-2013), Dacal (05-03-2013), DannyZ83 (03-19-2014), Darrenrooster (05-03-2013), Destan (03-20-2014), EdgeNsketch (05-03-2013), G-weezy (05-03-2013), hemptation (12-15-2013), Ian Nicoll (05-03-2013), ipawnforfun (05-03-2013), IrobertI (05-02-2013), It's Mi (05-12-2013), Jato_BZ (05-03-2013), jjk454ss (05-08-2013), Karoonchai (05-03-2013), Kr0NiK (05-03-2013), KraXik (05-03-2013), Krima (05-02-2013), lizzy954 (07-17-2013), lostinthemes (05-05-2013), Lucys (05-04-2013), Marty McFly (05-03-2013), mentop (05-04-2013), meth357 (11-16-2013), mfisherbsu (06-23-2013), NewdestinyX (05-03-2013), nik1975 (05-06-2013), Pottsau (01-26-2014), RKO1195 (05-03-2013), sickchris714 (05-03-2013), siemprelisto (05-03-2013), Simon (05-02-2013), Sk37cH (05-03-2013), solidrock (05-03-2013), stratnik (05-03-2013), ThatGuyChris (05-04-2013), The.Drifter (05-02-2013), The_Durben (05-06-2013), untrue (05-29-2013)

  3. #2
    Livin the iPhone Life G-weezy's Avatar
    Join Date
    Sep 2011
    Location
    Right next to you.
    Posts
    1,875
    Thanks
    1,821
    Thanked 6,301 Times in 1,474 Posts

    Very nice info King. Will try this out when I get up.
    "I have no answers, just useless questions."
    "There are no strangers in this world, just friends we haven't made"

  4. The Following User Says Thank You to G-weezy For This Useful Post:

    King_O_Hill (05-03-2013)

  5. #3
    Lord of Lockscreen Modding Karoonchai's Avatar
    Join Date
    May 2010
    Location
    Bangkok, Thailand
    Posts
    3,108
    Thanks
    9,213
    Thanked 9,699 Times in 2,525 Posts

    Very good. Tested

    Awesome.
    Youtube Channel & Downloads - twitter @Karoonchai

  6. The Following User Says Thank You to Karoonchai For This Useful Post:

    King_O_Hill (05-03-2013)

  7. #4
    .artwork assassin Jato_BZ's Avatar
    Join Date
    Jan 2012
    Location
    New Zealand
    Posts
    2,598
    Thanks
    2,567
    Thanked 4,302 Times in 1,609 Posts

    Nice King! 👍
    Twitter Id: @Jato_BZ
    Ask questions here or there, or follow/preview my theme build process...something different

  8. The Following User Says Thank You to Jato_BZ For This Useful Post:

    King_O_Hill (05-03-2013)

  9. #5
    The Formulator Marty McFly's Avatar
    Join Date
    Mar 2013
    Location
    Barrie
    Posts
    1,177
    Thanks
    3,457
    Thanked 3,984 Times in 908 Posts

    Well done brother. MUCH more detailed then the tutorial I posted on the UniAW thread. Thanks for doing this.

  10. The Following 2 Users Say Thank You to Marty McFly For This Useful Post:

    It's Mi (11-01-2013), King_O_Hill (05-03-2013)

  11. #6
    The Big D NewdestinyX's Avatar
    Join Date
    Jan 2012
    Posts
    8,496
    Thanks
    3,089
    Thanked 7,568 Times in 3,858 Posts

    Well done, Brian! Very helpful! On Mac it's pretty much identical when using Chrome except on Macs you don't have to disable Web security.

    There's also an amazing app for Mac only called TacoHTML Edit (paid) that has live preview in it - no need for hitting refresh button after each change.
    Here to help if I can. If I can't I know someone who can!

  12. The Following 2 Users Say Thank You to NewdestinyX For This Useful Post:

    burrzoo (06-12-2013), King_O_Hill (05-03-2013)

  13. #7
    Modder & Coder Ian Nicoll's Avatar
    Join Date
    Oct 2008
    Location
    From Scotland, live in Philippines, German company, work worldwide, currently in Sri Lanka.
    Posts
    4,735
    Thanks
    7,179
    Thanked 18,133 Times in 3,715 Posts

    Thanks Brian,

    I never realized Windows users had such a problem, on a Mac you just need to double click on the html file and it will open up in Safari. Note it does change the font to whatever font your computer uses, and if you change the font size in the widgets css file you will not see any change in the widget with Safari, but all other changes made take effect on a refresh as you describe, so not 100% accurate. Looking at your screen shot, this also might be true with Chrome.

    You can see from the screen shot below I have my Mac font set quite big.

    But I highly recommend Mac users grab a copy of "Taco HTML Edit", it's a very light weight "live view" editor for all your html, javascript & css files, and it's only about US$20.

    Also, if your into iWidgets you might want to check out "PlistEdit Pro".

    Attached Thumbnails Attached Thumbnails Test Your Lockscreen, Springboard or iWidget Using Chrome-screen-shot-2013-05-03-10.01.55-pm.png  
    Last edited by Ian Nicoll; 05-03-2013 at 08:51 AM.

    "If it's not broken, I'll fix it till it is"

  14. The Following 11 Users Say Thank You to Ian Nicoll For This Useful Post:

    Azon3 (04-04-2014), elilab (04-07-2014), It's Mi (10-07-2013), Karoonchai (05-03-2013), King_O_Hill (05-03-2013), Kr0NiK (05-03-2013), mfisherbsu (06-23-2013), RKO1195 (05-03-2013), siemprelisto (05-04-2013), stratnik (05-03-2013), The_Durben (05-06-2013)

  15. #8
    Theme Creator Dacal's Avatar
    Join Date
    Nov 2010
    Posts
    1,822
    Thanks
    2,727
    Thanked 8,109 Times in 1,436 Posts

    My turn... Quickly made, i will do it more clean later.

    HOW TO DEBUG A WIDGET ?

    First, just follow the instructions by King to desactivate the web security. If you want (i will explain later), you can add this flag :

    '--enable-file-cookies' (without the quotes)



    Then, open Chrome with the shortcut and launch the widget you want to test :



    BAM ! It doesn't work... Crap.... Why ?

    Now, just do a right click and choose inspect element :







    You can now see all the errors !

    Look at the first line : this error is generally because you have done a dumb mistakes in the javascript file (the fourth line says that your init function is not defined : the error is so big that the different functions do not load).

    In my case, i open the Javascript with Notepad++ and i close all the lines (click on the minus signs) :



    I try to find the "real" end of the updateClock function...



    Yes ! I found the mistake !

    Now, i can reload the page... Holy **** ! It still doesn't work !!!!!





    This time, it's a classic error 'cannot set property 'innerHTML' of null' : the signification is simple, i have tried to assign a value to an unknown DOM element. I open the HTML with Notepad++...



    Yes, i have found the second error ! I'm an idiot sometimes... .

    I reload AGAIN the page and... New error !!!!



    But easy to fix. NEVER FORGET : the code is case sensitive...It's updateClock (and not updateclock).

    Refresh...



    Yes ! Almost perfect, just some easy errors to fix. As you can see, i have tried to load some pictures which don't exist... I just have to correct in the HTML.



    And it's done !!! All is perfect now .



    My themes : Jade HD, Silex HD, BaSalt HD,ToPaz
    All are on Cydia and/or Theme It.

  16. The Following 24 Users Say Thank You to Dacal For This Useful Post:

    A11AST3R (08-24-2013), azaleea (04-03-2014), Azon3 (04-04-2014), blkmini (05-07-2013), chevymusclecar (05-03-2013), Destan (03-20-2014), Ian Nicoll (05-03-2013), ipawnforfun (05-03-2013), It's Mi (10-07-2013), Karoonchai (05-03-2013), King_O_Hill (05-03-2013), KraXik (05-06-2013), Laxu (04-02-2014), lostinthemes (05-05-2013), mfisherbsu (04-02-2014), NewdestinyX (05-03-2013), Platini2000 (05-30-2013), RKO1195 (05-03-2013), siemprelisto (05-04-2013), Simon (05-21-2013), Sk37cH (05-04-2013), stratnik (05-03-2013), The_Durben (05-06-2013), untrue (05-29-2013)

  17. #9
    widget modder RKO1195's Avatar
    Join Date
    Aug 2010
    Location
    Alabama
    Posts
    1,984
    Thanks
    8,969
    Thanked 4,525 Times in 1,537 Posts

    Thanks King this will help a lot that want to learn, it will also pull from your woeid if you have it in without changing the myLocation file
    WidgetWeather ​Thread

  18. The Following User Says Thank You to RKO1195 For This Useful Post:

    Karoonchai (05-03-2013)

  19. #10
    Modder & Coder Ian Nicoll's Avatar
    Join Date
    Oct 2008
    Location
    From Scotland, live in Philippines, German company, work worldwide, currently in Sri Lanka.
    Posts
    4,735
    Thanks
    7,179
    Thanked 18,133 Times in 3,715 Posts

    Quote Originally Posted by Dacal View Post
    My turn... Quickly made, i will do it more clean later.

    HOW TO DEBUG A WIDGET ?
    Great job Dacal.

    Hope lots of people don't "quote" all your post in their replies.

    "If it's not broken, I'll fix it till it is"

  20. The Following 7 Users Say Thank You to Ian Nicoll For This Useful Post:

    A11AST3R (08-24-2013), azaleea (04-03-2014), It's Mi (10-07-2013), King_O_Hill (05-03-2013), RKO1195 (05-03-2013), stratnik (05-03-2013), The_Durben (05-06-2013)

  21. #11
    widget modder RKO1195's Avatar
    Join Date
    Aug 2010
    Location
    Alabama
    Posts
    1,984
    Thanks
    8,969
    Thanked 4,525 Times in 1,537 Posts

    Thanks for this Dacal very helpful, but whats the disable-file-cookies i thought the inspect element worked without this?
    WidgetWeather ​Thread

  22. The Following 4 Users Say Thank You to RKO1195 For This Useful Post:

    Dacal (05-03-2013), Karoonchai (05-03-2013), King_O_Hill (05-03-2013), stratnik (05-03-2013)

  23. #12
    Theme Creator Dacal's Avatar
    Join Date
    Nov 2010
    Posts
    1,822
    Thanks
    2,727
    Thanked 8,109 Times in 1,436 Posts

    HOW TO CHECK VARIABLES ?

    Answer : With the console !!!

    But dont forget, you can only check a variable that is defined as global (a variable declared outside a function is GLOBAL, and all scripts and functions on the web page can access it). So... If you want to test a local variable (declared inside a function)... Simply make it global for the test.

    So... What can we do ?

    First, check the main variables :



    The '--enable-file-cookies' flag should allow Chrome to accept local file cookies :



    Second, play !!!



    In the first line, i check my zip code... Tunis, Tunisia. It's based on my localization (GPS).
    But i want to test something else... Second and third lines, i define a new zip code and i check it.

    Now, i want to look the weather informations of this new location. Simple.



    Easy, no ? Of course, you can do a lot of other things... .

    Quote Originally Posted by Ian Nicoll View Post
    Great job Dacal.

    Hope lots of people don't "quote" all your post in their replies.
    Lol !!! U're right.

    Quote Originally Posted by RKO1195 View Post
    Thanks for this Dacal very helpful, but whats the disable-file-cookies i thought the inspect element worked without this?
    I have explained above
    Last edited by Dacal; 05-03-2013 at 10:19 AM.


    My themes : Jade HD, Silex HD, BaSalt HD,ToPaz
    All are on Cydia and/or Theme It.

  24. The Following 13 Users Say Thank You to Dacal For This Useful Post:

    A11AST3R (08-24-2013), blkmini (05-07-2013), chevymusclecar (05-03-2013), Ian Nicoll (05-03-2013), It's Mi (10-07-2013), Karoonchai (05-03-2013), King_O_Hill (05-03-2013), KraXik (05-06-2013), mfisherbsu (04-02-2014), RKO1195 (05-03-2013), stratnik (05-03-2013), The_Durben (05-06-2013), untrue (05-29-2013)

  25. #13
    widget modder RKO1195's Avatar
    Join Date
    Aug 2010
    Location
    Alabama
    Posts
    1,984
    Thanks
    8,969
    Thanked 4,525 Times in 1,537 Posts

    ah i see ok thanks this is very very helpful for someone like me thats still learning coding
    WidgetWeather ​Thread

  26. The Following 3 Users Say Thank You to RKO1195 For This Useful Post:

    Dacal (05-03-2013), King_O_Hill (05-03-2013), stratnik (05-03-2013)

  27. #14
    The Big D NewdestinyX's Avatar
    Join Date
    Jan 2012
    Posts
    8,496
    Thanks
    3,089
    Thanked 7,568 Times in 3,858 Posts

    Okay - I'm greedy and lazy... Can one of you master coders - teach us how to identify the 'var' elements in the Main.js or .css that are affected by what we do in the config.js? And if I get REAAAAALY lucky - you might even explain the conversion matrix from config.js elements to Options.plist entries.

    I'd like to have SCALE 70% to 120% in an iWidget I've created as an option. I'd like to see how it would look in config.js and in Options.plist and the var's they correspond to in the Main.js and/or .css (or even HTML if that's where it happens)..

    TIA.. ;-)

  28. The Following 2 Users Say Thank You to NewdestinyX For This Useful Post:

    A11AST3R (08-24-2013), King_O_Hill (05-03-2013)

  29. #15
    widget modder RKO1195's Avatar
    Join Date
    Aug 2010
    Location
    Alabama
    Posts
    1,984
    Thanks
    8,969
    Thanked 4,525 Times in 1,537 Posts

    All you got to do is look in one of Durbens widgets that he scales down and you can see how it's done.... You have to put in some work for your self lol
    WidgetWeather ​Thread

  30. The Following 3 Users Say Thank You to RKO1195 For This Useful Post:

    A11AST3R (08-24-2013), King_O_Hill (05-03-2013), The_Durben (05-06-2013)

  31. #16
    The Big D NewdestinyX's Avatar
    Join Date
    Jan 2012
    Posts
    8,496
    Thanks
    3,089
    Thanked 7,568 Times in 3,858 Posts

    Quote Originally Posted by RKO1195 View Post
    All you got to do is look in one of Durbens widgets that he scales down and you can see how it's done.... You have to put in some work for your self lol
    I've spent a lot of time already. And figuring out the syntax of the Options.plist is easy. It's knowing where the variable is defined that is controlled by the option.plist - that's eluding me even after already knowing how to use a basic scale coding in the HTML or .CSS. Reverse engineering HOW the variable gets assigned is not something easily detectable by just looking at code. .
    Here to help if I can. If I can't I know someone who can!

  32. The Following User Says Thank You to NewdestinyX For This Useful Post:

    King_O_Hill (05-03-2013)

  33. #17
    widget modder RKO1195's Avatar
    Join Date
    Aug 2010
    Location
    Alabama
    Posts
    1,984
    Thanks
    8,969
    Thanked 4,525 Times in 1,537 Posts

    Ok I see you want someone to explain how to know where and how to do it.
    WidgetWeather ​Thread

  34. The Following User Says Thank You to RKO1195 For This Useful Post:

    King_O_Hill (05-03-2013)

  35. #18
    King Kong ain't got nothing on me! King_O_Hill's Avatar
    Join Date
    Apr 2011
    Location
    USA
    Posts
    8,125
    Thanks
    37,536
    Thanked 15,117 Times in 5,494 Posts

    Sorry guys I've had a busy day. I know I still owe Grant his var explanation. If no one else gets you an answer, I will explain either later tonight or tomorrow morning.

    Thanks to everyone that is stopping by and contributing information here! It looks like this is going to get a lot deeper into modding than I had anticipated, but that's great!

    Be back soon!
    Widget-Weather App Now Available! Also with MyLocation Support!
    Check out the thread here - Widget-Weather
    To install the Widget-Weather app, just go to Cydia and install. This will also remove MyLocation, as it is built in!
    Want to protect your JailBreak! Add this repo http://cydia.myrepospace.com/iLEXiNFO/ & Install "iLEX R.A.T."
    It will allow you to bring your phone back to a fresh jailbroken state!

  36. The Following 5 Users Say Thank You to King_O_Hill For This Useful Post:

    Dacal (05-03-2013), Ian Nicoll (05-03-2013), It's Mi (10-07-2013), RKO1195 (05-03-2013), The_Durben (05-06-2013)

  37. #19
    The Big D NewdestinyX's Avatar
    Join Date
    Jan 2012
    Posts
    8,496
    Thanks
    3,089
    Thanked 7,568 Times in 3,858 Posts

    Quote Originally Posted by RKO1195 View Post
    All you got to do is look in one of Durbens widgets that he scales down and you can see how it's done.... You have to put in some work for your self lol
    Yeah. I'm HAPPY to do a LOT of homework. But even the tutorials I've worked through online aren't unlocking the mystery for me yet. I just know King can explain it well so I get it. And it will benefit us all coming up in the coding thing..

    Thanks RKO! I've admired your mod work for a long time, bro! Keep it up!

    Quote Originally Posted by King_O_Hill View Post
    Sorry guys I've had a busy day. I know I still owe Grant his var explanation. If no one else gets you an answer, I will explain either later tonight or tomorrow morning.

    Thanks to everyone that is stopping by and contributing information here! It looks like this is going to get a lot deeper into modding than I had anticipated, but that's great!

    Be back soon!
    Thanks, Brian. At your leisure. I figured this would be a good place to bring it up since you started this very helpful thread!!

  38. The Following 2 Users Say Thank You to NewdestinyX For This Useful Post:

    King_O_Hill (05-03-2013), RKO1195 (05-03-2013)

  39. #20
    widget modder RKO1195's Avatar
    Join Date
    Aug 2010
    Location
    Alabama
    Posts
    1,984
    Thanks
    8,969
    Thanked 4,525 Times in 1,537 Posts

    Thanks NewdestinyX I've came a long way but I'm learning everyday if I could do the PS thing I would be good lol but haven't put the time in it I get aggravated at it more than code... But side note I'm off all weekend YAY it's been months now since I've had two day weekend
    WidgetWeather ​Thread

  40. The Following 2 Users Say Thank You to RKO1195 For This Useful Post:

    King_O_Hill (05-03-2013), NewdestinyX (05-06-2013)

Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts