- DOM marquee

+ CanvasMarquee

config/panel/scrollbar/oh14.json

 {
 	"texts": [
-		"BETA-V01 - 28.06.2015",
+		[
+			"BETA-V01 - 01.07.2015"
+		]
+		[
 			"Ihr wollt etwas beitragen?",
 			"https://bitbucket.org/FsInformatikDortmund",
 			"ib.2deep4real.de"
+		],
+		[
+			"Euch gefällt das Design nicht?",
+			"Reicht am besten eigene Vorschläge ein"
+		]
 	]
 }

panels/scrollbar/script.js

 this.loaded = function(panel, config) {
 	console.log("scrollbar: register with config [" + config + "]");
+	var CM;
   
-    $(panel).append('<div data-scrollbar-view></div>');
+	function CanvasMarquee() {
+		var
+			me = this,
+			bgColor		= "black",
+			fgColor		= "yellow",
+			font		= "vrr",
+			baseline	= 0.7,
+			textID		= -1,
+			amount		= 2,
+			delay		= 2,
+			width		= 0,
+			height		= 0,
+			left		= 0,
+			marquee		= null,
+			mctx		= null,
+			strings		= [],
+			texts		= [];
 		
-  this.scrollbar = {
-    "config": config,
-    innerContainer: $(panel).find('[data-scrollbar-view]'),
-    "panel": panel
+		init = function() {
+			marquee	= $(panel).find('[data-marquee]')[0];
+			width = $(panel).width();
+			height = $(panel).height();
+			$(marquee).attr('width', width).attr('height', height);
+			width	= $(marquee).width();
+			mctx = marquee.getContext('2d');
 		}
 		
-    var self = { 'me': this };
-
-    self.u = function() {update.call(self.me)};
-    self.r = function() {resize.call(self.me.scrollbar.innerContainer)};
-
+		this.setTexts = function(t) {
+			strings = t;
+			prerender();
+			textID = -1;
+			nextText();
+		}
 		
-/*  var u = function() {
-    update(panel,config,innerContainer);
-  };*/
-  setInterval(self.u, 300000);
+		this.resize = function() {
+			oldWidth = width;
+			width = $(panel).width();
+			height = $(panel).height();
+			$(marquee).attr('width', width).attr('height', height);
+			mctx = marquee.getContext('2d');
+			prerender();
+			left = left * width / oldWidth;
+		}
 		
-  /*var r = function() {
-    console.log(panel);
-    resize(panel, innerContainer);
-  };*/
+		render = function() {
+			if (left > -texts[textID].width) {
+				mctx.fillStyle = bgColor;
+				mctx.fillRect(0, 0, width, height);
+				mctx.drawImage(texts[textID].text, (left = left - (amount > 0 ? amount : 1)), 0);
+				window.requestAnimationFrame(render);
+			} else {
+					setTimeout(nextText, (delay >= 0 ? delay : 0) * 1000);
+			}
 			
-  $(window).resize(self.r);
+		}
 		
-  self.u();
+		nextText = function() {
+			textID = (textID + 1) % texts.length;
+			left = width;
+			window.requestAnimationFrame(render);
 		}
 		
-var update = function(panel,config,innerContainer) {
-	console.log("scrollbar: get data [" + this.scrollbar.config + "]");
-  var self = this;
-	$.get("config/panel/scrollbar/oh14.json", function(decodedData) {
+		prerender = function() {
+			var fsize = height;
+			mctx.font = fsize + "px " + font;
+			for (var i = 0; i < strings.length; ++i) {
 				var 
-			tplScrl = $(self.scrollbar.panel).find('template[data-scrollbar]').html(),
-			element = '',
-			concatText = '';
-		console.log("scrollbar: parse texts [" + self.scrollbar.config + "]");
-		concatText = '+++&emsp;' + decodedData.texts.join('&emsp;+++&emsp;&emsp;&emsp;&emsp;+++&emsp;') + '&emsp;+++&emsp;&emsp;&emsp;&emsp;';
-		element = $(tplScrl).clone();
-		$(element).html(concatText);
-		console.log("scrollbar: insert new HTML [" + self.scrollbar.config + "]");
-		$(self.scrollbar.innerContainer).empty().append(element);
-		//initMarquee(self.scrollbar.panel);
-    resize(self.scrollbar.innerContainer);
+					text = '+++ ' + strings[i].join(' +++    +++ ') + ' +++',
+					bWidth = mctx.measureText(text).width,
+					buffer = document.createElement('canvas');
+				$(buffer).attr("width", bWidth);
+				bctx = buffer.getContext('2d');
+				bctx.font = fsize + "px " + font;
+				bctx.fillStyle = fgColor;
+				bctx.fillText(text, 0, fsize * baseline);
+				texts.push({
+					'text'	: buffer,
+					'width'	: bWidth
 				});
 			}
+		}
 		
-var resize = function(innerContainer) {
-	//console.log(panel);
-	var
-		scale = $(innerContainer).innerHeight() / 100,
-		text = $(innerContainer).find('[data-marquee]'),
-		// setze größen der schriften mit scale * n wobei n in prozent von panelhöhe
-		textH = scale * 90;		// der scrolltext
+		init();
+	}
+	$.get("config/panel/scrollbar/oh14.json", function(decodedData) {
+		CM = new CanvasMarquee();
+		CM.setTexts(decodedData.texts);
+		$(window).resize(CM.resize);
+	});
 	
-	// setze info nachricht größe
-	$(text).css('height', textH + 'px');
-	$(text).css('fontSize', (textH-2) + 'px');
-	$(text).css('lineHeight', textH + 'px');
 }

panels/scrollbar/style.less

-[data-scrollbar-view] {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	background-color: #000000;
-	border-style: solid;
-	border-color: #000000;
-	padding: 0px;
-	box-sizing: border-box;
-	overflow: hidden;
-	font-family: vrr;
-
-	marquee {
-		background-color: #000000;
-		color: #FFC000;
-	}
-
-	[data-css-marquee]  {
-		position: relative;
-		overflow: hidden;
-		width: 100%;
-		height: 100%;
-		display: inline-block;
-		background-color: #000000;
-		
-		[data-css-marquee-text] {
-			position: absolute;
-			display: table-cell;
-			padding: 0px;
-			white-space: nowrap;
-			background-color: #000000;
-			color: #FFC000;
-			cursor:default;
-		}
-	}
-	
-}
\ No newline at end of file

panels/scrollbar/template.html

-<template data-scrollbar>
-	<marquee data-marquee data-speed="60"></marquee>
+<canvas data-marquee></canvas>
\ No newline at end of file
-</template>
\ No newline at end of file