OOS_Engine_KEY_API

This API helps your website to improve performance,and provides url based image manipulation so you can manipulate your images from url.

Youtube tutorial:

1) How To Connect API and call images : https://www.youtube.com/watch?v=_12RGZxdmOU&feature=youtu.be
2) How To Upload Images to Your OOS and save them : https://www.youtube.com/watch?v=WViH-DPK4f8&feature=youtu.be
3) How To Integrate your website and app from server side code: https://www.youtube.com/watch?v=LkUkA3kkb00&feature=youtu.be
4) How To Integrate your website and app from drag and drop method : https://www.youtube.com/watch?v=_XGd7goJkUo&feature=youtu.be

You can use our service like below:

Once you uploaded our API,you need to go http://cloudengine.newtimebox.com/ and login,then click pricing then buy one engine.After that click Dashboard.You will see projects there , you need to click pay button to activate engine, if you have not money you need to click payments section at the above of page and then deposit money or use Redeem code to earn free money.Once you activated your engine you need to click more button at the project ,then scroll down to see secret key , you will use this key to connect to your engine.
Info

After Installation

(after clicking buy engine (without money you can buy it,you only need to pay to activate it ))
screenshot_30

To activate engine

screenshot_31

1)If you see pay button it means you need to pay to activate it( if it is 0$ you will not pay just click it to activate)

2)If you see activate button click it

3) if you see green message it means your engine is working.

screenshot_32

Then click More button , and scroll down to see secret key , copy it and never show it to anybody.You will see guide below of secret key .if you click (click to open connected folder) you will see folder which is connected to engine so your all images will be stored there
screenshot_33

screenshot_34

Upload our API from https://github.com/NewTimeBox/OOS_Engine_KEY_API .

That’s it, your are ready to configure it in your server code, it will take 5 minutes

Configuration

You can see example from there
https://github.com/NewTimeBox/OOS_Engine_KEY_API/blob/master/upload_example.php with all explanations
Lets see how you can configure that,it is easy!!!

/*
*You only have to change 3 things
1)$NewTimeBox_API_URL,
2)$NewTimeBox_API_PATH,
3)$SECRET_KEY
*Another ones are  optiontional
*/
//below is url path to API and  should be similar like: http://example.com/{page}/OOS_engine_API
// {page} is /just path to OOS_engine_API
$NewTimeBox_API_URL = 'http://localhost/Another_site/OOS_engine_API';
define('NewTimeBox_API_URL',$NewTimeBox_API_URL);
//below is root path to API it can be home/public_html/ and etc
//you can see your current directory with this constant : __DIR__
$NewTimeBox_API_PATH = __DIR__.'/OOS_engine_API/';
require $NewTimeBox_API_PATH.'/autoload.php';
//To get Secret key just follow below
//from cloudengine.newtimebox.com , login there and then click dashboard,then
//click new project if you haven't buy one ,buy engine then return to dashboard then activate it,then  click more of this engine
//at the below you will see secret key 
//YOUR_PRIVATE_KEY HERE
$SECRET_KEY='YOUR_PRIVATE_KEY HERE';
//Thats it, so lets look at below to learn little details and you are ready to go
//Below is extra security to be sure that none besides you can manipulate your images.
//But if you activate that you should use below method to get src of image: 
//$OOS_engine_API->get_image_url($image_name,$connect_key,$manipulate_params)
//if secure is false you can also use  below and up methods
// NewTimeBox_Images_Url.'/'.$manipulate_params.'/'.$image_name.'?connect_key='.$connect_key;
//@secure =  true|false
$secure = false;
//You can define how many hours connect_key will be active.Less hour is more secure,more hour is more fast
//Note if you activate secure hours will not matter much you can define at least 12-24 hours if secure is true
//default is 1
$hours=12;
$OOS_engine_API = new NewTimeBox_API_CONNECT($SECRET_KEY,$hours,$secure,$NewTimeBox_API_URL);
//if you defined secure false you can use below method
// You need to call below when you want to get image src without $OOS_engine_API->get_image_url function 
//bu we recomment you to define secure=true and use below method to get best experience 
$connect_key = $OOS_engine_API->get_connect_key();
//with connect key you can put it to get params of image url to connect to your engine but if you use $OOS_engine_API->get_image_url
//you don't need it, just use $OOS_engine_API->get_image_url

How to call image

we will explain it later also with how to use manipulation params at the below of page

//~~~~~~~~To call image you need only below code~~~~~~~~~~~
//OOS is Online Operation system that we give you for free, you can find it in newtimebox.com/OOS page
//this image will come from your own OOS folder via secure way
//Now you can call your images with manipulation
//below named image should be inside of your engine folder you can upload image
//from cloudengine.newtimebox.com , login there and then click dashboard,then click more
//at the below of secret key you will link, just click it and image folder will be opened
$image_name='Your Image name HERE';
//manipulate_params works like this: key_value,key_value so you can easily manipulate your images via just changing url , you can find more key_val at https://github.com/NewTimeBox/OOS_Engine_KEY_API/blob/master/README.md
$manipulate_params = 'w_200,h_200,fit_crop';
echo'<img src="'.$OOS_engine_API->get_image_url($image_name,$manipulate_params).'" >';
//That's it you can now call your images
//Lets look at how you can upload images to your connected OOS folder

