1. June'sIphone's Avatar
    I will be creating a free Cydget a day for a week. Posting them in video form with a free download link in the description. You can use them, learn from them, modify them or whatever your heart desires.



    Shows a way to create a weather widget with gps.



    Shows a way to pull battery info with Cycript.



    Shows a way to change numbers to text, get device name, set an image via camera roll, create a jQuery free draggable item, and how to unlock the device with Cycript.



    Shows a way to pull notification count, and add a tap to unlock with Cycript



    Shows how to open icons from the lockscreen and get notificiation count with Cycript



    Shows how to add control center toggles to the lock screen.



    Shows how to show wifi, battery, and signal percent, and currently set alarm on the lockscreen.


    All Videos : http://junesgraphics.blogspot.com/20...l#.VLmBSS7F88Y
    My Website: http://JunesiPhone.com

    Enjoy

    Basic Template for iPhone 5, 5s, 6, 6+
    LINK

    Weather Template for Cydget and Convergance
    LINK

    USEFUL VIDEOS - Beginners
    Learn HTML in 15 minutes -
    Learn JAVASCRIPT in 30 minutes -
    Learn CSS in 30 minutes =

    USEFUL VIDEOS - Intermediate
    JAVASCRIPT
    1. Learn how javascript loads and the event loop -
    2. Javascript Masterclass -
    3. Javascript Language (Douglas Crockford) -
    4. Advanced Javascript (Douglas Crockford) -
    5. Theory of the DOM (Douglas Crockford) -

    BOOKS
    The Javscript ninja - LINK

    EXTRAS
    Essential Javscript links - LINK


    CODING TOOLS
    Sublime Text - LINK
    Safari - Standard Web Browser

    SUBLIME ADDONS
    Sublimelinter - LINK (if you need help installing this let me know)
    Attached Thumbnails Free Cydgets-preview.png  
    Last edited by June'sIphone; 2015-03-20 at 04:31 PM.
    2015-01-11 11:54 PM
  2. June'sIphone's Avatar
    Day 2

    2015-01-11 11:57 PM
  3. kamilli0n's Avatar
    Really appreciate you doing this! Using your new weather method how are you getting your Cydgets to pull weather info and utilize Cycript on your Mac?
    2015-01-12 12:16 AM
  4. June'sIphone's Avatar
    Really appreciate you doing this! Using your new weather method how are you getting your Cydgets to pull weather info and utilize Cycript on your Mac?
    On the Mac the weather values are just placeholders used to style, they do not hold actual weather.
    2015-01-12 12:24 AM
  5. V3RSAC3THUG's Avatar
    Free Cydgets-imageuploadedbymodmyi1421072735.286102.jpg

    Is there a way to move the cydget closer to the top? I know sometimes u can edit but i wouldnt know what px to put on each item. Again thanks for doing this bro
    2015-01-12 03:26 PM
  6. June'sIphone's Avatar
    Free Cydgets-imageuploadedbymodmyi1421072735.286102.jpg

    Is there a way to move the cydget closer to the top? I know sometimes u can edit but i wouldnt know what px to put on each item. Again thanks for doing this bro
    To move everything up you can adjust the container css. Since all elements are inside this div it will move them all at once.

    Code:
    #container{
    		position: absolute;
    		top:-180px;
    		left:0px;
    	}
    This will move the container (and all elements) -180px from its current location which will move up on the Y axis.
    2015-01-12 08:22 PM
  7. will822's Avatar
    Thanks for the awesome cydgets. I've downloaded and installed the Day 1 cydget but can seem to get it out of 24hour mode. I have tried setting var TwentyFour to true and false and resprung but it still shows as 24 hour time. Any ideas how to get it to 12 hour time?

    Thanks again.
    2015-01-12 08:46 PM
  8. June'sIphone's Avatar
    Thanks for the awesome cydgets. I've downloaded and installed the Day 1 cydget but can seem to get it out of 24hour mode. I have tried setting var TwentyFour to true and false and resprung but it still shows as 24 hour time. Any ideas how to get it to 12 hour time?

    Thanks again.
    This needs removed.
    Code:
    var TwentyFour = localStorage.getItem('TwentyFourSwitch');
    2015-01-12 09:12 PM
  9. June'sIphone's Avatar
    Day 3

    2015-01-12 10:22 PM
  10. FrightDealer's Avatar
    This is awesome!!! Liking all these designs
    2015-01-13 03:55 AM
  11. June'sIphone's Avatar
    Day 4
    Shows a way to pull notification count, and add a tap to unlock with Cycript

    Last edited by June'sIphone; 2015-01-13 at 10:50 PM.
    2015-01-13 10:40 PM
  12. June'sIphone's Avatar
    From Twitter.



    "I’m trying to edit and see your code before I get started on my own in scratch and it’s not showing up in safari, chrome, etc"


    Answer- The is two reasons you do not see anything in safari. 1. The text is white and the background is white. The background actually is transparent, but safari renders a white background by default. If you want to add a color background add html{background-color:black} to the <style> tag. 2. Since Cycript populates some of this info, it is not present in the html. If you look at the index.html you will see the code below.

    Code:
    <!--values below only used for mockup-->
    
    	<!--<img id="img" src="test.jpg" width="320"/>
    	<div id="container">
    		<div class="clock"><b id="hour">20</b><span id="min">:10</span></div>
    		<div id="date">Test Date</div>
    		<div id="battery">100%</div>
    		<div id="temp">75&deg;</div>
    		<img id="weathericon" src="icons/5.png" width="60"/>
    		<img id="batteryicon" src="img/battery.png" width="40"/>
    	</div>-->
    Anything that is wrapped in <!-- --> will not be shown on the webpage this is a way to add comments to html. I commented out the original code I used to mock everything up (Even the background image). If I left these static values in they would show before the cydget is finished loading.

    To get what I had and used to mock up the cydget, just remove the <!-- from before <img and remove --> from after the last div. You will then get a background and these static values.

    Since you are using this set now you need to comment out the set that is used right below this code.

    To comment it out do as below

    Code:
    <!--<div id="container">
    		<div class="clock"><b id="hour"></b><span id="min"></span></div>
    		<div id="date"></div>
    		<div id="battery"></div>
    		<div id="temp"></div>
    		<img id="weathericon" src="" width="60"/>
    		<img id="batteryicon" src="img/battery.png" width="40"/>
    	</div>-->
    If you notice in sublime the text will not be faded, this means it is not used and is just a comment.
    Last edited by June'sIphone; 2015-01-14 at 03:07 AM.
    2015-01-14 03:01 AM
  13. map1978's Avatar
    Your a monster bro - keep up the amazing work
    2015-01-14 05:25 AM
  14. dapes's Avatar
    Loving these! June, my lockscreen isn't showing the photo I selected in camera roll, what am I doing wrong? It just shows the background but no photo in the circle. (This is for the Login cydget)
    2015-01-14 07:31 AM
  15. June'sIphone's Avatar
    Loving these! June, my lockscreen isn't showing the photo I selected in camera roll, what am I doing wrong? It just shows the background but no photo in the circle. (This is for the Login cydget)
    Seems like you have something installed that is causing this issue. Maybe a popup blocker?
    2015-01-14 08:03 AM
  16. dapes's Avatar
    Seems like you have something installed that is causing this issue. Maybe a popup blocker?
    Thanks for the reply, I think that might be the culprit.
    2015-01-14 08:35 AM
  17. June'sIphone's Avatar
    Question from reddit : Day 3 free weather lockscreen (Cydget) : iOSthemes


    "Anyway to disable default unlock?"


    Yes. When I added the draggable object, I had to included evt.preventDefault(); which would stop the whole lockscreen from scrolling when the div (the slider) was moved.

    To stop the lockscreen itself from moving (which would stop the standard unlock mechanism) you need to create a transparent div that would get the touch. Before the last div in the body add a new div.

    Code:
    <div id="bg"ontouchstart="drag.startMoving(this, 'container', event);"></div>
    The div needs to have ontouchstart to start the drag code (which has the evt.preventDefault()

    In the css you need to size the div and place it below everything by adding z-index:-1;

    Code:
    #bg{
            background-color: transparent;
            width:320px;
            height: 568px;
            z-index: -1;
        }
    Since I added the option to show the arrow when someone drags the slider you will need to change this so it does not show when the #bg is touched.

    Code:
    startMoving : function(div, container, evt){
    
    
                if(div.id == "bg"){
                }
                else{
                    getEL('arrow').style.display="block";
                }
    
    
                evt = evt || window.event;
    for this just add an if statement. If the div.id == "bg" then don't show the arrow.
    2015-01-14 09:50 PM
  18. June'sIphone's Avatar
    Day 5
    2015-01-14 10:05 PM
  19. June'sIphone's Avatar
    Comment from Reddit: Day 5 free lockscreen (Cydget) : iOSthemes

    "This is awesome. However I'm really finicky about the additional zero on twelve hour clocks. Is there a way I could take it off?"

    Yes, you can remove the code that adds the 0 from the getTimes function.

    Code:
    getTimes = function(){
        var datTime, hours, minutes;
        datTime = new Date();
        hours = datTime.getHours();
        minutes = datTime.getMinutes();
        if( minutes <= 9){
            minutes = "0" + minutes; //pad minutes with a zero
        }
        if (TwentyFour!=true){
            hours = ((hours + 11) % 12 + 1);
        }
        if(hours<=9){ hours = "0" + hours;} //pad hours if single digit
        getEL('time').innerHTML = hours + ":" + minutes;
    }
    The actual code that adds the 0 is
    Code:
    if(hours<=9){ hours = "0" + hours;} //pad hours if single digit
    You can get rid of it by simply adding // before the if this will comment out the line. Commenting it out will disable it, now the parser will look at it as a comment.

    The code should now look like this.

    Code:
    getTimes = function(){
        var datTime, hours, minutes;
        datTime = new Date();
        hours = datTime.getHours();
        minutes = datTime.getMinutes();
        if( minutes <= 9){
            minutes = "0" + minutes; //pad minutes with a zero
        }
        if (TwentyFour!=true){
            hours = ((hours + 11) % 12 + 1);
        }
        //if(hours<=9){ hours = "0" + hours;} //pad hours if single digit
        getEL('time').innerHTML = hours + ":" + minutes;
    }
    Last edited by June'sIphone; 2015-01-14 at 10:33 PM.
    2015-01-14 10:31 PM
  20. Zooropalg's Avatar
    That's awesome!
    2015-01-14 10:50 PM
193 123 ...
LINK TO POST COPIED TO CLIPBOARD