JQuery UI parts set with better Wijmo: Test Wijmo Gauges through jsFiddle

One of Wijmo's major advantages is that they are very popular jQuery UI components. This will mean that their base class library has many supporters. With many supporters, it also means more useful tools. One of these useful tools is the cool jsFiddle, which is a real-time HTML/CSS/JavaScript snippet editor. It is great to use it to quickly test small things in a non-overhead manner. In fact, we can use it to test some wijmo components in real time. Here we will see how to do this. Because Wijmo gauges uses browser-based SVG or VML, these are an important part of the "no-plug-in web page" that is being vigorously promoted by Safari and Metro IE in the middle of Windows 8 on iOS Mobile devices. This is why we can play with them like this.

If you are creating an ASP. net mvc application, Wijmo Complete contains the MVC Tools of Studio for ASP. NET Wijmo. If you are using a different technology such as Ruby or PHP, You can go directly to the Wijmo site to find a suite package that is not. NET. Either way, in this blog, We will reference the Wijmo website on the CDN link http://wijmo.com/downloads /.

In this article, we will use the instrumentation components. Let's get into the current topic!

Step 1: select a framework

Open jsFiddle.net and select jQuery 1.7.1 from the drop-down list on the left. Wait for a moment and then check jQuery UI 1.8.16. It should look like the following:

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/133134H92-0.png "width =" 244 "height =" 284 "/>

 

Step 2: Add a pairWijmoReferences

Add resources next to the framework. Here we need to add a reference to Wijmo. JQuery and jQuery UI have been processed, so we only need to add the topic, Wijmo style sheet, and reference to the Wijmo library. All we need to know is the library URL. JsFiddle will process the relationship and type. You only need to paste the URL into the text box and then click the huge plus sign. The order of adding is very important. links will be added from top to bottom according to the order you add. According to the order shown in the Wijmo CDN document, there will be no problems.

The final result should look like this:

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/133134N24-1.png "width =" 232 "height =" 180 "/>

 

Step 3: addHTMLAndJavaScript

To get started quickly, you can copy examples from the middle of Wijmo Explorer or use the sample code provided in Quick Start. Here we start with the most basic dashboard code, and then gradually create some styles.

Make your HTML pane look like the following and click to view the enlarged result ):

? 650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/133134G55-2.png "width =" 571 "height =" 230 "/>

Add the following JavaScript code to the JavaScript Pane:

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/1331344045-3.png "width =" 566 "height =" 111 "/>

 

Now, click the run button on the top and you will see a very basic meter in the result pane!

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/1331342637-4.png "width =" 308 "height =" 233 "/>

 

Step 4: become more fancy!

Cool! Now we can quickly test the different styles and attributes of this instrument. This meter can be displayed as anything, from temperature to speedometer to order completion rate. Let's assume we are a small warehouse. We have two levels of bonus targets each week-completing 80 orders is the first level of bonus target, the second-level bonus target is to complete 90 orders. In this way, the warehouse staff can track their progress. We will add some color ranges and expand the range of values displayed on the dashboard, while adding other style options. These options are listed in the http://wijmo.com/wiki/index.php/radialgauge.document. Note that "ranges" is an array because each meter can have more than one range setting.

To slightly change the style, we decided to expand the range, slightly rotate the meter, and add our custom two ranges. Similar to all functions of other Wijmo instruments and any common Wijmo components), options can be easily set through attribute arrays. After you paste the existing JavaScript code into the following code snippet, find the TidyUp button in the top menu and click it to solve the indentation problem ):

 

 
 

  
  
$("#gauge").wijradialgauge({ 
  
  
 
  
  
value: 60, 
  
  
 
  
  
max: 120, 
  
  
 
  
  
startAngle: -33, 
  
  
 
  
  
sweepAngle: 240, 
  
  
 
  
  
400, 
  
  
 
  
  
height: 400, 
  
  
 
  
  
ranges: [{ 
  
  
 
  
  
start 25, 
  
  
 
  
  
end 25, 
  
  
 
  
  
startValue: 80, 
  
  
 
  
  
endValue: 90, 
  
  
 
  
  
startDistance: 0.84, 
  
  
 
  
  
endDistance: 0.84, 
  
  
 
  
  
style: { 
  
  
 
  
  
fill: "#FFFF00", 
  
  
 
  
  
stroke: "#FFFF00", 
  
  
 
  
  
"stroke-width": "0"}}, 
  
  
 
  
  
{ 
  
  
 
  
  
start 25, 
  
  
 
  
  
end 25, 
  
  
 
  
  
startValue: 90, 
  
  
 
  
  
endValue: 100, 
  
  
 
  
  
startDistance: 0.84, 
  
  
 
  
  
endDistance: 0.84, 
  
  
 
  
  
style: { 
  
  
 
  
  
fill: "#FF0000", 
  
  
 
  
  
stroke: "#FF0000", 
  
  
 
  
  
"stroke-width": "0"} 
  
  
 
  
  
}] 
  
  
 
  
  
} 
  
  
 
  
  
); 
 
 

