Winwheel.js tutorial: #5 Adding and Removing Segments


This tutorial demonstrates adding and removing segments after the wheel has initially been created. You do this by using the addSegment() and deleteSegment() methods, then calling the draw() method to render the changes.


By default a new segment will be added to the end of the wheel, for example if the wheel contains 4 segments it will be added at number 5. However you can specify where you would like the new segment to be inserted.


To remove a segment you simply specify the number of the segment to be deleted, or by default the last segment will be removed.


The same JSON structured parameters for the segments you can pass in to the Winwheel constructor can be passed to the addSegment() function, or you can set the properties afterwards using the dot operator.


The Winwheel class contains smarts to automatically adjust the size of the segments when a new one is added or if one is deleted. By default all segments are given the same size, but it is possible to set the size of a new segment anywhere between 0 and 360 degrees.


In this example click the "Add Segment" button to add a new segment to the beginning of the wheel and click the "Delete Segment" button to remove the last segment from the wheel.



Example Code

<script>
    let theWheel = new Winwheel({
        'numSegments' : 4,
        'segments'    :
        [
            {'fillStyle' : '#eae56f', 'text' : 'Segment 1'},
            {'fillStyle' : '#89f26e', 'text' : 'Segment 2'},
            {'fillStyle' : '#7de6ef', 'text' : 'Segment 3'},
            {'fillStyle' : '#e7706f', 'text' : 'Segment 4'}
        ]
    });

    function addSegment()
    {
        // Use a date object to set the text of each added segment to the current minutes:seconds
        // (just to give each new segment a different label).
        let date = new Date();

        // The Second parameter in the call to addSegment specifies the position,
        // in this case 1 meaning the new segment goes at the start of the wheel.
        theWheel.addSegment({
            'text' : date.getMinutes() + ':' + date.getSeconds(),
            'fillStyle' : 'aqua'
        }, 1);

        // The draw method of the wheel object must be called in order for the changes
        // to be rendered.
        theWheel.draw();
    }

    function deleteSegment()
    {
        // Call function to remove a segment from the wheel, by default the last one will be
        // removed; you can pass in the number of the segment to delete if desired.
        theWheel.deleteSegment();

        // The draw method of the wheel object must be called to render the changes.
        theWheel.draw();
    }
</script>

<button onClick="addSegment();">Add Segment</button>
<button onClick="deleteSegment();">Delete Segment</button>


Output on the Canvas

Canvas not supported, use another browser.  

^ Click these ^


Additional Notes

The addSegment() function returns a pointer to the new segment so if desired you can set the properties of it any time after it has been created, so long as this reference as been kept in a variable. For example... 


let newSegment = theWheel.addSegment(); // Add segment

newSegment.text = "Hello World";        // Set text and fillStyle using returned
newSegment.fillStyle = "green";         // pointer to the segment object.

theWheel.draw();                        // Render changes.

The size of a segment can be set by specifying a value between 0 and 360 for the size property. The value is the degrees of arc that the segment is to take up. Refer to the Creating Pie graphs tutorial for more in-depth information about this.


If you are wondering why you cannot delete a segment from the wheel when there is only one remaining, that is because at least one segment is required in a wheel in order to draw anything.



Previous:
< #4 Altering Segment Properties 		Next:
#6: Text Alignment and Orientation >