Work on HTML5 text

base.js

@@ -458,7 +458,129 @@ function TextField() {
 	this.textHeight = 100;
 	this.textWidth = 100;
 	this.text = "";
-	this.draw = function(frame,frame2,r) {
+	this.textColor = "#000000"
+	this.borderColor = "#000000"
+	this.backgroundColor = "#FFFFFF"
+	this.border = false
+	this.hwaccel = true		// Use the browser function for drawing text (faster)
+	this._documentObject = document.createElement('div')
+	document.getElementById('events').appendChild(this._documentObject)
+	this._documentObject.style.zIndex = 10
+	this._documentObject.style.position = 'absolute'
+	//this._documentObject.style.color = 'rgba(255,255,255,0)'
+	this._documentObject.innerHTML = this.text
+	this._textFormat = new TextFormat()
+	this._textFormat.size = 12
+	this._draw = function(frame,frame2,r) {
+		this._documentObject.innerHTML = this.text;
+		this._width = this._documentObject.clientWidth
+		this._height = this._documentObject.clientHeight
+		this._documentObject.style.fontSize=this._textFormat.size+"px"
+		if (!frame2) {
+			this._x = frame._x
+			this._y = frame._y
+			this._xscale = frame._xscale
+			this._yscale = frame._yscale
+			this._rotation = frame._rotation
+			if (frame.textColor) {
+				this.tcolr = parseInt(parseInt(frame.textColor.replace("#",""),16)/65536)
+				this.tcolg = parseInt(parseInt(frame.textColor.replace("#",""),16)/256)%256
+				this.tcolb = parseInt(parseInt(frame.textColor.replace("#",""),16))%256
+				this.bcolr = parseInt(parseInt(frame.borderColor.replace("#",""),16)/65536)
+				this.bcolg = parseInt(parseInt(frame.borderColor.replace("#",""),16)/256)%256
+				this.bcolb = parseInt(parseInt(frame.borderColor.replace("#",""),16))%256
+				this.textColor = "#"+decimalToHex(this.tcolr,2)+decimalToHex(this.tcolg,2)+decimalToHex(this.tcolb,2)
+				this.borderColor = "#"+decimalToHex(this.bcolr,2)+decimalToHex(this.bcolg,2)+decimalToHex(this.bcolb,2)
+			}
+		} 
+		else {
+			this._x = ave(frame2._x, frame._x, r)
+			this._y = ave(frame2._y, frame._y, r)
+			this._xscale = ave(frame2._xscale, frame._xscale, r)
+			this._yscale = ave(frame2._yscale, frame._yscale, r)
+			this._rotation = ave(frame2._rotation ,frame._rotation, r)
+			if (frame2.textColor) {
+				this.tcolr2 = parseInt(parseInt(frame2.textColor.replace("#",""),16)/65536)
+				this.tcolg2 = parseInt(parseInt(frame2.textColor.replace("#",""),16)/256)%256
+				this.tcolb2 = parseInt(parseInt(frame2.textColor.replace("#",""),16))%256
+				this.tcolra = parseInt(parseInt(frame.textColor.replace("#",""),16)/65536)
+				this.tcolga = parseInt(parseInt(frame.textColor.replace("#",""),16)/256)%256
+				this.tcolba = parseInt(parseInt(frame.textColor.replace("#",""),16))%256
+				this.tcolr = parseInt(ave(this.tcolr2, this.tcolra, r))
+				this.tcolg = parseInt(ave(this.tcolg2, this.tcolga, r))
+				this.tcolb = parseInt(ave(this.tcolb2, this.tcolba, r))
+				this.textColor = "#"+decimalToHex(this.tcolr,2)+decimalToHex(this.tcolg,2)+decimalToHex(this.tcolb,2)
+			}
+			if (frame2.borderColor) {
+				this.bcolr2 = parseInt(parseInt(frame2.line.replace("#",""),16)/65536)
+				this.bcolg2 = parseInt(parseInt(frame2.line.replace("#",""),16)/256)%256
+				this.bcolb2 = parseInt(parseInt(frame2.line.replace("#",""),16))%256
+				this.bcolra = parseInt(parseInt(frame.line.replace("#",""),16)/65536)
+				this.bcolga = parseInt(parseInt(frame.line.replace("#",""),16)/256)%256
+				this.bcolba = parseInt(parseInt(frame.line.replace("#",""),16))%256
+				this.bcolr = parseInt(ave(this.bcolr2, this.bcolra, r))
+				this.bcolg = parseInt(ave(this.bcolg2, this.bcolga, r))
+				this.bcolb = parseInt(ave(this.bcolb2, this.bcolba, r))
+				this.borderColor = "#"+decimalToHex(this.bcolr,2)+decimalToHex(this.bcolg,2)+decimalToHex(this.bcolb,2)
+			}
+		}
+		if (!this.hwaccel) {
+			this._documentObject.style.color = 'rgba(255,255,255,0)'
+			cr.save()
+			cr.translate(this._x,this._y)
+			cr.rotate(this._rotation*Math.PI/180)
+			cr.scale(this._xscale*1.0, this._yscale*1.0)
+			cr.fillStyle = this.textColor.substr(0,7);
+			cr.strokeStyle = this.borderColor.substr(0,7);
+			cr.textBaseline = 'top'
+			if (this._textFormat.font) {
+				if (this._textFormat.size){
+					cr.font = this._textFormat.size+"pt "+this._textFormat.font;
+					this._documentObject.style.font = this._textFormat.size+"pt "+this._textFormat.font;
+				} else {
+					cr.font = "12pt "+this._textFormat.font;
+					this._documentObject.style.font = "12pt "+this._textFormat.font;
+				}
+			} else if (this._textFormat.size){
+				cr.font = this._textFormat.size+"pt Times New Roman"
+				this._documentObject.style.font = this._textFormat.size+"pt Times New Roman"
+			} else {
+				cr.font = "12pt Times New Roman"
+				this._documentObject.style.font = "12pt Times New Roman"
+			}
+			cr.fillText(this.text, 0, 0)
+			if (this.border) {
+				cr.beginPath()
+				cr.moveTo(0,0)
+				cr.lineTo(this._width,0)
+				cr.lineTo(this._width,this._height)
+				cr.lineTo(0,this._height)
+				cr.lineTo(0,0)
+				cr.stroke()
+			}
+			cr.restore()
+			cr.beginPath()
+		}
+		else {
+			if (this._textFormat.font) {
+				if (this._textFormat.size){
+					cr.font = this._textFormat.size+"pt "+this._textFormat.font;
+					this._documentObject.style.font = this._textFormat.size+"pt "+this._textFormat.font;
+				} else {
+					cr.font = "12pt "+this._textFormat.font;
+					this._documentObject.style.font = "12pt "+this._textFormat.font;
+				}
+			} else if (this._textFormat.size){
+				cr.font = this._textFormat.size+"pt Times New Roman"
+				this._documentObject.style.font = this._textFormat.size+"pt Times New Roman"
+			} else {
+				cr.font = "12pt Times New Roman"
+				this._documentObject.style.font = "12pt Times New Roman"
+			}
+		}
+		this._documentObject.style.left = this._x
+		this._documentObject.style.top = this._y
+		
 		
 	}
 }
@@ -729,6 +851,27 @@ Key.removeListener = function(listener) {
 	Event.remove(listener)
 }
 
+function TextFormat () {
+	this.align="left"	//Yes, I know it's supposed to be 'undefined', but that defaults to 'left'
+	this.blockIndent=0
+	this.bold = false
+	this.bullet = null
+	this.color = 0x000000	//hmm...
+	this.font = null
+	this.indent = 0
+	this.italic = false
+	this.kerning = false // And I doubt I will implement it since even Adobe doesn't on OSX...
+	this.leading = 0 // TODO: research this in CSS
+	this.leftMargin = 0
+	this.letterSpacing = 0
+	this.rightMargin = 0
+	this.size = null // Default value is null? WTF?
+	this.tabStops = new Array()
+	this.target = "_self" //ActionScript docs specify no default value - find out what it is
+	this.underline = false
+	this.url = null
+}
+
 //TODO: ContextMenu
 
 

lightningbeam.py

@@ -243,13 +243,15 @@ visibility: hidden; }\n\
 </style>\n\
 </head>\n\
 <body>\n\
