Comments (12)
RAP/RWT does not scale the images at all. If some scaling occurs, that's probably comes from the JFace/Workbench code.
There is an old enhancement request here:
529704: Implement support high-res/scaling support for Canvas
https://bugs.eclipse.org/bugs/show_bug.cgi?id=529704
Are you using e3 or e4?
from org.eclipse.rap.
Is it possible to demonstrate the issue with a simple standalone RWT snippet (entry point), without jface/workbench? Probably you can create a patch against our Controls demo or test it there.
from org.eclipse.rap.
Ivan, thanks a lot for the quick reply. We're not using any JFace nor Workbench, only pure SWT and we're on 3.22 for RAP.
So yes, this devicePixelRatio issue is probably what we're facing. It's not so bad for the toolbar icons. For the SVG that we're rending of our pipelines and workflows it's a bit harder on the eyes.
If we could get the Canvas to not be blurry that would be a fantastic first step. We're doing our own rendering in a bit of JavaScript on top of Canvas. We set data on it so it knows what to draw.
If there's a way for us to change the devicePixelRatio in some way at the start of the application? That would be more than enough. A quick browser tab refresh would be all that's needed to pick up a ratio in that case.
Is this something we can set in CSS? Thanks in advance for any tips you might have!
from org.eclipse.rap.
Since Apache Hop is open source, you can try the application yourself with:
docker run -p 8080:8080 apache/hop-web:Development
Then open your browser on http://localhost:8080
from org.eclipse.rap.
Another example of low resolution in my browser (on 4k screen): https://rap.eclipsesource.com/demo/release/controls/#Canvas
from org.eclipse.rap.
Is this what you need? https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio
You can set it as CSS for your application without any RAP framework change.
from org.eclipse.rap.
... and maybe this will help too: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
from org.eclipse.rap.
Thanks a lot @ifurnadjiev. There are 2 aspects to this really.
First, the low resolution of the toolbar icons. They really should be sourced from the original SVG images.
That way we don't have to worry about it.
The path I'm taking for that is by creating an exception in the code for the RAP GUI (vs the SWT variant) for toolbar icons.
In this case I'm using a label with MARKUP_ENABLED as sort of custom toolbar item widget.
I'm uploading the SVG files as resources.
After that I have a facade implementation for the label:
// What's the location of the SVG file?
String src = RWT.getResourceManager().getLocation(imageFile);
label.setData(RWT.MARKUP_ENABLED, Boolean.TRUE);
label.setText("<img id='svg-label' width='" + size + "' height='" + size + "' src='" + src + "'/>");
The main concern then is to "disable" this toolbar icon. I'm looking at some JavaScript for that.
The second part is the resolution of the canvas areas. I know about the device/pixel ratio. What I don't know is how to set it or change it in the RAP CSS file that we have, for example.
Any help with both topics would be really nice. It would for example be really nice if we had a way to set the SVG images for enabled/disabled on the ToolbarItem itself:
toolbarItem.setData(RWT.SVG_IMAGE, "somefile.svg");
toolbarItem.setData(RWT.SVG_DISABLED_IMAGE, "somefile-disabled.svg");
The image and disabled image would then be the fallback scenario we already have.
Any tips on how to implement this would be welcome. I'd be happy to create the PR.
from org.eclipse.rap.
To use "standard" (not RWT styling) CSS in your application you have two options:
- Add HEAD HTML to the RAP startup page. See example here.
- Use
org.eclipse.rap.rwt.client.service.ClientFileLoader.requireCss(String)
to load CSS file at runtime
from org.eclipse.rap.
In order to set enabled/disabled SVG image on ToolItem you can try to execute a JavaScript with org.eclipse.rap.rwt.client.service.JavaScriptExecutor
that sets the image URL on the client directly.
See RAP Scripting section in our developers guide here:
- Get ToolItem id by
String id = WidgetUtil.getId( widget );
- Use
rwt.remote.ObjectRegistry.getObject( id ).setImage( svgUrl, width, height );
in your JavaScript to set the image
from org.eclipse.rap.
Unfortunately it looks like there's already style, header, meta information being set in rwt-index.html. I'll see if I can play around with this. I have a hard time building the project if I dare to change anything ;-)
from org.eclipse.rap.
So I managed to get the resolution increased, somewhat. Unfortunately this leads to all sorts of side-effects like the cursor hitting some things like buttons but missing mouse operations in general by a factor devicePixelRatio.
For changing the image or style of an image (grayscale, make lighter to signal disabled) on a <img>
with a known ID I'm still looking for a way. The handleEvent
method is only called when there's an event and for setEnabled()/setVisible() there are no events thrown.
I think that for the Canvas I also need to look into a custom widget implementation.
from org.eclipse.rap.
Related Issues (20)
- Retry on connection error doesn't work with CSP enabled
- Handling network connection error with SeverPush active HOT 7
- Missing requirement: org.eclipse.rap.rwt.osgi 3.22.0.20220708-1200 requires 'java.package; javax.servlet [4.0.0,5.0.0)' but it could not be found HOT 3
- RAP version which support jboss8 and openjdk17 HOT 7
- Ampersand character ommited from label text HOT 1
- selection in not yet focused multiline Text widget HOT 2
- CSRF security HOT 2
- Focus issues with ContextMenu in Chrome/Edge browser
- pack column for Tableviewer
- Copy of photo is stored on server and never cleaned up
- Grid calculates row height only on Hover
- GridEditor displayed at wrong offset for auto-height rows HOT 6
- Methods annotated with @PersistState have no effect on the saved model XMI in RAP HOT 4
- ConcurrentModificationException in LifeCycleServiceHandler HOT 3
- Client sometimes doesn't re-layout on browser window size change HOT 4
- TypeError when POST fails causes error-dialog is not shown HOT 3
- No jface.databinding.swt.typed package? HOT 22
- Mouse up / down event not triggering on table header click or select HOT 7
- Improve deployment of realease artefacts to Maven Central
- Wrong handling error in ServerPush.js / Connections.js HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from org.eclipse.rap.