ESp-01 : 두개의 다이얼 제어

ESP-01 모듈로 IoT연습

지난번에 이어

두개의 다이얼로 LED의 PWM 제어

한개는 미사용이고 기능 시험만 해봄.

http://diyworld.tistory.com/93?category=936954

참조

jQuery plugin 'Kontrol' : http://anthonyterrien.com/kontrol/

소스화일

ESP8266_IoT_pwmLEDknotrol2.zip

작동화면

ESP-01 모듈 소스 스케치

// ============================================================================================
// 외부에서 ESP모듈에 연결된 LED를 그래픽으로 밝기 조절 : PWM at GPIO 2
// Demonstrates realtime LED PWM value update without page refresh
// 'index.h' 화일과 필요한 Jquery & Knotrol.js 화일은 'data' 폴더 안에있다. (SPIFFS로 업로드)
// 주의 : SPIFFS로 업로드 할때 'Serial monitor' 끌것. 올라간 화일은 크기가 좀 커진다.
// ============================================================================================
// 참조 사이트 : https://circuits4you.com/2018/03/10/esp8266-jquery-and-ajax-web-server/
// jQuery plugin 'Knotrol' : http://anthonyterrien.com/kontrol/
// https://stackoverflow.com/questions/15906610/how-to-access-x-and-y-values-from-a-jquery-xy-pad
// ============================================================================================
/* ESP8266 SPIFFS HTML Web Page with JPEG, PNG Image 
 * https://circuits4you.com */
// ============================================================================================
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>                                       // Include File System Headers
// ============================================================================================
const char* htmlfile = "/index.html";                 // saved in SPIFFS 
const char *ssid = "iptimexxxx";                      // WiFi Connection configuration
const char *password = "xxxxxxxx";
// ============================================================================================
#define LED 2                                         // LED on GPIO 2
ESP8266WebServer server(80);
// ============================================================================================
void handleRoot(){
  server.sendHeader("Location", "/index.html",true);   // Redirect to our html web page
  server.send(302, "text/plane","");
}
// ============================================================================================
void handlePWM(){
  String PWM = server.arg("pwm");
  int p = 1024 - (PWM.toInt())*10;
  analogWrite(LED,p);
  Serial.println("pwm=" + PWM);
  server.send(200, "text/plane","");
}
// ============================================================================================
void handleADC(){
  String ADC = server.arg("ADC");                     // no action, just report value received
  Serial.println("ADC=" + ADC);
  server.send(200, "text/plane","");
}
// ============================================================================================
void handleXY(){                                    // Not working : unable to get the position
  String XY = server.arg("padXY");
  Serial.println("PadXY="+XY);                      // no action, just report value received
  server.send(200, "text/plane","");
}
// ============================================================================================
void setup() {
  delay(1000);
  Serial.begin(115200);
  Serial.println();
  pinMode(LED,OUTPUT);
  SPIFFS.begin();                                   // Initialize File System
  Serial.println("File System Initialized");
  WiFi.begin(ssid, password);                       // Connect to your WiFi router
  Serial.println("");
  while (WiFi.status() != WL_CONNECTED) {           // Wait for connection
    delay(500);
    Serial.print(".");
  }
  Serial.println("");                               // If connected, show IP address
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());                   // IP address assigned to your ESP
  server.on("/",handleRoot);                          // Initialize Webserver
  server.on("/setLED",handlePWM);       // set pwm function is called from out index.html
  server.on("/readADC",handleADC);      // Reads ADC function is called from out index.html
  server.on("/posXY",handleXY);         // set padXY function is called from out index.html
  server.onNotFound(handleWebRequests); // Set setver all paths are not found so we can handle as per URI
  server.begin();  
}
// ============================================================================================
void loop() {
 server.handleClient();
}
// ============================================================================================
void handleWebRequests(){
  if(loadFromSpiffs(server.uri())) return;
  String message = "File Not Detected\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " NAME:"+server.argName(i) + "\n VALUE:" + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  Serial.println(message);
}
// ============================================================================================
bool loadFromSpiffs(String path){
  String dataType = "text/plain";
  if(path.endsWith("/")) path += "index.htm";
  if(path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));
  else if(path.endsWith(".html")) dataType = "text/html";
  else if(path.endsWith(".htm")) dataType = "text/html";
  else if(path.endsWith(".css")) dataType = "text/css";
  else if(path.endsWith(".js")) dataType = "application/javascript";
  else if(path.endsWith(".png")) dataType = "image/png";
  else if(path.endsWith(".gif")) dataType = "image/gif";
  else if(path.endsWith(".jpg")) dataType = "image/jpeg";
  else if(path.endsWith(".ico")) dataType = "image/x-icon";
  else if(path.endsWith(".xml")) dataType = "text/xml";
  else if(path.endsWith(".pdf")) dataType = "application/pdf";
  else if(path.endsWith(".zip")) dataType = "application/zip";
  File dataFile = SPIFFS.open(path.c_str(), "r");
  if (server.hasArg("download")) dataType = "application/octet-stream";
  if (server.streamFile(dataFile, dataType) != dataFile.size()) {
  }
  dataFile.close();
  return true;
}
// ============================================================================================
// ============================================================================================