Now you are ready to upload your new images to your OOS folder!!!

How to upload from client side

You need to define input which has parent div and class newtimebox-oos-image-uploader like below

 <!-- If You want to use upload api you need to create 
  input and it should have div parent like below -->
<div>
<!-- input has options,
multiple is multiple upload if you give attr it will allow multiple upload otherwise not
image-upload-count-limit is max how many image can be
choosed by user other ones will not  be uploaded  -->
<!-- newtimebox-uploader-id means you give id for each upload button so then via javascript you can get all uploaded images
related with this id like this: newtimebox_OOS_uploader.get_uploaded_file_names('profile_uploader') -->
    <input newtimebox-uploader-id="profile_uploader"  type="file" name="file" accept="image/*" 
    class="newtimebox-oos-image-uploader"
    multiple="true" 
      >
</div>

if your input will dynamicaly add to page , you need to use newtimebox_OOS_uploader.create_input(); when input is ready
to get uploaded images you can use newtimebox_OOS_uploader.get_uploaded_file_names('profile_uploader') method at he javascript
- How to control upload process with javascript

At the php you can use below code to get all scripts you need to use our API

 $OOS_engine_API->get_uploader_scripts();

Below javascript that you can use to manipulate response and contains all explanations

<script type="text/javascript">
//below code is setting manipulation params for response from uploading
//so when you grab json data from uploaded image response you will get data.file_src which contains manipulation params that you defined 
//it can be very useful because when you turn secure to true with php ($secure=true )
//you will not be able to directly manipulate your images from url 
//because secure sign will be required for image ,this will protect you agaist users who wants to manipulate
//your images from url,so only you will be able to manipulate them from php
//and below code talk with our server to prepare secure sign for uploaded image
newtimebox_OOS_uploader.set_response_url_params('w_100,h_100,fit_crop');

</script>

You can create your own solution for upload process like below

//will fire after user selects image that he or she wants to upload
newtimebox_OOS_uploader.when_select(function(element,upload_count){
    //inside is just example you can customize it
    if(element.next().is('.newtimebox-response-container')){
        element.next().remove();
    }
    element.after('<div class="newtimebox-response-container" ></div>');
});
//will fire before upload process begin
newtimebox_OOS_uploader.when_upload_begin(function(element,index,upload_count){
    console.log('upload begin');
    element.next('.newtimebox-response-container').append('<div upload-index="'+index+'" class="newtimebox-response-image" style="margin: 6px 5px;display: inline-block;border: 1px solid #1874CD;background: #e6e7e8;" >\
        <div  class="newtimebox-response-image-loader" style="width:200px;" >\
        <div  style="background:#1874CD;width:10%;min-width:10%;height:15px;min-height:15px;color: white;\
    text-align: center;"  >0%</div>\
        </div>');
});
//will fire each time upload progress finished so you can show how many percent of image uploaded
newtimebox_OOS_uploader.when_upload_progress(function(e,percentComplete,element,index){

    var image_loader = element.next('.newtimebox-response-container').find('.newtimebox-response-image[upload-index="'+index+'"] > .newtimebox-response-image-loader > div');
    image_loader.animate({width:percentComplete + "%" }, 100);
    image_loader.html(percentComplete + "%");
});
//will fire after upload finished  successfully when code is 200
newtimebox_OOS_uploader.when_upload_finish(function(data,element,index){
    //you need to check if data contains error index or not
    // if it contains you can get error message from error_mes index like below
    try{
        var data = JSON.parse(data);
    }catch(e){
        return false;
    }
    var image_process_container = element.next('.newtimebox-response-container').find('.newtimebox-response-image[upload-index="'+index+'"]');
    image_process_container.css({'border-color':'#243a4e'});
    console.log('upload finish');
    if(data.error===true){
        image_process_container.remove();
        return false;
    }
    //data.file_src is image that return and contains manipulation params that you defined
    image_process_container.html('<img src="'+data.file_src+'" />');
});
//will fire when upload failed
newtimebox_OOS_uploader.when_upload_fail(function(element,index){
    //when upload response code is not 200
    console.log('upload failed');
    var image_process_container = element.next('.newtimebox-response-container').find('.newtimebox-response-image[upload-index="'+index+'"]');
        image_process_container.remove();
});

How to save images after it uploaded

you can save images which user uploaded
with javascript like below
newtimebox_OOS_uploader.get_uploaded_file_names(newtimebox-uploader-id) newtimebox-uploader-id is newtimebox-uploader-id attribute that you defined for button it will return current uploaded images

you can also clear filenames if you need like this :newtimebox_OOS_uploader.clear_uploaded_file_names(uploader_id); so next time this function will not return old uploaded file names

Once you saved image names in the database you can request image with its name like below

How to upload from server side

