User Tag List

  1. King_O_Hill's Avatar
    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

    ********UPDATE!********

    Found a fix here....
    https://productforums.google.com/for...me/9nHBcjNW384

    So now the 'target' line in my "Widget Tester" Chrome shortcut looks like this...

    Code:
    "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-file-cookies --user-data-dir


    All widgets working again Let the modding continue!
    Thanks Marty!

    ********** 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; 2016-03-18 at 08:11 AM.

    Check out WW3 for iOS 9/10 - Widget-Weather 3.0
    2013-05-03 05:11 AM
  2. G-weezy's Avatar
    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"
    2013-05-03 12:24 PM
  3. Karoonchai's Avatar
    Very good. Tested

    Awesome.
    Youtube Channel & Downloads - twitter @Karoonchai
    2013-05-03 01:24 PM
  4. Jato_BZ's Avatar
    Nice King! 👍
    Twitter ID: @Jato_BZ
    .artwork Assassin / Emoji Extractor
    2013-05-03 01:38 PM
  5. Marty McFly's Avatar
    Well done brother. MUCH more detailed then the tutorial I posted on the UniAW thread. Thanks for doing this.
    2013-05-03 02:59 PM
  6. NewD's Avatar
    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.
    2013-05-03 03:43 PM
  7. <Ian Nicoll/>'s Avatar
    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 Test Your Lockscreen, Springboard or iWidget Using Chrome-screen-shot-2013-05-03-10.01.55-pm.png  
    Last edited by <Ian Nicoll/>; 2013-05-03 at 05:51 PM.
    2013-05-03 05:12 PM
  8. Dacal's Avatar
    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.
    2013-05-03 06:26 PM
  9. RKO1195's Avatar
    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
    2013-05-03 06:37 PM
  10. <Ian Nicoll/>'s Avatar
    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.
    2013-05-03 07:08 PM
  11. RKO1195's Avatar
    Thanks for this Dacal very helpful, but whats the disable-file-cookies i thought the inspect element worked without this?
    2013-05-03 07:13 PM
  12. Dacal's Avatar
    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... .

    Great job Dacal.

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

    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; 2013-05-03 at 07:19 PM.


    My themes : Jade HD, Silex HD, BaSalt HD,ToPaz
    All are on Cydia and/or Theme It.
    2013-05-03 07:16 PM
  13. RKO1195's Avatar
    ah i see ok thanks this is very very helpful for someone like me thats still learning coding
    2013-05-03 07:31 PM
  14. NewD's Avatar
    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.. ;-)
    2013-05-03 10:36 PM
  15. RKO1195's Avatar
    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
    2013-05-03 10:42 PM
  16. NewD's Avatar
    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. .
    2013-05-03 10:45 PM
  17. RKO1195's Avatar
    Ok I see you want someone to explain how to know where and how to do it.
    2013-05-03 10:49 PM
  18. King_O_Hill's Avatar
    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!

    Check out WW3 for iOS 9/10 - Widget-Weather 3.0
    2013-05-03 11:40 PM
  19. NewD's Avatar
    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!

    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!!
    2013-05-04 12:20 AM
  20. RKO1195's Avatar
    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
    2013-05-04 01:08 AM
77 123 ...
LINK TO POST COPIED TO CLIPBOARD