1 (edited by chrismolloy 2020-05-23 05:24:30)

Topic: Button - changes color and text, Text changes color

This is an example of a button with changing text and color, as well as text that changes color.
This works by having text on top of an led on top of a button.  The button still works, the text displays on the led.

Overlapping different colored text elements, setting one to"" and the other to"whatever" does the trick!

https://i.imgur.com/fXeBmgP.jpg

here is a link to the screen design

http://remotexy.com/en/editor/da5d996ac … 0035cd84c/

here is the code just change the screen design for your processor, download and replace the code from the beginning up to and including and replace in this code.

/*
   -- Led toggle button with text --

   This source code of graphical user interface
   has been generated automatically by RemoteXY editor.
   To compile this code using RemoteXY library 2.4.3 or later version
   download by link http://remotexy.com/en/library/
   To connect using RemoteXY mobile app by link http://remotexy.com/en/download/
     - for ANDROID 4.5.1 or later version;
     - for iOS 1.4.1 or later version;

   This source code is free software; you can redistribute it and/or
   modify it under the terms of the GNU Lesser General Public
   License as published by the Free Software Foundation; either
   version 2.1 of the License, or (at your option) any later version.
*/

//////////////////////////////////////////////
//        RemoteXY include library          //
//////////////////////////////////////////////

// RemoteXY select connection mode and include library 
#define REMOTEXY_MODE__ESP8266WIFI_LIB_POINT
#include <ESP8266WiFi.h>

#include <RemoteXY.h>

// RemoteXY connection settings 
#define REMOTEXY_WIFI_SSID "RemoteXY"
#define REMOTEXY_WIFI_PASSWORD "12345678"
#define REMOTEXY_SERVER_PORT 6377


// RemoteXY configurate  
#pragma pack(push, 1)
uint8_t RemoteXY_CONF[] =
{ 255,1,0,55,0,71,0,10,8,0,
67,0,50,22,41,7,135,26,21,67,
0,50,22,41,7,37,26,21,1,1,
8,20,34,11,2,31,0,65,46,7,
20,36,11,129,0,30,6,40,4,94,
87,65,82,72,69,65,68,32,65,67,
84,73,86,65,84,73,79,78,0,67,
1,10,23,31,5,8,26,11 };

// this structure defines all the variables and events of your control interface 
struct {

    // input variables
    uint8_t button_1; // =1 if button pressed, else =0 

      // output variables
    char disarmed_text[21];  // string UTF8 end zero 
    char armed_text[21];  // string UTF8 end zero 
    uint8_t led_1_r; // =0..255 LED Red brightness 
    uint8_t led_1_g; // =0..255 LED Green brightness 
    char button_text[11];  // string UTF8 end zero 

      // other variable
    uint8_t connect_flag;  // =1 if wire connected, else =0 

} RemoteXY;
#pragma pack(pop)


/////////////////////////////////////////////
//           END RemoteXY include          //
/////////////////////////////////////////////

#define PIN_BUTTON_1 13

#include <Metro.h>
Metro debounce =  Metro(300);

void setup()
{
    RemoteXY_Init();

    pinMode(PIN_BUTTON_1, OUTPUT);
    RemoteXY.led_1_r = 255;
    strcpy(RemoteXY.button_text, "DIS-ARMED");
    strcpy(RemoteXY.disarmed_text, "NUCLEAR WARHEAD");
    strcpy(RemoteXY.armed_text, "");
    


    // TODO you setup code
    debounce.reset();
}

void loop()
{
    RemoteXY_Handler();

    if (RemoteXY.button_1 == 1)
        if (debounce.check()) {
            if (RemoteXY.led_1_g > 0)
            {
                RemoteXY.led_1_g = 0;
                RemoteXY.led_1_r = 255;
                strcpy(RemoteXY.button_text, "DIS-ARMED");
                strcpy(RemoteXY.disarmed_text, "NUCLEAR WARHEAD");
                strcpy(RemoteXY.armed_text, "");
            }
            else
            {
                RemoteXY.led_1_g = 255;
                RemoteXY.led_1_r = 0;
                strcpy(RemoteXY.button_text, "ARMED");
                strcpy(RemoteXY.armed_text, "NUCLEAR WARHEAD");
                strcpy(RemoteXY.disarmed_text, "");
            }
            debounce.reset();
        }

    // TODO you loop code
    // use the RemoteXY structure for data transfer
    // do not call delay() 


}

2

Re: Button - changes color and text, Text changes color

The sketch uses the Metro timer library which is used to debounce the button.
Library is here:

 https://github.com/thomasfredericks/Metro-Arduino-Wiring

3 (edited by Guillaume 2020-05-23 08:27:41)

Re: Button - changes color and text, Text changes color

Debouncing is for physical (analog) buttons, you don't need to do any debouncing with virtual (digital) buttons smile

4

Re: Button - changes color and text, Text changes color

Guillaume wrote:

Debouncing is for physical (analog) buttons, you don't need to do any debouncing with virtual (digital) buttons smile

Yes you do.  as long as you touch the button on the screen, the variable is a one. It is required to avoid double or triple events.

5 (edited by Guillaume 2020-05-25 06:32:54)

Re: Button - changes color and text, Text changes color

That has nothing to do with bouncing. You can write 0 to the button variable, or detect state changes, see here for example
http://forum.remotexy.com/viewtopic.php?pid=2081#p2081

Bouncing is when you press a physical button, it doesn't go straight to desired value, there are mechanical properties that makes the voltage be anything between 0 and VCC for a short period of time, like a spring bouncing on the ground, until the voltage is stable enough to be trusted as a digital HIGH or LOW.

https://en.wikipedia.org/wiki/Switch#Contact_bounce

This "metro" is simply a delay