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
Related
Little background. I am using test complete and java scripting language for automating the java based desktop application.
I need to click on the row in the table depending on the image colour. If image colour is red it need to be passed and only green should be clicked.
I tried most of the function is test complete none of these returns me image colour.
Do anyone have an idea how do i do this.
This task does not seem to be a usual standard functionality of a GUI testing tool. So, you need to implement this feature using JScript yourself. In general, algorithm is this: get the list object and iterate through its displayed rows working with them as with native Java objects. Use the native field or method to test the current row's color and if the color is appropriate, perform an action of this color. You can get an identified of this native row object and use this identifier to interact with the row with TestComplete's means.
Cannot be more specific due to lack of specific information on the controls used in your application.
Almost every TestComplete on-screen object has reflected upon it the Picture method. You could look at a pixel within that picture object to determine the appropriate color, and then click on that row.
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)
I know this question has been asked before on S.O. and other websites but I haven't found a definite answer -- most of them say its not easily done but I wanted to make sure that was the final verdict.
Here's my situation:
I'm testing a website that is using Highcharts (http://www.highcharts.com) using Selenium WebDriver (Java).
I basically want to grab the information that is displayed in a small tooltip pop-up that appears when you hover your mouse over each datapoint on the Highchart's line graph.
Looking at the web page's HTML code, I noticed there is <g class="highcharts-tooltip".... I also noticed that, as you move your mouse, the (X,Y) values in ...transform="translate(X,Y)"> change, which then changes the information displayed in the tool tip.
Knowing this, my approach would be to somehow grab all the (X,Y) values and plug them into the transform fields and grab the tooltip data. But I don't know how to programmatically grab all the (X,Y) values through Selenium.
Has anyone tackles this issue in the past or has a better way to grab the necessary information?
I started creating a library to work with HighCharts, what I currently have is available here:
https://github.com/Ardesco/Powder-Monkey/tree/master/src/main/java/com/lazerycode/selenium/graphs
It's quite hard to provide a generic library that deals with HighCharts as the customisation options on the individual charts can modify the SVG markup quite a bit. Hopefully the above will help to a degree.
As I do more it will be updated.
The Line Charts have to have a background to work. If the chart is created with .setBackgroundColour(null), then the "rect" is not added to the html.
I was able to to add the background colour back in set to the body background colour. However I'll try and figure out a way of doing it without the "rect".
I am trying to make an image Viewer like the one shown in the figure below:-
Before i can start i have following questions in mind :-
How would i check for the number of images in the target folder so that i can iterate and include all the images in my app.
Secondly,i am thiking to scale the images down to 75x75 .But what i can't think is that how will i slide the images as scrollbar is moved
To be specific,what is the appropriate container for those 75x75 images queue and how that queue is shifted to left or right?(I already know how to get current scrollbar value and add event listeners on it to respond)
To check the number of images in the target folder you can use the File class.
As for the container you might need to create the animation your self. There is no a container ready for doing so.
This site ( and book ) has some ideas about it. I don't know how out-dated it might be though
http://filthyrichclients.org/
Unless I am misunderstanding, making a scrolling list of images is quite simple.
First, create a JList with a datamodel that allows images.
A great example is shown here:
Java drag and drop images in a list
Second, add the JList to a JScrollPane.
The scaling aspect can be easily performed using Scalr:
http://www.thebuzzmedia.com/software/imgscalr-java-image-scaling-library/
Im completely new to Java web stuff, but here goes my question:
1) How can I add new controls to a JSF page (webuijsf) in the prerender() function?
2) How can I change the position of elements already added using the visual designer? Also in prerender().
I have a number of input fields + labels to show, coming from a database. So I imagine I read from the database and add the appropriate number of controls during prerender. There's also a grid below these dynamically added controls, which I'd like to move further down at the same time.
Thanks!
You would need to write your own component if you wished to render forms based on database data. You should position your grid using standard html techniques or writing your own custom grid component.