Download progress bar

[johnmike]

hey good folks...working on building a downloader following @d-healey's amazing tutorial...got it working but curious now as to how I can show a progress bar that simply shows the progress of the download, how much is left and when it's complete(what I see in the server controller minus the URL)

and secondly I'm just really learning how to work with the filesystem API...is there a way to allow the end user to choose what folder they want to save the file to once they click the "start" button?

want to make a simple downloader for an end user to add new samples to an existing samples folder

[Lindon]

@johnmike

FileSystem.browseForDirectory(var startFolder, var callback)

https://docs.hise.audio/scripting/scripting-api/filesystem/index.html#browsefordirectory

[d.healey]

You can check the download's progress in the download callback and use it to draw a progress bar in a panel's paint routine.

https://docs.hise.audio/scripting/scripting-api/server/index.html#downloadfile

https://docs.hise.audio/scripting/scripting-api/download/index.html

[johnmike]

@Lindon said in Download progress bar:

@johnmike

FileSystem.browseForDirectory(var startFolder, var callback)

https://docs.hise.audio/scripting/scripting-api/filesystem/index.html#browsefordirectory

I get the console error "Found 'var' when expecting an expression"

[d.healey]

@johnmike Post your code

[johnmike]

@d-healey

const url = "https://www.dropbox.com/s/wldq9cxssx3cif7/Screen%20Shot%202022-11-17%20at%205.34.44%20PM.png?dl=1";
const downloadsFolder = 
FileSystem.browseForDirectory(var startFolder, var callback);

reg pause = false;
reg abort = false;
reg download;

Server.cleanFinishedDownloads();

// btnStart
const btnStart = Content.getComponent("btnStart");
btnStart.setControlCallback(onbtnStartControl);

inline function onbtnStartControl(component, value)
{
	if (value)
	{
		startDownload();
	}
}

// btnPause
const btnPause = Content.getComponent("btnPause");
btnPause.setValue(0);
btnPause.set("text", "Pause");
btnPause.setControlCallback(onbtnPauseControl);

inline function onbtnPauseControl(component, value)
{
	if (value)
		pauseDownloads();
	else
		resumeDownloads();
		
	value == 0 ? component.set("text", "Pause") : component.set("text", "Resume");
}

// btnAbort
const btnAbort = Content.getComponent("btnAbort");
btnAbort.setControlCallback(onbtnAbortControl);

inline function onbtnAbortControl(component, value)
{
	if (value)
	{
		abortDownloads();
	}
}

// Functions

inline function startDownload()
{
	pause = false;
	abort = false;
	
	Server.setBaseURL("https://");
	
	local f = downloadsFolder.getChildFile("test.png");
	download = Server.downloadFile(url.replace("https://"), {}, f, downloadCallback);
}

function downloadCallback()
{
	if (abort)
		this.abort();
	else if (pause)
		this.stop();

	if (this.data.finished && !pause)
	{
		Console.print(this.data.success ? "Done" : "Fail");
	}
}

inline function pauseDownloads()
{
	pause = true;
}

inline function resumeDownloads()
{
	pause = false;
	download.resume();	
}

inline function abortDownloads()
{	
	pauseDownloads();
	
	Engine.showYesNoWindow("Cancel Download", "Are you sure you want to cancel the download?", function(response)
	{
		if (response)
		{
			pause = false;
			abort = true;
			download.abort();
		}
		else
		{
			resumeDownloads();
		}		
	});	
}














``

[d.healey]

@johnmike Ah ok, Lindon was just showing you which function is used to open a file browser https://docs.hise.audio/scripting/scripting-api/filesystem/index.html#browsefordirectory

There are many ways to implement it. Usually in a button callback.

[johnmike]

@d-healey ok I can do a deeper dive when I have more time to experiment and wrap my head around the file system stuff... but here's a snippet of where im at now... I just want to connect this progress bar in the panel to the download progress...

