This question is answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 36 - Pages: 3 [ 1 2 3 | Next ] - Last Post: 29-Mar-2017 08:24 Last Post By: jGromit
Dschuwi

Posts: 1,521
Registered: 12-Nov-2003
Custom edit panel / panoramic image
Posted: 22-Mar-2017 12:34
 
  Click to reply to this thread Reply
I have been playing a bit, following the recent "panoramic image" discussions ...

The code at the end is a working example (yes, indeed :-) ) of how to implement a custom panel with a checkbox Panoramic image and a text field, which sets the userVariable maxImageWidth accordingly.

It is put into onload.bsh.

There is one issue:

As soon as the checkbox has been checked for the first time, the respective variables are bound to the albumObject. I can see this, when I plant these lines of code into slide.htt:

if(currentObject.getProperties() != null) {
  out.println(currentObject.getProperties());
}

The generated album slide page will show something like this then:
{panoramicImage=true, maxImageWidth=30000}


If panoramicImage is unchecked again, I need to set back maxImageWidth to the value as defined in jAlbums general user interface.

QUESTION:

I would rather prefer to create and completely erase the respective variables from the albumObject depending on the panoramicImage checkbox.
How could I do this? I don't know how to acces the currentObject from within the action listener.

tnx for ideas


/**
 * Begin custom edit view panel
 */
 
class CustomUI extends JCustomPanel {
 
  JTextField maxImageWidth = new JSmartTextField();
  JCheckBox panoramicImage = new JCheckBox("Panoramic image");
  JLabel maxImageWidthLabel = new JLabel("Max. image width");
 
  // Returns width from format 720x540
  public String getImageWidth(String s) {
    pos = s.indexOf("x");
    return s.substring(0, pos);
  }
 
  public void setAlbumObject(AlbumObject ao) {
    super.setAlbumObject(ao);
    saveUI();
    removeAll();
    add(panoramicImage);
    add("br", maxImageWidthLabel);
    add("hfill", maxImageWidth);
    maxImageWidthLabel.setEnabled(panoramicImage.isSelected());
    maxImageWidth.setEnabled(panoramicImage.isSelected());
    loadUI();
  }
	
	public CustomUI(JAlbumContext context) {
		super(context);
		
		// Set up the UI
		setBackground(SystemColor.text);
		setOpaque(true);
    panoramicImage.setBackground(SystemColor.text);
 
		// Make sure changes are saved even if one doesn't move between images
		FocusListener fl = new FocusAdapter() {
			private void focusLost(FocusEvent e) {
        saveUI();
			}
		};
    
    maxImageWidth.addFocusListener(fl);
    panoramicImage.addFocusListener(fl);
    
    // Listener to enable/disable maxImageWidth field, depending on checkbox status
    panoramicImage.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        if (panoramicImage.isSelected()) {
          maxImageWidth.setText("30000"); // Panoramic image checked - set maxImageWidth to 30000
        }
        else {
          maxImageWidth.setText(getImageWidth(engine.getImageSize())); // Panoramic image not checked - set maxImageWidth to jAlbum setting
        }
          maxImageWidthLabel.setEnabled(panoramicImage.isSelected());
          maxImageWidth.setEnabled(panoramicImage.isSelected());
      }
    }
    );
 
		// Subclasses like us should call init after components are initiated
		init();
	}
}
 
// Make some convenient references available
JAlbumContext context = JAlbumContext.getInstance();
PluginContext pc = context.getPluginContext();
EditPanel editPanel = pc.getEditPanel();
 
CustomUI CustomUI = new CustomUI(context);
// Install custom panel in Jalbum's edit panel
editPanel.addCustomTab("Panoramic Image", CustomUI);
 
/**
 * End custom edit view panel
 */
 
davidekholm

Posts: 21,479
Registered: 18-Oct-2002
Re: Custom edit panel / panoramic image
Posted: 22-Mar-2017 13:22   in response to: Dschuwi in response to: Dschuwi
 
  Click to reply to this thread Reply
As you can see from the JCustomPanel API doc, the "currentAO" object always points to the current album object.
Dschuwi

Posts: 1,521
Registered: 12-Nov-2003
Re: Custom edit panel / panoramic image
Posted: 22-Mar-2017 16:43   in response to: davidekholm in response to: davidekholm
 
  Click to reply to this thread Reply
Works like a charm now.

Tack!
davidekholm

Posts: 21,479
Registered: 18-Oct-2002
Re: Custom edit panel / panoramic image
Posted: 22-Mar-2017 17:03   in response to: Dschuwi in response to: Dschuwi
 
  Click to reply to this thread Reply
Great :-)
AndreWolff

Posts: 2,147
Registered: 14-Dec-2007
Re: Custom edit panel / panoramic image
Posted: 25-Mar-2017 18:32   in response to: Dschuwi in response to: Dschuwi
 
  Click to reply to this thread Reply
