October 25th, 2014

Bindows using ASP .NET

Today a customer made me aware of the fact that we have no sample for
creating Bindows apps using ASP .Net. He wanted a sample on how to add a
gauge and setting dynamic properties in the XML definition.

Of course we need ASP .Net samples. The forum can be seen as a sample on
server communication, but it uses Perl for the backend. I decided to make
a small and simple, yet instructive sample. I hope I was successful.

An application generated from dynamic sources is not much different from one
made of static sources. You still need an ‘HTML file’ and an ‘XML file’.
The difference is that both these ‘files’ are generated on demand and their
content can be different from one request to another based on server logic.

This sample was made using the free gauges. You can download them
here.
It is not difficult to translate the lessons learned in this sample to a
full Bindows application (ADF). Just replace the script in the ‘HTML file’
with application.start(…) or biExec(…) just as you would with static
HTML and XML sources.

For this sample my ‘HTML file’ is Default.aspx, the file that is
automatically generated by the WebSite project template. I edited its
content with the following:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<html>
<head>
    <title></title>
    <!-- Load free Bindows Gauges package -->
    <script type="text/javascript" src="bindows_gauges/bindows_gauges.js"></script>
</head>
<body>
<p>This is a very simple sample displaying a gauge.</p>
<div id="gaugeDiv" style="width: 250px; height: 250px;"></div>

<script type="text/javascript">
  var gauge = bindows.loadGaugeIntoDiv("Gauge.aspx", "gaugeDiv");
  function setNeedleValue(nValue) {
      gauge.needle.setValue(nValue);
      gauge.value.setText(nValue);
  }

//  setNeedleValue(25);
  gauge.unit.setText("[kW]");
</script>
</body>
</html>

Then I added a new aspx file (Gauge.aspx) using a random template. ;) This
also created a code-behind file (Gauge.aspx.cs) that I deleted. Because I
deleted that I also edited the file header of the aspx file to remove the
reference. All I kept was this bit:

<%@ Page Language="C#" %>

In the content I pasted the sample gauge from the free gauges package and
edited it up a bit to suit my purposes. I added a <% %>
section at the top, where I initialized some C# variables:

<%
	// Two values setting the start locations for warning hints on the gauge scale.
	// These could be configured from user preferences.
	int warnLow = 25;
	int warnHigh = 180;
	int value = 125;

	// Error handling / range assertions.
	if (warnLow > warnHigh)
		throw new ArgumentException("The low range must be less than the high range.");
	else if (warnHigh < 0 || warnLow < 0 || value  300 || warnLow > 300 || value > 300)
		throw new ArgumentException("Values must be between 0 - 300.");
%>

Further down in the gauge XML I referenced these variables. Here’s an example:

<Gauge2RadialScale startValue="0" endValue="300">
	<!-- Needle -->
	<Gauge2RadialNeedle id="needle" value="<%=value%>" stroke="#000000" strokeWidth="3"
						innerRadius="0" innerWidth="40"
						outerRadius="360" outerWidth="5">
		<Gauge2RadialNeedle.Filler>
			<Gauge2RadialGradientFiller color1="#808080" color2="#000000"/>
		</Gauge2RadialNeedle.Filler>
	</Gauge2RadialNeedle>
</Gauge2RadialScale>

View Gauge.aspx source

Download entire web site source code (ZIP).

14 Responses to 'Bindows using ASP .NET'

  1. 1jerry
    September 2nd, 2010 at 4:21 pm

    Very good example. It works fine.

    But, when I tried it on a web page with a master page in a web application, the bindows_gauges.js doesn’t work. I just put the bindows_gauges.js in the header section, I got an error, “Invalid argument.”.

    Is there any solution for the problem?

    Thanks.


  2. 2Ran Meriaz
    September 6th, 2010 at 7:59 am

    Jerry,

    Thanks for your comment.

    We will be happy to assist - please provide a sample code, or a web page that we can test.

    Thanks,
    Ran - Bindows team


  3. 3York
    October 8th, 2010 at 3:45 am

    Hi Ran,

    I am trying to run your sample code from visual studio 2010 with Firefox. The gauge does not show up. It only appears in I.E browser. However those guages can be displayed in both browsers if they are placed in .html file pointing to a .xml file (static sample code downloaded from bindows website). Would you be able to assist me with this? Thanks very much.


  4. 4Andy
    October 13th, 2010 at 5:12 pm

    Ran
    These gauges look great.

    I have the same issue as York, works in IE but not FF or Chrome. I am using your example and get the error Uncaught Error: Unable to detect Browser version. at line 54 of your js if that helps.

    Hope you can get this resolved, these are great.


  5. 5Ran
    October 18th, 2010 at 9:46 am

    The gauges should work fine in both Firefox and Chrome.

    What versions of those browsers are
    you using?


  6. 6Alex
    March 30th, 2011 at 8:39 am

    here is the debug from the script:
    Invalid argument. bindows_gauges.js, line 10 character 101407
    the highlight is on:

    ss.addRule(”v\\:*”,”behavior:url(#default#VML);”);};

    This is IE 8 I have tried the declaration in my masterpage and in the child page as well same error

    using VS 2010 professional-asp.net-vb.net and IE 8
    this is with the latest release of your tool

    We were looking into buying these tools but this is a big hang up as i can’t show a non-working demo tool to the boss.

    Please advise if you would.


  7. 7Ran
    April 4th, 2011 at 6:21 am

    Hello Alex,

    This is a typical error message for web pages that have DOCTYPE definition. Bindows gauges do not support running in DOCTYPE-mode so to fix this issue try removing the doctype from the page that you’re working with.

    If you can’t remove the doctype (sometimes it is impossible due to specific HTML layout problems) you can always load a gauge in an iframe isolating it from the rest of the page. This way the main page will not be affected and the gauge will be loaded in the document without the doctype.

    Best regards,
    Juriy Bura - Bindows Team


  8. 8seedoflife
    August 29th, 2011 at 12:31 am

    Yes, I get the error too
    Invalid argument. bindows_gauges.js, line 10 character 101407
    when I remove the doctype element, it OK, but I use Extjs lost some feature, maybe Extjs need the doctype.
    I can’t use iframe because I need another javascript function will change property of gauge.
    how can I solve that problem?, pls help me


  9. 9Renato
    October 31st, 2011 at 7:49 pm

    I have the same error, i remove the doctype but the error persist…

    To remove the doctype i just need to remove this line right?

    “”


  10. 10Renato
    October 31st, 2011 at 7:51 pm

    <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ..


  11. 11Renato
    November 1st, 2011 at 6:18 am

    When i remove the doctype element im having this error:

    Microsoft JScript runtime error: Object expected
    var gauge=new gaugeClass();

    Please help me…


  12. 12Johan Lund
    November 1st, 2011 at 8:04 am

    Hi Renato,
    I will need a little bit more information to help you.
    Please send a complete sample that causes this error to support@bindows.net.

    It looks like you are using Bindows so if you want to see how the xml is written in its simplest working form you can take a look at GaugeTest.xml in the “test” folder in your Bindows distribution.

    Best regards
    Johan Lund
    Bindows Team


  13. 13Renato
    November 3rd, 2011 at 11:17 am

    I send to you my project, if you can help me i will be very glad.

    Thanks.


  14. 14José Diego Mariano
    December 7th, 2011 at 6:46 am

    I tried to put the content inside an iframe to fix the problem related to doctype did not work … continues with the same error (invalid argument).


Leave a Response

Imhotep theme designed by Chris Lin. Proudly powered by Wordpress.
XHTML | CSS | RSS | Comments RSS