HiseSnippet 1772.3ocsX0naaTDD9bZOfyPQfDO.KVpnKf6kytITfnRy+PDMAq31BnR.s4t01q55cM2tNIVUQhGMdD3Qg2.Xl890NmSQQfijysyO67MyNyb63dIpHlVqRbZ38rYSXNMdO29yjlQ6NhxkNGtGRXO0ERghFyRb1Y1DpVyhcZz3NeCJQCu65X+7WOYGpfJiXkjbbdghGwdJeL2TRs2VeGWHN.1tmwGWQ5025vHkbWkPMEPycbCclPidEcH6XJJ1JtNMdq8i4FUReC0vzNMt6Np3Y8GAnKU9Wv07yDLbQGm9vFkR9.kHFQLR0Y2QbQbubuV6.6RuxXvcRiAej6Q7XdA8xXwGXYPJ0nZ7nwJyCu6LG75TEdgUfWMPpQEHc2TH8gt8iR3SLkbP77ttGJMrjATHrWEJox5rxO9tt6p.IjlfwzWwNHAVTng+mGF1l.es5lMaBgdsgLMQPdLoUbhZxYpKChTiWSu1Eh3e6KitTqu7gQ7AOZMXyYL486FB9lA9G7W2GzoyC57HXAEorQvCWOX80gm5cTvD4vmDKdbmValYj3rzIs8fIAL3AbAq+LsgMNXHyjR1uBw7DPMhzD1PxD5TMCTb.UnYaZIQOSkXlmTtg.k5yRNmkDDIXT4AbIWOhEWrq931t1ZjyLR3rKwjgy7kvllGDAzsqZ7DkDV32JWfVf94OGnQQjlDkXWpPbFjB6qj4by3f1iKEbIiLXpLxvURx0DxOJ2RsImSESYq170M83CH9Yq7fkdZTibOAcDuqZdUt2zCCSkdSurn1R8Fq.Ydi8YzadAZM+vEn52xvtzzpMoUsJUaHvx8MEBpJzaND3YyDl6jziAI..mDld53EX40zypI4wOlDRdBoX+q0kHe0xD3D6diNcQrdaL+qLVucV53Ri0VAxBa1mWZXyx8ME1pJz+tLGaAy7gm7TmCx1Z80M1B4a3FuPwn2BUhPLOq5CbvcnZ1yO4o9sFYLSze0ZqgQ.PBgJhJHC.sVn6fMvgMHw1A3Af1fcTrpkKJnUlExoXEFZlEjvlHvVcUrWaxqupMYP6BKkGsSOMK7zEY6WDEsNHl7YFw0A1UEIdDT.aDoP.sQMw1hwprkTL0PCFj0Gh7IeB4iyUAOYfiQsRvBljvgjkREzSivd+Pdaq8fi2VP9YqCnbQqhytEOsVr5n5wkIYJay5T5ZEN0cHmGcBRkF7Ou51qESxZ9Zul0Uy1zae4PPy.M79xehoOV8CbIXC+V6h2oPPxEGq91NgQlolRzSyd3BpzPLJRTprlQrhSum.JjiFe.qPcQQbFONpPxR6ZNpWQ9bZ.CHT36kG8P32Kuwicaps6yUXCnqxBUPc1Do.de9PPVcVmiyoIUotzFHUjAO8qrb9V1KxAuxURQFcQfAOhIvGz7WhtJlyMLeif8AYZ+B45eI4yHcVkbeRmNorJXmlvmq3kqtYExPsHESnw5rqAMrshEb9c2HrNj2C08D0TCjkTB7g4HeHTNIDaKD9o2fTGblHslt.anyQA3+xbu6G3wlQ9qRVizk7.x5gg3SsKb9ukwGNxTvuaF60waM0M7zJ67vzd2ncKLeLM4U.3mkgfT7A3WB2E8DVjgJGB8nnsIarHFO+5G.fk6Dt4Rs0Ei3F1ManWReY3osIzW1w9c2SIeJ4b7oGd5oKhAxWSBC1nKzmoNikFWgdO0wTfgr4b63D5EaCjkr3mAu8z+bvvcfP8mQZcen1DB.shfT5DVbq7DixOUdG2wJC66SyTwxGxhrFLnVdYuRT.IV0wNMk6FTzWNc7YrjpuHEEDtW97W12c4W1u5rHQoUyUDTIOTxMe+DlbYSn3j0B.d54GtG7h.bBgLZfbSXIFNBgF6wNGF2JcdAO28X5WAu4APZQeCmFuiwx88yllXmoFiR5vggFZ5le+SmKKGJauslUt33sv6+3z3scSkiqORMF1VZxrTryjTvmwQjdJiljMUlldN6PYOnNlYxm3oDPu0MCH6MwVFf9iet.Poxcyl5M361aPsLSsEqvTox8egu+1o.5d4i1QkLgEO2ysRyuJP52OoBj9SyVWfMvJ495sFYaYU5B+RFpuma9tsCMAFA+ZiWBC1phmJnl4m1EGwOiATUL2Hl3XjRM2Lq5OAv+Yi.+uEhenaOtIZT8XbkZvHT67+AFy9gCtm69CF.8bKA3ccO3G++4WIvI8kgCOhZR3PNh6wSG2GZBGw.qKgTIrqTiUv9GoqCw0XDnOSFaW72vmLlcv0MxX1ImoyXZTh5WiR6Eh+zDuikBfIo8Wkwy8HbMoiis+HnmaXPnyXnL3WihP2+APKs50o6sPmGdKzY8agNabKz4yuE57nagNewMpC1AZ6oF03zxAfPu8suznQi8ssnrYgN+C..EdSD

