Refresh instrument from javascript without page reload

The following sample is intended to show how to update distinct instrument on the page without flickering and without whole page reloading from javascript code.

In order to do that we will add asp.net page (WidgetForm with WidgetProducer control) which is intended to create instrument's image:

    public partial class WidgetForm : System.Web.UI.Page
    {
        public WidgetForm()
        {
            this.Init += Page_Load;
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            Page.Response.ClearContent();
            Page.Response.ClearHeaders();
            Page.Response.ContentType = "image/png";
            int val = 0;
            try
            {
                val = int.Parse(Page.Request.Params.Get("val"));
                WidgetProducer1.Instrument.SetValue("Slider1", "Value", val);
                WidgetProducer1.Instrument.SetValue("Slider2", "Value", val);
            }
            catch (Exception ex)
            {
            }
            MemoryStream ms = new MemoryStream();
            System.Drawing.Image img = WidgetProducer1.Instrument.CreateImage(500, 500);
            img.Save(ms, ImageFormat.Png);
            Page.Response.BinaryWrite(ms.ToArray());
            Page.Response.End();
        }
    }

On the MainPage we will put image with appropriate url which target on our WidgetForm:

                           <asp:HyperLink ID="HyperLink1" runat="server" ToolTip="Tooltip1" NavigateUrl="http://google.com" ImageUrl="~/WidgetForm.aspx" Height="500px"  Width="500px" EnableViewState="False">

                           </asp:HyperLink>


In javascript code we will update our gauge 

        function reloadImage(refreshValue) {
            for (var i = 0; i < document.images.length; i++) {
                var url = document.images[i].src;
                var index = url.indexOf("?");
                if (index > 0) {
                    url = url.substring(0, index);
                }
                document.images[i].src = url + "?val=" + refreshValue;
            }
        }

        function refreshPicture() {
            var valueBox = document.getElementById("TextBox1");
            reloadImage(valueBox.value)
        }

        function setValue_click() {
            refreshPicture();
        }

You can find sample here: C# and VB


Add Feedback