NewTimeBox also provide API to upload your images from server side,you can use this system to integrate your all images by just writing code below in php


/*
*You only have to change 3 things
1)$NewTimeBox_API_URL,
2)$NewTimeBox_API_PATH,
3)$SECRET_KEY
*Another ones are  optiontional
*/


//below is url path to API and  should be similar like: http://example.com/{page}/OOS_engine_API
// {page} is /just path to OOS_engine_API

$NewTimeBox_API_URL = 'http://localhost/Another_site/OOS_engine_API';
define('NewTimeBox_API_URL',$NewTimeBox_API_URL);
//below is root path to API it can be home/public_html/ and etc
//you can see your current directory with this constant : __DIR__
$NewTimeBox_API_PATH = __DIR__.'/OOS_engine_API/';

require $NewTimeBox_API_PATH.'/autoload.php';
//To get Secret key just follow below
//from cloudengine.newtimebox.com , login there and then click dashboard,then
//click new project if you haven't buy one ,buy engine then return to dashboard then activate it,then  click more of this engine
//at the below you will see secret key 
//YOUR_PRIVATE_KEY HERE
$SECRET_KEY='Your SECRET KEY HERE';

//Thats it, so lets look at below to learn little details and you are ready to go

//Below is extra security to be sure that none besides you can manupulate your images.
//But if you activate that you should use below method to get src of image: 
//$OOS_engine_API->get_image_url($image_name,$connect_key,$manipulate_params)
//if secure is false you can also use  below and up methods
// NewTimeBox_Images_Url.'/'.$manipulate_params.'/'.$image_name.'?connect_key='.$connect_key;
//@secure =  true|false
$secure = false;
//You can define how many hours connect_key will be active.Less hour is more secure,more hour is more fast
//Note if you activate secure hours will not matter much you can define at least 12-24 hours if secure is true
//default is 1
$hours=12;
$OOS_engine_API = new NewTimeBox_API_CONNECT($SECRET_KEY,$hours,$secure,$NewTimeBox_API_URL);
//if you defined secure false you can use below method
// You need to call below when you want to get image src without $OOS_engine_API->get_image_url function 
//bu we recomment you to define secure=true and use below method to get best experience 
//now you need connect key to connect upload api
$connect_key = $OOS_engine_API->get_connect_key();
//give connect key as param to connect uploader
NewTimeBox_Uploader::connect($connect_key);
//You can make for loop to integrate all your images easily
$file_path='Your File Path Here';
//you have to provide filename if you want to call image with same name that you provide otherwise server will return random image name
$data = NewTimeBox_Uploader::upload($file_path,array('filename'=>'Yourfilename'));

if($data!==false){
    //save $data['file_name'] to db
    //it is always good practice to save $data['file_name'] because if
    //uploaded image name duplicated server will return like: $data['file_name'].'(version)'
    //var_dump($data['file_name']);
}

GET IMAGE URL

$image_name='image name that you want to get source of';

$OOS_engine_API->get_image_url($image_name,$manipulate_params)

How to manipulate image source

$params='manipulate params';
$OOS_engine_API->get_image_url($image_name,$params);

w //width of image (w_value value can be any integer but not too big)
h //height of image (h_value value can be any integer but not too big)
fit
All accepted values will work like fit_accepted_val
Accepts:

contain: Default. Resizes the image to fit within the width and height boundaries without cropping, distorting or altering the aspect ratio.

max: Resizes the image to fit within the width and height boundaries without cropping, distorting or altering the aspect ratio, and will also not increase the size of the image if it is smaller than the output size.

fill: Resizes the image to fit within the width and height boundaries without cropping or distorting the image, and the remaining space is filled with the background color. The resulting image will match the constraining dimensions.

stretch: Stretches the image to fit the constraining dimensions exactly. The resulting image will fill the dimensions, and will not maintain the aspect ratio of the input image.

crop: Resizes the image to fill the width and height boundaries and crops any excess image data. The resulting image will match the width and height constraints without distorting the image. See the crop page for more information.

You can also set where the image is cropped by adding a crop position. Accepts crop-top-left, crop-top, crop-top-right, crop-left, crop-center, crop-right, crop-bottom-left, crop-bottom or crop-bottom-right. Default is crop-center
Sets how the image is fitted to its target dimensions.

- Crop Focal Point

In addition to the crop position, you can be more specific about the exact crop position using a focal point. This is defined using two offset percentages: crop-x%-y%.

crop=width,height,x,y
fm

change format of image fm=new_format

Accepts jpg, pjpg (progressive jpeg), png or gif. Defaults to jpg.
dpr
Device pixel ratio dpr

The device pixel ratio is used to easily convert between CSS pixels and device pixels. This makes it possible to display images at the correct pixel density on a variety of devices such as Apple devices with Retina Displays and Android devices. You must specify either a width, a height, or both for this parameter to work. The default is 1. The maximum value that can be set for dpr is 8.

blur

Blur blur

Adds a blur effect to the image. Use values between 0 and 100.
- bg background
Background bg

Sets the background color of the image.

bg_black