Any Javascript Programmers in FractalLand?

Toopy14

Axe-Master
I'm working on an embedded project with a web-based Microchip micrcontroller. I'm trying to pass a variable from a slider control to the server via CGI.

For example; if I type in this URL; http://<IP Address>/sliders.cgi?slider1=75, it will pass the value 75 to the server and store the value in an XML file. I can then use a callback function to display the dynamic variable on the web page. That all works fine.

Microchip provides a .js program that will do most of the work to pass the variable to the server using AJAX texchniques. Here's the snippet from the .js code;

// Initiates a new AJAX command
// url: the url to access
// container: the document ID to fill, or a function to call with response XML (optional)
// repeat: true to repeat this call indefinitely (optional)
// data: an URL encoded string to be submitted as POST data (optional)
function newAJAXCommand(url, container, repeat, data)

More on the newAJAXCommand shortly.

Here's the HTML code for the slider;

<div class="slidecontainer">
<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
<p>Duty Cycle(%): <span id="sliderValue" style="font-weight:normal"></span></p>
</div>

Here's the Javascript for the slider;

<script type="text/javascript">

var slider = document.getElementById("myRange");
var output = document.getElementById("sliderValue");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML = this.value ;
}

</script>

So...I can get the slider to work and display the value (0-100) on the webpage;

1603590766880.png

What I'm trying to do now is use the NewAJAXCommand from the .js code, to pass the slider variable to the server.

The code should look something like this;

newAJAXCommand( 'sliders.cgi?slider1=' + some function() )

but I don't know how to create the 'some function' to pull the variable from the slider and feed it through the sliders.cgi.

I did it before using a Yahoo slider widget, but it's been deprecated;



using this command;

newAJAXCommand('sliders.cgi?slider1=' + slider.getRealValue());

from this example;

http://hairyraho.com/20081112-slider-control/

Any ideas would be greatly appreciated!!

Thanks!
 
The value you want your function to return is document.getElementById("myRange").value

Thank you!!!

Seems so damn obvious now. It's beyond me why that is the one thing I didn't try. I kept thinking the value I was looking for was "sliderValue" because that's variable that was being displayed under the slider.

When I set the slider to any value, ie. 70, the XML value is updated, which means the variable is being passed to the server;

1603631508288.png1603631621278.png

So now the only thing that is not working, is the callback function on the C code. That's the dynamic variable ~slider1~ (the number 60 next to 'Slider1', embedded in the HTML page which is updated by the following callback function;

This code reads the value coming in;

else if(!memcmppgm2ram(filename, "sliders.cgi", 11))
{
ptr = HTTPGetROMArg(curHTTP.data, (ROM BYTE *)"slider1");
if(ptr)
{
slider1 = atoi(ptr);
//slider1_value = slider1;
//emerg1 = 0;
}
}

and this sends it back to the webpage;

void HTTPPrint_slider1(void) //Motor Control
{
BYTE sliderstring[8];
// Print the value
itoa(slider1, (BYTE*)sliderstring);
TCPPutString(sktHTTP, sliderstring);
}

I used both previously with the Yahoo widget and it worked. I'm guessing it may have to do with the data type? Not sure what else it could be, if that isn't it.

[Edit] Got it. I forgot the value doesn't update in realtime without this JS command;

// Update the Slider Value (Duty Cycle)
document.getElementById('slider1').innerHTML = getXMLValue(xmlData, 'slider1');
 
Last edited:
Maybe retitle your post to be about the C code piece.

I didn't answer the js question because it was straight ahead enough that I thought I must not understand what you meant.
Out here in C language, I'm not your guy :)
 
Maybe retitle your post to be about the C code piece.

I didn't answer the js question because it was straight ahead enough that I thought I must not understand what you meant.
Out here in C language, I'm not your guy :)

No, the original problem and even the last issue I mentioned, was all in the JavaScript on the web page. Everything is working now.

I teach embedded C, so I'm putting together a project for my students but because it's not a course that focuses on JavaScript, I want to keep that part fairly simple by making a make a few changes to the existing code.

The code is part of a demo app. developed by Microchip and modified by Olimex to work on their PIC-WEB, but by modifying that code, you can add more variables that you can use to do things like motor control, which needs 3 pins...one for the enable of the H-Bridge, which is controlled by a PWM waveform...controlling the speed of the motor and 2 pins for direction, 1, 0 FWD, 0, 1 REV.

Next semester I'm teaching a new IoT course, that I've been developing, using openHAB. So instead of using HTML, JavaScript, CSS, AJAX, etc., you can still control the hardware with C but creating the interface is much easier. You can even make it hands-free! :)

 
As far as ioT is concerned, I like MQTT.
The cloud stinks insofar as contextual based processing for enterprise level systems,
but a well designed pub/sub architecture based on exception actually works.
 
As far as ioT is concerned, I like MQTT.

That's an area I'm going to explore and see what I can come up with in terms of labs for the students. I need to learn more about it myself first though.

I agree about the cloud. The Google Home voice controlled motor control, was one of those...'hey, I wonder if?'. It was a great learning experience.

Google doesn't play nice with opensource software. Nest had a great codelab setup, with a Nest simulator, so you could learn about OAuth and API processing using Postman and of course what did they do when they bought Nest, shut it all down!

One thing about the PIC-WEB, is that all the processes to move data into and out of the microcontroller are already there, you just need to learn how to tie them altogether and the demo app. is a great way to learn that. Then with openHAB, you can do the same things and more, but simplify the interface. For example, they have an Astral Binding that keeps track of all kinds of information, like the position of the sun, dusk/dawn times, seasons, etc., so you can use them in rules to automate all kinds of processes. I used it to create a 'smart' doorbell button. The PIC-WEB monitors the button to see when it's pressed, then when it's pressed, openHAB checks to see where the position of the sun is. It's above the horizon, I play a doorbell MP3 file and a text-to-speech message. If the sun is below the horizon, it does all that and turns the light on at the door, if it hasn't already come on.

The possibilities are endless of course and it's fun to experiment and learn...just like guitar effects and learning to play new songs! :)
 
Back
Top Bottom