I want to edit the css of an embedded image dynamically and using push, the intention is to build a web browser game and I don't want a 'tool explosion', I'm using Hibernate+JPA, Vaadin, ivy and a tool for server-push.
I don't want to use GWT, partly because the only part of it that I want is the canvas drawing, which seems to be really overkill, GWT is massive and I don't want to learn it at this stage simply so I can draw 2D pictures and move them around smoothly.
Here's how I'm loading an image.
Embedded embedded_1;
....
embedded_1.setSource(new FileResource(
new File(VaadinService.getCurrent().getBaseDirectory().getAbsolutePath()
+"/WEB-INF/images/sun.gif")));
....
mainLayout = new AbsoluteLayout();
mainLayout.addComponent(embedded_1, "top:0.0px;left:0.0px:");
Inside Absolute layout there's a field I want to access.
LinkedHashMap<Component, ComponentPosition> componentToCoordinates ...
I looked at the other methods that get called when I do
mainLayout.addComponent(embedded_1, "top:0.0px;left:0.0px:");
and they don't do anything special, (ie access non-java files or use any dynamically generated code), there's a method that cleans up and validates the CSS, its wrapped into a ComponentPosition object and then it is put unceremoniously into the HashMap.
Why can't I access this HashMap and do edits on the values already mapped by a key without changing the key itself. I want to take an embedded object and change it's css position dynamically, to do that all I would need to do is execute code
componentToCoordinates.get(reference).setString("top:10.0px;left:0.0px;");
and I could generate the string dynamically etc.
Is there a 'proper' way of doing this or is it something I have to create my own solution for?
I found what I was looking for though it wasn't in the form I expected.
There's a method in the layout API called getPosition(Component c) that will return the css string.
You can then change the string and put it back into the Map using setPosition(Component c ComponentPosition cp)
Related
I would like to add an image to my web app, but I have some problems.
private void newImage(){
Image image = new Image("src/main/resources/images/sponsor.png");
absoluteLayout.addComponent(image);
}
I did something like that and it doesn't work. I searched for something about FileResource, but I still don't know how to do this.
My image file is placed in the directory src/main/resources/images:
I have also read the documentation site and it's still not working: https://vaadin.com/components/vaadin-image.
The existence of an absolute layout component and a Image class with a constructor taking only one argument implies that you're using Vaadin 8 (or older) whereas the documentation you linked to is for Vaadin 10 and newer.
As can be seen from the screenshot, the constructor parameter that you're passing the image path to is named caption. This is thus a text that is shown next to the image rather than a reference to the image data itself.
You need to also assign a Resource to the image, either as a second constructor parameter or using the separate setSource method. With your file in src/main/resources, the easiest way is to use a ClassResource that loads the data from the classpath.
Taken together, a working example would thus be something like this:
Image image = new Image();
image.setSource(new ClassResource("/images/sponsor.png"));
I am using a Vaadin 10 (Flow) Grid to stream data to new rows, and I am trying to add a custom image icon to my TemplateRenderer.
I have a TemplateRenderer setup like this:
TemplateRenderer<TradeUni> sizee = TemplateRenderer.<TradeUni>
of("<div class$=\"[[item.class]]\">[[item.size]]</div>")
.withProperty("class", cssClassProvider)
.withProperty("size", TradeUni::getSize);
Which displays my numbers correctly in the grid cell like this:
I would like to have my image rendered inside the same cell, to the left of the numbers.
This was my (very crude) attempt to import it using html:
TemplateRenderer<TradeUni> sizee = TemplateRenderer.<TradeUni>
of("<div class$=\"[[item.class]]\"><img src=\"i.imgur.com/3LQBglR.png\">[[item.size]]</div>")
.withProperty("class", cssClassProvider)
.withProperty("size", TradeUni::getSize);
Which give's me this:
I think that I might have to wrap the image and numbers into a HorizontalLayout with the image being a separate component - I think I could handle that, but I am unsure of how to do the actual rendering of the image. I can probably accomplish it simply with the internal Vaadin Icons set, but I need to use my own little images.. all icons that I am going to use will be at or less than 25 x 25px.
Thank you so much in advance!
I think you're on the right track, but there's one small detail that causes you trouble. The URL i.imgur.com/3LQBglR.png doesn't define a protocol, which means that the entire string will be treated as a path relative to the location of the hosting page. It will thus try to find a file in a directory named i.imgur.com on your own server.
To fix this, you need to also include the protocol in the image URL, i.e. https://i.imgur.com/3LQBglR.png.
I can also offer a small suggestion for how to make the code easier to read. HTML also supports using ' for enclosing attribute values. This is more convenient to use from Java string since you don't need to use \ to escape ' characters. Your template string could thus be "<div class$='[[item.class]]'><img src='https://i.imgur.com/3LQBglR.png'>[[item.size]]</div>".
The problem is to create a dynamic label printing where in I will present to the user the fields that are available (ex. Name, ID No, Address etc) and I will let them draw their own label.
It is something like on the left side, there are the available fields, and on the right side is a big field where I let them drag and drop the fields and draw boxes and grids.
The system should be able to save the drawing (in any format as long as it can be saved in the database) that they created and the fields in that drawing can be called in the backend.
The saving part is important because if the user created so many labels, I want them to be able to choose which drawing they can use to Print their labels.
I would like to integrate this with my existing web Maven Spring 3.x system.
If anybody could point to where to look, either in the drawing creation or in the saving it would be great.
I did that drawing/saving stuff in a webapp some time ago using Javascript. Use the HTML canvas element to define a place users can draw on.
Guess there are several js/jquery libraries for that (It is also possible to do everything on your own)
There are also exporting functionalities (I do not remember exactly) but it is possible to convert the drawing to a data-url and upload it with a hidden text field. Of course it can be directly stored on the user's computer as well.
Start by having a look at introduction to canvas drawing on w3cschools.com
Actually, still now I have not got the exact way to add different types of annotation/lines/boxes/highlights using the mouse directly on PDF.
I have tried different API (pdfbox, icepdf, iText, aspose) and successfully able to add text, text annotation, box annotation, images, but for each one i have some issue like:
when i add object, it add in a new page
when i add object it remove the old data
i want use the existing ICEPDF viewer to add text, but it does not allow it. and if i try to mix other API with ICEPDF, then I am not able to get the mouse click position where need to add.
There is only one API (ICE PDF) which allow to add box annotation direct on GUI by mouse but it does allow other things.
If not possible in pdf viewer then is there any class which will allow to do this?
I'm also open for any commercial library/class with a one time fee to do that.
I think BFO have added quite a few annotation tools. Have you looked at their tool?
To be a little more specific:
I've built a simple multithreaded TCPServer (Java) which communicates with clients (C# / mono). On request the Clients take a screenshot and send it to the Server.
The screenshots are then displayed in a JTable. I'd like to add a tooltip to these images in the table with the same image but in another size.
The code currently looks like this:
screenLabel.setToolTipText("<html><img src=\"" + (new ImageIcon(image)) + "\"></img> Tooltip</html>");
Of course, this won't work, as the src attribute requires a path.
The problem is, I don't know how to circumvent this behaviour.
My question would hence either be:
1) How to retrieve a valid path for a temporary resource (without saving the resource in the file-system)
OR
2) How to provide a custom JTooltip which easily allows Images/ImageIcons to be displayed
It is possible to add a new protocol besides the standard ftp/http/etc to the URL resolving which then maps into your own code instead of over the network.
There is three approaches listed at http://www.unicon.net/node/776, which may help you getting started. I was thinking of extending URLStreamHandler and registering it with the JVM.
Regarding changing JToolTip, from http://www.manning-sandbox.com/message.jspa?messageID=9915
"Remember JToolTip is a container, so ,
subclass JToolTip to have a JTextArea/Pane fill it . Set the JTA/JTP as
uneditable and voila you have a multiline tooltip! Similarly you can display
any custom component you want! "
For option 2 you need to:
a) create a custom tooltip
b) override the table to use the tooltip.
This posting provides a simple working example.