Dschuwi wrote:
Works like a charm now.
Yes indeed!
I did test it in the Slide Show 4 and it works perfectly, the skin code could read your new variable 'panoramicImage'.
Many thanks for providing this code!

I have 2 questions:
1. I copied the code given above, but is that the latest version or did you change something after the the "currentAO" object remark of David?
2. In a next version of the Slide Show 4 skin, I will try to display a 360° panorama with an endless scrolling. For that purpose, your panel has to be extended with a 2nd check-box with the text '360° panorama image'. If set, the text box should also be enabled like the 'Panoramic image' does, but a new variable for instance 'pan360' = true should be added, so that I can read it in the skin code. Could you please add such a check-box and pass me the code?
Dschuwi

Posts: 1,521
Registered: 12-Nov-2003
Re: Custom edit panel / panoramic image
Posted: 25-Mar-2017 23:03   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
AndreWolff wrote:
1. I copied the code given above, but is that the latest version or did you change something after the the "currentAO" object remark of David?

This is the recent version. I have added some more comments, so you should be able to junderstand and add your additional variables.

/**
 * Begin custom edit view panel
 */
 
String customImageWidthLabelText = ("Max. image width");
String customImageWidthDefault = "50000";
 
class CustomUI extends JCustomPanel {
 
  AlbumObject cAO;
  AlbumObjectProperties cProps;
  JCheckBox panoramicImage = new JCheckBox("Panoramic image");
  JTextField customImageWidth = new JSmartTextField(customImageWidthDefault);
  JLabel customImageWidthLabel = new JLabel(customImageWidthLabelText);
    
  public void setAlbumObject(AlbumObject ao) {
    super.setAlbumObject(ao);
    saveUI();
    removeAll();
    if (ao != null) {
      cAO = ao;
      cProps = cAO.getProperties();
      File currentContextFile = ao.getFile();
      add(panoramicImage);
      add("br", customImageWidthLabel);
      add("hfill", customImageWidth);
      customImageWidthLabel.setEnabled(panoramicImage.isSelected());
      customImageWidth.setEnabled(panoramicImage.isSelected());
      loadUI();
    }
  }
	
	public CustomUI(JAlbumContext context) {
		super(context);
		
		// Set up the UI
		setBackground(SystemColor.text);
		setOpaque(true);
    panoramicImage.setBackground(SystemColor.text);
 
		// Make sure changes are saved even if one doesn't move between images
		FocusListener fl = new FocusAdapter() {
			private void focusLost(FocusEvent e) {
        saveUI();
			}
		};
 
    panoramicImage.addFocusListener(fl);
 
    // Check whether a valid integer value was entered, otherwise use default
    customImageWidth.addFocusListener(new FocusListener() {
      public void focusLost(FocusEvent e) {
        if (panoramicImage.isSelected()) {
        if (isEmptyString(customImageWidth.getText()) || !customImageWidth.getText().matches("\\d*")) customImageWidth.setText(customImageWidthDefault);
          cProps.put("maxImageWidth", customImageWidth.getText());
          cProps.save();
        }
      }
    }
    );
 
    // Enable maxImageWidth field if panoramicImage is checked, otherwise remove userVariables
    panoramicImage.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        if (panoramicImage.isSelected()) {
          customImageWidth.setText(customImageWidthDefault);
          cProps.put("maxImageWidth", customImageWidth.getText());
        }
        else {
          customImageWidth.setText(customImageWidthDefault);
          cProps.remove("maxImageWidth");
          cProps.remove("panoramicImage");
          cProps.remove("customImageWidth");
        }
        cProps.save();
        customImageWidthLabel.setEnabled(panoramicImage.isSelected());
        customImageWidth.setEnabled(panoramicImage.isSelected());
      }
    }
    );
 
		// Subclasses like us should call init after components are initiated
		init();
	}
}
 
// Make some convenient references available
JAlbumContext context = JAlbumContext.getInstance();
PluginContext pc = context.getPluginContext();
EditPanel editPanel = pc.getEditPanel();
 
CustomUI CustomUI = new CustomUI(context);
// Install custom panel in Jalbum's edit panel
editPanel.addCustomTab("Panoramic image", CustomUI);
 
/**
 * End custom edit view panel
 */
AndreWolff

Posts: 2,147
Registered: 14-Dec-2007
Re: Custom edit panel / panoramic image
Posted: 26-Mar-2017 09:53   in response to: Dschuwi in response to: Dschuwi
 
  Click to reply to this thread Reply
Dschuwi wrote:
This is the recent version. I have added some more comments, so you should be able to junderstand and add your additional variables.
Thanks, I will do my best to add the extra check-box, but it will take some time because I am no JAVA programmere and I don't understand this code! But via Try and see what happens it should be possible to add the extra check-mark..

