Frontend development

[Icyadam14]

This issue is for tracking progress on frontend development

[Icyadam14]

The /rov_velocity topic is implemented in the flask_socketio_integration branch. To add more more topic subscriptions, use the following process:

1. (subscriber) Go to /ros/demo_subscriber/src/demo_subscriber.py. You can add more subscriptions in the init() function.
2. (emit message to socketio) Implement the corresponding callback function for the given topic. Use the two subscriptions I have already implemented as examples.
3. (emit message to webpage) Update frontend/src/app.py, under the setup_socketio_events() function for each topic to re-emit the topics to the webpage.
4. (update the webpage) Finally, you can look in the frontend/src/static/socketio_listener.js file to see how to update the webpage upon receiving web-socket messages.

[Lmauser747]

Created a new branch called socketio_test and added the code in order to display imu data on the demo-subscriber page. We were unable to test that code today because we had trouble connecting controllers to the laptop.

[Lmauser747]

Potential script for spedometer
`

<script>
    // Function to determine the color based on the slider value
    function getColorForAngle(angle) {
        if(angle > 90){
            return `rgb(0, 200, 0)`; // Green
        }else if(angle < 90){
            return `rgb(200, 0, 0)`; // Red
        }else{
            return `rgb(0, 0, 0)`; // Black
        }
    }

    // Function to draw the semicircle arc
    function drawArc(canvas, angle) {
        const ctx = canvas.getContext('2d');
        
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Set canvas properties
        ctx.lineWidth = 5;
        ctx.strokeStyle = '#000';
        
        // Get the color based on the angle
        const arcColor = getColorForAngle(angle);
        ctx.fillStyle = arcColor; // Fill color for the arc

        // Calculate the center and radius
        const centerX = canvas.width / 2;
        const centerY = canvas.height;
        const radius = 100;
        
        let startAngle = 0;
        let endAngle = 0;
        
        // Convert angle to radians
        if(angle > 90){
            startAngle = 3 * Math.PI / 2; 
            endAngle = Math.PI + (angle * Math.PI / 180);
        }else if(angle < 90){
            endAngle = 3 * Math.PI / 2; 
            startAngle = Math.PI + (angle * Math.PI / 180);
        }

        // Draw the filled arc
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, startAngle, endAngle);
        ctx.lineTo(centerX, centerY); // Close the path
        ctx.fill();

        // Draw the outline of the semicircle
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, Math.PI, 2 * Math.PI);
        ctx.stroke();
    }

    // Get canvas and slider elements for Canvas 1
    const canvas1 = document.getElementById('myCanvas1');
    const slider1 = document.getElementById('slider1');
    const sliderValue1 = document.getElementById('sliderValue1');

    // Update the arc when the slider value changes for Canvas 1
    slider1.addEventListener('input', function () {
        const angle1 = slider1.value;
        sliderValue1.textContent = angle1;
        drawArc(canvas1, angle1);
    });

    // Initialize the canvas1 with the default value
    drawArc(canvas1, slider1.value);

    // Get canvas and slider elements for Canvas 2
    const canvas2 = document.getElementById('myCanvas2');
    const slider2 = document.getElementById('slider2');
    const sliderValue2 = document.getElementById('sliderValue2');

    // Update the arc when the slider value changes for Canvas 2
    slider2.addEventListener('input', function () {
        const angle2 = slider2.value;
        sliderValue2.textContent = angle2;
        drawArc(canvas2, angle2);
    });

    // Initialize the canvas2 with the default value
    drawArc(canvas2, slider2.value);
</script>

`