Using Octoprint API

Development
1

Hello,

For some context, I'm building a local web page for a company where they can access to OctoPrint instance easily and they asked me to put the print information (temperature, printing time, things like that) in the web page instead of checking these informations inside the instance, I've been reading the documentation about API and all and yet I think I'm just stupid or I'm just lacking some experience.
I've been trying to use the JS Client library to help me in my quest but I didn't make it work, I just need some explanation on how to start then I think I'll be able to do it alone.

Here some information of what I'm using : the remote server : I'm using a pc with ubuntu server installed where there is OctoPrint installed and working and also I installed a apache2 server on it

I already generated my API key I just need some explanation about how do I use it on a web page (documentation didn't help me or I'm just stupid or lacking experience/skills to understand correctly)

Oh and before anyone say the name of a plugin, no I don't wanna use some plugin that do the work by just installing it, I want to learn and progress and do the page myself.

Thanks by advance

EDIT : Sorry if that not really understandable, English is not my main language
EDIT 2 : I think I put the wrong topic so I changed it to Get help (tell me if I have to put it back in Development)

2

Referencing: Job operations — OctoPrint master documentation
Here is a basic HTML+Javascript file that you can run from the desktop.

If you are to run this as a local file. Not from a page in your application, you will not have a referrer. Because of that you will get an error related to Origin Resource Sharing (CORS). You can get by this by checking the allow check box in Octoprint API settings.

As this is a basic example there is no checking of responses for expected results.
That given, this will show nothing as the "File:" value if you don't actually have a file loaded in Octoprint.

Also you will get an error(409) and (reading 'bed') if your instance of Octoprint is not connected to a printer(virtual or other).

<!DOCTYPE HTML><html><head><title>OctoPrint Js example</title></head>
<body>
	<div id="main" class="main">
		<h4>File:&nbsp;&nbsp;<span id="lblfileName"></span></h4>
		<h4>Current Bed Temp:&nbsp;&nbsp;<span id="lblbedTemp"></span>c</h4>
		
	</div>
	

</body>

<script>
	var domReady = function(callback) {
		document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);		
	};
	
	domReady(function() {
		getJobInfo();
		getPrinterInfo();
	});

	function getJobInfo(){
		var xmlhttp = new XMLHttpRequest();
	
	
		xmlhttp.onload = function() {

			var reads = JSON.parse(this.responseText);
			document.getElementById("lblfileName").innerText = reads.job.file.name;
			};
		//xmlhttp.open("GET", "http://{{URI}}:{{Port}}/api/job", true);
		//xmlhttp.setRequestHeader("X-Api-Key", "{{Api-Key}}");
		xmlhttp.open("GET", "localhost:5000/api/job", true);
		xmlhttp.setRequestHeader("X-Api-Key", "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF");
											  
		xmlhttp.send();
	}
	
	function getPrinterInfo(){
		var xmlhttp = new XMLHttpRequest();
	
	
		xmlhttp.onload = function() {

			var reads = JSON.parse(this.responseText);
			document.getElementById("lblbedTemp").innerText = reads.temperature.bed.actual;
			};
		//xmlhttp.open("GET", "http://{{URI}}:{{Port}}/api/printer", true); 
		//xmlhttp.setRequestHeader("X-Api-Key", "{{Api-Key}}");
		xmlhttp.open("GET", "http://localhost:5000/api/printer", true);
		xmlhttp.setRequestHeader("X-Api-Key", "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF");
											  
		xmlhttp.send();
	}
	
</script>
</html>
2 Likes
3

Also maybe this should be moved to development.

1 Like
4

This might be of interest...

5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.