Help Understanding/Implementing a Progress Bar

[subieguy2]

I have been reading a lot about progress bars. I have seen a lot of different examples. Apparently I am still not getting how they truly work. I have tried to implement one of the examples found on the forum here...

The problem is I am not entirely sure of where/how to progress the bar within my script.

#target illustrator-23
var doc = app.activeDocument;
var allLayers = doc.layers;
var allLines = doc.pathItems;
var allSwatches = doc.swatches;
var allText = doc.textFrames;
var targetLayer;
var countLines = 0;
var countUndefined = 0;
var hyperText = doc.layers['Layer 1'].pathItems;
// Progress bar setup
var win = new Window("palette", "Progress Bar", [150, 150, 600, 260]);
win.pnl = win.add("panel", [10, 10, 440, 100], "Script Progress");
win.pnl.progBar = win.pnl.add("progressbar", [20, 35, 410, 60], 0, 100);
win.pnl.progBarLabel = win.pnl.add("statictext", [20, 20, 320, 35], "0%");
// Display the progress bar
win.show();
var start = new Date();
// Function to format a line: No fill, 1.6pt, Miterjoin, Buttcap
function lineFormat() {
    hyperText.filled = false;
    hyperText.strokeWidth = 1.6;
    hyperText.strokeJoin = StrokeJoin.MITERENDJOIN;
    hyperText.strokeCap = StrokeCap.BUTTENDCAP;
}
// Function to format a higway: No fill, 1.1pt, Miterjoin, Buttcap
function highwayFormat() {
    hyperText.filled = false;
    hyperText.strokeWidth = 1.1;
    hyperText.strokeJoin = StrokeJoin.MITERENDJOIN;
    hyperText.strokeCap = StrokeCap.BUTTENDCAP;
}
// Loop for progress bar
while (win.pnl.progBar.value < win.pnl.progBar.maxvalue) {
    for (var i = hyperText.length - 1; i >= 0; i--) {
        // this is what causes the progress bar increase its progress  
        win.pnl.progBar.value++;
        win.pnl.progBarLabel.text = win.pnl.progBar.value + "%";
        $.sleep(10);
        if (hyperText.filled == true) {
            var cyanValue = (hyperText.fillColor.cyan).toFixed(0);
            var magentaValue = (hyperText.fillColor.magenta).toFixed(0);
            var yellowValue = (hyperText.fillColor.yellow).toFixed(0);
            var blackValue = (hyperText.fillColor.black).toFixed(0);
            if ((cyanValue == 0 && magentaValue == 0 && yellowValue == 0 && blackValue == 0) || hyperText.fillColor.spot == "[Spot Grayscale 0%]") {
                hyperText.fillColor = allSwatches.getByName("Grayscale 0%").color;
                targetLayer = doc.layers.getByName("Splice Circles");
                hyperText.moveToBeginning(targetLayer);
            }
        }
        countLines++;
        // Get the CMYK values of the line to decide what to do with it
        if (hyperText.strokeColor.cyan != undefined || hyperText.strokeColor.magenta != undefined ||
            hyperText.strokeColor.yellow != undefined || hyperText.strokeColor.black != undefined) {
            var cyanValue = (hyperText.strokeColor.cyan).toFixed(0);
            var magentaValue = (hyperText.strokeColor.magenta).toFixed(0);
            var yellowValue = (hyperText.strokeColor.yellow).toFixed(0);
            var blackValue = (hyperText.strokeColor.black).toFixed(0);
            // 032 (Red) Lines
            if ((cyanValue == 0 && magentaValue == 90 && yellowValue == 86 && blackValue == 0) || hyperText.strokeColor.spot == "[Spot 032 (Red)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("032 (Red)").color;
                targetLayer = doc.layers.getByName("032 (Red) (Battery Power)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 640 (Blue) Lines
            else if ((cyanValue == 100 && magentaValue == 0 && yellowValue == 0 && blackValue == 22) || hyperText.strokeColor.spot == "[Spot 640 (Blue)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("640 (Blue)").color;
                targetLayer = doc.layers.getByName("640 (Blue) (Key Power)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 305 (Lt Blue) Lines
            else if ((cyanValue == 51 && magentaValue == 0 && yellowValue == 9 && blackValue == 0) || hyperText.strokeColor.spot == "[Spot 305 (Lt Blue)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("305 (Lt Blue)").color;
                targetLayer = doc.layers.getByName("305 (Lt Blue) (Converter 12v Out)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 021 (Orange) Lines
            else if ((cyanValue == 0 && magentaValue == 53 && yellowValue == 100 && blackValue == 0) || hyperText.strokeColor.spot == "[Spot 021 (Orange)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("021 (Orange)").color;
                targetLayer = doc.layers.getByName("021 (Orange) (Starting)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 190 (Dk Pink) Lines
            else if ((cyanValue == 0 && magentaValue == 53 && yellowValue == 100 && blackValue == 0) || hyperText.strokeColor.spot == "[Spot 190 (Dk Pink)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("190 (Dk Pink)").color;
                targetLayer = doc.layers.getByName("190 (Dk Pink) (Start Aid)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 258 (Dk Purple) Lines
            else if ((cyanValue == 43 && magentaValue == 76 && yellowValue == 0 && blackValue == 0) || hyperText.strokeColor.spot == "[Spot 258 (Dk Purple)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("258 (Dk Purple)").color;
                targetLayer = doc.layers.getByName("258 (Dk Purple) (Xmsn/Machine/Engine Pump)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 346 (Med Green) Lines
            else if ((cyanValue == 55 && magentaValue == 0 && yellowValue == 47 && blackValue == 0) || hyperText.strokeColor.spot == "[Spot 346 (Med Green)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("346 (Med Green)").color;
                targetLayer = doc.layers.getByName("346 (Med Green) (Monitor)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 347 (Dk Green) Lines
            else if ((cyanValue == 100 && magentaValue == 0 && yellowValue == 86 && blackValue == 3) || hyperText.strokeColor.spot == "[Spot 347 (Dk Green)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("347 (Dk Green)").color;
                targetLayer = doc.layers.getByName("347 (Dk Green) (Chassis/A.W.D.)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 347 (Dk Green) Lines
            else if ((cyanValue == 100 && magentaValue == 0 && yellowValue == 86 && blackValue == 3) || hyperText.strokeColor.spot == "[Spot 347 (Dk Green)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("347 (Dk Green)").color;
                targetLayer = doc.layers.getByName("347 (Dk Green) (Chassis/A.W.D.)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 430 (Dk Gray) Lines
            else if ((cyanValue == 5 && magentaValue == 0 && yellowValue == 0 && blackValue == 45) || hyperText.strokeColor.spot == "[Spot 430 (Dk Gray)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("430 (Dk Gray)").color;
                targetLayer = doc.layers.getByName("430 (Dk Gray) (Machine Security)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 464 (Brown) Lines
            else if ((cyanValue == 10 && magentaValue == 50 && yellowValue == 100 && blackValue == 35) || hyperText.strokeColor.spot == "[Spot 464 (Brown)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("464 (Brown)").color;
                targetLayer = doc.layers.getByName("464 (Brown) (Brake/AccuGrade/CAES)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 509 (Lt Pink) Lines
            else if ((cyanValue == 0 && magentaValue == 24 && yellowValue == 7 && blackValue == 0) || hyperText.strokeColor.spot == "[Spot 509 (Lt Pink)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("509 (Lt Pink)").color;
                targetLayer = doc.layers.getByName("509 (Lt Pink) (Engine Master)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 613 (Dk Yellow) Lines
            else if ((cyanValue == 0 && magentaValue == 24 && yellowValue == 7 && blackValue == 0) || hyperText.strokeColor.spot == "[Spot 613 (Dk Yellow)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("613 (Dk Yellow)").color;
                targetLayer = doc.layers.getByName("613 (Dk Yellow) (Heat/AC)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 4665 (Tan) Lines
            else if ((cyanValue == 0 && magentaValue == 18 && yellowValue == 32 && blackValue == 10) || hyperText.strokeColor.spot == "[Spot 4665 (Tan)]") {
                lineFormat();
                hyperText.strokeColor = allSwatches.getByName("4665 (Tan)").color;
                targetLayer = doc.layers.getByName("4665 (Tan) (Turn/Wiper/Washer)");
                hyperText.moveToBeginning(targetLayer);
            }
            // 651 (Blue Gray) Highway Lines
            else if ((cyanValue == 38 && magentaValue == 18 && yellowValue == 0 && blackValue == 6) || hyperText.strokeColor.spot == "[Spot 651 (Blue Gray)]") {
                highwayFormat();
                hyperText.strokeColor = allSwatches.getByName("651 (Blue Gray)").color;
                targetLayer = doc.layers.getByName("651 (Highways)");
                hyperText.moveToBeginning(targetLayer);
            }
            // Black Lines - Ground and No Color    
            else if ((cyanValue == 0 && magentaValue == 0 && yellowValue == 0 && blackValue == 100) || hyperText.strokeColor.spot == "[Spot Grayscale 100%]") {
                // If the line weight is 1.6 then put it on the Black (Ground) layer
                if (((hyperText.strokeWidth).toFixed(1)) == 1.6 && hyperText.strokeColor != "[PatternColor]") {
                    //alert("This path item is Black (Ground)");
                    hyperText.strokeColor = allSwatches.getByName("Grayscale 100%").color;
                    targetLayer = doc.layers.getByName("Black (Ground)");
                    hyperText.moveToBeginning(targetLayer);
                }
                if ((hyperText.strokeWidth).toFixed(1) == 2.0) {
                    //alert("This path item is Rails/Feather Bars");
                    hyperText.strokeColor = allSwatches.getByName("Grayscale 100%").color;
                    targetLayer = doc.layers.getByName("Rails/Feather Bars");
                    hyperText.moveToBeginning(targetLayer);
                }
                // If the line weight is anything but 1.6 put it on the No Color layer
                if ((hyperText.strokeWidth).toFixed(1) == 0.5) {
                    //alert("Black but not Ground");
                    hyperText.strokeColor = allSwatches.getByName("Grayscale 100%").color;
                    targetLayer = doc.layers.getByName("No Color");
                    hyperText.moveToBeginning(targetLayer);
                }
                if ((hyperText.strokeWidth).toFixed(2) == 0.20) {
                    hyperText.strokeColor = allSwatches.getByName("Grayscale 100%").color;
                    targetLayer = doc.layers.getByName("Splice Circles");
                    hyperText.moveToBeginning(targetLayer);
                }
            }
        //alert("Cyan: " + cyanValue + "\nMagenta: " + magentaValue + "\nYellow: " + yellowValue + "\nBlack: " + blackValue);
    }
win.update();
                        }
}
//alert(" allLines " + hyperText.length + "\n counter " + countLines + "\n undefined " + countUndefined);
win.close();
function millisToMinutesAndSeconds(millis) {
    var minutes = Math.floor(millis / 60000);
    var seconds = ((millis % 60000) / 1000).toFixed(0);
    return (seconds == 60 ? (minutes + 1) + ":00" : minutes + ":" + (seconds < 10 ? "0" : "") + seconds);
}
var time = new Date() - start;
var runTime = millisToMinutesAndSeconds(time);
alert("The script ran in " + runTime);

[Ten A · Accepted solution]

Here is a basic sample of the progress bar window.

var barWidth = 300;
var maxVal = 300
var pp = new Window('window', 'Progress');
var pb = pp.add('progressbar', [12, 12, barWidth, 24], 0, maxVal);
pp.show();
for (var i=0;i<maxVal;i++){
    pb.value = i;
    $.sleep(10);
    pp.update();
    }
pp.close();

In your case, Remove while loop, reverse for loop and set max value in the progressbar.

var win = new Window("palette", "Progress Bar", [150, 150, 600, 260]);  
var pnl = win.add("panel", [10, 10, 440, 100], "Script Progress");  
var progBar = pnl.add("progressbar", [20, 35, 410, 60], 0, hyperText.length);  
var progBarLabel = win.pnl.add("statictext", [20, 20, 320, 35], "0%"); 
...
//while (win.pnl.progBar.value < win.pnl.progBar.maxvalue) {  
for (var i = 0;i<hyperText.length; ++-) { 
  progBar.value = i;
  progBarLabel.text = Math.floor((i / hyperText.length)*100) + "%"; 
  win.update();
...

[subieguy2]

Ten A & CarlosCanto​

Thank you both very much for your help! Both of your examples help clarify a lot more.

[CarlosCanto]

Ten beat me to the punch, here's another simple example.

// progress bar
// carlos canto 06/19/19
// https://forums.adobe.com/thread/2631639
var win = new Window("palette", "SnpCreateProgressBar", [150, 150, 600, 260]); 
var pnl = win.add("panel", [10, 10, 440, 100], "Script Progress"); 
var pb = pnl.add("progressbar", [20, 35, 410, 60], 0, 100); 
var pbLabel = pnl.add("statictext", [20, 20, 320, 35], "0%"); 
win.show(); 
var colors = ['red', 'green', 'blue'];
// make max value equal to the items to process
// pretty much to divide the progress bar updates in as many items as we have
pb.maxvalue = colors.length;
for (var a=0; a<colors.length; a++) {
    // do your thing....
    // we're only pausing the script to be able to see the progress in this short loop, you don't need it in real life
    $.sleep(1000); 
    // increment the bar size and display text according to the values we're processing
    pb.value++;
    pbLabel.text = (pb.value/colors.length)*100+"%"; 
}
alert('Done!'); 
win.close();

[subieguy2]

Is there a fix for a progress bar that hangs in the middle..... then jumps to the end?

It hangs for a good 5 - 10 seconds. Not sure if this helps but for the file I am running this on hyperText = 14000

Here is the code I am running:

#target illustrator-23
var doc = app.activeDocument;
var allLayers = doc.layers;
var allLines = doc.pathItems;
var filteredLines = [];
var hyperText = doc.layers['Layer 1'].pathItems;
var filterWin = new Window("palette", "Progress Bar", [150, 150, 600, 260]);
var filterPnl = filterWin.add("panel", [10, 10, 440, 100], "Filtering Lines");
var filterProgBar = filterPnl.add("progressbar", [20, 35, 410, 60], 0, hyperText.length);
var filterProgBarLabel = filterPnl.add("statictext", [20, 20, 320, 35], "");
filterWin.show();
for (var fl = 0; fl < hyperText.length; fl++) {
    filterProgBar.value = fl;
    filterProgBarLabel.text = "Processing " + fl + " of " + hyperText.length;
    if (hyperText[fl].strokeColor.cyan != undefined || hyperText[fl].strokeColor.magenta != undefined ||
        hyperText[fl].strokeColor.yellow != undefined || hyperText[fl].strokeColor.black != undefined && hyperText[fl].filled == false) {
        filteredLines.push(hyperText[fl]);
    }
    filterWin.update();
}

[subieguy2]

Here is a screen recording of what the progress bar does....

https://drive.google.com/open?id=1UU7g3PyCvFHv04WT2TwgcMHRqVDuyyec

[CarlosCanto]

It's not your progress bar, it's illustrator hanging. Try with a lot less items and you'll see the progress bar won't choke.

[Ten A]

As CarlosCanto says,

In the case of heavy load, Illustrator can not update window UI in the correct timing.