But why did you change the default value of 30000 to 50000?
I know that a program like PhotoShop Elements can't handle a width > 32767, so I doubt whether jAlbum can handle that!
Dschuwi

Posts: 1,521
Registered: 12-Nov-2003
Re: Custom edit panel / panoramic image
Posted: 26-Mar-2017 11:22   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
AndreWolff wrote:

But why did you change the default value of 30000 to 50000?
I know that a program like PhotoShop Elements can't handle a width > 32767, so I doubt whether jAlbum can handle that!


Photoshop can handle it, but anyway:

For a panoramic image, this maxImageWidth is a value which should actually never be reached. The intention is to make it large enough, so jAlbum will in fact always scale the album image by its max. image HEIGHT, not it's maxImageWidth.

Given an unlikely wide panoramic image with an aspect ratio of let's say 20:1 and an album image scaled for a 4K monitor, this would theoretically result in a display image sized 40000 x 2000.

50000 is simply a purely fictional value on top.
jGromit

Posts: 33,198
Registered: 31-Jan-2006
Re: Custom edit panel / panoramic image
Posted: 26-Mar-2017 14:45   in response to: Dschuwi in response to: Dschuwi
 
  Click to reply to this thread Reply
Dschuwi wrote:
50000 is simply a purely fictional value on top.

Obviously, you didn't get the memo. Andre has decreed that 30000 is the correct number.
Dschuwi

Posts: 1,521
Registered: 12-Nov-2003
Re: Custom edit panel / panoramic image
Posted: 26-Mar-2017 17:30   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
AndreWolff wrote:

2. In a next version of the Slide Show 4 skin, I will try to display a 360° panorama with an endless scrolling. For that purpose, your panel has to be extended with a 2nd check-box with the text '360° panorama image'. If set, the text box should also be enabled like the 'Panoramic image' does, but a new variable for instance 'pan360' = true should be added, so that I can read it in the skin code. Could you please add such a check-box and pass me the code?

Here you go.
Read. Compare. Learn. Understand.
;-)

/**
 * Begin custom edit view panel
 */
 
String customImageWidthLabelText = ("Max. image width");
String customImageWidthDefault = "50000";
String pan360WidthDefault = "123456";
 
class CustomUI extends JCustomPanel {
 
  AlbumObject cAO;
  AlbumObjectProperties cProps;
  JCheckBox panoramicImage = new JCheckBox("Panoramic image");
  JTextField customImageWidth = new JSmartTextField(customImageWidthDefault);
  JLabel customImageWidthLabel = new JLabel(customImageWidthLabelText);
  JCheckBox pan360 = new JCheckBox("<html>360&#176; panorama image</html>");
  JTextField pan360WidthTextField = new JSmartTextField(pan360WidthDefault);
  JLabel pan360WidthLabel = new JLabel("<html>360&#176; width</html>");
    
  public void setAlbumObject(AlbumObject ao) {
    super.setAlbumObject(ao);
    saveUI();
    removeAll();
    if (ao != null) {
      cAO = ao;
      cProps = cAO.getProperties();
      File currentContextFile = ao.getFile();
      add(panoramicImage);
      add("br", customImageWidthLabel);
      add("hfill", customImageWidth);
      add("br", pan360);
      add("br", pan360WidthLabel);
      add("hfill", pan360WidthTextField);
      customImageWidthLabel.setEnabled(panoramicImage.isSelected());
      customImageWidth.setEnabled(panoramicImage.isSelected());
      pan360WidthLabel.setEnabled(pan360.isSelected());
      pan360WidthTextField.setEnabled(pan360.isSelected());
      loadUI();
    }
  }
	
