Allow user handwriten marking on images - Java, Swing

Question

I am developing an application using Java, Swing. It will be mainly used in order to study oscillograms against pentagrams for medical purposes. It is wished that the user can keep notes on top of the images (presumably something like the pencil used in Window's paint).

Please, keep in mind that every time the user loads an image, the following mouse motion listener gets attached to it (in order to make the image draggable for usability reasons):

public class DragMouseListener implements MouseMotionListener {

    JLabel jl;
    int imageX, imageY;

    public DragMouseListener(JLabel jlabel) {
        this.jl = jlabel;
        jl.addMouseMotionListener(this);
    }


    @Override
    public void mouseDragged(MouseEvent e) {
        updateImagePosition(e);
    }

    @Override
    public void mouseMoved(MouseEvent e) {
    }

    private void updateImagePosition(MouseEvent e) {
        imageX = e.getX();
        imageY = e.getY();
        jl.setLocation(imageX, imageY);
    }
}

Until now I am unable to even come close to a way of implementing it and I cannot find any references of the issue in the Internet. Any help (even rough ideas) would be much appreciated. Thanks in advance.

Nick

Do you want the image to updated permanently with the text or do you want it to be associated with it ... ie like layers, which you can load and update as required? Do you want the text be "hand written" or is it sufficient to provide the ability for the user to type text onto the image?? — MadProgrammer, Dec 30 '12 at 20:37
Cheers for the reply. The ability to save the image including the custom notes would be desirable. Typing text wouldn't work, but some fixed solution could be good enough (e.g. providing a circle tool which would allow the user to cirle the peak of the oscillogram) — Voullage, Dec 30 '12 at 21:02
The example cited [here](http://stackoverflow.com/a/11944233/230513) illustrates several basic object drawing techniques. — trashgod, Dec 30 '12 at 22:48
"*oscillograms against pentagrams"* Huh? While the 1st evokes images of medical personnel, the 2nd makes me think of witches. -- I would tend to store both the image and any associated text(s) in a Zip file so that it can be reconstructed, edited & tweaked later. Of course offer an 'export to titled PNG' - but make it clear the user is losing something from it. As an aside. What is your question? — Andrew Thompson, Dec 30 '12 at 23:31
@trasgod Thanks. I've come acrosss this post. The thing is that I would like to provide the ability to the user to circle whatever he wishes (probably peaks). Perhaps pre-fixed circles would do the job but a more robust solution would provide to the user the freedom of a pencil, in order to keep arbitrary notes in the pictures. — Voullage, Dec 31 '12 at 11:34
@Andrew The project will be used for collecting data in order to study the effect of music on giving birth. What you suggest would work but the point of implementing the software is to provide our clients with some automated mechanisms that will facilitate their task. Letting them reconstruct pictures will not be an effective solution. — Voullage, Dec 31 '12 at 11:36
*"Letting them reconstruct pictures will not be an effective solution."* That's OK. I was suggesting letting the ***software*** write & reconstruct them. — Andrew Thompson, Dec 31 '12 at 11:40
Perhaps I wasn't clear and apologize for it. Let's start over: Imagine a panel with two draggable images. The whished functionality is to have (say) a pencil icon in the toolbar. As soon as the user presses it he will be able to write/draw on top of the pictures according to his own needs. Finally, he can save the picture with his notes if he wishes so. I hope that we are on the same page now. Thanks for your patience. — Voullage, Dec 31 '12 at 12:22
Hopefully this answer regarding [painting on an image](http://stackoverflow.com/a/11890169/1057230) might be of some help, in some sense. — nIcE cOw, Dec 31 '12 at 14:32
This is exactly what I was hoping for. Thank you so much. If you want, you can post this as an answer, so I can accept it (if you wish to receive credit for your help). Cheers — Voullage, Dec 31 '12 at 18:46

score 0 · Answer 1 · edited May 23 '17 at 12:12

I tried what you asked for DragMouseListener but found it very uncomfortable so used JInternal Frame it works fine(but you can still drag images inside JInternal Frame,as I implemented what you asked for).Insted of hand free writing,I used JEditorPane(you can add hand written thing if you want,but it will be a mess) with accessible parent JScrollPane so that you can type how much you want.

enter image description here You can drag JInternal Frame easily:

enter image description here

Note: I have used NetBeans GUI Builder for this and suggest you too to use any GUI builder as it makes typing work easy.

Here is the code:

import java.awt.event.MouseEvent;

public class Move extends javax.swing.JFrame {

public Move() {
    initComponents();
}

@SuppressWarnings("unchecked")

private void initComponents() {

    jPanel1 = new javax.swing.JPanel();
    jInternalFrame1 = new javax.swing.JInternalFrame();
    jLabel1 = new javax.swing.JLabel();
    jScrollPane1 = new javax.swing.JScrollPane();
    jEditorPane1 = new javax.swing.JEditorPane();
    jInternalFrame2 = new javax.swing.JInternalFrame();
    jLabel2 = new javax.swing.JLabel();
    jScrollPane2 = new javax.swing.JScrollPane();
    jEditorPane2 = new javax.swing.JEditorPane();

    setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

    jPanel1.setBackground(new java.awt.Color(0, 0, 0));

    jInternalFrame1.setVisible(true);

    jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource("/images.jpg"))); // NOI18N
    jLabel1.setText("jLabel1");
    jLabel1.addComponentListener(new java.awt.event.ComponentAdapter() {
        public void componentMoved(java.awt.event.ComponentEvent evt) {
            jLabel1ComponentMoved(evt);
        }
    });
    jLabel1.addMouseMotionListener(new java.awt.event.MouseMotionAdapter() {
        public void mouseDragged(java.awt.event.MouseEvent evt) {
            jLabel1MouseDragged(evt);
        }
    });

    jScrollPane1.setViewportView(jEditorPane1);

    javax.swing.GroupLayout jInternalFrame1Layout = new javax.swing.GroupLayout(jInternalFrame1.getContentPane());
    jInternalFrame1.getContentPane().setLayout(jInternalFrame1Layout);
    jInternalFrame1Layout.setHorizontalGroup(
        jInternalFrame1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(jInternalFrame1Layout.createSequentialGroup()
            .addContainerGap()
            .addGroup(jInternalFrame1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 203, javax.swing.GroupLayout.PREFERRED_SIZE)
                .addComponent(jLabel1, 0, 0, Short.MAX_VALUE))
            .addContainerGap())
    );
    jInternalFrame1Layout.setVerticalGroup(
        jInternalFrame1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(jInternalFrame1Layout.createSequentialGroup()
            .addComponent(jScrollPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 38, javax.swing.GroupLayout.PREFERRED_SIZE)
            .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
            .addComponent(jLabel1, javax.swing.GroupLayout.DEFAULT_SIZE, 250, Short.MAX_VALUE)
            .addContainerGap())
    );

    jInternalFrame2.setVisible(true);

    jLabel2.setIcon(new javax.swing.ImageIcon("E:\\untitled.png")); // NOI18N
    jLabel2.setText("jLabel2");

    jScrollPane2.setViewportView(jEditorPane2);

    javax.swing.GroupLayout jInternalFrame2Layout = new javax.swing.GroupLayout(jInternalFrame2.getContentPane());
    jInternalFrame2.getContentPane().setLayout(jInternalFrame2Layout);
    jInternalFrame2Layout.setHorizontalGroup(
        jInternalFrame2Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(jInternalFrame2Layout.createSequentialGroup()
            .addContainerGap()
            .addGroup(jInternalFrame2Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
                .addComponent(jScrollPane2, javax.swing.GroupLayout.Alignment.TRAILING, javax.swing.GroupLayout.DEFAULT_SIZE, 222, Short.MAX_VALUE)
                .addComponent(jLabel2, javax.swing.GroupLayout.Alignment.TRAILING, javax.swing.GroupLayout.PREFERRED_SIZE, 222, Short.MAX_VALUE))
            .addContainerGap())
    );
    jInternalFrame2Layout.setVerticalGroup(
        jInternalFrame2Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(jInternalFrame2Layout.createSequentialGroup()
            .addContainerGap()
            .addComponent(jScrollPane2, javax.swing.GroupLayout.PREFERRED_SIZE, 36, javax.swing.GroupLayout.PREFERRED_SIZE)
            .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRELATED)
            .addComponent(jLabel2)
            .addContainerGap(40, Short.MAX_VALUE))
    );

    javax.swing.GroupLayout jPanel1Layout = new javax.swing.GroupLayout(jPanel1);
    jPanel1.setLayout(jPanel1Layout);
    jPanel1Layout.setHorizontalGroup(
        jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(jPanel1Layout.createSequentialGroup()
            .addContainerGap()
            .addComponent(jInternalFrame1, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
            .addGap(177, 177, 177)
            .addComponent(jInternalFrame2, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
            .addContainerGap(71, Short.MAX_VALUE))
    );
    jPanel1Layout.setVerticalGroup(
        jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, jPanel1Layout.createSequentialGroup()
            .addGap(49, 49, 49)
            .addComponent(jInternalFrame1)
            .addGap(209, 209, 209))
        .addGroup(jPanel1Layout.createSequentialGroup()
            .addGap(31, 31, 31)
            .addComponent(jInternalFrame2, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)
            .addContainerGap(166, Short.MAX_VALUE))
    );

    javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
    getContentPane().setLayout(layout);
    layout.setHorizontalGroup(
        layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addComponent(jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
    );
    layout.setVerticalGroup(
        layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
        .addComponent(jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
    );

    pack();
}

private void jLabel1ComponentMoved(java.awt.event.ComponentEvent evt) {


}

private void jLabel1MouseDragged(java.awt.event.MouseEvent evt) {
   updateImagePosition(evt);

}
private void updateImagePosition(MouseEvent evt) {
   int imageX = evt.getX();
 int   imageY = evt.getY();
    jLabel1.setLocation(imageX, imageY);
}
public static void main(String args[]) {
    java.awt.EventQueue.invokeLater(new Runnable() {
        public void run() {
            new Move().setVisible(true);
        }
    });
}


private javax.swing.JEditorPane jEditorPane1;
private javax.swing.JEditorPane jEditorPane2;
private javax.swing.JInternalFrame jInternalFrame1;
private javax.swing.JInternalFrame jInternalFrame2;
private javax.swing.JLabel jLabel1;
private javax.swing.JLabel jLabel2;
private javax.swing.JPanel jPanel1;
private javax.swing.JScrollPane jScrollPane1;
private javax.swing.JScrollPane jScrollPane2;


}

UPDATE :

See This post answerd by @mKorbel and @trashgod to make JInternal frame minimize/maximize and resize.Great answers.

Thank you very much for going into all that trouble and giving me this code. Using jInternalFrame seems a more appealing and robust solution. I decided to adopt it and coincidentaly I'm using NetBeans GUI Builder as well. However, I'm unable to to make the internal frames resizable, minimizable and draggable. For the first two, I use the respective check boxes provided in their properties tab but they do not correspond to any change. Especially resizing is vital for the requested functionality. Any ideas? — Voullage, Jan 02 '13 at 12:19
Well yeah i had that problem too.So its a coding thing.Any ways follow http://stackoverflow.com/questions/6476525/programmatically-minimize-a-jinternalframe and http://www.coderanch.com/t/432709/GUI/java/Disable-posibility-vertical-resize-JInternalFrame IF you cannot find the solution,just let me know.I will try to help.Or if you found out,just update it..:) and http://docs.oracle.com/javase/6/docs/api/javax/swing/JInternalFrame.html — joey rohan, Jan 02 '13 at 18:18

Allow user handwriten marking on images - Java, Swing

1 Answers1