[d.healey]

@johnmike You don't need to use a timer for this. In the download callback you can get the progress of the download (see the link I posted before) which returns a value between 0 and 1. Set this as your progress bar panel's value and trigger a repaint. In the panel's paint routine you can use this value as the multiplier for the width of the progress indicator.

[johnmike]

@d-healey I know it's something obvious that im missing...im very much still wrapping my head around all this...plus im more of a Kinesthetic learner...ive gotten as far as I have watching your vids and learning from recipes and various snippets posted here....I subscribed to your Patreon so I've been digging around over there...plan on just getting your Hise masterclass soon...but the way my life is setup now I just don't have the time to really dig my heels in to make this work...I just need a simple progress bar added to this...Just want the end user to click start on the downloader and see the progress of the download and when it finishes...Im willing to pay you to do it(simple as it may be) Its a small part of a larger project im working on and I don't want to sink too much time getting stuck here trying to learn the panel paint routines...

HiseSnippet 1804.3ocsX0uaaTrEecZWtcMTDHwCvfkJZC3twNMkBD0ay2WhnIXEWJbUIflr6X6Qc7L9NyXmXEEIz8etuV7HviBuAbOmY+vqcVmVEUbkR247wb9c9bmY6nUwLiQo8pE7hoiXd09.+tSk1A6NfxkdGtGRXO04Rghlvzd6LcD0XXId0pcm+EJQsf65498mOaGpfJiYyH448REOl8b9PtcF0Na8cbg3.X6dAeXIo2XqCiUxcUB0X.M2wuk2HZ7qo8YGSQwVw2q16seB2pzcsTKy3U6t6nRl1c.ftT4eI2vOSvvEs85BaTJ4CThDDwHUucGvEIcx8ZiGrKclECtSZL3S7OhmvKnOKV7QNFjYZTNdTak4g2clCdsKCuVkfWEPpVIHc2TH8w9ci07Q1YbP7799GJsLcOJD1KCkTY8V4z22eWEHgzFMj9Z1AZXQgFgeYqVMIveVcy50gPuwRFqEjmRZjnUiNScQTrZ3Zl0NWj7e953KLlKdTLu2SVC1bFS9f0aA9lE9O3eq+v1seX6m.KnHkGG8nMh1XC3oNGEMR1+YIhm1twlYFIIqbx3RLZvfGvErtSMV1vn9LaJ4vRDyK.MHR0r9jQzwFFnXOpvv1zQhdlRammTtg.k5xzSX5nXAiJOfK4lArjhcMD210ViblUB4NsMCm4KgMMOHBnaW0vQJIrHrQt.M.8yeNxfhHsZkXWpPbFTBGpj4by3f1iKEbIizarL1xURx0DJLN2RMISnhwrUqeY8.dORX1p.XYfA0H2SPGI3p5Wk6McvvzLuoSVTaodiSfLuw8L5MuDsVXqEnF1vxtv1nIoQkJUYHvw8MEBJKzaNDD3pDlKSFvfB.filYFObAVA0CbZRd5SIsHOiTr+U5RjuYYBbhauQmtHVuMV+MKVucV43Ri0NAxBatmWZXyw8ME1JKzaWkiqgY9vSdoyAYas45Fag5MbiWnYLXgNQHlm08AN3NTC6GN44gMFXsiLeyZqgQ.PBgJlJH8.sVX5fKvgCHwwAXBvXwIJN0xEEzJyB4TbBCCyhzrQBbTWI60jb4UMI8ZVXo7ncZ1rvSWjcXQTz4fXwmc.2D4VUT3QPAbQjBALV0H2HFmxNRITKMpW1bHxm8YjOMWELy.oQiRvhFo4PwxLELiiwY+Pcai8fzaCn9rwATtnQQtawr0hcGkSWV8X1lUoz0ZbpJImGchRkF7ufp1qEKxpeYP8p5YqGrurOnYjAde4+lYNV8ibIXivF6hmoPPxEG691VyHSUiIlwYObNUZIVEINUV6.VQ16YfB4nIDvJzWTDmwzQIRNZWyQCJpmSCX.gBeeVpGB+A4CdbaSkSetBG.cEFpBv1rQRA7579fnPiV0CJJIhKKWZ87ylgsL2X3VjKjytSnZxEnCfUR8y0B4Pfeo+E4GdA4KHsWk7.R61YLmIPZobtxWr5lkoCsYTrVMeOW.lcPlmnFagLbXQ1n+poBe4LS0GZJDhsEhvzyAZhNSj1Yt.ZvenaQAX+pb+5G4I1AgqRVirN4gjMZ0BepYga+sLd+A1B9qmwdC7TPq25zJsQ+zoxHVJfTBU+Zv0lVFUo.GbQIbTySXwVprOLBh1j73kC9IWOm.PpcqMuY6e9.tk8VX7WQeUqSaRnups6uqeJ4yISvmdzomtbbQ9mjVQOdcXHSU1NMc.Cdpho.iuWOxjnomuMvSxRdA79yvI.NZCImufz3AP2IDiZDCE6ZVRibEupn3r7DYk7Xkk88xzIR.Kxhr50qRdYuWT.mprJ138Pz2jhgxwCOioK+1TTP3v4yehe+keh+xWHINsUujfJ4gRt86GwjK6ZJdYyGfm9gC2Cda.dMgLZfbiXZKGgPs8XSf6bkdog.+8XlWCu9AfVwPEuZ+Cqi68ytRwgCgKY4wgKNbOe2ys8tn7k3lVdw4XOVAge++t0.WWUAkQ+uslT9dNdkr68Rs6GlY2cFasJoyv08yO7aYSu2VkL8wagG9B.uepbbyQpgv1R0SSiYLIErJd+rmyn5rqDZnSXGJ6.ChX1qCn26lAj6XfKCP+9OW.nT4tYS8F7c2w2Vlo1hUXpT4dW36KTDzgJYBGdtueoo2kfzucRIH8G1sluR32tbwJAueIC022Oe21gpg6+es61B2pVkLVPsyeUa76Kjw.5Fm69s3cXkFtcZ4u+v6r6e+1BwO1uC2FOnZLtREXD5Y+6.iYe0h66ueudvz+Y.7t9G7S+87IJ7Read+inVMGpQ7Od7vtvKAhYf0kPoDNMr1J3bqz0sv0XDnKSl3V7WvuLlsw00xX1Nmo2PZrV8qwoyfwuKx8bT.LIceRn.+iv0j1dt4xfd9shZ4MDZC903Xz8eHLJsZcV+VnyitE5rwsPmGeKz4KuE57jagNe0MpCNAZ6wV0vz1AfPm8curpVs8cinbUgd+emYA49.

