TagVisor is a choreographer for events of animation and page modification in HTML5.
It reads instructions, rules, and dispatch operations, such as animations, in a given
HTML page, and its children objects, for example iframes. This library is highly
experimental -- use it at your own risk. TagVisor can be used to create live animated
experiences out of plain web pages.
Exploration and Paradigm: Compound Event Handlers
For a given document, there is a stack of event handlers associated with input fields.
These dispatch new events in the DOM tree, that can be evaluated by a general event
handler, that watches certain type of events -- named here a class event. A
class event handler, can then check all the values and decide to kick a new,
'compound event', if a desired condition is met based in the input values for
the original incoming events. As an example, imagine a voting
system web page with many input fields. Each input field stores a numeric value
and for each of them, there is an event handler. So, for every value mutation
in any given field, a class event is generated. This class event can be watched
by another event handler that can check if a given criteria is met, for example,
the sum of all the input fields to be greater than value X. Another case is
simply generating another event that has the current sum of all the input values.
Proposed features:
Animation and Special Effects for Web Pages, using an event model
Develops the Concept of Stream-driven event handling to enhance browsing session
Focuses in time and animation
Focuses in compound event handlers as means to trigger new events, and action
based in many initial events.
Iframes support
DOM Mutation Templates support
History and User-based Control to Modify Content
DOM Node to JS Object Reflection ( Core )
High level:
Clock generator/governance and tick event generator
Date/Hour generator for Hour and date events generation
Low Level:
Reflection Objects -- a reflection object is a JavaScript object that is associated with a node creation/removal/subtree update in the DOM. This is inspired in binding languages;
DOM mutation history and Session Management -- to allow a page to undo animation if desired -- this is in a way inspired in the concept of DOM tree session ( Browser session restore ) but it is meant for the level of DOM nodes and thir symmetric object that are in execution
Current ( old ) architecture:
is an example of a event handler. We currently load all these action events and create a map of events as an index = hash table. Then we start a clock ticker which will check the hash table using key being current sec. When there is a match, then we read the original tag and kick resulting effects.
Changes in the architecture:
The new architecture proposes that selectors whould monitor a live document that represents the events happening in a document. So, for example,
When happens in this live document, then we should be able to detect using a selector:
start { }
We should be able to maintain a state, in the tag store as well using functions. So in a way this is like XBL. For example:
start {
children: tick;
content: constructor() { this.tick=0; this.children.tick=this.tick;
}
So when live start happens, it would create a constructor that would maintain the live start tick = "0";
This would help us to run other selectors such as :
live start tick[time='2'] {
content: function () {
animate("panel3","scale");
}
}
How to map the current code to the new code?
For every DOM mutation in the live tree we call a querier. So, for example, if
Being the mutation: is:
New node
attribute modified
subtree modified
Node removed
New Node:
{ rule: live start tick { construct Ticker } }
stack["live start tick"]=new functions_hash["live start tick"]
stack["live start tick'].constructor(Node);
Node removed:
stack['live start tick'].clearTimers();
stack['live start tick']= null;
Attr modified:
{ rule: live start tick[s=2] { animate("something","to") } }
el = stack['live start tick'].getAttribute("s")==2
How to map the event rules
Rule('live start', ticker);
RuleAttr('live start tick','s','2', function () {
animate("panel1","2","move");
});
RuleAttr("live start tick","s","60", function () {
remove("live start");
insert("live start");
});
Case is to :
1) Create
1 -> 2 ( hour 1 + hour 2 }
1 -> 2 -> hour 1 {
tick s
}
1 -> 2 -> hour 2 {
wait 1 hr {
removeRule ("1->2")
removeNode(1>2>hour1)
}
}
Event manager.
The event manager is responsible for watching incoming events in a document tree. It uses the event name and data to find if there is a registered handler, in our case, this is defined by a a selector. When it finds this handler, it should execute the handler's function, which may generate other events. Each event has an unique ID and once processed, they are to be moved to a a data store that represents the history of events.
We can also have more than one event to trigger a handler. This operation is a composition
or a compound event - if you think that a new event will be result of multiple incoming
events. So, for example, here is one way to implement this:
* * {
kick marcio:one;
}
clock {
kick marcio:two;
}
marcio {
in: one & two;
out: marcio2
}
Issues with selectors
Wildcard: in order to make the wild card for ranges of values
you would need to generate a lot of selectors to the whole range
of possibilities.
Cases
Main rule for events that can apply to elements ( widgets ) amonng
all iframes including nested iframes.
* * 20 load iframe clock
* * 25 #clock zoom
internal ( scale ) - insertRule
* * 30 remove clock
Cases
For each second, we kick a time stamp event
if someone wants to add something to the current t+1
you insert a rule for the t+1.
Case, a 30 seconds animation that has t=1 E=1 t=10,E2 and t=20, E3
and repeats.
* * 1 E1
* * 10 E2
* * 20 E3
time[secs=1] { E1 } time[secs=10] { E2 } time[secs=20] { E3 }
Each time event that happens in the timeline DOM storage appears and
goes away, to a history DOM storage, which means processed.
DailyCron
A heart beat loop ticker system that queries a
data set of rules and applies ( generate events )
Introduction
TagVisor is a choreographer for events of animation and page modification in HTML5. It reads instructions, rules, and dispatch operations, such as animations, in a given HTML page, and its children objects, for example iframes. This library is highly experimental -- use it at your own risk. TagVisor can be used to create live animated experiences out of plain web pages.
Exploration and Paradigm: Compound Event Handlers
For a given document, there is a stack of event handlers associated with input fields. These dispatch new events in the DOM tree, that can be evaluated by a general event handler, that watches certain type of events -- named here a class event. A class event handler, can then check all the values and decide to kick a new, 'compound event', if a desired condition is met based in the input values for the original incoming events. As an example, imagine a voting system web page with many input fields. Each input field stores a numeric value and for each of them, there is an event handler. So, for every value mutation in any given field, a class event is generated. This class event can be watched by another event handler that can check if a given criteria is met, for example, the sum of all the input fields to be greater than value X. Another case is simply generating another event that has the current sum of all the input values.
Proposed features:
High level:
When
How to map the current code to the new code? For every DOM mutation in the live tree we call a querier. So, for example, if
Being the mutation:
1 -> 2 -> hour 2 { wait 1 hr { removeRule ("1->2") removeNode(1>2>hour1) } }
Event manager.
The event manager is responsible for watching incoming events in a document tree. It uses the event name and data to find if there is a registered handler, in our case, this is defined by a a selector. When it finds this handler, it should execute the handler's function, which may generate other events. Each event has an unique ID and once processed, they are to be moved to a a data store that represents the history of events.
We can also have more than one event to trigger a handler. This operation is a composition or a compound event - if you think that a new event will be result of multiple incoming events. So, for example, here is one way to implement this:
clock { kick marcio:two; }
marcio { in: one & two; out: marcio2 }
Issues with selectors
Cases
Cases
DailyCron
A heart beat loop ticker system that queries a data set of rules and applies ( generate events )
Temporal Selectors
Date, Time,
time[date="20/08/2011"] { apply-event: }
time[cron="* * *"] { apply-event: }
Mutation Events