BeeToo API aims to get profit from code reusability inside home automation project. Complex BeeToo UI project structure with 3 layers being controlled by connected API. That is not changing from project to project. This is the key feature, that helps not to write custom bunch of code for each installation project.
Animation framework
Animation framework is wrapper around standard iRidium Script API IR.Tween: https://wiki2.iridiummobile.ru/Systems_API/IR.Tween
Framework allows programmer to easily run animation, defining the target of animation process and the properties, which are will be changed during animation process.
Method of animation call almost the same as jQuery's animate function: https://api.jquery.com/animate
Typical call of our animation API looks like that:
Animation.run(IR.GetPopup('FoobarPopup').GetState(0), 'Opacity', {start: 0, finish: 255}, PLAN_POPUP_SHOW_TIME);
Syntax:
Animation.run(uiObject, uiProperty, {start: startValue, finish: finishValue}, time, [tweenFunction]);
Function parameters:
{ start: startValue, finish: finishValue }
uiProperty=='X'
Start and finish value defined as:
{start: 400, finish: 600}
uiObject will be moving from left 400px to right 600px.
Also, you able to define animation in reverse side:
{start: 600, finish: 400}
and uiObject will be moving from right 600px to left 400px.
What's inside of Animation class?
When one run animation process, the current thread look through Animation processors pool for one that is not busy.
First free animation processor will receive animation task as an object with all necessary parameters.
That's all, your current thread is free to continue your own work. Cause each Animation processor works in separate non-blocking thread by means of IR.EVENT_WORK: https://wiki2.iridiummobile.ru/Systems_API/IR.EVENT_WORK
The pool of Animation processors (threads) is limited with 3 processors. Why exactly three? Cause each one is executing in separate thread and this is an extra overload for iRidium client application.
If you will try to run any (even empty) 5 or 10 threads with help of IR.EVENT_WORK, you will see the dramatic fall of speed and latency of UI will raise in i2next/i2control apps.
If one trying to run animation process and all animation threads are busy, than your traget's ui property will be changed without animation immediately.
And you will see in log record like that:
[12:45:02.453] Animation: failed to run animation. Cause: all animation threads are busy!
Special role plays global variable EVENT_WORK_PAUSED of Boolean type. All animation threads are paused while
EVENT_WORK_PAUSED==true
About purpose of such behaviour look in the 'Show hide popups framework' section. Please, do not access this global variable in your own routines. Use only setEventWorkPaused to change the value of EVENT_WORK_PAUSED.
Show hide popups framework
In project Project.irp we are using popups, that should be never hided. For example, BeeToo_background_popup. This popup contain beautiful backgrounds, each suitable for one room.
That's why we cannot use IR.HideAllPopups (see https://wiki2.iridiummobile.ru/GUI_API/IR.HideAllPopups). Cause it will hide background layer.
One should show popup through showPopup method and hide through hidePopup. hidePopup method each time checks, that the name of popup (popupName attribute) is contains in the SHOWED_POPUPS.
In the same manner, hideAllShowOnePopup method do not call IR.HideAllPopups, but call hidePopup method for each popup, intended to be hided.
Let's look closer to each function of API, defined inside BeeToo_show_hide_popups.js script file.
Returns true if popup with name popupName is shown.
If mentioned popup is not shown, or it doesn't exist at all - function returns false.
Funtion sets EVENT_WORK_PAUSED as true until timeout will be raised.
While EVENT_WORK_PAUSED is true, all Animation threads are paused.
It's used to show or hide popups in a smooth manner with their own animation. Animation threads will not affect on popups animation in that case.
In a xml below we see definition of group with id=1.
<Effects>
<Effect Delay="0" Duration="900" Group="1" SlideType="1" TweenType="20" Type="slide"/>
<Effect Delay="0" Duration="900" Group="1" TweenType="20" Type="fade"/>
</Effects>
setEventWorkPaused(AVERAGE_POPUP_SHOW_TIME+150);
will be executed.
Function showPopup is a wrapper around iRidium Script API IR.ShowPopup method (look at the wiki: https://wiki2.iridiummobile.ru/GUI_API/IR.ShowPopup). It shows popup, which name is passed in popupName parameter.
Additional callback showListener is being handled. The main addition is list of showed popups SHOWED_POPUPS.
Each popup, that is shown through showPopup method will be registered it this list.
<Effects>
<Effect Delay="0" Duration="900" Group="2" SlideType="0" TweenType="20" Type="slide"/>
<Effect Delay="0" Duration="900" Group="2" TweenType="20" Type="fade"/>
</Effects>
setEventWorkPaused(AVERAGE_POPUP_SHOW_TIME+150);
will be executed.
hidePopup - wrapper around iRidium Script API IR.HidePopup method (look at the wiki: https://wiki2.iridiummobile.ru/GUI_API/IR.HidePopup). It hides popup, which name is passed in popupName parameter.
Additional callback hideListener is being handled. The main addition is list of showed popups SHOWED_POPUPS.
Each popup, that is being hided through hidePopup method will be removed from this SHOWED_POPUPS list. Except the case, when do_not_remove_arr_item parameter passed with true value.
If false (default case), popups being hidden will move from left to right (out of the screen). And the popups being shown will move from left (out of the screen) to the right. If reverseEffect is equal to true, movements will take place in opposite direction: from right to left.
If true, will be applied slow animation for hiding and showing popups. Если true, будет применены замедленные эффекты анимации движения для скрытия и показа страниц.
Look at the difference between RIGHT_SLIDENFADE_EFFECT_GROUP[id=1] and RIGHT_SLOW_SLIDENFADE_EFFECT_GROUP[id=3] defined in Project.irp <Effects> tag.
Function hides current shown scenario popup (and additional plan popup) and show main popup for current room. There will be applied proper effects, different for popups being showed and popups being hided.
Method hides current popup. It may be main popup of room or popup of current scenario. In the same time method trying to show new popup with name scenarioPopupName. Right after the animation of showing the popup ends, scenarioStartFunction will be called. In common, this function executing all code dealing with scenario start process. Also, in the same moment, right after animation of showing scenario popup ends, popup with name planPopupName will be shown through smoothly fading in effect.
Method hides all shown popup (registered in SHOWED_POPUPS) and shows only one with the name defined in popupToShow attribute.
You able to define effect for show and hide processes through showEffectGroup and hideEffectGroup paratemers.
Moreover, one able to define callbacks after hide and show animation ends: showListener and hideListener parameters should contain appropriate functions.
If true, then popup message will be shown. In other case, message text will be applied into caption placed on the message popup. You able to show popup later.
In other case, message text will be applied into caption placed on the message popup. You able to show popup later.
Method is showing popup BeeToo_info_popup in the center of screen to user with message on it. In common popup has no buttons. But you able to customize it. Every user's click on popup will hide it. Popup has a timeout (4000ms), after which it will hide automatically.
For the list of all available background look at the definition of BACKGROUNS_POPUPS inside BeeToo_background_popups.js file.
Definition of BACKGROUNS_POPUPS array look like that:
BACKGROUNS_POPUPS = {
'room1': 0,
'room2': 1,
'room3': 2,
'room4': 3,
'room5': 4,
'room6': 5,
'room8': 6,
'room7': 7,
'room9': 8,
'room10': 9,
'room11': 10
}
Where room1 - is the name of background, 0 - is index of background. It's match
the state id of this background in Background UI item on the popup BeeToo_background_popup
(look inside
The difinition of the list BACKGROUNS_POPUPS for real project may look like that:
BACKGROUNS_POPUPS = {
'cinhall': 0,
'gymnasium': 1,
'relaxroom': 2,
'livingroom': 3,
'platon_bedroom': 4,
'daniil_bedroom': 5,
'tatiana_bedroom': 6,
'cabinet': 7,
'bedroom': 8,
'playroom': 9,
'bathroom': 10
}
Who shows popup for special room and is't background after start?
After project starts, one popup (we call it main) for specific room will be shown. The background appropriate for this room will be shown too. The code, executing mentioned procedures always placed inside BeeToo_onstart_show_popups.js script file. For example, content of this script file could be:
IR.AddListener(IR.EVENT_START, 0,
function () {
showBackground('room1');
showPopup("BeeToo_room1_main_popup");
});