+<div id='events'>\n\
 <canvas id=\"canvas1\" width="+str(svlgui.WIDTH)+" height="+str(svlgui.HEIGHT)+" ></canvas>\n\
 <canvas id=\"canvas2\" width="+str(svlgui.WIDTH)+" height="+str(svlgui.HEIGHT)+"></canvas>\n\
+</div>\n\
 <script>\n\
 //Setup\nvar fps = "+str(svlgui.FRAMERATE)+";\n</script>\n\
 <script src=\"base.js\">\n\
 </script>\n\
-<script>"+"".join([i.print_html() for i in svlgui.Library])+root.print_html()+"\n\
+<script>\n"+"".join([i.print_html() for i in svlgui.Library])+root.print_html()+"\n\
 document.onmousemove = function(e){_root._xmouse=e.pageX;_root._ymouse=e.pageY}\n\
 document.onmousedown = function(e){Event.doEvent(\"onMouseDown\")}\n\
 document.onkeydown = function(e){Key.press(e);Event.doEvent(\"onKeyDown\")}\n\

lightningbeam_windows.py

@@ -301,6 +301,8 @@ class MainWindowOSX:
 		self.tinstancename._int().mouse_down = self.darkentinstance
 		self.tinstancename.set_action(self.setFontInstanceName)
 		self.tinstancename.disable()
