How to have a button change colour based on text file?

Question

I'm making a web application and I want to have a status button change colour from red to green based on "on" or "off" in a text file. I'm using a Raspberry Pi and Ubuntu to "control" the Raspberry Pi. The text file is located on the Raspberry Pi and I make the web server read what's on the Raspberry Pi via code.

For turning the tv on/off I have these lines of code (on in this case)

        screen = screenDAO.findById(screenCode);
        String[] args = new String[] { "/bin/bash", "-c", "ssh [email protected] 'echo \"on 0\" | cec-client -s'",
                "with", "args" };
        try {
            Process proc = new ProcessBuilder(args).start();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        File f = new File("/tmp/status.txt");
        if(f.exists()){
            f.delete();
            try {
                f.createNewFile();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        File file = new File("/tmp/status.txt");
        FileWriter fr = null;
        BufferedWriter br = null;
        try {
            // to append to file, you need to initialize FileWriter using below constructor
            fr = new FileWriter(file, true);
            br = new BufferedWriter(fr);
            for (int i = 0; i < 1; i++) {
                br.newLine();
                // you can use write or append method
                br.write("on");
            }

        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                br.close();
                fr.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return SUCCESS;
    }

For updating the button's status I currently have


        screen = screenDAO.findById(screenCode);
        String[] args = new String[] { "/bin/bash", "-c",
                "ssh [email protected] /tmp/status.txt", "with", "args" };

        try {
            Process proc = new ProcessBuilder(args).start();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        String content = "";
        try {
            content = new String(Files.readAllBytes(Paths.get("/tmp/status.txt")));
            if (content.contains("on")) {
                System.out.println("The screen is turned on.");
                Boolean screenStatusOn = true;
            } else if (content.contains("off")) {
                System.out.println("The screen is turned off.");
                Boolean screenStatusOn = false;
            }
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        } 
        return SUCCESS;
    }

This is what I have in js

    $('.screen-status').on('click', function(event) {
        var $onButton= $(this);

        $.ajax({
            url : 'updateScreenStatus',
            type : 'POST',
            data : "screenCode=" + $onButton.data('code'),
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
            },
        });
    });
}

function initScreenControls() {
    $('.screen-on').on('click', function(event) {
        var $onButton= $(this);

        $.ajax({
            url : 'turnOnScreen',
            type : 'POST',
            data : "screenCode=" + $onButton.data('code'),
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
            },
        });
    });

    $('.screen-off').on('click', function(event) {
        var $onButton= $(this);

        $.ajax({
            url : 'turnOffScreen',
            type : 'POST',
            data : "screenCode=" + $onButton.data('code'),
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
            },
        });
    });
}

I want the button to turn red when turning the tv off and green when it's turned on. Currently I only have it send "The screen is turned on." (or off) to the console.

How are you building your HTML? Add a class to the buttons there and hava CSS for, say, .button-off or .button-on or whatever you decide. — VLAZ
– VLAZ, Commented May 20, 2019 at 7:42
Not sure what the issue is. Add inside the success: : $onButton.toggleClass("button-on", data == "The screen is turned on."); would be better to return some JSON with status+message then you don't need to check the exact wording of the message. — fdomn-m
– fdomn-m, Commented May 20, 2019 at 8:01

Rachel Gallen · Accepted Answer · 2019-05-21 08:26:41Z

0

You could expand on what happens on success in the 'on-click' part of your javascript code (below where you log the console).

e.g: (off example)

 $('.screen-off').on('click', function(event) {
    var $onButton= $(this);

    $.ajax({
        url : 'turnOffScreen',
        type : 'POST',
        data : "screenCode=" + $onButton.data('code'),
        success : function(data) {
            console.log(data);
            /*document.getElementById("OnButton").style.backgroundColor = "red"; */
            $(this).css('background-color', 'red');
        },
        error : function(data) {
        },
    });
});

edited May 21, 2019 at 8:26

answered May 20, 2019 at 12:38

Rachel Gallen

28.7k22 gold badges77 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rachel Gallen Over a year ago

is there a particular reason why you want to set the style using php? If so look at this answer (it basically echos out javascript to the same effect as is in my answer)

Collectives™ on Stack Overflow

How to have a button change colour based on text file?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related