Have an account?

» Forgot your username or password?

» Register for Free

Piczard v1.x Support Forum Archive


The Piczard v1.x Support Forum is no longer active. This is a static read-only copy of it.
It's not possible to post new messages or replies.
Search | Active Topics

Using software inside a panel doesn't let me to hide it and display a new one
rvizan
#1 Posted : Wednesday, January 15, 2014 4:17:43 PM(UTC)
Rank: Newbie

Joined: 1/15/2014(UTC)
Posts: 3
Points: 9

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Hi,
My problem is that I have to use this software to upload and manipulate images inside a panel. Once I click on the "process image" button I need to hide this panel and display another one, but when click on this button it is not working and I only see a gray box with the software licenses. The new panel that has to be visible is not appearing. Is there a way to do this or it is not possible?

Thank you.
sergioturolla
#2 Posted : Thursday, January 16, 2014 10:57:33 AM(UTC)

Rank: Administration

Joined: 3/11/2011(UTC)
Posts: 159
Points: 489

Thanks: 0 times
Was thanked: 28 time(s) in 28 post(s)
Hi,
I'm not sure to understand the issue.
Please can you post some code snippet (markup + codebehind) showing the problem ?
Thanks

Sergio
rvizan
#3 Posted : Thursday, January 16, 2014 3:59:28 PM(UTC)
Rank: Newbie

Joined: 1/15/2014(UTC)
Posts: 3
Points: 9

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Hi thank you for answering.

It is my code:

<asp:Panel ID="pnl1" runat="server" >
<asp:ScriptManager runat="server" ID="ScriptManager1">
</asp:ScriptManager>
<script type="text/javascript">
//<![CDATA[

function initializeExampleUI() {
var hexValue = $("#<% =Me.txtCanvasColor.ClientID %>").val();
$("#divCanvasColor div").css("backgroundColor", hexValue);
$("#divCanvasColor").ColorPicker({
color: hexValue,
custom_forceBelow: true,
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500, function () {
<% =Me.ClientScript.GetPostBackEventReference(Me.txtCanvasColor, "OnTextChanged", False)%>
});
return false;
},
onChange: function (hsb, hex, rgb) {
var hexValue = "#" + hex;
$("#<% =Me.txtCanvasColor.ClientID %>").val(hexValue);
$("#divCanvasColor div").css("backgroundColor", hexValue);
}
});
}

function displayOutputImage(sender, args) {
// Hide the PictureTrimmer UI since the flash wmode is set to window and there is z-index problem
sender.ui.set_frozen(true);

$.fancybox({
// Add a timestamp parameter to the query URL to ensure that the image is reloaded by the browser
"href": "<% =Me.ResolveUrl(OutputImageFileName) %>" + "?timestamp=" + CodeCarvings.Wcs.Piczard.Shared.Helpers.TimeHelper.getTimeStamp(),
"padding": 0,
"title": "Output image",
"transitionIn": "elastic",
"transitionOut": "elastic",
"hideOnContentClick": true,
"onClosed": function () {
// Display the PictureTrimmer UI
sender.ui.set_frozen(false);
}
});
}

$(function () {
initializeExampleUI();
});

//]]>
</script>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<div class="InlinePanel1" style="padding:5px; margin-bottom:10px;">
<asp:Button runat="server" ID="btnLoadImage" Text="Load image" CausesValidation="false" />
<asp:Button runat="server" ID="btnProcessImage" Text="Process image &raquo;" Enabled="false" />
</div>

<ccPiczard:InlinePictureTrimmer ID="InlinePictureTrimmer1" runat="server" Width="100%" Height="500px"
ShowImageAdjustmentsPanel="true" Culture="en" AutoFreezeOnFormSubmit="true" /><br />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel ID="pnlImage2" runat="server" >
<asp:Image ID="img2" runat="server" src="test2.jpg" />
</asp:Panel>

As you can see, I am using the tool to manipulate images inside the panel called pnl1. So I want to hide this panel and display the panel called pnlImage2 when I click on the "process image button".
The code behind is this one:


Protected Sub btnProcessImage_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnProcessImage.Click
If (Not Me.InlinePictureTrimmer1.ImageLoaded) Then
Return
End If
Me.InlinePictureTrimmer1.SaveProcessedImageToFileSystem(OutputImageFileName)

pnl1.Visible = False
pnlImage2.Visible = True
End sub
But it is not working. When I click on the "process image button" what my pnlImage2 is not being displayed and what I see is a gray box with this sentence: "Piczard - .NET Image Manipulation Library by Sergio Turolla | FREE Community Edition <piczard.com> | <codecarvings.com>"
sergioturolla
#4 Posted : Friday, January 17, 2014 1:01:32 PM(UTC)

Rank: Administration

Joined: 3/11/2011(UTC)
Posts: 159
Points: 489

Thanks: 0 times
Was thanked: 28 time(s) in 28 post(s)
Ok, the grey box is displayed because of javascript errors
(you can view them by using your browser's javascript console)

Probably the cause of javascript errors is the fact that you are trying to manipulate asp.net Panels that are external to "UpdatePanel1" (instruction "pnlImage2.Visible = True" within the sub "btnProcessImage_Click"...)

Please try to declare "pnl1" and "pnlImage2" within "UpdatePanel1".
Example:

Code:
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>

    <asp:Panel ID="pnl1" runat="server" >
        <div class="InlinePanel1" style="padding:5px; margin-bottom:10px;">
            <asp:Button runat="server" ID="btnLoadImage" Text="Load image" CausesValidation="false" />
            <asp:Button runat="server" ID="btnProcessImage" Text="Process image &raquo;" Enabled="true" />
        </div>

        <ccPiczard:InlinePictureTrimmer ID="InlinePictureTrimmer1" runat="server" Width="100%" Height="500px"
        ShowImageAdjustmentsPanel="true" Culture="en" AutoFreezeOnFormSubmit="true" /><br />
    </asp:Panel>

    <asp:Panel ID="pnlImage2" runat="server" Visible="false" >
        <asp:Image ID="img2" runat="server" src="test2.jpg" />
    </asp:Panel>

</ContentTemplate>
</asp:UpdatePanel>


Kind regards
Sergio
1 user thanked sergioturolla for this useful post.
rvizan on 1/17/2014(UTC)
rvizan
#5 Posted : Friday, January 17, 2014 4:05:54 PM(UTC)
Rank: Newbie

Joined: 1/15/2014(UTC)
Posts: 3
Points: 9

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Yes, that was the problem! It is solved now and it is working perfectly.
Thank you so much for your help and quick response!
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.