--- a/src/js/widgets/polemicWidget.js Mon Nov 14 16:12:13 2011 +0100
+++ b/src/js/widgets/polemicWidget.js Mon Nov 14 17:19:26 2011 +0100
@@ -18,313 +18,315 @@
*/
// CHART TIMELINE / VERSION PROTOTYPE ::
-IriSP.PolemicWidget = function(Popcorn, config, Serializer) {
- IriSP.Widget.call(this, Popcorn, config, Serializer);
-
- this.userPol = new Array();
- this.userNoPol = new Array();
- this.userst = new Array();
- this.numberOfTweet = 0;
- this.Users;
- this.TweetPolemic;
- this.yMax = this.height;
- this.PaperSlider;
- this.heightOfChart;
- this.tweets = new Array();
- this.svgElements = new Array();
-
- // Make and define the Raphael area
- this.paper = Raphael(document.getElementById(this._id), config.width, config.height);
-
-};
+define(["IriSP", "widgets", "util", "tooltipWidget"], function() {
-IriSP.PolemicWidget.prototype = new IriSP.Widget();
-
-IriSP.PolemicWidget.prototype.draw = function() {
-
- // variable
- // yMax
+ IriSP.PolemicWidget = function(Popcorn, config, Serializer) {
+ IriSP.Widget.call(this, Popcorn, config, Serializer);
+
+ this.userPol = new Array();
+ this.userNoPol = new Array();
+ this.userst = new Array();
+ this.numberOfTweet = 0;
+ this.Users;
+ this.TweetPolemic;
+ this.yMax = this.height;
+ this.PaperSlider;
+ this.heightOfChart;
+ this.tweets = new Array();
+ this.svgElements = new Array();
- var self = this;
- var yCoef = 2; // coef for height of 1 tweet
- var frameSize = 5; // frame size
- var margin = 1; // marge between frame
- var lineSize = this.width; // timeline pixel width
- var nbrframes = lineSize/frameSize; // frame numbers
- var numberOfTweet = 0; // number of tweet overide later
- var duration = +this._serializer.currentMedia().meta["dc:duration"]; // timescale width
- var frameLength = lineSize / frameSize; // frame timescale
- var timeline;
- var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
+ // Make and define the Raphael area
+ this.paper = Raphael(document.getElementById(this._id), config.width, config.height);
+
+ };
+
+ IriSP.PolemicWidget.prototype = new IriSP.Widget();
+
+ IriSP.PolemicWidget.prototype.draw = function() {
- // array
- //var tweets = new Array();
- var element = new Array();
- var cluster = new Array();
- var frames = new Array(frameLength);
- var slices = new Array();
-
-
- // Classes =======================================================================
- var Frames = function(){
+ // variable
+ // yMax
+
+ var self = this;
+ var yCoef = 2; // coef for height of 1 tweet
+ var frameSize = 5; // frame size
+ var margin = 1; // marge between frame
+ var lineSize = this.width; // timeline pixel width
+ var nbrframes = lineSize/frameSize; // frame numbers
+ var numberOfTweet = 0; // number of tweet overide later
+ var duration = +this._serializer.currentMedia().meta["dc:duration"]; // timescale width
+ var frameLength = lineSize / frameSize; // frame timescale
+ var timeline;
+ var colors = new Array("","#1D973D","#C5A62D","#CE0A15","#036AAE","#585858");
+
+ // array
+ //var tweets = new Array();
+ var element = new Array();
+ var cluster = new Array();
+ var frames = new Array(frameLength);
+ var slices = new Array();
+
- var Myclusters;
- var x;
- var y;
- var width;
- var height;
- };
- Frames = function(json){
- // make my clusters
- // ou Frame vide
- };
- Frames.prototype.draw = function(){
- };
- Frames.prototype.zoom = function(){
- };
- Frames.prototype.inside = function(){
- };
- var Clusters = function(){
- var Object;
- var yDist;
- var x;
- var y;
- var width;
- var height;
- };
- Clusters = function(json){
- // make my object
- };
- var Tweet = function(){
- };
- // Classes =======================================================================
+ // Classes =======================================================================
+ var Frames = function(){
+
+ var Myclusters;
+ var x;
+ var y;
+ var width;
+ var height;
+ };
+ Frames = function(json){
+ // make my clusters
+ // ou Frame vide
+ };
+ Frames.prototype.draw = function(){
+ };
+ Frames.prototype.zoom = function(){
+ };
+ Frames.prototype.inside = function(){
+ };
+ var Clusters = function(){
+ var Object;
+ var yDist;
+ var x;
+ var y;
+ var width;
+ var height;
+ };
+ Clusters = function(json){
+ // make my object
+ };
+ var Tweet = function(){
+ };
+ // Classes =======================================================================
- // Refactoring (parametere) ************************************************************
- // color translastion
- var qTweet_0 =0;
- var qTweet_Q =0;
- var qTweet_REF=0;
- var qTweet_OK =0;
- var qTweet_KO =0;
- function colorTranslation(value){
- if(value == "Q"){
- qTweet_Q+=1;
- return 2;
- }else if(value =="REF"){
- qTweet_REF+=1;
- return 4;
- }else if(value =="OK"){
- qTweet_OK+=1;
- return 1;
- }else if(value =="KO"){
- qTweet_KO+=1;
- return 3;
- }else if(value ==""){
- qTweet_0+=1;
- return 5;
+ // Refactoring (parametere) ************************************************************
+ // color translastion
+ var qTweet_0 =0;
+ var qTweet_Q =0;
+ var qTweet_REF=0;
+ var qTweet_OK =0;
+ var qTweet_KO =0;
+ function colorTranslation(value){
+ if(value == "Q"){
+ qTweet_Q+=1;
+ return 2;
+ }else if(value =="REF"){
+ qTweet_REF+=1;
+ return 4;
+ }else if(value =="OK"){
+ qTweet_OK+=1;
+ return 1;
+ }else if(value =="KO"){
+ qTweet_KO+=1;
+ return 3;
+ }else if(value ==""){
+ qTweet_0+=1;
+ return 5;
+ }
}
- }
-
+
- this._serializer.sync(function(data) { loaded_callback.call(self, data) });
-
- function loaded_callback (json) {
-
- // get current view (the first ???)
- view = json.views[0];
+ this._serializer.sync(function(data) { loaded_callback.call(self, data) });
- // the tweets are by definition of the second annotation type FIXME ?
- tweet_annot_type = null;
- if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) {
- tweet_annot_type = view.annotation_types[1];
- }
-
- for(var i = 0; i < json.annotations.length; i++) {
- var item = json.annotations[i];
- var MyTime = Math.floor(item.begin/duration*lineSize);
- var Myframe = Math.floor(MyTime/lineSize*frameLength);
+ function loaded_callback (json) {
- if (typeof(item.meta) !== "undefined"
- && typeof(item.meta["id-ref"]) !== "undefined"
- && item.meta["id-ref"] === tweet_annot_type) {
-
- var MyTJson = JSON.parse(item.meta['dc:source']['content']);
+ // get current view (the first ???)
+ view = json.views[0];
- if (item.content['polemics'] != undefined
- && item.content['polemics'][0] != null) {
-
+ // the tweets are by definition of the second annotation type FIXME ?
+ tweet_annot_type = null;
+ if(typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) {
+ tweet_annot_type = view.annotation_types[1];
+ }
+
+ for(var i = 0; i < json.annotations.length; i++) {
+ var item = json.annotations[i];
+ var MyTime = Math.floor(item.begin/duration*lineSize);
+ var Myframe = Math.floor(MyTime/lineSize*frameLength);
+
+ if (typeof(item.meta) !== "undefined"
+ && typeof(item.meta["id-ref"]) !== "undefined"
+ && item.meta["id-ref"] === tweet_annot_type) {
+
+ var MyTJson = JSON.parse(item.meta['dc:source']['content']);
- for(var j=0; j<item.content['polemics'].length; j++){
-
- this.tweets[numberOfTweet] = {
- id:i,
- qualification:colorTranslation(item.content['polemics'][j]),
- yIndicator:MyTime,
- yframe:Myframe,
- title:item.content['title'],
- timeframe:item.begin,
- userId: MyTJson.id,
- userScreenName: MyTJson.screen_name,
- tsource:MyTJson
- };
- numberOfTweet+=1;
-
- }
- }
- else {
- this.tweets[numberOfTweet] = {
- id:i,
- qualification:colorTranslation(""),
- yIndicator:MyTime,
- yframe:Myframe,
- title:item.content['title'],
- timeframe:item.begin,
- userId: MyTJson.id,
- userScreenName: MyTJson.screen_name,
- tsource:MyTJson
-
- };
- numberOfTweet+=1;
- }
-
- }
- };
-
- DrawTweets.call (this); // FIXME: ugly.
-
- };
-
- // tweet Drawing (in raphael)
- function DrawTweets (){
- // GROUPES TWEET ============================================
- // Count nbr of cluster and tweet in a frame an save int in "frames"
- numberOfTweet = this.tweets.length;
- for(var i=0; i<nbrframes; i++) {
- for(var j=0; j<numberOfTweet; j++) {
-
- if (i==this.tweets[j].yframe){
-
- var k = this.tweets[j].qualification;
-
- // make array for frame cluster
- if(frames[i]==undefined){
- frames[i] = {id:i,
- qualifVol:new Array(),
- mytweetsID:new Array()
- };
+ if (item.content['polemics'] != undefined
+ && item.content['polemics'][0] != null) {
+
+
+ for(var j=0; j<item.content['polemics'].length; j++){
+
+ this.tweets[numberOfTweet] = {
+ id:i,
+ qualification:colorTranslation(item.content['polemics'][j]),
+ yIndicator:MyTime,
+ yframe:Myframe,
+ title:item.content['title'],
+ timeframe:item.begin,
+ userId: MyTJson.id,
+ userScreenName: MyTJson.screen_name,
+ tsource:MyTJson
+ };
+ numberOfTweet+=1;
+
+ }
}
- // add my tweet to frame
- frames[i].mytweetsID.push(this.tweets[j]);
-
- // count opinion by frame
- if( frames[i].qualifVol[k] == undefined){
- frames[i].qualifVol[k] = 1;
- }else{
- frames[i].qualifVol[k] += 1;
+ else {
+ this.tweets[numberOfTweet] = {
+ id:i,
+ qualification:colorTranslation(""),
+ yIndicator:MyTime,
+ yframe:Myframe,
+ title:item.content['title'],
+ timeframe:item.begin,
+ userId: MyTJson.id,
+ userScreenName: MyTJson.screen_name,
+ tsource:MyTJson
+
+ };
+ numberOfTweet+=1;
}
- }
- }
- }
-
- // GROUPES TWEET ============================================
- // max of tweet by Frame
- var max = 0;
- for(var i = 0; i < nbrframes; i++) {
- var moy = 0;
- for (var j = 0; j < 6; j++) {
- if (frames[i] != undefined) {
- if (frames[i].qualifVol[j] != undefined) {
- moy += frames[i].qualifVol[j];
+ }
+ };
+
+ DrawTweets.call (this); // FIXME: ugly.
+
+ };
+
+ // tweet Drawing (in raphael)
+ function DrawTweets (){
+ // GROUPES TWEET ============================================
+ // Count nbr of cluster and tweet in a frame an save int in "frames"
+ numberOfTweet = this.tweets.length;
+ for(var i=0; i<nbrframes; i++) {
+ for(var j=0; j<numberOfTweet; j++) {
+
+ if (i==this.tweets[j].yframe){
+
+ var k = this.tweets[j].qualification;
+
+ // make array for frame cluster
+ if(frames[i]==undefined){
+ frames[i] = {id:i,
+ qualifVol:new Array(),
+ mytweetsID:new Array()
+ };
+ }
+ // add my tweet to frame
+ frames[i].mytweetsID.push(this.tweets[j]);
+
+ // count opinion by frame
+ if( frames[i].qualifVol[k] == undefined){
+ frames[i].qualifVol[k] = 1;
+ }else{
+ frames[i].qualifVol[k] += 1;
+ }
+
}
}
}
-
- if (moy > max) {
- max = moy;
- }
- }
-
- var tweetDrawed = new Array();
- var TweetHeight = 5;
- // DRAW TWEETS ============================================
- for(var i = 0; i < nbrframes; i++) {
- var addEheight = 5;
- if (frames[i] != undefined){
- // by type
+ // GROUPES TWEET ============================================
+ // max of tweet by Frame
+ var max = 0;
+ for(var i = 0; i < nbrframes; i++) {
+ var moy = 0;
+ for (var j = 0; j < 6; j++) {
+ if (frames[i] != undefined) {
+ if (frames[i].qualifVol[j] != undefined) {
+ moy += frames[i].qualifVol[j];
+ }
+ }
+ }
- for (var j = 6; j > -1; j--) {
- if (frames[i].qualifVol[j] != undefined) {
- // show tweet by type
- for (var k = 0; k < frames[i].mytweetsID.length; k++) {
-
- if (frames[i].mytweetsID[k].qualification == j) {
- var x = i * frameSize;
- var y = this.heightmax - addEheight;
-
- if (this.yMax > y) {
- this.yMax = y;
+ if (moy > max) {
+ max = moy;
+ }
+ }
+
+ var tweetDrawed = new Array();
+ var TweetHeight = 5;
+
+ // DRAW TWEETS ============================================
+ for(var i = 0; i < nbrframes; i++) {
+ var addEheight = 5;
+ if (frames[i] != undefined){
+ // by type
+
+ for (var j = 6; j > -1; j--) {
+ if (frames[i].qualifVol[j] != undefined) {
+ // show tweet by type
+ for (var k = 0; k < frames[i].mytweetsID.length; k++) {
+
+ if (frames[i].mytweetsID[k].qualification == j) {
+ var x = i * frameSize;
+ var y = this.heightmax - addEheight;
+
+ if (this.yMax > y) {
+ this.yMax = y;
+ }
+
+ var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
+ this.svgElements.push(e);
+
+ addEheight += TweetHeight;
+
+ e.time= frames[i].mytweetsID[k].timeframe;
+ e.title= frames[i].mytweetsID[k].title;
+
+ e.mouseover(function(element) { return function (event) {
+ // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery.
+ self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160);
+ element.displayed = true;
+ debugger;
+ }}(e)).mouseout(function(element) { return function () {
+ self.TooltipWidget.hide.call(self.TooltipWidget);
+ }}(e)).mousedown(function () {
+ self._Popcorn.currentTime(this.time/1000);
+ });
+
+ IriSP.jQuery(e.node).attr('id', 't' + k + '');
+ IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title);
+ IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe);
}
-
- var e = this.paper.rect(x, y, frameSize - margin, TweetHeight /* height */).attr({stroke:"#00","stroke-width":0.1, fill: colors[j]});
- this.svgElements.push(e);
-
- addEheight += TweetHeight;
-
- e.time= frames[i].mytweetsID[k].timeframe;
- e.title= frames[i].mytweetsID[k].title;
-
- e.mouseover(function(element) { return function (event) {
- // event.clientX and event.clientY are to raphael what event.pageX and pageY are to jquery.
- self.TooltipWidget.show.call(self.TooltipWidget, element.title, element.attr("fill"), event.clientX - 106, event.clientY - 160);
- element.displayed = true;
- debugger;
- }}(e)).mouseout(function(element) { return function () {
- self.TooltipWidget.hide.call(self.TooltipWidget);
- }}(e)).mousedown(function () {
- self._Popcorn.currentTime(this.time/1000);
- });
-
- IriSP.jQuery(e.node).attr('id', 't' + k + '');
- IriSP.jQuery(e.node).attr('title', frames[i].mytweetsID[k].title);
- IriSP.jQuery(e.node).attr('begin', frames[i].mytweetsID[k].timeframe);
}
}
}
}
- }
- }
- // DRAW UI :: resize border and bgd
- this.paperBackground = this.paper.rect(0, 0, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1});
- // var PaperBorder = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1});
-
- this.paperSlider = this.paper.rect(0, 0, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1});
-
- // the small white line displayed over the slider.
- this.sliderTip = this.paper.rect(0, 0, 1, this.heightmax).attr({fill:"#fc00ff", stroke: "none", opacity: 1});
-
- // decalage
- // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1});
-
+ }
+ // DRAW UI :: resize border and bgd
+ this.paperBackground = this.paper.rect(0, 0, this.width, this.heightmax).attr({fill:"#F8F8F8","stroke-width":0.1,opacity: 1});
+ // var PaperBorder = this.paper.rect(0, this.yMax,this.width,1).attr({fill:"#fff",stroke: "none",opacity: 1});
+
+ this.paperSlider = this.paper.rect(0, 0, 0, this.heightmax).attr({fill:"#D4D5D5", stroke: "none", opacity: 1});
+
+ // the small white line displayed over the slider.
+ this.sliderTip = this.paper.rect(0, 0, 1, this.heightmax).attr({fill:"#fc00ff", stroke: "none", opacity: 1});
+
+ // decalage
+ // tweetSelection = this.paper.rect(-100,-100,5,5).attr({fill:"#fff",stroke: "none",opacity: 1});
+
+
+ this.paperSlider.toBack();
+ this.paperBackground.toBack();
+ this.sliderTip.toFront();
+ }
- this.paperSlider.toBack();
- this.paperBackground.toBack();
- this.sliderTip.toFront();
- }
-
- this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
-}
+ this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.sliderUpdater));
+ }
-IriSP.PolemicWidget.prototype.sliderUpdater = function() {
+ IriSP.PolemicWidget.prototype.sliderUpdater = function() {
- var time = +this._Popcorn.currentTime();
- var duration = +this._serializer.currentMedia().meta["dc:duration"];
-
- this.paperSlider.attr("width", time * (this.width / (duration / 1000)));
-
- this.sliderTip.attr("x", time * (this.width / (duration / 1000)));
-};
-
-
\ No newline at end of file
+ var time = +this._Popcorn.currentTime();
+ var duration = +this._serializer.currentMedia().meta["dc:duration"];
+
+ this.paperSlider.attr("width", time * (this.width / (duration / 1000)));
+
+ this.sliderTip.attr("x", time * (this.width / (duration / 1000)));
+ };
+});
+
\ No newline at end of file