[johnmike]

If anyone could help I'd gladly buy your lunch tomorrow or a beer for the weekend he he! LBVS...

[d.healey]

@johnmike said in Download progress bar:

I don't want to sink too much time getting stuck here trying to learn the panel paint routines...

You've already got the paint routine. You just need to use the download progress from the download callback as the panel's value instead of setting it in a timer.

It's almost identical to what you have already. In your download callback you use this.getProgress() which will give you a value between 0 and 1. You assign this as the panel's value, then you call repaint, just like you're doing in your timer.

Then in the paint routine, instead of v = this.getValue() / 10 you can just have v = this.getValue();.

[johnmike]

@d-healey like so? ```

// pnlProgress

Content.getComponent("pnlProgress");
	pnlProgress.setValue(0);
	
	this.getProgress();
	var x = this.getValue();
	    
	    x = (x + 1) % 11;
	        
	    this.setValue(x); 
	    this.repaint();
	    pnlProgress.setPaintRoutine(function(g)
	    {
	        g.fillAll(Colours.black);
	        
	        var a = [this.getWidth() / 2 - 400 / 2, this.getHeight() / 2 - 20 / 2, 400, 20];
	        
	        g.setColour(Colours.darkgrey);
	        g.fillRoundedRectangle(a, 5);
	        
	        var v = this.getValue();
	        g.setColour(Colours.white);
	        g.fillRoundedRectangle([a[0], a[1], a[2] * v, a[3]], 5);
	        
	        v > 0.52 ? g.setColour(Colours.black) : g.setColour(Colours.lightgrey);
	        g.drawAlignedText(v * 100 + "%", a, "centred");
	    });
	    
}

I'm still not seeing it do anything...where do I assign the panel's value? I appreciate you helping me...

[d.healey]

@johnmike The first snippet you posted, did you write that code?

[johnmike]

@d-healey yea but did so following your downloader tutorial and your panel timer tutorial on your Patreon just typing it in as you went...but my 40-year old brain isn't making the connection between the 2 yet ha ha

[johnmike]

so I did both separate and then copied and pasted one into the other

[d.healey]

@johnmike Ah copy and paste to create a Frankenstein code is always dangerous :)

The download callback is the part that starts with function downloadCallback()

Inside the download callback you need to get the progress of the download and assign it as the panel's value. This is pretty much the same as you are doing in your timer callback, except there you are using x. Then you need to call the panel's repaint function.

The paint routine is the part that starts with
pnlProgress.setPaintRoutine(function(g)

In the paint routine you just need to do what I said in my last post :)

I could do this for you, but then you will come back with more questions when you want to change something or you find a bug. You need to be in control of your own script.

[johnmike]

Ok gonna try this and go back to the "drawing" board again!

I could do this for you, but then you will come back with more questions when you want to change something or you find a bug. You need to be in control of your own script.

Absolutely! I totally get it!I taught music for almost 15 years before I started my online business...this is like learning scales all over again lol! The student wants you to just jump and show them the sexy jazz chords and runs...but hasn't yet fully learned the theory and foundation behind those chords/runs...which would make them a better and more skilled Musician being able to create and imagine their own chords/runs...I get it lol :expressionless_face:

[Lindon]

@johnmike Ok well you cant just copy and paste code out of the documentation and expect it to work...

FileSystem.browseForDirectory(var startFolder, var callback)

• you need to specify a value for startFolder, even an empty string will do
• you need to define a function for callback, that function will need a single param called result -this will be a file object, in this case a Directory - that you can manipulate and check in your function...

// get the folder 
WeDontUSeThis = FileSystem.browseForDirectory("", function(result){
			MyDownloadFolderString = result.toString(FullPath);
			Console.print( MyDownloadFolderString);
			
				
		});