Now our meter looks like the image below. It is easy to read, harmonious, and provides clear objectives to warehouse personnel.

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/1331341a7-5.png "width =" 308 "height =" 301 "/>

 

So far it has been good, but we can add a little bit of fine-tuning to indicate when they are approaching the target. Let's add a conical range from 65 to 80 to stimulate work enthusiasm as they approach the goal. Replace the content in your JavaScript pane with the following code:

 

 
 

  
  
$("#gauge").wijradialgauge({ 
  
  
 
  
  
value: 60, 
  
  
 
  
  
max: 120, 
  
  
 
  
  
startAngle: -33, 
  
  
 
  
  
sweepAngle: 240, 
  
  
 
  
  
400, 
  
  
 
  
  
height: 400, 
  
  
 
  
  
ranges: [{ 
  
  
 
  
  
start 25, 
  
  
 
  
  
end 25, 
  
  
 
  
  
startValue: 80, 
  
  
 
  
  
endValue: 90, 
  
  
 
  
  
startDistance: 0.84, 
  
  
 
  
  
endDistance: 0.84, 
  
  
 
  
  
style: { 
  
  
 
  
  
fill: "#FFFF00", 
  
  
 
  
  
stroke: "#FFFF00", 
  
  
 
  
  
"stroke-width": "0"}}, 
  
  
 
  
  
{ 
  
  
 
  
  
start 25, 
  
  
 
  
  
end 25, 
  
  
 
  
  
startValue: 90, 
  
  
 
  
  
endValue: 100, 
  
  
 
  
  
startDistance: 0.84, 
  
  
 
  
  
endDistance: 0.84, 
  
  
 
  
  
style: { 
  
  
 
  
  
fill: "#FF0000", 
  
  
 
  
  
stroke: "#FF0000", 
  
  
 
  
  
"stroke-width": "0"} 
  
  
 
  
  
}, 
  
  
 
  
  
{ 
  
  
 
  
  
start 1, 
  
  
 
  
  
end 25, 
  
  
 
  
  
startValue: 65, 
  
  
 
  
  
endValue: 80, 
  
  
 
  
  
startDistance: 0.98, 
  
  
 
  
  
endDistance: 0.84, 
  
  
 
  
  
style: { 
  
  
 
  
  
fill: "#008000", 
  
  
 
  
  
stroke: "#008000", 
  
  
 
  
  
"stroke-width": "0"} 
  
  
 
  
  
}] 
  
  
 
  
  
} 
  
  
 
  
  
); 
 
 

 

Then our instrument is shown as follows:

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/133134CT-6.png "width =" 308 "height =" 304 "/>

 

Step 5: Mobile Phone Testing

Because all of this is done with the support of browser internal code and graphics rendering, you can run jsFiddle on iPad or other mobile devices. The following is the result of running on my iPad:

 

Yes. The airport waiting time has become more effective!

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" image "border =" 0 "alt =" image "src =" http://www.bkjia.com/uploads/allimg/131228/133134O35-7.png "width =" 308 "height =" 233 "/>

Step 6: create a real application

Because this is pure client code, the value of the meter can be changed simply by providing it with a new value. You may want to include a small function that updates the value of the Warehouse Management System. Just as a simple example, we will wait for three seconds and then change its value to 78 repository getting closer and closer to their bonus !).

Add the following code to the lowest part of the JavaScript pane outside the instrumentation function:

 

 
 

  
  
window.setTimeout(function() { 
  
  
 
  
  
$("#gauge").wijradialgauge("option", "value", 78);},5000); 
  
  
 
  
  
window.setTimeout(function() {$("#gauge").wijradialgauge("option", "value", 78);},3000); 
 
 

 

Now, the value is updated to 78 three seconds after the meter is displayed. This is easy!

 

All the code we built using jsFiddle can be directly copied to an HTML page and work directly. But do not forget to add reference! Place the content of the jsFiddle HTML pane to the <body> of the page, and place the JavaScript content between the script tag, usually between $ ('document '). ready () block internal ).

I created a simple HTML page to demonstrate how to work like this: Download Wijgauge HTML sample.

You can open this file directly in your browser or in any HTML editor you like.

 

Summary

Today we have done a few things here. First, we can see how jsFiddle can quickly build and test client code. Secondly, we have realized how easy it is to use Wijmo gauges. You can view the final version of samples here.

 

DirectionJsFiddle teamThank you very much!

I want to send a huge "thank you" to the jsFiddle team because they have created such a cool tool! It is so simple and elegant that we need it in many situations.

 

To download Wijmo, go to Studio for ASP. NET Wijmo 2012 v1 to officially release the 2012.03.22 update )!

This article from the "grape city control blog" blog, please be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/839415