Neopixel ring colour picker App using Flutter through NodeMCU

This is an App developed in Flutter to set your desired colour on Neopixel ring from a mobile App. Circuit is done as shown in the following diagram.

Download the NeoPixelColorPicker library from the following link. Unzip and copy the downloaded library to your Arduino libraries folder.

Restart the Arduino software and open the example program from File -> Examples -> NeoPixelColorPicker -> NeoPixelColorPicker. Upload this program to your NodeMCU. My NodeMCU is working at 160 Mhz frequency.

Some data files also have be uploaded to the NodeMCU. Data files includes CSS and JQuery files. Data files can be uploaded by Tools -> ESP8266 Sketch Data Upload. if your Tools menu have no ESP8266 Sketch Data Upload option watch my video of installing ESP8266FS on NodeMCU (https://youtu.be/kSOSOzqSS8o).

How to get the mobile App ?

There are two methods to get the mobile App.

  1. Download and install HABEROCEAN App from Google Play Store.
  2. Design it yourself on Flutter

Method 1

Download and install HABEROCEAN App from Google Play Store through the following link.

HABEROCEAN - Changing Future
HABEROCEAN - Changing Future
Developer: HABEROCEAN
Price: Free
  • HABEROCEAN - Changing Future Screenshot
  • HABEROCEAN - Changing Future Screenshot
  • HABEROCEAN - Changing Future Screenshot
  • HABEROCEAN - Changing Future Screenshot
  • HABEROCEAN - Changing Future Screenshot
  • HABEROCEAN - Changing Future Screenshot
  • HABEROCEAN - Changing Future Screenshot
  • HABEROCEAN - Changing Future Screenshot

Video

Method 2

Next is to create the mobile App using Flutter. Necessary files for creating the mobile App is given below. Flutter files can be downloaded from the following link.

pubspec.yaml

name: animationapp
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.0+4

  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

main.dart

import "package:flutter/material.dart";
import 'package:animationapp/flutter_hsvcolor_picker.dart';
import 'package:http/http.dart' as http;

void main() => runApp(NeoPixelColorPickerThroughNodeMCU());

class NeoPixelColorPickerThroughNodeMCU extends StatefulWidget {
  @override
  PaletteValuePickerPageState createState() =>
      new PaletteValuePickerPageState();
}

class PaletteValuePickerPageState
    extends State<NeoPixelColorPickerThroughNodeMCU> {
  int colorSelectCount = 0;
  bool eligibleToSendRequest = true;

  HSVColor color = new HSVColor.fromColor(Colors.blue);
  void onChanged(HSVColor value) => this.color = value;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Neopixel ring color picker'),
          backgroundColor: Colors.teal,
        ),
        body: new SafeArea(
            child: new ListView(
                padding: EdgeInsets.only(left: 20, right: 20, top: 20),
//mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  new FloatingActionButton(
                    onPressed: () {},
                    backgroundColor: this.color.toColor(),
                  ),
                  new Divider(),

                  ///---------------------------------
                  new PaletteValuePicker(
                    color: this.color,
                    onChanged: (value) => super.setState(() {
                      this.onChanged(value);
                      if (eligibleToSendRequest) {
                        eligibleToSendRequest = false;
                        sendHttpRequest(color.toColor().toString());
                      }
                    }),
                  ),

                  new SizedBox(
                    height: 5,
                  ),
                  ///---------------------------------
                ])),
      ),
    );
  }

  void sendHttpRequest(String color) async {
    const start = "Color(0xff";
    const end = ")";
    final startIndex = color.indexOf(start);
    final endIndex = color.indexOf(end, startIndex + start.length);

    String newColor = color.substring(startIndex + start.length, endIndex);

    final response =
    await http.get('http://192.168.4.1/getColor?color=${newColor}');

    if (response.statusCode == 200) {
      eligibleToSendRequest = true;
    }
  }
}

Download the flutter_hsvcolor_picker.dart file from the following link. Unzip and copy the downloaded flutter_hsvcolor_picker.dart file to the lib folder of your Flutter project.

flutter_hsvcolor_picker.dart

Create and upload the new App to your mobile device. Connect your mobile device to NodeMCU through WiFi. Open the newly created App and touch your desired colour on the palette. Neopixel ring will light up in the touched colour.

Alternate method

Similar colour picker can be obtained in web browser also. Open a web browser and open 192.168.4.1 in a new window to get the JQuery colour picker as shown in the following image.

Published by

Leave a Reply

avatar
  Subscribe  
Notify of
X