@using WebApiExplorer.Models
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}

<div id="@(optionsModel.ControlId)" style="height:50px; width:600px"></div>
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
<script>
    var gauge = new wijmo.gauge.LinearGauge("#@(optionsModel.ControlId)"),
        lowerRange = new wijmo.gauge.Range(),
        middleRange = new wijmo.gauge.Range(),
        upperRange = new wijmo.gauge.Range();
    gauge.value = 5;
    gauge.max = 10;
    gauge.min = 0;
    gauge.format = "";
    gauge.step = 0.5;
    gauge.pointer.thickness = 0.5;
    gauge.isReadOnly = false;
    gauge.showText = "All";

    // set Range propeties
    lowerRange.min = 1;
    lowerRange.max = 2;
    lowerRange.color = "Red";
    middleRange.min = 3;
    middleRange.max = 4;
    middleRange.color = "Green";
    upperRange.min = 7;
    upperRange.max = 10;
    upperRange.color = "Yellow";

    gauge.ranges.push(lowerRange);
    gauge.ranges.push(middleRange);
    gauge.ranges.push(upperRange);

    function customChangeDirection(control, value) {
        control.direction = value;
        control.invalidate();
        if (value === "Left" || value === "Right") {
            control.hostElement.style.width = "600px";
            wijmo.Control.getControl("#exportWidth").value = 600;
            control.hostElement.style.height = "50px";
            wijmo.Control.getControl("#exportHeight").value = 50;
        } else {
            control.hostElement.style.width = "50px";
            wijmo.Control.getControl("#exportWidth").value = 50;
            control.hostElement.style.height = "600px";
            wijmo.Control.getControl("#exportHeight").value = 600;
        }
    }
</script>

@section Description{
    This sample demonstrates how to export a wijmo5 LinearGauge to image file.
}