<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ face_name | default('Default') }}</title>
    <script src="{{ url_for('static', filename='js/socketio.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/canvasFace.js') }}"></script>
    
    <script>
        const name = document.title
        var socket = io();

        socket.on('face_control', function(msg){
            console.log('message to ' + msg.name + ' : ' + msg.action_type);
            if(msg.name != name){
                return
            }

            if (msg.action_type == 'say') {
                play_visemes(msg.visemes, 55, msg.times)
            }

            if (msg.action_type == 'stop_speech') {
                stop_visemes()
            }

            if (msg.action_type == 'look') {
                console.log('Calling lookat');
                lookat(msg.location[0], msg.location[1], msg.location[2], msg.time)
                looking = true //stops the idle movements
            }

            if (msg.action_type == 'release_gaze') {
                looking = false //starts the idle movements
            }

            if (msg.action_type == 'express') {
                time = msg.time
                for (var au_cmd in msg.aus){
                    au_number = parseInt(au_cmd.slice(2))
                    // if the last character is 'l' or 'r', it's a side command
                    // if it is a number, au() will assume both sides
                    side = au_cmd.slice(-1)
                    degree = parseFloat(msg.aus[au_cmd])
                    au(au_number, degree, side, time)
                }
            }

            if(msg.action_type == 'update_face'){

                Object.keys(params).forEach(key => {
                    if(msg.configuration.hasOwnProperty(key)){
                        params[key] = msg.configuration[key]
                    }
                });
            }

        });

    </script>

</head>
<body>
</body>
</html>

</body>
</html>