+		self.thwaccel = svlgui.CheckBox("Draw on top (improves performance under HTML5)")
+		self.thwaccel.action = self.setFontHWAccel
 		self.textbox.layout_self([self.tgroup[0],10,None,5,None,"nw",""],
 								[self.tgroup[1],10,None,self.tgroup[0]._int(),None,"nw",""],
 								[self.tgroup[2],10,None,self.tgroup[1]._int(),None,"nw",""],
@@ -314,7 +316,8 @@ class MainWindowOSX:
 								[self.fontsizentry,self.fontsizelabel._int(),None,5,None,"nw",""],
 								[self.fontsizescale,self.fontsizentry._int(),None,5,None,"nw",""],
 								[self.textvarlabel,self.tfontbutton._int(),None,self.fontsizentry._int()+3,None,"nw",""],
-								[self.textvarentry,self.textvarlabel._int(),None,self.fontsizentry._int()+3,None,"nw",""])
+								[self.textvarentry,self.textvarlabel._int(),None,self.fontsizentry._int()+3,None,"nw",""],
+								[self.thwaccel,self.tfontbutton._int(),None,self.textvarlabel._int()+3,None,"nw",""])
 		self.textvarentry.text=""
 		self.frame.layout_self(	[self.toolbox,0,None,0,None,"nw",""],
 								#[self.paintbox,0,245,0,0,"nws","v"],
@@ -364,6 +367,8 @@ class MainWindowOSX:
 		self.tinstancename._int().color = self.tinstancename.original_color
 		if self.tinstancename.text == "<Instance Name>":
 			self.tinstancename.text = ""
+	def setFontHWAccel(self):
+		svlgui.CURRENTTEXT.hwaccel = self.thwaccel.value
 
 # use mainwindowosx, this is just to comment things out
 class MainWindowHTML:

svlgui.py

@@ -159,10 +159,10 @@ if sys.platform=="linux2":
 	import tempfile
 	import GUI		# Using PyGUI. Experimental.
 	from GUI import Window as OSXWindow, Button as OSXButton, Image as OSXImage
-	from GUI import Frame as OSXFrame, Color as OSXColor, Grid as OSXGrid
+	from GUI import Frame as OSXFrame, Color as OSXColor, Grid as OSXGrid, CheckBox as OSXCheckBox
 	from GUI import Label as OSXLabel, RadioGroup as OSXRadioGroup, RadioButton as OSXRadioButton
 	from GUI import Column, Row, ScrollableView, TextEditor, Colors, ModalDialog
-	from GUI import StdCursors, Alerts, FileDialogs, Font, TextField, CheckBox, Slider
+	from GUI import StdCursors, Alerts, FileDialogs, Font, TextField, Slider
 	from GUI.StdMenus import basic_menus, file_cmds, print_cmds
 	from GUI.StdButtons import DefaultButton, CancelButton
 	from GUI.Files import FileType
@@ -185,10 +185,10 @@ elif sys.platform=="win32":
 	import misc_funcs
 	import GUI		# Using PyGUI. Experimental.
 	from GUI import Window as OSXWindow, Button as OSXButton, Image as OSXImage
-	from GUI import Frame as OSXFrame, Color as OSXColor, Grid as OSXGrid
+	from GUI import Frame as OSXFrame, Color as OSXColor, Grid as OSXGrid, CheckBox as OSXCheckBox
 	from GUI import Label as OSXLabel, RadioGroup as OSXRadioGroup, RadioButton as OSXRadioButton
 	from GUI import Column, Row, ScrollableView, TextEditor, Colors, ModalDialog
-	from GUI import StdCursors, Alerts, FileDialogs, Font, TextField, CheckBox, Slider
+	from GUI import StdCursors, Alerts, FileDialogs, Font, TextField, Slider
 	from GUI.StdMenus import basic_menus, file_cmds, print_cmds
 	from GUI.StdButtons import DefaultButton, CancelButton
 	from GUI.Files import FileType
@@ -214,10 +214,10 @@ elif sys.platform=="darwin":
 	import tempfile
 	import GUI		# Using PyGUI. Experimental.
 	from GUI import Window as OSXWindow, Button as OSXButton, Image as OSXImage
-	from GUI import Frame as OSXFrame, Color as OSXColor, Grid as OSXGrid
+	from GUI import Frame as OSXFrame, Color as OSXColor, Grid as OSXGrid, CheckBox as OSXCheckBox
 	from GUI import Label as OSXLabel, RadioGroup as OSXRadioGroup, RadioButton as OSXRadioButton
 	from GUI import Column, Row, ScrollableView, TextEditor, Colors, ModalDialog
-	from GUI import StdCursors, Alerts, FileDialogs, Font, TextField, CheckBox, Slider
+	from GUI import StdCursors, Alerts, FileDialogs, Font, TextField, Slider
 	from GUI.StdMenus import basic_menus, file_cmds, print_cmds
 	from GUI.StdButtons import DefaultButton, CancelButton
 	from GUI.Files import FileType
@@ -731,6 +731,24 @@ class Scale(Widget):
 		self.scale.value = val
 	value = property(getval, setval)
 	
+class CheckBox(Widget):
+	def __init__(self,text):
+		if SYSTEM=="osx":
+			self.box = OSXCheckBox(text)
+			self.box.action = self._action
+	def _int(self):
+		return self.box
+	def _action(self):
+		self.action()
+	def action(self):
+		pass
+	def get_value(self):
+		return self.box.value
+	def set_value(self, value):
+		self.box.value = value
+	value = property(get_value, set_value)
+		
+	
 class Canvas(Widget):
 	def __init__(self,width=False,height=False):
 		self.objs=[]
@@ -1318,6 +1336,7 @@ class Text (object):
 		self.width = self.font.width(self.text)
 		self.height = self.font.height
 		self.iname = None
+		self.hwaccel = None
 		self.type="Text"
 		self.name = "t"+str(int(random.random()*10000))+str(SITER)
 		SITER+=1
@@ -1410,7 +1429,8 @@ class Text (object):
 			+"pt\n"
 		return retval
 	def print_html(self):
-		retval = "var "+self.name+" = new Text();\n"+self.name+".text = \""+self.text+";\n"
+		retval = "var "+self.name+" = new TextField();\n"+self.name+".text = \""+self.text\
+			+"\";\n"+self.name+".hwaccel = "+str(self.hwaccel).lower()+"\n"
 		return retval
 	
 
@@ -2278,15 +2298,15 @@ class PublishSettingsWindow:
 			self.win.place(frame._int(), left=0, top=0, right=0, bottom=0, sticky="nsew")
 			plabel = Label("Settings-publish")
 			elabel = Label("Export: ")
-			self.c1 = CheckBox("SWF")
+			self.c1 = OSXCheckBox("SWF")
-			self.c2 = CheckBox("HTML5")
+			self.c2 = OSXCheckBox("HTML5")
-			self.c3 = CheckBox("Base HTML file")
+			self.c3 = OSXCheckBox("Base HTML file")
 			self.c3.action = self.deactivate4
-			self.c4 = CheckBox("Setup fallback content")
+			self.c4 = OSXCheckBox("Setup fallback content")
 			self.c4.action = self.activate3
 			swlabel = Label("SWF:")
 			htlabel = Label("HTML5:")
-			self.impack = CheckBox("Pack Images (Not implemented yet!)")
+			self.impack = OSXCheckBox("Pack Images (Not implemented yet!)")
 			self.impack.action = self.activate3
 			b1 = DefaultButton()
 			b1.action = self.confirm