I have been trying to integrate a jquery mobile server on my arduino+ethernet shield, I have no knowledge of javascript/html/css, but following the Webduino library I have had some success with adding sliders to the code. I really want to be able to control outputs in jquery using click buttons but I don't how to integrate it (input type, id, ui..) using the code I have from the webduino site.
{
/* store the HTML in program memory using the P macro */
P(message) =
"<!DOCTYPE html><html><head>"
"<meta charset=\"utf-8\"><meta name=\"apple-mobile-web-app-capable\" content=\"yes\" /><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"><meta name=\"viewport\" content=\"width=device-width, user-scalable=no\">"
"<title>Mixim Drink Maker</title>"
"<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css\" />"
"<script src=\"http://code.jquery.com/jquery-1.6.4.min.js\"></script>"
"<script src=\"http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js\"></script>"
"<style> body, .ui-page { background: black; } .ui-body { padding-bottom: 1.5em; } div.ui-slider { width: 88%; } #red, #green, #blue { display: block; margin: 10px; } #red { background: #f00; } #green { background: #0f0; } #blue { background: #00f; } </style>"
"<script>"
// causes the Arduino to hang quite frequently (more often than Web_AjaxRGB.pde), probably due to the different event triggering the ajax requests
"$(document).ready(function(){ $('#red, #green, #blue').slider; $('#red, #green, #blue').bind( 'change', function(event, ui) { jQuery.ajaxSetup({timeout: 110}); /*not to DDoS the Arduino, you might have to change this to some threshold value that fits your setup*/ var id = $(this).attr('id'); var strength = $(this).val(); if (id == 'red') $.post('/rgb', { red: strength } ); if (id == 'green') $.post('/rgb', { green: strength } ); if (id == 'blue') $.post('/rgb', { blue: strength } ); });});"
"</script>"
"</head>"
"<body>"
"<div data-role=\"header\" data-position=\"inline\"><h1>Mixim Drink Maker</h1></div>"
"<div class=\"ui-body ui-body-a\">"
"<input type=\"range\" name=\"slider\" id=\"red\" value=\"0\" min=\"0\" max=\"255\" />"
"<input type=\"range\" name=\"slider\" id=\"green\" value=\"0\" min=\"0\" max=\"255\" />"
"<input type=\"range\" name=\"slider\" id=\"blue\" value=\"0\" min=\"0\" max=\"255\" />"
"</div>" "</body>""</html>";
server.printP(message);
}
Thanks in Advance