ESP-01의 SPIFFS 영역에 올라간 "index.html" 화일 : 

Tools-> ESP8266 Sketch Data Upload 기능으로 ESP-01의 SPIFFS에 올림

<!DOCTYPE html>
<html>		<!-- 다이얼은 작동, 단 패드는 웹에선 작동하나 변수 전달 못함 -->
<head>
<title>jQuery Kontrol</title>
<script src="jquery.min.js"></script>
<script src="jquery.kontrol.js"></script>
<script>
	$(function() {
		var $all = $(".dial1, .dial2, .pad")
			, $body = $("body");
		$(".dial").dial({
			fgColor:"#222222"
			, bgColor:"#EEEEEE"
			, thickness : .3
		}).css({display:'inline',padding:'0px 10px'});
		var skins = {
			skin0 : {
				kontrol : {
					fgColor:"#87CEEB"
					, bgColor:"#EEEEEE"
				}
				, rack : {
					"background-color":"#FFFFFF"
					, "color":"#87CEEB"
				}
			}
			, skin1 : {
				kontrol : {
					fgColor:"#222222"
					, bgColor:"#EEEEEE"
				}
				, rack : {
					"background-color":"#FFFFFF"
					, "color":"#222222"
				}
			}
		};
		var changeSkin = function(skin) {
			$body.css(skin.rack);
			$all.trigger(
				"configure"
				, skin.kontrol
			);
		}
		$('#skin').bind(
			'change'
			, function(e) {
				changeSkin(skins[$(this).find('option:selected').val()]);
			}
		);
		$('#displayPrevious').bind(
			'change'
			, function(e) {
				$all.trigger("configure", {displayPrevious:parseInt($(this).find('option:selected').val())});
			}
		);
		$('#cursor').bind(
			'change'
			, function(e) {
				$all.trigger("configure", {cursor:parseInt($(this).find('option:selected').val())});
			}
		);
		$(".height").bind(
			'click'
			, function(e) {
				$all.trigger("configure", {height:100});
			}
		);
	});
</script>
<style>
	body{
		padding: 0;
		margin: 0;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-weight: 300;
		text-rendering: optimizelegibility;
	}
	p{font-size: 30px; line-height: 30px}
	div.demo{text-align: center; width: 300px; float: left}
	div.demo > p{font-size: 20px}
	.rack{font:bold 14px;}
	.opt{
		background:#FFF;
		-webkit-box-shadow: inset 0 4px 4px -2px #888, inset 0 -4px 4px -2px #888;
		-moz-box-shadow: inset 0 4px 4px -2px #888, inset 0 -4px 4px -2px #888;
		box-shadow: inset 0 4px 4px -2px #888, inset 0 -4px 4px -2px #888;
	}
	.opt div{
		padding:0px 10px;
		color:#AAA; font:10px Arial;
	}
	select {
		width: 100px;
		padding: 5px;font-size: 16px;
		border: 1px solid #ccc;height: 34px;
	}
</style>
</head>
<body style="color:#222;background-color:#FFF">
<center>
	<a href="https://diyworld.yistory.com" 	<p style="font-size:40px;">Diyworld</a><br>
	<p style="font-size:40px;">
	Demo: realtime LED PWM value update <br><br>
	without page refresh and more things<br><br>
	LED Fadding Input<br></p>
	<div class="rack" style="padding:0px 20px">
		<div style="float:left;width:400px;padding:30px">
			<div style="margin-bottom:10px">PWM</div>
			<input class="dial1" data-cursor=true data-width="400" data-height="400" data-thickness=.5 data-min=0 data-max=100 value="0">
		</div>
		<div style="float:left;width:400px;padding:30px">
			<div style="margin-bottom:10px">ADC Value</div>
			<input class="dial2" data-cursor=true data-width="400" data-height="400" data-thickness=.4 data-min=-100 data-max=100 data-angleOffset="-125" data-angleArc="250" value="0">
		</div>
	</div>
	<script>
	$(".dial1").dial({
		'change' : function (v) { console.log(Math.round(v,0));    
		$.ajax({url: "/setLED?pwm="+Math.round(v,0), success: function(result){
				$("#div1").html(result);
			}});
		}
	});
	$(".dial2").dial({
		'change' : function (v) { console.log(Math.round(v,0));    
		$.ajax({url: "/readADC?ADC="+Math.round(v,0), success: function(result){
				$("#div1").html(result);
			}});
		}
	});
	</script>  
</center>
</body>
</html>