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 
)
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
1 Like
thank your for solution. I finished my application and it worked it . But i will try it:)
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.