A personal repository of random information in compensation for a fatigued biological computer
Adding a slider to the TCPIP STack application and passing the value back to the hardware.. with the expectation that we will be adding multiple sliders later.. to control additional hardware.. This exercise is to get the slider value into the hardware and back out again..
Note that any Microchip TCPIP Stack compatible hardware platform will work with this..
- Decided to use Yahoo User Interface library after googling 'html slider control' as it looks pretty comprehensive!.. (storing YUI build files on an external website ..)..
Start point: Copied 'C:\Microchip Solutions\TCPIP Demo App\WebPages2' as 'C:\Microchip Solutions\TCPIP Demo App\WebPages2 - Mine with YUI'
- Yahoo demo page 'slider-simple_clean.htm' copied to above directory, edited for all src references and added the header bits into header.inc to be the YUI files on the remote xxx.com as well as the one local reference in slider-simple_clean
- header.inc added the header bits from Yahoo demo page 'slider-simple_clean.htm' (we uploaded the YUI library build files to xxx.com/_yui/ previously and referring to it remotely because no room on my hardware 32k SPI module):
<link rel="stylesheet" type="text/css" href="http://xxx.com/_yui/build/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="http://xxx.com.com/_yui/build/slider/assets/skins/sam/slider.css" /> <script type="text/javascript" src="http://xxx.com.com/_yui/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="http://xxx.com.com/_yui/build/animation/animation-min.js"></script> <script type="text/javascript" src="http://xxx.com.com/_yui/build/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="http://xxx.com.com/_yui/build/slider/slider-min.js"></script> |
- new file sliders.cgi (used to return the response)
~slider1~ |
added to status.xml (so we can include slider 1 on the index page)
<response> <led0>~led(0)~</led0> <led1>~led(1)~</led1> <led2>~led(2)~</led2> <led3>~led(3)~</led3> <btn0>~btn(0)~</btn0> <btn1>~btn(1)~</btn1> <btn2>~btn(2)~</btn2> <btn3>~btn(3)~</btn3> <pot0>~pot~</pot0> <slider1>~slider1~</slider1> </response> |
renamed 'slider-simple_clean.htm as pwm2.htm (as first iteration will be controlling a DC motor using PWM on CCP2) and edited it. Slider is 0-200 pixels and scales as 0-100 (for a PWM % control). We also updated one of the demo buttons as an emergency stop button and removed the other.
~inc:header.inc~ <script type="text/javascript"> // The slider can move 0 pixels up // The slider can move 200 pixels down // Custom scale factor for converting the pixel offset into a real value // The amount the slider moves when the value is changed with the arrow Event.onDOMReady(function() { slider = YAHOO.widget.Slider.getVertSlider(bg, slider.getRealValue = function() { slider.subscribe("change", function(offsetFromStart) { var valnode = Dom.get(valuearea); // Display the pixel value of the control // use the scale factor to convert the pixel offset into a real // update the text box with the actual value // Update the title attribute on the background. This helps assistive }); slider.subscribe("slideStart", function() { slider.subscribe("slideEnd", function() { // set an initial value // Listen for keystrokes on the form field that displays the // set the value when the 'return' key is detected // convert the real value into a pixel offset ~inc:footer.inc~ |
Lots of random info here: http://forum.microchip.com/tm.aspx?m=346502&mpage=1&key=ajax񔽿 a shame they dont post the complete sucessful bits after.. so we will guess with a bit of trial and error.
edited CustomHTTPApp.c
- added a static declare at the top: 'static WORD slider1 = 0;'
- copied the '// If it's the LED updater file' below to a new section:
Copied this | immediately after as this: |
// If it's the LED updater file | // If it's the SLIDER updater file |
Also added an HTTPPrint function so I can display the setting as a dynamic variable on pwm2.htm (the '~slider1~' entry).
void HTTPPrint_slider1(void) { BYTE sliderstring[8]; // Print the value uitoa(slider1, (BYTE*)sliderstring); TCPPutString(sktHTTP, sliderstring); } |
Did a Project -> Build All and it works.