ralphcrutzen/plafondlamp.html

## plafondlamp.html
<!-- http://blog.crutzen.eu/?p=822 -->
<!DOCTYPE html>
<html>
  <head>
    <script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
    <link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>
    <style>
      body {
        margin: 2em;
      }
      #colorpicker {
        height: 5em;
        width: 5em;
        padding: 0;
        display: none;
      }
      #time {
        display: none;
      }
    </style>
  </head>

  <body>
    <h1>Plafondlamp</h1>

    <h2>Kleur</h2>
    <select id="mode" onchange="changeMode()">
      <option value="auto">Regenboog
      <option value="disco">Disco
      <option value="select">Kies een kleur
      <option value="sleep">Inslapen
    </select>
    <br>
    <input id="colorpicker" type="color" value="#000000" onchange="showColor(this.value)" />

    <h2>Wekker</h2>
    <input type="checkbox" name="alarm" onchange="changeAlarm(this.checked)"/>Aan<br />
    <input id="time" type="text" placeholder="Klik hier">

    <script type="text/javascript">
      function showColor(newColor) {
        sendToParticle('sendcolor', newColor)
      }

      function changeMode() {
        var mode = document.getElementById("mode").value;
        if (mode == "auto") {
          document.getElementById("colorpicker").style.display = "none";
          sendToParticle('sendmode', 'auto');
        }
        else if (mode == "select") {
          document.getElementById("colorpicker").style.display = "inline";
          sendToParticle('sendmode', 'select');
        }
        else if (mode == "sleep") {
          document.getElementById("colorpicker").style.display = "none";
          sendToParticle('sendmode', 'sleep');
        }
        else if (mode == "disco") {
          document.getElementById("colorpicker").style.display = "none";
          sendToParticle('sendmode', 'disco');
        }
      }

      function changeAlarm(checked) {
        if (checked) {
          document.getElementById('time').style.display = 'inline';
          sendToParticle('sendalarm', 'on');
        }
        else {
          document.getElementById('time').style.display = 'none';
          sendToParticle('sendalarm', 'off');
        }
      }

      function setAlarm(h, m) {
        sendToParticle('sendhour', date.hour().toString());
        sendToParticle('sendminute', date.minute().toString());
      }

      function sendToParticle(func, val) {
        var request = new XMLHttpRequest();
        var dev_id = 'Your Particle Device ID';
        var access = 'Your Particle Device Secret';
        var data = 'params='+val+'&access_token='+access;
        var url = 'https://api.particle.io/v1/devices/' + dev_id + '/' + func + '/';
        request.open('POST', url, true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        request.send(data);
      }

      var timepicker = new TimePicker('time', {
          lang: 'en',
          theme: 'dark'
      });

      var input = document.getElementById('time');
      var hour = 0;
      var minute = 0;

      timepicker.on('change', function(evt) {
        var value = (evt.hour || '00') + ':' + (evt.minute || '00');
        evt.element.value = value;
        hour = evt.hour;
        minute = evt.minute;
      });

      timepicker.on('close', function(evt) {
        setAlarm(hour, minute);
      });

    </script>
  </body>
</html>

## plafondlamp.ino
/*
http://blog.crutzen.eu/?p=822
*/

#define BLYNK_PRINT Serial
#include "blynk.h"

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char blynkAuth[] = "Blynk token here";

int ledR = D1;
int ledG = D2;
int ledB = D3;

int currentR = 0;
int currentG = 0;
int currentB = 0;
int colorWheelPos = 0;

const int discoColors[][3] = {
      {255, 0, 0},   {0, 255, 0},   {0, 0, 255},
      {255, 255, 0}, {255, 0, 255}, {0, 255, 255},

      {255, 15, 0}, {255, 0, 15}, {255, 15, 15},
      {15, 255, 0}, {0, 255, 15}, {15, 255, 15},
      {15, 0, 255}, {0, 15, 255}, {15, 15, 255},

      {255, 127, 0}, {255, 0, 127}, {255, 127, 127},
      {127, 255, 0}, {0, 255, 127}, {127, 255, 127},
      {127, 0, 255}, {0, 127, 255}, {127, 127, 255},

      {255, 240, 0}, {255, 0, 240}, {255, 240, 240},
      {240, 255, 0}, {0, 255, 240}, {240, 255, 240},
      {240, 0, 255}, {0, 240, 255}, {240, 240, 255}
    };
const int discoDuration[] = {125, 250, 375, 500};

#define MODE_AUTO     0
#define MODE_SELECT   1
#define MODE_SLEEP    2
#define MODE_DISCO    3
int mode = MODE_SELECT;

bool alarm = false;
int alarmH = 0;
int alarmM = 0;

void setup()
{
    delay(5000); // Allow board to settle; seems to prevent breathing green led
    setColor(currentR , currentG , currentB);
    Blynk.begin(blynkAuth);
    pinMode(ledR, OUTPUT);
    pinMode(ledG, OUTPUT);
    pinMode(ledB, OUTPUT);
    Particle.function("sendcolor", sendColor);
    Particle.function("sendmode", sendMode);
    Particle.function("sendalarm", sendAlarm);
    Particle.function("sendhour", sendHour);
    Particle.function("sendminute", sendMinute);
    Time.zone(1); // UTC+1
}

void loop()
{
    Blynk.run();
    if (alarm && alarmH == Time.hour() && alarmM == Time.minute()) {
      modeWakeUp();
    }
    else {
      if (mode == MODE_AUTO) {
         modeAuto();
      }
      else if (mode == MODE_SELECT) {
        modeSelect();
      }
      else if (mode == MODE_SLEEP) {
        modeGoToSleep();
      }
      else if (mode == MODE_DISCO) {
        modeDisco();
      }
    }
}

void modeAuto()
{
  setColorWheel(colorWheelPos);
  colorWheelPos = (colorWheelPos + 1) % 256;
  delay(100);
}

void modeSelect()
{
    setColor(currentR, currentG, currentB);
}

void modeWakeUp()
{
  Particle.publish("Wake up!");
  int wait = 5000;
  for (int r = 1; (r < 64) && alarm; r++) {
      setColor(r, 0, 0);
      delay(wait);
  }
  for (int g = 1; (g < 32) && alarm; g++) {
      setColor(63, g, 0);
      delay(wait);
  }
  for (int b = 1; (b < 32) && alarm; b++) {
      setColor(63, 31, b);
      delay(wait);
  }
  mode = MODE_AUTO;
}

void modeGoToSleep()
{
  Particle.publish("Going to sleep...");
  int duration = 30; // minutes
  int b = 128; // brightness
  while (b >= 0 && mode == MODE_SLEEP) {
    setColor(0, b, (int)b/2);
    int s = 0;
    // check every second if we're still in sleep mode
    while (s <= duration*60/128 && mode == MODE_SLEEP) { // seconds per step
      delay(1000);
      s++;
    }
    b--;
  }
  if (mode == MODE_SLEEP) {
    currentR = 0;
    currentG = 0;
    currentB = 0;
    mode = MODE_SELECT;
  }
}

void modeDisco()
{
    Particle.publish("Disco!");
    while (mode == MODE_DISCO) {
      int c = random(33);
      setColor(discoColors[c][0], discoColors[c][1], discoColors[c][2]);
      delay(discoDuration[random(4)]);
    }
}

int sendColor(String hexColor)
{
    long long number = strtoll( &hexColor[1], NULL, 16);
    long long r = number >> 16;
    long long g = number >> 8 & 0xFF;
    long long b = number & 0xFF;
    setColor(r, g, b);
    currentR = r;
    currentG = g;
    currentB = b;
    Particle.publish("Color", hexColor);
}

int sendMode(String m) {
  Particle.publish("Color mode", m);
  if (m == "auto") {
    mode = MODE_AUTO;
  }
  else if (m == "select") {
    mode = MODE_SELECT;
  }
  else if (m == "sleep") {
    mode = MODE_SLEEP;
  }
  else if (m == "disco") {
    mode = MODE_DISCO;
  }
}

int sendAlarm(String al) {
  alarm = (al == "on");
  Particle.publish("Alarm", al);
}

int sendHour(String hour) {
  alarmH = hour.toInt();
  Particle.publish("Alarm hour", hour);
}

int sendMinute(String minute) {
  alarmM = minute.toInt();
  Particle.publish("Alarm minute", minute);
}

// Input a value 0 to 255 to get a color value.
// The colours are a transition r - g - b - back to r.
void setColorWheel(byte wheelPos) {
  if (wheelPos < 85) {
    setColor(wheelPos*3, 255 - wheelPos*3, 0);
  }
  else if (wheelPos < 170) {
    wheelPos -= 85;
    setColor(255 - wheelPos*3, 0, wheelPos*3);
  }
  else {
    wheelPos -= 170;
    setColor(0, wheelPos*3, 255 - wheelPos*3);
  }
}

void setColor(int r, int g, int b)
{
    currentR = r;
    currentG = g;
    currentB = b;
    analogWrite(ledR, (int)r);
    analogWrite(ledG, (int)g);
    analogWrite(ledB, (int)b);
}
	<!-- http://blog.crutzen.eu/?p=822 -->
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
	<link href="http://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>
	<style>
	body {
	margin: 2em;
	}
	#colorpicker {
	height: 5em;
	width: 5em;
	padding: 0;
	display: none;
	}
	#time {
	display: none;
	}
	</style>
	</head>

	<body>
	<h1>Plafondlamp</h1>

	<h2>Kleur</h2>
	<select id="mode" onchange="changeMode()">
	<option value="auto">Regenboog
	<option value="disco">Disco
	<option value="select">Kies een kleur
	<option value="sleep">Inslapen
	</select>
	<br>
	<input id="colorpicker" type="color" value="#000000" onchange="showColor(this.value)" />

	<h2>Wekker</h2>
	<input type="checkbox" name="alarm" onchange="changeAlarm(this.checked)"/>Aan<br />
	<input id="time" type="text" placeholder="Klik hier">

	<script type="text/javascript">
	function showColor(newColor) {
	sendToParticle('sendcolor', newColor)
	}

	function changeMode() {
	var mode = document.getElementById("mode").value;
	if (mode == "auto") {
	document.getElementById("colorpicker").style.display = "none";
	sendToParticle('sendmode', 'auto');
	}
	else if (mode == "select") {
	document.getElementById("colorpicker").style.display = "inline";
	sendToParticle('sendmode', 'select');
	}
	else if (mode == "sleep") {
	document.getElementById("colorpicker").style.display = "none";
	sendToParticle('sendmode', 'sleep');
	}
	else if (mode == "disco") {
	document.getElementById("colorpicker").style.display = "none";
	sendToParticle('sendmode', 'disco');
	}
	}

	function changeAlarm(checked) {
	if (checked) {
	document.getElementById('time').style.display = 'inline';
	sendToParticle('sendalarm', 'on');
	}
	else {
	document.getElementById('time').style.display = 'none';
	sendToParticle('sendalarm', 'off');
	}
	}

	function setAlarm(h, m) {
	sendToParticle('sendhour', date.hour().toString());
	sendToParticle('sendminute', date.minute().toString());
	}

	function sendToParticle(func, val) {
	var request = new XMLHttpRequest();
	var dev_id = 'Your Particle Device ID';
	var access = 'Your Particle Device Secret';
	var data = 'params='+val+'&access_token='+access;
	var url = 'https://api.particle.io/v1/devices/' + dev_id + '/' + func + '/';
	request.open('POST', url, true);
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
	request.send(data);
	}

	var timepicker = new TimePicker('time', {
	lang: 'en',
	theme: 'dark'
	});

	var input = document.getElementById('time');
	var hour = 0;
	var minute = 0;

	timepicker.on('change', function(evt) {
	var value = (evt.hour \|\| '00') + ':' + (evt.minute \|\| '00');
	evt.element.value = value;
	hour = evt.hour;
	minute = evt.minute;
	});

	timepicker.on('close', function(evt) {
	setAlarm(hour, minute);
	});

	</script>
	</body>
	</html>
	/*
	http://blog.crutzen.eu/?p=822
	*/

	#define BLYNK_PRINT Serial
	#include "blynk.h"

	// You should get Auth Token in the Blynk App.
	// Go to the Project Settings (nut icon).
	char blynkAuth[] = "Blynk token here";

	int ledR = D1;
	int ledG = D2;
	int ledB = D3;

	int currentR = 0;
	int currentG = 0;
	int currentB = 0;
	int colorWheelPos = 0;

	const int discoColors[][3] = {
	{255, 0, 0}, {0, 255, 0}, {0, 0, 255},
	{255, 255, 0}, {255, 0, 255}, {0, 255, 255},

	{255, 15, 0}, {255, 0, 15}, {255, 15, 15},
	{15, 255, 0}, {0, 255, 15}, {15, 255, 15},
	{15, 0, 255}, {0, 15, 255}, {15, 15, 255},

	{255, 127, 0}, {255, 0, 127}, {255, 127, 127},
	{127, 255, 0}, {0, 255, 127}, {127, 255, 127},
	{127, 0, 255}, {0, 127, 255}, {127, 127, 255},

	{255, 240, 0}, {255, 0, 240}, {255, 240, 240},
	{240, 255, 0}, {0, 255, 240}, {240, 255, 240},
	{240, 0, 255}, {0, 240, 255}, {240, 240, 255}
	};
	const int discoDuration[] = {125, 250, 375, 500};

	#define MODE_AUTO 0
	#define MODE_SELECT 1
	#define MODE_SLEEP 2
	#define MODE_DISCO 3
	int mode = MODE_SELECT;

	bool alarm = false;
	int alarmH = 0;
	int alarmM = 0;

	void setup()
	{
	delay(5000); // Allow board to settle; seems to prevent breathing green led
	setColor(currentR , currentG , currentB);
	Blynk.begin(blynkAuth);
	pinMode(ledR, OUTPUT);
	pinMode(ledG, OUTPUT);
	pinMode(ledB, OUTPUT);
	Particle.function("sendcolor", sendColor);
	Particle.function("sendmode", sendMode);
	Particle.function("sendalarm", sendAlarm);
	Particle.function("sendhour", sendHour);
	Particle.function("sendminute", sendMinute);
	Time.zone(1); // UTC+1
	}

	void loop()
	{
	Blynk.run();
	if (alarm && alarmH == Time.hour() && alarmM == Time.minute()) {
	modeWakeUp();
	}
	else {
	if (mode == MODE_AUTO) {
	modeAuto();
	}
	else if (mode == MODE_SELECT) {
	modeSelect();
	}
	else if (mode == MODE_SLEEP) {
	modeGoToSleep();
	}
	else if (mode == MODE_DISCO) {
	modeDisco();
	}
	}
	}

	void modeAuto()
	{
	setColorWheel(colorWheelPos);
	colorWheelPos = (colorWheelPos + 1) % 256;
	delay(100);
	}

	void modeSelect()
	{
	setColor(currentR, currentG, currentB);
	}

	void modeWakeUp()
	{
	Particle.publish("Wake up!");
	int wait = 5000;
	for (int r = 1; (r < 64) && alarm; r++) {
	setColor(r, 0, 0);
	delay(wait);
	}
	for (int g = 1; (g < 32) && alarm; g++) {
	setColor(63, g, 0);
	delay(wait);
	}
	for (int b = 1; (b < 32) && alarm; b++) {
	setColor(63, 31, b);
	delay(wait);
	}
	mode = MODE_AUTO;
	}

	void modeGoToSleep()
	{
	Particle.publish("Going to sleep...");
	int duration = 30; // minutes
	int b = 128; // brightness
	while (b >= 0 && mode == MODE_SLEEP) {
	setColor(0, b, (int)b/2);
	int s = 0;
	// check every second if we're still in sleep mode
	while (s <= duration*60/128 && mode == MODE_SLEEP) { // seconds per step
	delay(1000);
	s++;
	}
	b--;
	}
	if (mode == MODE_SLEEP) {
	currentR = 0;
	currentG = 0;
	currentB = 0;
	mode = MODE_SELECT;
	}
	}

	void modeDisco()
	{
	Particle.publish("Disco!");
	while (mode == MODE_DISCO) {
	int c = random(33);
	setColor(discoColors[c][0], discoColors[c][1], discoColors[c][2]);
	delay(discoDuration[random(4)]);
	}
	}

	int sendColor(String hexColor)
	{
	long long number = strtoll( &hexColor[1], NULL, 16);
	long long r = number >> 16;
	long long g = number >> 8 & 0xFF;
	long long b = number & 0xFF;
	setColor(r, g, b);
	currentR = r;
	currentG = g;
	currentB = b;
	Particle.publish("Color", hexColor);
	}

	int sendMode(String m) {
	Particle.publish("Color mode", m);
	if (m == "auto") {
	mode = MODE_AUTO;
	}
	else if (m == "select") {
	mode = MODE_SELECT;
	}
	else if (m == "sleep") {
	mode = MODE_SLEEP;
	}
	else if (m == "disco") {
	mode = MODE_DISCO;
	}
	}

	int sendAlarm(String al) {
	alarm = (al == "on");
	Particle.publish("Alarm", al);
	}

	int sendHour(String hour) {
	alarmH = hour.toInt();
	Particle.publish("Alarm hour", hour);
	}

	int sendMinute(String minute) {
	alarmM = minute.toInt();
	Particle.publish("Alarm minute", minute);
	}

	// Input a value 0 to 255 to get a color value.
	// The colours are a transition r - g - b - back to r.
	void setColorWheel(byte wheelPos) {
	if (wheelPos < 85) {
	setColor(wheelPos3, 255 - wheelPos3, 0);
	}
	else if (wheelPos < 170) {
	wheelPos -= 85;
	setColor(255 - wheelPos3, 0, wheelPos3);
	}
	else {
	wheelPos -= 170;
	setColor(0, wheelPos3, 255 - wheelPos3);
	}
	}

	void setColor(int r, int g, int b)
	{
	currentR = r;
	currentG = g;
	currentB = b;
	analogWrite(ledR, (int)r);
	analogWrite(ledG, (int)g);
	analogWrite(ledB, (int)b);
	}