Create your own Team Render Front-End

Cinema 4D Release 16 introduced the Team Render Server that allows you to organize your render jobs and clients. The Team Render Server already offers a comfortable front-end that let’s you manage your rendering tasks. This front-end communicates with the server via a distinct API. You are able to use this API to add new functionality or to even create your own front-end.

Python Server API

The Team Render Server interface is a Python plugin based on the Flask framework. You find the source code in your Cinema 4D installation under \resource\modules\teamrender\webserver\webserver.pyp.

The Flask framework allows to crate different access points, called “routes“. Each route is a different URL that handles the given URL or Post arguments and returns a result in form of a JSON object.

Your own front-end can access the Team Render Server by calling such URLs. But of course this can also be done outside of a web context. You may create a desktop or event a mobile application using this interface.

So simply start the Team Render Server application and enter the URL “http://localhost:8080/help” in your browser. This will call the “help” route and will return a JSON object with a list of all available routes. To learn which route can be called via “GET” and which must be called via “POST” and what parameters are handled consult the Python source code.

For example take a look at the /jobs/create route (Line 911):

    @app.route(register('/jobs/create'), methods=['POST'])
    @RequireLogin
    @ErrorHandling
    def CreateRenderJob():
        """
        Creates a new job in the watchfolder of the current user.
        """
        jobname = request.form.get('jobname', None)
        if not jobname:
            raise AttributeError("Missing jobname")

The “methods” list defines the methods this route is limited to, in this case only “Post” can be used to call this route. Then the route searches for a “jobname” parameter in the received request. This means that you have to send the name of the new render job as the “jobname” parameter in a Post request.

A custom Front-End

The default web front-end is located at resource\modules\teamrender\webserver\htdocs in your Cinema 4D installation. If you just want to add some convenient features you may just add another HTML document to that folder. When you start the Team Render Server you can then access this new document using your browser.

Alternatively you can completely replace the existing front-end with your own version. Navigate to your preferences folder. There you can find the “teamrender_server” folder containing the “_htdocs” folder. When you rename this folder to “htdocs” the Team Render Server will use it and it’s index.html as the front-end after the next start.

When you create your own front-end you will access the server using technologies like JavaScript and Ajax. The following examples access the server using the jQuery library.

Login & Logout

To login you have to send the user name and the password to the server using a POST request. The password must be send in form of it’s md5 hash.

var username = "admin";
var md5      = $.md5("admin");

$.ajax({
    url : "http://localhost:8080/login",
    type : "POST",
    data :  { username: username, password: md5 },
    datatype : "json",
    success : LogInSuccess,
    cache : false
});

“LogInSuccess” is the function called when the connection to the server was successful. The data handed over to this function contains additional information about the given user.

function LogInSuccess(data){

    if(data.isadmin == true){
        console.log("User is admin");
    }else{
        console.log("User is no admin");
    }
}

Similarly, you log the current user out by calling /logout

$.ajax({
        url : "http://localhost:8080/logout",
        type : "GET",
        datatype : "json",
        success : LogOutSuccess,
        cache : false
    });

Notice that if there is no user currently logged in, most calls to the interface will not be authorized and will return a error message.

Serverinfo

The properties of the server like it’s name, the OS or the Cinema 4D version are accessible with a call to /serverinfo:

$.ajax({
    url : "http://localhost:8080/serverinfo",
    type : "GET",
    datatype : "json",
    success : ServerinfoSuccess,
    cache : false
});

Get current Render Jobs

To get an overview over all currently existing render jobs you can access the /jobs route. In this case I filter out the assets list and the description of render settings groups because I’m not interest in this data at the moment:

$.ajax({
    url : "http://localhost:8080/jobs",
    type : "GET",
    data :  { assets: 0, rgroups:0},
    datatype : "json",
    success : JobsSuccess,
    cache : false
});

The result of this query is a list of all jobs containing their names and the unique job IDs.

function JobsSuccess(data){

    var jobs = data.jobs;
    var content = "";

    for (var i = 0; i < jobs.length; i++) {

        var job = jobs[i];    
        content += "<div>Job: "+job.name+" ("+job.uuid+")</div>";
    }
    
    $( "#content" ).html(content);
}

While we are at it we can also display additional information on this render job, like the frame range. We find this information the render data array:

var rdata = job.rdata;
content += "<div>From : "+rdata[12].RDATA_FRAMEFROM+" to "+rdata[13].RDATA_FRAMETO+"</div>";

Start a Render Job and get the Results

With this unique job ID we can now start the a render job. The unique ID is given to the server as part of the URL:

var url = "http://localhost:8080/jobs/"+id+"/start";

$.ajax({
    url : url,
    type : "GET",
    datatype : "json",
    success : StartJobSuccess,
    cache : false
});

To find out the progress of your render job simple query /jobs to get the current “progress” and “status” value. Also you find the array of “resultassets“: the final images. You can now load the rough data of such an image file from the server

var filename = "renderResult.tif";
var url = "http://localhost:8080/jobs/"+id+"/result/get/"+filename;

$.ajax({
    url : url,
    type : "GET",
    datatype : "json",
    success : JobResultSuccess,
    cache : false
});

or you can tell the server to save all results in a ZIP archive:

var url = "http://localhost:8080/jobs/"+id+"/result/zip";

$.ajax({
    url : url,
    type : "GET",
    datatype : "json",
    success : JobZipSuccess,
    cache : false
});

With this basic functions you can now build your own front-end to control the Team Render Server, to display relevant information and to access the results. Since the Python server is open source can can also add new routes to create even more specific functions and to customize your rendering workflow.