Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Remote Application Platform (RAP) » Rotated Text in RAP(How to draw rotated text in RAP)
Rotated Text in RAP [message #1076027] Tue, 30 July 2013 14:40 Go to next message
John Gymer is currently offline John Gymer
Messages: 187
Registered: November 2012
Location: UK
Senior Member
Does someone have an example of how to render rotated text in RAP?
90'/180'/270' are sufficient - it doesn't have to be an arbitrary angle.
In SWT you can use a GC and an Image like this:

	public Image createRotatedText(String text, Font font, Color foreground, Color background, int style) {
		// Get the current display
		Display display = Display.getCurrent();
		if (display == null) SWT.error(SWT.ERROR_THREAD_INVALID_ACCESS);
		
		// Create a GC to calculate font's dimensions
		GC gc = new GC(display);
		gc.setFont(font);
		
		// Determine string's dimensions
		FontMetrics fm = gc.getFontMetrics();
		Point pt = gc.textExtent(text);
		
		// Dispose that gc
		gc.dispose();
		
		// Create an image the same size as the string
		Image stringImage = new Image(display, pt.x, pt.y);
	
		// Create a gc for the image
		gc = new GC(stringImage); // THIS CAUSES RAP/TABRIS A PROBLEM!!!
		gc.setFont(font);
		gc.setForeground(foreground);
		gc.setBackground(background);
		
		// Draw the text onto the image
		gc.drawText(text, 0, 0);
		
		// Draw the image vertically onto the original GC
		Image image = createRotatedImage(stringImage, style);
		
		// Dispose the new GC
		gc.dispose();
		
		// Dispose the horizontal image
		stringImage.dispose();
		
		// Return the rotated image
		return image;
	}

	 public Image createRotatedImage(Image image, int style) {
		// Get the current display
		Display display = Display.getCurrent();
		if (display == null) SWT.error(SWT.ERROR_THREAD_INVALID_ACCESS);
		
		// Use the image's data to create a rotated image's data
		ImageData sd = image.getImageData();
		ImageData dd = new ImageData(sd.height, sd.width, sd.depth, sd.palette);
		
		// Determine which way to rotate, depending on up or down
		boolean up = (style & SWT.UP) == SWT.UP;
		
		// Run through the horizontal pixels
		for (int sx = 0; sx < sd.width; sx++) {
			// Run through the vertical pixels
			for (int sy = 0; sy < sd.height; sy++) {
				// Determine where to move pixel to in destination image data
				int dx = up ? sy : sd.height - sy - 1;
				int dy = up ? sd.width - sx - 1 : sx;
				
				// Swap the x, y source data to y, x in the destination
				dd.setPixel(dx, dy, sd.getPixel(sx, sy));
			}
		}
		
		// Create the vertical image
		return new Image(display, dd);
	 }



But Image is not implemented as a Drawable in RAP, so this solution is not an option.
Thus, the line "gc = new GC(stringImage);" does not compile.

Thanks, John


---
Just because you can doesn't mean you should
Re: Rotated Text in RAP [message #1077097 is a reply to message #1076027] Thu, 01 August 2013 08:41 Go to previous messageGo to next message
Tim Buschtoens is currently offline Tim Buschtoens
Messages: 383
Registered: July 2009
Senior Member
Hi.

Drawing on images in RWT would be very hard to implement.
I could imagine a relatively simple solution based on CSS3
transformations applied on labels. However, there would also be some
difficulties:

- only supported in modern browser [1]
- compute size method would not work correctly, manual layout required
- attaching CSS to the label would require messing with internals, so
the solution would be a semi-hack and not 100% future proof.

If the text does not have to be generated dynamically, I would just use
static images. Otherwise this above solution is the only one I can think
of right now.

Greetings,
Tim

[1] http://caniuse.com/#feat=transforms2d

Am 30.07.2013 16:40, schrieb John Gymer:
> Does someone have an example of how to render rotated text in RAP?
> 90'/180'/270' are sufficient - it doesn't have to be an arbitrary angle.
> In SWT you can use a GC and an Image like this:
>
>
> public Image createRotatedText(String text, Font font, Color
> foreground, Color background, int style) {
> // Get the current display
> Display display = Display.getCurrent();
> if (display == null) SWT.error(SWT.ERROR_THREAD_INVALID_ACCESS);
>
> // Create a GC to calculate font's dimensions
> GC gc = new GC(display);
> gc.setFont(font);
>
> // Determine string's dimensions
> FontMetrics fm = gc.getFontMetrics();
> Point pt = gc.textExtent(text);
>
> // Dispose that gc
> gc.dispose();
>
> // Create an image the same size as the string
> Image stringImage = new Image(display, pt.x, pt.y);
>
> // Create a gc for the image
> gc = new GC(stringImage); // THIS CAUSES RAP/TABRIS A PROBLEM!!!
> gc.setFont(font);
> gc.setForeground(foreground);
> gc.setBackground(background);
>
> // Draw the text onto the image
> gc.drawText(text, 0, 0);
>
> // Draw the image vertically onto the original GC
> Image image = createRotatedImage(stringImage, style);
>
> // Dispose the new GC
> gc.dispose();
>
> // Dispose the horizontal image
> stringImage.dispose();
>
> // Return the rotated image
> return image;
> }
>
> public Image createRotatedImage(Image image, int style) {
> // Get the current display
> Display display = Display.getCurrent();
> if (display == null) SWT.error(SWT.ERROR_THREAD_INVALID_ACCESS);
>
> // Use the image's data to create a rotated image's data
> ImageData sd = image.getImageData();
> ImageData dd = new ImageData(sd.height, sd.width, sd.depth,
> sd.palette);
>
> // Determine which way to rotate, depending on up or down
> boolean up = (style & SWT.UP) == SWT.UP;
>
> // Run through the horizontal pixels
> for (int sx = 0; sx < sd.width; sx++) {
> // Run through the vertical pixels
> for (int sy = 0; sy < sd.height; sy++) {
> // Determine where to move pixel to in destination
> image data
> int dx = up ? sy : sd.height - sy - 1;
> int dy = up ? sd.width - sx - 1 : sx;
>
> // Swap the x, y source data to y, x in the destination
> dd.setPixel(dx, dy, sd.getPixel(sx, sy));
> }
> }
>
> // Create the vertical image
> return new Image(display, dd);
> }
>
>
>
> But Image is not implemented as a Drawable in RAP, so this solution is
> not an option.
> Thus, the line "gc = new GC(stringImage);" does not compile.
>
> Thanks, John

--
Tim Buschtöns

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
Re: Rotated Text in RAP [message #1077922 is a reply to message #1077097] Fri, 02 August 2013 10:16 Go to previous messageGo to next message
John Gymer is currently offline John Gymer
Messages: 187
Registered: November 2012
Location: UK
Senior Member
Thanks Tim.
I'm a bit surprised it is as hard as that, and I don't really want to rely on CSS - people can futz with CSS, so would rather it was controller by code.
The text is dynamic unfortunately, so cannot use static images.
My solution in the meantime (a bit naff) is to put line breaks between each character, so the text is not rotated at all, but characters stack one above the other. Horrible solution, but without a better one I'm stuck with it for now.
Cheers, John


---
Just because you can doesn't mean you should
Re: Rotated Text in RAP [message #1079934 is a reply to message #1077922] Mon, 05 August 2013 08:53 Go to previous messageGo to next message
Tim Buschtoens is currently offline Tim Buschtoens
Messages: 383
Registered: July 2009
Senior Member
Hi.


> I'm a bit surprised it is as hard as that, and I don't really want to
> rely on CSS - people can futz with CSS, so would rather it was
> controller by code.

Hm, just to clarify, the CSS solution would just be to apply style
attributes directly to the HTML element - same as we do now with all
other attributes like position, font, color, etc. So I'm not sure how
people can "futz" with this any more than other with other HTML/CSS
attributes of any RWT widget.

Greetings,
Tim

--
Tim Buschtöns

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
Re: Rotated Text in RAP [message #1079958 is a reply to message #1079934] Mon, 05 August 2013 09:33 Go to previous messageGo to next message
John Gymer is currently offline John Gymer
Messages: 187
Registered: November 2012
Location: UK
Senior Member
Thanks Tim, and of course you are correct about the futzing aspect!
However, I'm obviously being a bit thick as to how to apply this CSS styling in RAP... here's what I've done:

Firstly, the Label has this code applied:
myLabel.setData(RWT.CUSTOM_VARIANT, "verticaltext");


To test that this gets applied, I did a simple styling to change foreground colour:

Label.verticaltext {
	color: #0077FF;
}


That worked perfectly. Next, I figured that rotation could be applied with the following in the CSS:

Label.verticaltext {
	transform: rotate(90deg);
}


...but that just barfed at load of the CSS with: org.w3c.css.sac.CSSException: Failed to read property transform: Unknown property transform

Have I missed another method of how to apply rotation?

Thanks (and sorry if my questions are beginnerish!), John


---
Just because you can doesn't mean you should
Re: Rotated Text in RAP [message #1080975 is a reply to message #1079958] Tue, 06 August 2013 16:26 Go to previous messageGo to next message
Cole Markham is currently offline Cole Markham
Messages: 133
Registered: July 2009
Senior Member
John,

Unfortunately, what you are trying to do will not work. The custom variant is only able to theme RWT widgets using predefined properties. It uses CSS as a standard file format for but interprets and applies the theme on the RAP server.

To use custom CSS, you can use a widget such as Label that supports HTML markup[1]. Then you can specify the text of the widget to include the CSS transform:
<span style="height: 50px;width:16px;display:block;"><span style="top: -16px;position: relative;-webkit-transform-origin: bottom left;-ms-transform-origin: bottom left;transform-origin: bottom left; -webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);display:block">Rotated</span></span>

As you can see there is a caveat to this approach, if you do not specify the box size in css RAP does not understand that the text was rotated and so computes the size incorrectly. That is the reason for the hardcoded sizes and the outer span in the code above. Obviously those sizes will change based on the text, so you would want a way to compute them at runtime. For example, you could render the text horizontally then query the size of the Label widget. Then you could set the text to include the correct sizes. Also note the transform-origin and the offset needed to align the rotated text properly. To support different browsers requires the use of multiple property names, resulting in some rather ugly code.

Another alternative is to draw the text into an image using AWT Graphics2D. See the RAP FAQ for dynamic images[2]. This is almost certainly the simplest solution, and I would recommend going this route unless you really just can't use images.

The final option is to use a custom widget[3]. At my last job, our team took this approach (back in the RAP 1.2 or 1.3 days). We used an html5 canvas to draw rotated text in Firefox and Chrome/Safari, and used a div with the CSS "writing-mode" property for IE. We also dynamically adjusted the font size to fit the available space (which is somewhat backwards from the typical SWT model). I no longer have access to this code, but I will talk to some of my colleagues and see if they could make it available. I wouldn't recommend something like this for a beginner though.


[1] http://eclipse.org/rap/developers-guide/devguide.php?topic=markup.html&version=2.1
[2] http://wiki.eclipse.org/RAP/FAQ#How_to_display_dynamically_created_images.3F
[3] http://eclipse.org/rap/developers-guide/devguide.php?topic=custom-widget.html&version=2.1

Good luck! I am happy to help if you have further questions.

Hope that helps,

Cole Markham
Re: Rotated Text in RAP [message #1085768 is a reply to message #1080975] Tue, 13 August 2013 10:48 Go to previous messageGo to next message
John Gymer is currently offline John Gymer
Messages: 187
Registered: November 2012
Location: UK
Senior Member
Hi Cole,
Thanks for your hints there... just got around to trying them, and the markup on a Label works a treat!
Wonder if there is a way to do it with Tabris on a device now... ?!
Cheers, John


---
Just because you can doesn't mean you should
Re: Rotated Text in RAP [message #1086467 is a reply to message #1085768] Wed, 14 August 2013 08:35 Go to previous message
Tim Buschtoens is currently offline Tim Buschtoens
Messages: 383
Registered: July 2009
Senior Member
Hi

Am 13.08.2013 12:48, schrieb John Gymer:
> Hi Cole,
> Thanks for your hints there... just got around to trying them, and the
> markup on a Label works a treat!

Congrats. I didn't even think about the MARKUP feature, so thanks to Cole!

> Wonder if there is a way to do it with Tabris on a device now... ?!

Nope, Tabris does and can not support MARKUP_ENABLED. I asked them, and
the only way seems to be to use images.

Greetings,
Tim

> Cheers, John
>

--
Tim Buschtöns

Twitter: @EclipseRAP
Blog: http://eclipsesource.com/blogs/

Professional services for RAP and RCP?
http://eclipsesource.com/services/rap/
Previous Topic:MenuBar background color
Next Topic:Trouble with the new Client API
Goto Forum:
  


Current Time: Tue Sep 23 06:20:37 GMT 2014

Powered by FUDForum. Page generated in 0.03354 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software