Robotics‎ > ‎Blimp‎ > ‎

Add a Slider to Control Your Vertical Motor

Changes to your Cloud9 Web App Code

Add this html somewhere between the body tags of your web app to add a slider:
<input type='range' id='liftSlider' orient='vertical' min='-800' value='0' max='800' step='1' />

Add this CSS in between the head tags of your web app to make your buttons, text, and slider look nice:
    <style>
        button {
            width: 40%;
            font-size: 48px;
        }

        body {
            font-size: 24px;
        }

        input[type=range][orient=vertical] {
            writing-mode: bt-lr;
            /* IE */
            -webkit-appearance: slider-vertical;
            /* WebKit */
            width: 16px;
            height: 80%;
            margin: 5%;
            position: fixed;
            top: 0;
            right: 0;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            border: 30px solid #000000;
            border-radius: 9px;
            margin-top: -14px;
            /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
            box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
            /* Add cool effects to your sliders! */
        }
    </style>

You should now see a slider on your web app, but it doesn't do anything. To get it to display values on your screen, first add the following within the deviceMotionHandler() function directly below where you set power and steering:
            var lift = document.getElementById('liftSlider').value;

Directly below that, are the lines which insert values for power and steering into your html so that you can see what they are. Directly below those lines add:
            document.getElementById('lift').innerHTML = 'Lift: ' + lift;

Now, between the body tags of your web app, add the following element:
    <div id='lift'>Lift:</div>

At this point, if you test your web app, you should see slider values appear and change as you move the slider up and down. However, if you look closely to the get request that is sent, you'll notice there is no value for lift. To send this information back to your controller, first create a variable for lift. Do this towards the top of your script (between your script tags) directly below the creation of your leftMotor and rightMotor variables.
        var verticalMotor = 0;

Then, at the end of your deviceMotionHandler() function, add
            verticalMotor = lift;

Finally, within your start() and stop() functions, modify your calls to sendGetRequest so they include the vertical motor variable:
sendGetRequest('L=' + leftMotor + '&R=' + rightMotor)
sendGetRequest('L=' + leftMotor + '&R=' + rightMotor + '&V=' + verticalMotor)

Directly before the stop() function, you'll also need to set the verticalMotor power to 0.

Changes to Your Arduino Code

Now, when you click start, you should see data from the slider included in your get request message. However, it is not yet used by your microcontroller to control your vertical motor. To add that functionality, you must create another motor object. Do so directly below the creation of your other motor objects:
MotorDriver<15,0> verticalMotor;

Then, set you vertical motor's initial power level to 0, just as you do with your left and right motors.
  verticalMotor.drive(0);

Finally, you must modify your handleRemoteControl() function as follows:
  verticalMotor.drive(server.arg("V").toInt());

You should now be able to control your vertical motor.
Comments