├── ESP8266-screenSetWifi-master.zip
├── README.md
├── case1.jpg
├── case2.jpg
├── case4.png
├── circuit.png
├── html_example.zip
├── preview.png
├── preview3.png
├── screenSetWifi.html
├── screenSetWifi.js
├── test1.jpg
├── test2.jpg
├── test3.jpg
├── test4.jpg
└── test5.jpg


/ESP8266-screenSetWifi-master.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/ESP8266-screenSetWifi-master.zip


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ESP8266 - Screen Modulation Set WiFi Credentials
 2 | 
 3 | Screen Modulation Set WiFi Credentials
 4 | by Eduardo Zola (www.zolalab.com.br)
 5 | 
 6 | This library can transfer data (WiFi credentials) from your smartphone to an ESP8266 by Pulsing your Mobile Screen.
 7 | 
 8 | To setup your WiFi Credentials put your ESP12F over a Smartphone screen, and let the Black and White Oscillation transmit the information. Note: You need to cover the LDR, in a way no light can enter. The LDR should not touch the screen, it needs stay some millimeters far from the screen.
 9 | 
10 | Items required:
11 | 
12 | - ESP-12F (and all the basic componentes to make it work)
13 | - Resistor 300k
14 | - LDR 50K-50M Omhs (GL5539)
15 | - Unzip the library ESP8266-screenSetWifi-master.zip into your Arduino Library Folder
16 | - Unzip the html_example.zip
17 | 
18 | PS: You can try other variations of resistor values and LDR types. Just make sure the max resistive value of LDR is greater than the pull-down resistor.
19 | 
20 | 
21 | Video 1:
22 | 
23 | [![Watch the video](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/preview3.png?raw=true)](https://youtu.be/jeT3SGQUzRI)
24 | 
25 | 
26 | Video 2:
27 | 
28 | [![Watch the video](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/preview.png?raw=true)](https://youtu.be/ZZHWxdNXwwc)
29 | 
30 | 
31 | You can try a demo at:  
32 | 
33 | http://www.zolalab.com.br/esp8266/screenSetWifi/html/screenSetWifi.html
34 | 
35 | 
36 | As you can see I did a case to my circuit, and left the LDR on the bottom to communicate with a smartphone.
37 | 
38 | ![Picture 1](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/case1.jpg?raw=true)
39 | 
40 | Let the LDR at the bottom of the case
41 | ![Picture 2](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/case2.jpg?raw=true)
42 | 
43 | Put your case over the smartphone screen, and set brightness to 80%
44 | ![Picture 3](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/case4.png?raw=true)
45 | 
46 | 
47 | Circuit:
48 | 
49 | ![Picture 4](https://github.com/egzola/ESP8266-Light-Pulse-Input-Credentials/blob/master/circuit.png?raw=true)
50 | 
51 | 
52 | Tests:
53 | 
54 | ![Picture 5](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/test1.jpg?raw=true)
55 | ![Picture 6](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/test2.jpg?raw=true)
56 | ![Picture 7](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/test3.jpg?raw=true)
57 | ![Picture 8](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/test4.jpg?raw=true)
58 | ![Picture 9](https://github.com/egzola/ESP8266-ScreenSetWifi/blob/master/test5.jpg?raw=true)
59 | 
60 | 


--------------------------------------------------------------------------------
/case1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/case1.jpg


--------------------------------------------------------------------------------
/case2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/case2.jpg


--------------------------------------------------------------------------------
/case4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/case4.png


--------------------------------------------------------------------------------
/circuit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/circuit.png


--------------------------------------------------------------------------------
/html_example.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/html_example.zip


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/preview.png


--------------------------------------------------------------------------------
/preview3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/preview3.png


--------------------------------------------------------------------------------
/screenSetWifi.html:
--------------------------------------------------------------------------------
  1 | <!-- 
  2 |   Developed by:  Eduardo Zola - Zola Lab 2015 - www.zolalab.com.br - egzola@gmail.com
  3 | 
  4 |   Screen Set Wifi Library
  5 |   Copyright (c) 2015 Eduardo Zola.  All right reserved.
  6 | 
  7 |   This library is free software; you can redistribute it and/or
  8 |   modify it under the terms of the GNU Lesser General Public
  9 |   License as published by the Free Software Foundation; either
 10 |   version 2.1 of the License, or (at your option) any later version.
 11 | 
 12 |   This library is distributed in the hope that it will be useful,
 13 |   but WITHOUT ANY WARRANTY; without even the implied warranty of
 14 |   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 15 |   Lesser General Public License for more details.
 16 | -->
 17 | 
 18 | <!DOCTYPE html>
 19 | <html lang="en">
 20 | <head>
 21 |   <title>ESP8266 SCREEN SET WIFI</title>
 22 |   <meta charset="utf-8">
 23 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 24 |   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 25 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 26 |   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 27 |   <script src="screenSetWifi.js"></script>
 28 | 
 29 | 
 30 |    <style>
 31 |    .center {float: none;margin-left: auto;margin-right: auto;}
 32 |    .btn-space {margin-right: 5px;}
 33 |    .input-small{float:left}
 34 |    </style>
 35 | 
 36 | </head>
 37 | <body>
 38 | <div class="container">
 39 |   <h4>Welcome to the Esp8266 Screen Set WiFi</h4>
 40 |   <div class="panel-group">
 41 | 
 42 |       <div class="panel panel-primary"  id="panel0">
 43 |       <div class="panel-heading">Step 1: Set your mobile screen to 80% of brightness</div>
 44 |       <div class="panel-body">
 45 |                Put some instructions here...
 46 | 			   <BR><BR>
 47 | 			   <button type="button" id="but0" class="btn btn-primary pull-right">Next</button>
 48 |       </div>
 49 |     </div>
 50 | 
 51 |   
 52 |     <div class="panel panel-primary"  id="panel1">
 53 |       <div class="panel-heading">Step 2: Please, fill the fields with your network informations.</div>
 54 |       <div class="panel-body">
 55 |                <div class="form-group">
 56 |                  <label for="ssid">WiFi Network name (SSID):</label>
 57 |                  <input type="text" class="form-control" id="ssid" maxlength=60 value="My SSID">
 58 |                </div>
 59 |                <div class="form-group">
 60 |                  <label for="pwd">Senha do WiFi:</label>
 61 |                  <input type="password" class="form-control" id="pwd" maxlength=60 value="1234">
 62 |                </div>
 63 | 
 64 | 			   <BR><BR>
 65 | 			   <button type="button" id="but1" class="btn btn-primary pull-right">Next</button>
 66 |       </div>
 67 |     </div>
 68 | 
 69 | 	
 70 |     <div class="panel panel-primary" id="panel2">
 71 |       <div class="panel-heading">Step 3: Place your device over the black square, and then click on transfer button</div>
 72 |       <div class="panel-body">
 73 | 
 74 |  		 <center><progress value="0" id="pbar1" style="width:280px;margin-bottom:3px"></center>
 75 |          <div class="panel panel-default center" style="width:280px;height:280px;">
 76 |             <div id="box" style="width:250px;height:250px;margin:15px;background-color:black">
 77 |             </div>
 78 |          </div>
 79 |  		 <center><progress value="0" id="pbar2" style="width:280px;margin-top:7px"></center>
 80 | 
 81 |          <BR>
 82 | 
 83 |          <button type="button" id="but4" class="btn btn-primary pull-left">Back</button>
 84 |          <button type="button" id="butTransf" class="btn btn-primary pull-right">Transfer</button> 
 85 |       </div>
 86 |   
 87 | 	  </div>
 88 | 
 89 | 
 90 |   </div>
 91 | </div>
 92 | 
 93 | </body>
 94 | </html>
 95 | 
 96 | <script>
 97 | 
 98 | 
 99 | function onFinish()
100 | {
101 |    alert("Done");
102 | }
103 | 
104 | 
105 | var but = document.getElementById("butTransf");
106 | but.onclick = function(){Transfer(but,onFinish);};
107 | 
108 | 
109 | $(document).ready(function(){
110 |   $('#panel1').hide();
111 |   $('#panel2').hide();
112 | });
113 | 
114 | $("#but0").click(function(){
115 |     $("#panel0").slideUp(500, function() {$("#panel1").slideDown();} );
116 | });
117 | 
118 | 
119 | $("#but1").click(function(){
120 | 
121 |     var ssid = document.getElementById("ssid").value;
122 |     var pwd = document.getElementById("pwd").value;
123 | 
124 |     ssid = ssid.trim();
125 |     pwd = pwd.trim();
126 | 	
127 |     if(ssid == "" || pwd == "") return;
128 | 
129 |    
130 |     $("#panel1").slideUp(500, function() {$("#panel2").slideDown();} );
131 | });
132 | 
133 | $("#but2").click(function(){
134 |     $("#panel2").slideUp(500, function() {$("#panel1").slideDown();} );
135 | });
136 | 
137 | 
138 | 
139 | $("#but4").click(function(){
140 |    window.transf = false;
141 |    document.getElementById("pbar1").value = 0;
142 |    document.getElementById("pbar2").value = 0;
143 |    $("#panel2").slideUp(500, function() {$("#panel1").slideDown();} );
144 | });
145 | 
146 | 
147 | 
148 | var inp = document.querySelector('#pwd');
149 | 
150 | inp.addEventListener( 'focus', function(){
151 |     inp.type = 'text';
152 | });
153 | inp.addEventListener( 'blur', function(){
154 |     inp.type = 'password';
155 | });
156 | 
157 | 
158 | </script>
159 | 


--------------------------------------------------------------------------------
/screenSetWifi.js:
--------------------------------------------------------------------------------
  1 | /* 
  2 |   Developed by:  Eduardo Zola - Zola Lab 2015 - www.zolalab.com.br - egzola@gmail.com
  3 | 
  4 |   Screen Set Wifi Library
  5 |   Copyright (c) 2015 Eduardo Zola.  All right reserved.
  6 | 
  7 |   This library is free software; you can redistribute it and/or
  8 |   modify it under the terms of the GNU Lesser General Public
  9 |   License as published by the Free Software Foundation; either
 10 |   version 2.1 of the License, or (at your option) any later version.
 11 | 
 12 |   This library is distributed in the hope that it will be useful,
 13 |   but WITHOUT ANY WARRANTY; without even the implied warranty of
 14 |   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 15 |   Lesser General Public License for more details.
 16 | */
 17 | 
 18 | var TXT = "";
 19 | var XBIN = "";
 20 | var box;
 21 | var TEXTO;
 22 | var cnt = 0;
 23 | var sz = 0;
 24 | var lastBit;
 25 | var thisBit;
 26 | var funcFinishPublic;
 27 | 
 28 | 
 29 | window.rtimeOut=function(callback,delay){
 30 |  var dateNow=Date.now,
 31 |      requestAnimation=window.requestAnimationFrame,
 32 |      start=dateNow(),
 33 |      stop,
 34 |      timeoutFunc=function(){
 35 |       dateNow()-start<delay?stop||requestAnimation(timeoutFunc):callback()
 36 |      };
 37 |  requestAnimation(timeoutFunc);
 38 |  return{
 39 |   clear:function(){stop=1}
 40 |  }
 41 | }
 42 | 
 43 | 
 44 | 
 45 | function Transfer(but,funcFinish)
 46 | {
 47 |    funcFinishPublic = funcFinish;
 48 |    var pbar1 = document.getElementById("pbar1");
 49 |    var pbar2 = document.getElementById("pbar2");
 50 |    pbar1.value = 0;
 51 |    pbar2.value = 0;
 52 | 
 53 |    but.innerText = "Stop";
 54 |    if(window.transf) {window.transf = false;cnt=sz;but.innerText="Transfer";return;};
 55 |    box = document.getElementById("box");
 56 |    
 57 |    var ssid = document.getElementById("ssid").value;
 58 |    var pwd = document.getElementById("pwd").value;
 59 | 
 60 |    ssid = ssid.trim();
 61 |    pwd = pwd.trim();
 62 | 
 63 |    
 64 |    if(ssid == "" || pwd == "") return;
 65 |   
 66 | 
 67 |    var PULSES = 0;
 68 |    
 69 |    
 70 |    TXT = ""
 71 |    TXT = TXT + ">"+ssid+ String.fromCharCode(10);
 72 |    TXT = TXT + pwd + String.fromCharCode(10);
 73 |    TXT = TXT + String.fromCharCode(crc(TXT));
 74 | 
 75 |    XBIN = binary(TXT) + "0";
 76 |    cnt = 0;
 77 |    sz = XBIN.length;
 78 |    
 79 |    pbar1.max = sz;
 80 |    pbar2.max = sz;
 81 |    
 82 |    window.transf = true;
 83 |    
 84 |    lastBit = 0;
 85 |    setTimeout(send,1000);
 86 | }
 87 | 
 88 | function send()
 89 | {
 90 |     if(!window.transf || cnt > sz) {box.style.backgroundColor="#000000";funcFinishPublic();return;};
 91 | 
 92 |     thisBit = XBIN[cnt];
 93 | 	cnt++;
 94 |     pbar1.value = cnt;
 95 |     pbar2.value = cnt;
 96 | 	
 97 |     if(thisBit != lastBit) 
 98 | 	{
 99 |         if(thisBit == "1") box.style.backgroundColor="#FFFFFF"; else box.style.backgroundColor="#000000";
100 |         lastBit = thisBit;
101 | //        setTimeout("send()",34);
102 |         rtimeOut(send,34);
103 | 	}
104 | 	else 
105 | 	{
106 |         if(thisBit == "1") box.style.backgroundColor="#000000"; else box.style.backgroundColor="#FFFFFF";
107 |         lastBit = thisBit;
108 | //        setTimeout("goColor();",200);
109 |         rtimeOut(goColor,204);
110 | 	}
111 | 
112 | }
113 | 
114 | function goColor()
115 | {
116 |    if(thisBit == "1") box.style.backgroundColor="#FFFFFF"; else box.style.backgroundColor="#000000";
117 | //   setTimeout("send()",34);
118 |    rtimeOut(send,34);
119 | }
120 | 
121 | 
122 | 
123 | 
124 | function binary(input) 
125 | {
126 |     output = "";
127 |     for (i=0; i < input.length; i++) 
128 |     {
129 |         bin = input[i].charCodeAt(0).toString(2);
130 |         ln = 8-bin.length;
131 |         zeros = "";
132 |         for(j=0;j<ln;j++) zeros = zeros + "0";
133 |         bin = zeros + bin;
134 |         output += bin;
135 |     }
136 |     return(output);
137 | }
138 | 
139 | 
140 | function dec2binary(dec)
141 | {
142 |     bin = (dec >>> 0).toString(2);
143 |     ln = 8-bin.length;
144 |     zeros = "";
145 |     for(j=0;j<ln;j++) zeros = zeros + "0";
146 |     bin = zeros + bin;
147 |     return(bin);
148 | }
149 | 
150 | function crc(str) 
151 | {
152 |     var xcrc = 0;
153 |     var qtd = str.length;
154 | 
155 |     v1 = str.charCodeAt(0);
156 |     for(var i = 1;i<qtd;i++) 
157 |     {
158 |         v2 = str.charCodeAt(i);
159 |         if(v2 > v1) xcrc += (v2-v1); else xcrc += (v1-v2);
160 |         if(xcrc > 255) xcrc -= 255;
161 |         v1 = v2;
162 |     }
163 | 
164 |     return(xcrc);
165 | 
166 | };
167 | 
168 |  
169 | 


--------------------------------------------------------------------------------
/test1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/test1.jpg


--------------------------------------------------------------------------------
/test2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/test2.jpg


--------------------------------------------------------------------------------
/test3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/test3.jpg


--------------------------------------------------------------------------------
/test4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/test4.jpg


--------------------------------------------------------------------------------
/test5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egzola/ESP8266-ScreenSetWifi/4b6a73485d6557c93e719e921364a919aa630768/test5.jpg


--------------------------------------------------------------------------------