Results 1 to 6 of 6

Thread: Animated Window Effects with "Toast" Popup Demo

  1. #1

    Thread Starter
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Animated Window Effects with "Toast" Popup Demo

    VB version here.

    FormAnimator class - A helper class that you can add an instance of to a form to provide animation when the form is shown, hidden or closed. Supported animations are Roll (form is unrolled and rolled up from one edge to the opposite), Centre (form unrolls from the centre out and rolls up from all edges in), Slide (form slides in and out from one edge to the opposite) and Blend (form fades in and out). Roll and Slide animations can be up, down, left, right or diagonal. To use this class just add a single line of code similar to this to your form:
    CSharp Code:
    1. private FormAnimator animator;
    2.  
    3. public Form1()
    4. {
    5.     InitializeComponent();
    6.  
    7.     this.animator = new FormAnimator(this,
    8.                                      FormAnimator.AnimationMethod.Slide,
    9.                                      FormAnimator.AnimationDirection.Up,
    10.                                      400);
    11. }
    NOTE: The C# Toast demo will be here soon. Watch this space.
    Attached Files Attached Files

  2. #2

    Thread Starter
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    "Toast" Popup Demo

    The attached project includes a ToastForm class that uses the FormAnimator class from above to create a popup notification in the lower, right-hand corner of the screen, just above the system tray, as many commercial applications do. You can import this class into your own project as is or create your own using the same pattern.

    To see the demo in action, run the attached project and click the Button on the main form several times. You'll see notification windows stack themselves up from the bottom, right-hand corner of the screen. As a new notification window slides up it pushes any existing windows further up the screen.

    The notification windows are each a random height and will remain displayed for a random time period. As a window slides out of view again any windows above it will fall down to fill the vacant space.

    The last point to note is that the notification window will not take focus when it's first displayed, but if you click it it will be activated.

    Edit: 27-Nov-2008
    Set the TopMost property of the ToastForm class to True to ensure notification windows were not hidden behind other windows if the caller is not currently active.
    Attached Files Attached Files

  3. #3
    New Member
    Join Date
    Aug 2009
    Posts
    1

    Re: Animated Window Effects with "Toast" Popup Demo

    We've been trying to adapt your code so I can use it on a socket programming application I am currently working on.

    The problem is that the toastform stops working and will not be able to close it, is there a possibility that the timer is creating the problem?

    Here's a sample of the code I did
    Code:
    if( nBytesRec > 0 )
    				{
    					// Wrote the data to the List
    					string sRecieved = Encoding.ASCII.GetString( m_byBuff, 0, nBytesRec );
    
    					// WARNING : The following line is NOT thread safe. Invoke is
    					// m_lbRecievedData.Items.Add( sRecieved );
    					Invoke( m_AddMessage, new string [] { sRecieved } );
                        sliceCount += 1;
    
                        Form_Animation_and_Toast_Demo.ToastForm slice = new Form_Animation_and_Toast_Demo.ToastForm(this.rng.Next(2000, 10000), sRecieved);
    
                        slice.Height = this.rng.Next(50, 200);
                        slice.Show();
    					// If the connection is still usable restablish the callback
    					SetupRecieveCallback( sock );
    				}

  4. #4
    New Member
    Join Date
    Jun 2019
    Posts
    1

    Re: "Toast" Popup Demo

    Quote Originally Posted by jmcilhinney View Post
    The attached project includes a ToastForm class that uses the FormAnimator class from above to create a popup notification in the lower, right-hand corner of the screen, just above the system tray, as many commercial applications do. You can import this class into your own project as is or create your own using the same pattern.
    What is the licence on the project?

  5. #5

    Thread Starter
    Super Moderator jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    110,299

    Re: "Toast" Popup Demo

    Quote Originally Posted by bobob View Post
    What is the licence on the project?
    I've never gone to the effort of determining which license to officially apply to the stuff I post in the CodeBank forum and the like. As long as you don't try to expressly claim it as your own, I'm happy for you to do whatever you want with it.

  6. #6
    Member
    Join Date
    Jul 2019
    Location
    Ahmedabad
    Posts
    57

    Re: Animated Window Effects with "Toast" Popup Demo

    Hello, @jmcilhinney
    Please try this code, To Animated Window Effects with "Toast" Popup Demo

    Code:
    @using Syncfusion.EJ2
    @using Syncfusion.EJ2.Notifications;
    @using Syncfusion.EJ2.DropDowns;
    @using Syncfusion.EJ2.Buttons;
    @section ControlsSection{
        <div class="col-lg-12 control-section toast-api-section">
            <div class="control_wrapper">
                @Html.EJS().Toast("toastAPI").Position(p => p.X("Right").Y("Bottom")).BeforeOpen("onBeforeOpen").Created("created").Close("onClose").NewestOnTop(true).TimeOut(5000).Render()
                <div class="row">
                    <div class="col-lg-6 padding">
                        <div class="input-form">
                            <div class="e-float-input">
                                <input class="e-input" id="toast_input_title" required="">
                                <span class="e-float-line"></span>
                                <label class="e-float-text">Enter the title</label>
                            </div>
                        </div>
                        <div class="input-form">
                            <div class="e-float-input">
                                <textarea class="e-input" id="toast_input_content" rows="3" required=""></textarea>
                                <label class="e-float-text">Enter the content</label>
                            </div>
                        </div>
                        <div class="group-form e-group">
                            @Html.EJS().CheckBox("closeButton").Label("Show Close Button").Change("closeOnChange").Render()
                        </div>
                        <div class="group-form">
                            @Html.EJS().CheckBox("progressBar").Label("Show Progress Bar").Change("OnProgressChange").Render()
                        </div>
                        <div class="group-form">
                            @Html.EJS().CheckBox("newestOnTop").Label("Newest On Top").Change("closeNewestOnChange").Checked(true).Render()
                        </div>
                        <div class="group-form">
                            @Html.EJS().CheckBox("prevDuplicates").Label("Prevent Duplicates").Change("OnPrevDubChange").Render()
                        </div>
                        <div class="group-form">
                            @Html.EJS().CheckBox("actionButtons").Label("Action Buttons").Change("OnactionBtnChange").Render()
                        </div>
                        <div class="input-form">
                            <div class="e-float-input e-input-group">
                                <input class="e-input" id="timeOut" name="Digits" value="5000" digits="true" data-digits-message="Please enter digits only." required="">
                                <span class="e-float-line"></span>
                                <label class="e-float-text" for="Digits">TimeOut</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 padding">
                        <div class="input-form">
                            <h4> Show Animation</h4>
                            <div class="e-float-input">
                                <input class="e-input" id="showDuration" value="400" required="">
                                <span class="e-float-line"></span>
                                <label class="e-float-text">Duration</label>
                            </div>
                        </div>
                        <div class="input-form">
                            @Html.EJS().DropDownList("ShowEasing").Placeholder("Select an Easing").DataSource((IEnumerable<object>)ViewBag.EasingData).Created("showEasingCreated").Index(0).Change("onShowEase").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
                        </div>
                        <div class="input-form">
                            @Html.EJS().DropDownList("ShowAnimation").Placeholder("Select an Animation").Width("100%").DataSource((IEnumerable<object>)ViewBag.AnimationData).Created("showAnimationCreated").Index(0).Change("showChange").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
                        </div>
                        <div class="input-form e-group">
                            <h4> Hide Animation</h4>
                            <div class="e-float-input">
                                <input class="e-input" id="hideDuration" value="400" required="">
                                <span class="e-float-line"></span>
                                <label class="e-float-text">Duration</label>
                            </div>
                        </div>
                        <div class="input-form">
                            @Html.EJS().DropDownList("HideEasing").Placeholder("Select an Easing").DataSource((IEnumerable<object>)ViewBag.EasingData).Created("hideEasingCreated").Index(0).Change("onHideEase").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
                        </div>
                        <div class="input-form">
                            @Html.EJS().DropDownList("HideAnimation").Placeholder("Select an Animation").DataSource((IEnumerable<object>)ViewBag.AnimationData).Created("hideAnimationCreated").Index(1).Change("hideChange").Fields(new DropDownListFieldSettings { Text = "Value", Value = "Id" }).Render()
                        </div>
                    </div>
                </div>
                <div class="row center">
                    @Html.EJS().Button("toastBtnShow").CssClass("e-btn e-primary").Content("Show Toasts").Render()
                    @Html.EJS().Button("toastBtnHide").CssClass("e-btn e-primary e-hide-toast").Content("Hide All").Render()
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var toastObj, showEasingObj, showAnimationObj, hideEasingObj, hideAnimationObj;
        var btnEleShow = document.getElementById('toastBtnShow');
        var btnEleHide = document.getElementById('toastBtnHide');
        var prevDuplicates = false;
        function created() {
            toastObj = this;
        }
        function showEasingCreated() {
            showEasingObj = this;
        }
        function showAnimationCreated() {
            showAnimationObj = this;
        }
        function hideEasingCreated() {
            hideEasingObj = this;
        }
        function hideAnimationCreated() {
            hideAnimationObj = this;
        }
    
        btnEleShow.onclick = function () { showToast(); };
        btnEleHide.onclick = function () {
            toastObj.hide('All');
        };
    
        document.onclick = function (e) {
            if (e.target !== btnEleShow) {
                toastObj.hide('All');
            }
        };
        function showToast() {
            var title = (document.getElementById('toast_input_title')).value;
            var content = (document.getElementById('toast_input_content')).value;
            if (title === '' && content === '') {
                content = 'You have created a Toast message';
            }
            var showDuration = parseInt((document.getElementById('showDuration')).value, 10);
            var hideDuration = parseInt((document.getElementById('hideDuration')).value, 10);
            var timeOut = parseInt((document.getElementById('timeOut')).value, 10);
            toastObj.show(
                {
                    title: title, content: content, timeOut: timeOut,
                    animation: {
                        show: { duration: showDuration },
                        hide: { duration: hideDuration }
                    }, target: document.body
                });
        }
    
       
        setTimeout(
            () => {
                showChange();
            }, 500);
        setTimeout(
            () => {
                hideChange();
            }, 500);
    
        function onShowEase() {
            toastObj.animation.show.easing = showEasingObj.value;;
        }
    
        function onHideEase() {
            toastObj.animation.hide.easing =hideEasingObj.value;
        }
    
        function showChange(e) {
            toastObj.animation.show.effect = showAnimationObj.value;
        }
    
        function hideChange(e) {
            toastObj.animation.hide.effect = hideAnimationObj.value;
        }
    
        function onClose(e) {
                if (e.toastContainer.childElementCount === 0) {
                    btnEleHide.style.display = 'none';
                }
            }
    
        // Toast beforeOpen Event Function
        function onBeforeOpen(e) {
            btnEleHide.style.display = 'inline-block';
            if (prevDuplicates) {
                e.cancel = preventDuplicate(e);
            }
        }
    
        // Toast preventDuplicate Function for toast title
        function preventDuplicate(e) {
            var toastEle = e.element;
            var toasts = e.toastObj.element.children;
            for (var i = 0; i < toasts.length; i++) {
                var toastTitle = (toasts[i]).querySelector('.e-toast-title');
                var toastMessage = (toasts[i]).querySelector('.e-toast-message');
                if (toastTitle && toastTitle.isEqualNode(toastEle.querySelector('.e-toast-title'))) {
                    return true;
                }
                if (!toastTitle && toastMessage && toastMessage.isEqualNode(toastEle.querySelector('.e-toast-message'))) {
                    return true;
                }
            }
            return false;
        }
    
        function closeOnChange(e) {
            e.checked ? toastObj.showCloseButton = true : toastObj.showCloseButton = false;
        }
        function OnProgressChange(e) {
            e.checked ? toastObj.showProgressBar = true : toastObj.showProgressBar = false;
        }
        function closeNewestOnChange(e) {
            e.checked ? toastObj.newestOnTop = true : toastObj.newestOnTop = false;
        }
        function OnPrevDubChange(e) {
            prevDuplicates = e.checked;
        }
        function onActionBtnClick(e) {
            alert('Action button is clicked');
        }
        function OnactionBtnChange(e) {
            if (e.checked) {
                toastObj.buttons = [{ model: { content: '<div class="e-toast-btn"> Click Here </div>' }, click: onActionBtnClick }];
            } else { toastObj.buttons = []; }
        }
        </script>
        <style>
    
        </style>
    }
    I hope this code will be useful to you.
    Thank you.
    < advertising removed by moderator >

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width