{"id":606,"date":"2013-09-19T10:23:00","date_gmt":"2013-09-19T07:23:00","guid":{"rendered":"http:\/\/blog.iridi.com\/en\/2013\/09\/19\/how-to-create-analogue-clocks-in-iridium-gui-editor\/"},"modified":"2018-07-18T13:26:21","modified_gmt":"2018-07-18T10:26:21","slug":"how-to-create-analogue-clocks-in-iridium-gui-editor","status":"publish","type":"post","link":"https:\/\/blog.iridi.com\/en\/how-to-create-analogue-clocks-in-iridium-gui-editor\/","title":{"rendered":"How to Create Analogue Clocks in iRidium GUI Editor"},"content":{"rendered":"

Sergey Smirnov<\/i><\/p>\n

Script programmer at iRidium mobile<\/i><\/p>\n

The article presents step-by-step instructions on how to create an analogue clock in iRidium GUI Editor<\/a>. To do it you need the installed iRidium Environment<\/a>, some basic knowledge of iRidium GUI Editor <\/a> and iRidium Script<\/a> scenes. There are 6 steps<\/b> on the whole:<\/p>\n

    \n
  1. Creation of the clock face<\/a><\/li>\n
  2. Creation of the second hand<\/a><\/li>\n
  3. Creation of the minute hand<\/a><\/li>\n
  4. Creation of the hour hand<\/a><\/li>\n
  5. Fixing the hands together<\/a><\/li>\n
  6. Starting the clock<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    At the end of this article you can find a list of used Editor items <\/a>and the archive with the ready-for-work project.<\/a><\/p>\n

     <\/p>\n

    <\/a>Creation of the clock face<\/h4>\n

    1. Create an item <\/a> \u2013 the clock face – with the following properties:<\/p>\n

    Name:<\/b> Dial
    \nLeft:<\/b> 0
    \nTop:<\/b> 0
    \nWidth:<\/b> 363
    \nHeight:<\/b> 363<\/p>\n

    The rest properties <\/a> are by default.<\/p>\n

     <\/p>\n

    2. Set up the item appearance:<\/a><\/p>\n

    Color Alpha Channel:<\/b><\/p>\n

    The property regulates the transparency of the item background. Make the background transparent, indicate 0<\/b>.
    \n<\/b><\/p>\n

    Image:<\/b><\/p>\n

    Set<\/a> the clock face image dial.png<\/b> on the graphic item.
    \nThe image can be taken from     the archive with the ready project:<\/a>.<\/p>\n

    States:<\/b>
    \nRemove the second item state.<\/p>\n

     <\/p>\n

    <\/a>Creation of the second hand:<\/h4>\n

    1. Create an item <\/a> \u2013 the second hand – with the following properties:<\/p>\n

    Name:<\/b> Seconds
    \nLeft:<\/b> 179
    \nTop:<\/b> 45
    \nWidth:<\/b> 5
    \nHeight:<\/b> 272
    \nThe rest     properties <\/a> are by default.<\/p>\n

     <\/p>\n

    2. Theory:<\/p>\n

    At any moment the clock hand has a position defined as an angle of turning inside the clock face. Each item has an Angle<\/b> property which enables turning of the item.<\/p>\n

    Problem: <\/b> The characteristic feature of the Angle<\/b> property is a fixed point of turning located in the item center. For the clock hand the point of turning is its lower part.<\/p>\n

    <\/p>\n

    on the left <\/b> – the point of turning for the clock hand, on the right <\/b> – the point of turning for the item<\/p>\n

    Solution: <\/b> The background of the hand item will be transparent and the image set on this item will be equal to half the item height. As a result, only half the item will be seen and the lower part of the hand will be in the item center. That will create the correct turning angle.<\/p>\n

    3. Set up the item appearance:<\/a>
    \n Color Alpha Channel:<\/b>The property regulates the transparency of the item background. Make the background transparent, indicate 0<\/b>.
    \n<\/b><\/p>\n

    Image:<\/b>
    \n     Set the clock face image <\/a> Seconds.png<\/b> for the graphic item.
    \nThe image can be got from the archive with     the ready project.<\/a>
    \nImage Align:<\/b><\/p>\n

    The image Seconds.png<\/b> has smaller height than the item. In order to attach the image to the upper part of the item indicate top-middle<\/b>.<\/p>\n

    <\/b>States:<\/b>Remove the second item state.<\/p>\n

     <\/p>\n

    4. Calculations:<\/p>\n

    Each minute has 60 seconds.<\/b> Therefore the second hand has 60 positions <\/b>on the clock face. In one minute the second hand turns 360 degrees<\/b>. Hereof, the number of positions is less than the number of degrees.<\/b> It means the second hand moves from one position to another with a particular step<\/b>.<\/p>\n

    To calculate the step <\/b>it is required to know the ratio of the number of degrees to the number of positions in one full turning: 360 \/ 60 = 6. <\/b>The second hand moves with step 6.<\/b><\/p>\n

    The Seconds <\/b>system variable returns the value from 0<\/b> to 59<\/b>, where each of the values corresponds to one of the 60 positions<\/b> of the hand.<\/p>\n

    The turning angle forfor the second hand<\/b> is Seconds * 6<\/b><\/p>\n

    To turn the second hand, write the turning angle in the Angle <\/b>property of the item.<\/p>\n

    5. Write a script to turn the second hand:<\/p>\n

    <\/p>\n

    \/\/ Clock type, as the value instead of <\/span>item<\/span>_<\/span>Seconds<\/span> the identifier <\/span><\/p>\n

    \/\/ <\/span>of the second<\/span> hand item <\/span> is used<\/span><\/p>\n

    function<\/span><\/b> iRidium_Clock(item_Seconds)<\/span><\/p>\n

    {<\/span><\/p>\n

    \/\/ Function of turning the second hand<\/span><\/p>\n

    function<\/span><\/b> CurrentTime()<\/span><\/p>\n

    {<\/span><\/p>\n

    \/\/ Writing the value of the current number of seconds in the <\/span>Seconds variable<\/span><\/p>\n

    var<\/span><\/b> Seconds = IR.GetVariable<\/b>(“System.Time.Seconds”);<\/span><\/p>\n

    \/\/ Calculating the turning angle for the second hand Seconds * 6<\/span><\/p>\n

    \/\/ and writing this value in the Angle property of the item<\/span><\/p>\n

    item_Seconds.Angle = Seconds * 6;<\/span><\/p>\n

    } <\/span><\/p>\n

    \/\/ Turning of the second hand each 1000 ms <\/span><\/p>\n

    IR.SetInterval<\/b>(1000, CurrentTime); <\/span><\/p>\n

    }; <\/span><\/p>\n

    \/\/ Create the clock instance where <\/span>instead of <\/span>item<\/span>_<\/span>Seconds we receive <\/span>the item identifier<\/span><\/p>\n

    var<\/span><\/b> iRidium_Clock_1 = new<\/span><\/b> iRidium_Clock(IR.GetItem<\/b>(“Page 1”).GetItem<\/b>(“Seconds”));<\/span><\/p>\n

    <\/p>\n

    Note that<\/b> in the last string the receipt of the item identifier consists of two parts: <\/b><\/p>\n