	public CustomUI(JAlbumContext context) {
		super(context);
		
		// Set up the UI
		setBackground(SystemColor.text);
		setOpaque(true);
    panoramicImage.setBackground(SystemColor.text);
    pan360.setBackground(SystemColor.text);
 
		// Make sure changes are saved even if one doesn't move between images
		FocusListener fl = new FocusAdapter() {
			private void focusLost(FocusEvent e) {
        saveUI();
			}
		};
 
    panoramicImage.addFocusListener(fl);
    pan360.addFocusListener(fl);
 
    // Check whether a valid integer value was entered, otherwise use default
    customImageWidth.addFocusListener(new FocusListener() {
      public void focusLost(FocusEvent e) {
        if (panoramicImage.isSelected()) {
        if (customImageWidth.getText().trim().equals("") || !customImageWidth.getText().matches("\\d*")) customImageWidth.setText(customImageWidthDefault);
          cProps.put("maxImageWidth", customImageWidth.getText());
          cProps.save();
        }
      }
    }
    );
 
    pan360WidthTextField.addFocusListener(new FocusListener() {
      public void focusLost(FocusEvent e) {
        if (pan360.isSelected()) {
        if (pan360WidthTextField.getText().trim().equals("") || !pan360WidthTextField.getText().matches("\\d*")) pan360WidthTextField.setText(pan360WidthDefault);
          cProps.put("pan360Width", pan360WidthTextField.getText());
          cProps.save();
        }
      }
    }
    );
 
    // Enable maxImageWidth field if panoramicImage is checked, otherwise remove userVariables
    panoramicImage.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        if (panoramicImage.isSelected()) {
          customImageWidth.setText(customImageWidthDefault);
          cProps.put("maxImageWidth", customImageWidth.getText());
        }
        else {
          customImageWidth.setText(customImageWidthDefault);
          cProps.remove("maxImageWidth");
          cProps.remove("panoramicImage");
          cProps.remove("customImageWidth");
        }
        cProps.save();
        customImageWidthLabel.setEnabled(panoramicImage.isSelected());
        customImageWidth.setEnabled(panoramicImage.isSelected());
      }
    }
    );
 
    // Enable pan360Width field if pan360 is checked, otherwise remove userVariables
    pan360.addActionListener(new ActionListener() {
      public void actionPerformed(ActionEvent e) {
        if (pan360.isSelected()) {
          pan360WidthTextField.setText(pan360WidthDefault);
          cProps.put("pan360Width", pan360WidthTextField.getText());
        }
        else {
          pan360WidthTextField.setText(pan360WidthDefault);
          cProps.remove("pan360Width");
          cProps.remove("pan360");
          cProps.remove("pan360WidthTextField");
        }
        cProps.save();
        pan360WidthLabel.setEnabled(pan360.isSelected());
        pan360WidthTextField.setEnabled(pan360.isSelected());
      }
    }
    );
 
		// Subclasses like us should call init after components are initiated
		init();
	}
}
 
// Make some convenient references available
JAlbumContext context = JAlbumContext.getInstance();
PluginContext pc = context.getPluginContext();
EditPanel editPanel = pc.getEditPanel();
 
CustomUI CustomUI = new CustomUI(context);
// Install custom panel in Jalbum's edit panel
editPanel.addCustomTab("Panoramic image", CustomUI);
 
/**
 * End custom edit view panel
 */
AndreWolff

Posts: 2,147
Registered: 14-Dec-2007
Re: Custom edit panel / panoramic image
Posted: 26-Mar-2017 18:46   in response to: Dschuwi in response to: Dschuwi
 
  Click to reply to this thread Reply
Dschuwi wrote:

Here you go.
Read. Compare. Learn. Understand.
;-)

Thanks you very much, that saves a lot of time for me.

But you did too much: I don't need the 360° width text field!
A 360° panorama uses also ther Max. image width setting.
The 360° panorama image check-box should be disabled if the 'Panoramic Image' checkbox is not checked and it should be enabled if the Max- image width field is also enabled.
In the skin code it should be possible to fetch the value of variable pan360..
Dschuwi

Posts: 1,521
Registered: 12-Nov-2003
Re: Custom edit panel / panoramic image
Posted: 26-Mar-2017 19:51   in response to: AndreWolff in response to: AndreWolff
 
  Click to reply to this thread Reply
AndreWolff wrote:

In the skin code it should be possible to fetch the value of variable pan360..


Your skin can grab two more variables now: pan360 which is true or false, and pan360Width which is the value entered in the text field.
RobM

Posts: 4,385
Registered: 4-Aug-2006
Re: Custom edit panel / panoramic image
Posted: 26-Mar-2017 20:19   in response to: Dschuwi in response to: Dschuwi
 
  Click to reply to this thread Reply
Dschuwi wrote:
Your skin can grab two more variables now: pan360 which is true or false, and pan360Width which is the value entered in the text field.
From a users POV I would suggest radio buttons might be easier to use; dIsabled, panoramic, 360 panoramic. That removes the need to check two boxes for the 360 - a mega time saver ;)
AndreWolff

Posts: 2,147
Registered: 14-Dec-2007
Re: Custom edit panel / panoramic image
Posted: 26-Mar-2017 20:22   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
RobM wrote:
From a users POV I would suggest radio buttons might be easier to use; dIsabled, panoramic, 360 panoramic. That removes the need to check two boxes for the 360 - a mega time saver ;)
Yes, that is also a good solution.
jGromit

Posts: 33,198
Registered: 31-Jan-2006
Re: Custom edit panel / panoramic image
Posted: 26-Mar-2017 20:46   in response to: RobM in response to: RobM
 
  Click to reply to this thread Reply
RobM wrote:
From a users POV I would suggest radio buttons might be easier to use....

The most usable, but also the choice that chews up the most screen real estate. And when you're talking about a little custom UI, that matters. When it comes to space, a JComboBox is usually the most efficient.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums