How can i write open with parameters RGB Code

How can i write code with parameters in particle WEB IDE . (RGB Code ),
I have 3 pin which they are ;

#define lightingR D0
#define lightingG D1
#define lightingB D2

Also i want to control in my ios app with sliders. How can do this function ?

Hi,
I can’t help you with ios app as I don’t have any idea about that.

but below is some simple code how to control some pins with PWM and Particle function,
and HTML file with sliders which calling Particle function to dim LED
( I didn’t implement slider for frequrency I left this for you :slight_smile: )

I believe that you can achieve the same results with IOS SDK and here is some info how to call Particle function : https://docs.particle.io/reference/SDKs/ios/#call-a-function-on-a-particle-device

Please note that if you using any I2C sensors you can’t use D0 and D1 pins

photon code:

#define lightingR D0
#define lightingG D1
#define lightingB D2

unsigned long interval = 0;

int frequency = 500;
int frequency_old = 500;

int pwm_value_R = 10;
int pwm_value_old_R = 10;

int pwm_value_G = 10;
int pwm_value_old_G = 10;

int pwm_value_B = 10;
int pwm_value_old_B = 10;

int colors(String message){
    int colonPos = message.indexOf(":") ;
    if (colonPos < 0) return -1 ; // syntax error not found
    String command = message.substring(0,colonPos) ;
    String argument = message.substring(colonPos+1) ;
    
    if(command.equals("R")){

       pwm_value_R = argument.toInt();  
       return pwm_value_R;
    }
    
    else if(command.equals("G")){

       pwm_value_G = argument.toInt();  
       return pwm_value_G;
    }
    
    else if(command.equals("B")){
       pwm_value_B = argument.toInt();  
       return pwm_value_B;
    }
   
   else if (command.equals("fr")){
      
       frequency  = argument.toInt();
       return frequency ;
      
    } 

}


void setup(){
  
  pinMode(lightingR, OUTPUT);
  pinMode(lightingG, OUTPUT);
  pinMode(lightingB, OUTPUT);

  analogWrite(lightingR, 0, 500);
  analogWrite(lightingG, 0, 500);
  analogWrite(lightingB, 0, 500);
  
  Particle.function("RGB", colors); 
  
}


void loop(){

if (millis() - interval > 100) {
  interval = millis(); 
  
 if(pwm_value_R != pwm_value_old_R) {
       
       analogWrite(lightingR, pwm_value_R);
       pwm_value_old_R = pwm_value_R;
    }

if(pwm_value_G != pwm_value_old_G) {
       
       analogWrite(lightingG, pwm_value_G);
       pwm_value_old_G = pwm_value_G;
    }

if(pwm_value_B != pwm_value_old_B) {
       
       analogWrite(lightingB, pwm_value_B);
       pwm_value_old_B = pwm_value_B;
    }

 if( frequency !=  frequency_old) {
      
        analogWrite(lightingR, pwm_value_R, frequency);
        analogWrite(lightingG, pwm_value_G, frequency);
        analogWrite(lightingB, pwm_value_B, frequency);
        frequency_old =  frequency;

    }
 }

}

SLIDERS_HTML:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/particle-api-js@8/dist/particle.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

html { 
 background: fixed #b2a6d4; 
 -webkit-background-size: cover;
 background-size: cover;
}

.slidecontainer {
  width: 70%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slidecontainer1 {
  width: 70%;
}

.slider1 {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider1:hover {
  opacity: 1;
}

.slider1::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider1::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}


.slidecontainer2 {
  width: 70%;
}

.slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider2:hover {
  opacity: 1;
}

.slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider2::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}


</style>
</head>
<body>

<h1>Particle RGB Controll </h1>
<p>Drag the slider to change value.</p>
<p> R.</p>
<div class="slidecontainer">
  <input type="range"  min="0" max="255" value="0" class="slider" id="myRange">
</div>
<p> G.</p>
<div class="slidecontainer1">
  <input type="range" min="0" max="255" value="0" class="slider1" id="myRange1">
</div>
<p> B.</p>
<div class="slidecontainer2">
  <input type="range" min="0" max="255" value="0" class="slider2" id="myRange2">
</div>


<script>

var accessToken = "YOUR_ACCESS_TOKEN_HERE"; //not display for security
var deviceID = "YOUR_DEVICE_ID_HERE" //not display for security



var particle = new Particle();



var slider = document.getElementById("myRange");
var slider1 = document.getElementById("myRange1");
var slider2 = document.getElementById("myRange2");

var wheel_R = 0;
var wheel_G = 0;
var wheel_B = 0;

function set_PWM(command){
     	var fnPr = particle.callFunction({ deviceId:deviceID, name:'RGB', argument: command, auth: accessToken });
		fnPr.then(
		  function(data) {
			console.log('Function called succesfully:', data.body.return_value);
         }, function(err) {
			console.log('An error occurred:', err);
		  });
           
     }






slider.oninput = function() {
  
 
  var bulid_comand = "R:" + this.value;
  console.log("R",this.value);
  console.log("comand_R",bulid_comand);
  set_PWM(bulid_comand);
  wheel_R = parseInt(this.value);
}

slider.addEventListener('wheel', function(){

  event.preventDefault();
  var wheel = event.deltaY < 0 ? 1 : -1;
 
  wheel_R += event.deltaY * -0.01;

  console.log("scrool",wheel_R);

  slider.value = wheel_R;
  


 if(wheel_R <= 0 ){
  wheel_R = 0;
  }

 if(wheel_R >= 255 ){
  wheel_R = 255;
  }

  var temp = (255 * wheel_R) / 255;
  var bulid_comand = "R:" + temp;
  console.log("comand_R",bulid_comand);
  set_PWM(bulid_comand);
  
},false);



slider1.oninput = function() {
  
 
  var bulid_comand = "G:" + this.value;
  console.log("G",this.value);
  console.log("comand_G",bulid_comand);
  set_PWM(bulid_comand);
  wheel_G = parseInt(this.value);
}

slider1.addEventListener('wheel', function(){

  event.preventDefault();
  var wheel = event.deltaY < 0 ? 1 : -1;
 
  wheel_G += event.deltaY * -0.01;

  console.log("scrool",wheel_G);

  slider1.value = wheel_G;
  


 if(wheel_G <= 0 ){
  wheel_G = 0;
  }

 if(wheel_G >= 255 ){
  wheel_G = 255;
  }

  var temp = (255 * wheel_G) / 255;
  var bulid_comand = "G:" + temp;
  console.log("comand_G", bulid_comand);
  set_PWM(bulid_comand);
  
},false);



slider2.oninput = function() {
  
 
  var bulid_comand = "B:" + this.value;
  console.log("B",this.value);
  console.log("comand_B",bulid_comand);
  set_PWM(bulid_comand);
  wheel_B = parseInt(this.value);
}

slider2.addEventListener('wheel', function(){

  event.preventDefault();
  var wheel = event.deltaY < 0 ? 1 : -1;
 
  wheel_B += event.deltaY * -0.01;

  console.log("scrool",wheel_B);

  slider2.value = wheel_B;
  


 if(wheel_B <= 0 ){
  wheel_B = 0;
  }

 if(wheel_B >= 255 ){
  wheel_B = 255;
  }

  var temp = (255 * wheel_B) / 255;
  var bulid_comand = "B:" + temp;
  console.log("comand_B",bulid_comand);
  set_PWM(bulid_comand);
  
},false);


</script>

</body>
</html>


You can just copy the entire html save as eg: RGB.html and then run with chrome
Please note that you must provide your accessToken and deviceID in this lines before you will try it.

var accessToken = "YOUR_ACCESS_TOKEN_HERE"; //not display for security
var deviceID = "YOUR_DEVICE_ID_HERE" //not display for security

Hope this will help a little :slight_smile:

1 Like

thank your for solution. I finished my application and it worked it . But i will try it:)

1 Like