How to integrate gauges in Web applications?
To display and control a gauge in Web applications two components are used: WidgetProducer and WidgetHolder.
WidgetProducer contains the displayed instrument. This component is placed on a separate page. When this page is
applied to, the component substitutes the page content by the instrument image. The WidgetHolder component is used
for displaying instrument and for controlling it with a mouse. The WidgetHolder component displays the instrument,
contained within the WidgetProducer component.
Description of the WidgetProducer and WidgetHolder Components
Let’s consider the WidgetProducer and WidgetHolder components use by the example. Let’s create a WebApplication; add
a page where the WidgetProducer component will be displayed. Name the page ProducerPage.
Assign the displayed gauge by calling the instrument editor (“Run Designer” in the contextual menu).
Using the wizard, choose a gauge which will be used or create a new one. By pressing the “OK” button set the
instrument for the further use.
Place the WidgetHolder component on the application start page. Indicate the address of the page, containing
WidgetProducer in the ProducerUrl property: ProducerPage.aspx. Add control elements on the page for assigning both
gauge needles values.
In the upper entry window the upper instrument needle value is assigned.
In the lower entry window the lower instrument needle value is assigned.
After pressing the button the instrument values are refreshed.
Realize the Click event handler for the button.
private void Button1_Click(object sender, System.EventArgs e)
{
WidgetHolder1.Parameters["Slider1", "Value"] = value1TextBox.Text;
WidgetHolder1.Parameters["Slider2", "Value"] = value2TextBox.Text;
}
Here the Parameters property represents the typified collection. Each collection element represents the
“object”-“property”-“value” triplet.
Let’s run the program.
The WidgetHolder component realizes the System.Web.UI.IPostBackEventHandler interface. If the EnablePostBack
property is set to true, the mouse click on the instrument will be handled in the InstrumentClick event.
Let’s review it by the following example. Let’s realize the InstrumentClick event handler for the WidgetHolder
component.
private void WidgetHolder1_InstrumentClick(object sender,
PerpetuumSoft.Instrumentation.Web.InstrumentClickEventArgs args)
{
PerpetuumSoft.Instrumentation.Model.Instrument instrument = args.Element.Instrument;
PerpetuumSoft.Instrumentation.Model.Scale scale = instrument.GetByName("Scale1")
as
PerpetuumSoft.Instrumentation.Model.Scale;
WidgetHolder1.Parameters["Slider1", "Value"] = scale.PointToValue(new
PerpetuumSoft.Framework.Drawing.Vector(args.X,
args.Y)).ToString(System.Globalization.CultureInfo.InvariantCulture);
}
You can see the received result in the WebExample.
More white papers...
|