Heidi API



  • html5 compliant

  • Saas API

  • Cross-Browser

What is it?

Heidi is based on one hand upon a set of web services that are available in our cloud, on the other hand upon a web client for product personalisation.

If the offered Saas service by our API suffices to create a dedicated personalisation tool, the implementation will be highly easy by using the web client.
A native Android and iOs client is in progress to be developed.

Why using the API?

There are many reasons to use the Heidi API. If Heidi offers an implementation for Prestashop, the API will enable the developers to use Heidi elsewhere.

The following versions are built on the API for example.
Afterwards use your own implementation that allows you to porpose an interface and an user experience adapted on your trade and your product catalogue.

SaaS Webservices

readAcrossDevices.png

Our services are based on a powerful architecture and are largely capable to support the important capacity planning. They provide a set of services that are accessible wherever whenever and usable on any project.

The web applications are the first to profit from them, but not the only ones. The heavy clients for Windows, MacOS or Linux, the mobile applications for Android and IOS, but also the applications with a tactile or immersive interface as Kinect and the Google Glasses can also profit from them.

The Basis

Question our WebServices: 

The Sakura WebServices allow controling a set of workflow of creating personalisation.
It’s thus possible to list, to consult, to create and to delete patterns (Patterns) or the personalisations (CustomerDesign).

The documentation of this API is available via: http://storage.sakuradesigner.microclimat.com/server/api/classes/API.html

Example Ajax

To make the service request RemovePattern in Ajax with JQuery.

function testApi() {
   var sendData = {
       'RequestHeader': {
           'Token': 'abs5d1eczefze54564zefds',
           'Locale': 'fr_FR'
       },
       'RequestBody': {
           'PatternId': '1347442992974'
       }
   };
   $.ajax({
       type: "POST",
       data: JSON.stringify(sendData),
       url: "http://sakuradesigner.microclimat.com/Api.svc /RemovePattern",
       contentType: "application/json; charset=utf-8",
       dataType: "json"
   }).done(removePattern_CompleteHandler).fail(service_ErrorHandler);
}

Make a request

The exchanges with the API are common in the format JSON.
They’re all constructed in the same way, with a header (RequestHeader) and a body (RequestBody).

{
    'RequestHeader': {
        'Token': 'abs5d1eczefze54564zefds',
        'Locale': 'fr_FR'
    },
    'RequestBody': {
        
    }
}

The RequestHeader contains the Token that you received, to authorise the access to the API. The Locale has to be always used as ‘fr_FR’.
The RequestBody contains the characteristic message to the request and is hence specific for every WebService.

The response is also common in the format JSON and a ResponseHeader in additional to the retour message.

{
    'ResponseHeader': {
        'ErrorCode': '0',
        'Message': ''
    },
    ... }

It contains a return code and eventually the associated message.

1 = Success

2 = WrongPassword

3 = UnknownApplication

4 = InsufficientPermissions

5 = UnknowPattern

6 = TechnicalError

7 = UnknownAlbum

8 = UnknownPicture

9 = UnknownProduct

10 = UnknownPurpose

11 = UnknownUser

12 = NullParameter

13 = UnknownSite

14 = UnknownPurposeCategory

15 = UnknownPartner

16 = UnauthorizedActionPartnerException

17 = UnknownCustomerDesign

18 = BuildHDError

19 = BuildHDInProgress

20 = NullPatternBackground

21 = RestoreThumbInProgress

22 = RestoreThumbError

23 = BuildHDNotDemanded

24 = NumberHDExceeded

Display a pattern

To display a pattern in a website is relatively easy.
To start you need to load the module javascript.

<script src="http://storage.sakuradesigner.microclimat.com/apps/html5/js/release/heidi.js"></script>

You have to provide then the DIV that will receive Heidi

<div id="editorCreationDiv" style="width: 100%;height: 100%"></div>

Inject the structure html that will be used for the interface of the tool

<div id="heidi">
    <div id="heidi_notification_popup"></div>
    <div id="heidi_freezer"></div>
    <div id="heidi_gallery"></div>
    <div id="heidi_menu"></div>
    <div id="heidi_editor"></div>
    <div id="heidi_external_gallery"></div>
    <div id="fb-root"></div>
</div>

When the site finished loading, you can create a new instance of the personalisation module Heidi.

document.ready = function () {
    var HeidiConfig = {
        token: '44921aa4af2c478193ce57a1e2b85ec5',
        configURL: 'http://storage.sakuradesigner.microclimat.com/apps/html5/config.xml',
        imagesURL: 'images/heidi',
        host: 'prod',
        editorCreationDiv: 'editorCreationDiv',
        logLevel:0,
        isCustomerDesign:false,
        isLogged:true,
        layoutURL:'http://
storage.sakuradesigner.microclimat.com/apps/html5/layouts.xml',
        patternId: '764083',
        availableFonts:["toto","tata"]
    };

    Heidi.getInstance().init(HeidiConfig);
};

The doc of the API of the module indicates the function of every parameter.

http://storage.sakuradesigner.microclimat.com/apps/api/classes/Heidi.html

The given model is visible here http://preprod.storage.plume.microclimat.com/apps/api/model/

  • targetElementID String = The ID of the DIV where to create the designer
  • token String = The secured token
  • configFile String = Url of the admin configuration file to use
  • patternID String = (optional) The ID of the pattern to use in case of the modification of an existent pattern

The token is the one we communicated to you to use the API.
If you haven’t disposed it yet, contact us with the following address: contact@heidi-module-personnalisation.com
Remember to leave your last name, first name, contact information, the technology and the url of your site.  

Configure the personalisation module

To be displayed, the module needs to be configured.
Therefore we’re going to indicate him the location of the XML file that contains the set of necessary instructions.

<parameters>
   <preloader applicationName="SakuraJS" urlLogo="*">
       <init name="init" type="com.sakura.config.EditorConfig">
           <properties value="skin.xml?cacheKiller=41548" name="url" ref="SkinLoader"/>
           <properties value="locale/fr_FR/ihm.properties" name="urlPattern" ref="LanguageLoader"/>
           <properties value="fr_FR" name="defaultLocale" ref="LanguageLoader"/>
           <properties value="Sakura.Service.Pattern.PatternService" name="patternServiceSource" ref="RemoteParameter"/>
           <properties value="fluorine" name="destination" ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/Gateway.aspx" name="endpoint" ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/Api.svc" name="jsonEndpoint" ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/designer/ShareInstagramAuth.html" name="instagramRedirectionURL"
                       ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/upload.aspx" name="uploadDestination" ref="RemoteParameter"/>
           <properties value="http://sakuradesigner.microclimat.com/ExternalAssetProxy.aspx" name="externalAssetsProxy" ref="RemoteParameter"/>
           <properties value="4" name="externalAssetsPrice" ref="RemoteParameter"/>
       </init>
   </preloader>
   <skin name='default'>
       <color id='areaBorder'>#d6d6d6</color>
       <color id='areaHighlight'>rgba(50,160,200,0.25)</color>
       <color id='areaHighlightBorder'>#32A0C8</color>
       <color id='windowBorder'>#FF0000</color>
       <image id='rotateIcon'>http://storage.sakuradesigner.microclimat.com/next/html5/images/skin/rotateIcon.png</image>
       <image id='closeIcon'>http://storage.sakuradesigner.microclimat.com/next/html5/images/skin/closeIcon.png</image>
       <image id='moveIcon'>http://storage.sakuradesigner.microclimat.com/next/html5/images/skin/moveIcon.png</image>
       <image id='resizeIcon'>http://storage.sakuradesigner.microclimat.com/next/html5/images/skin/resizeIcon.png</image>
       <property id='displayBackground'>false</property>
       <property id='patternDisplayMode'>static</property>
       <property id='displayTemplateThumbs'>false</property>
       <property id='keepPictureQuality'>true</property>
       <property id='keepAspectRatio'>true</property>
       <property id='move'>true</property>
       <property id='rotate'>true</property>
       <property id='scale'>true</property>
        <propertyid='delete'>true</property>       
        <property id='displayAreaBorder'>false</property>
       <property id='swapPictures'>true</property>
       <property id='useNextTransformIcon'>true</property>
       <property id='isTextEditable'>true</property>
       
<size id='maxPictureByArea'>8</size> <size id='borderSize'>2</size>
   </skin>
</parameters>

The colours

  • the colours support the format hexa #FFFF00 and RGBA rgba(255,255,0,0)
  • areaBorder: the colour of the contour of an area when an element is selected
  • areaHighlight: the colour of the area during a rollover
  • areaHighlightBorder: same but for the contour

The pictures

  • rotateIcon: The rotation icon of an element
  • closeIcon: The removal icon of an element

The properties

  • displayBackground: if you display the background or if it’s transparent
  • keepPictureQuality: during the import of a picture if keepPictureQuality is on mode true, the picture appears in the maximum of his resolution.
  • A picture of 250x250 in an area of 500x500 appears without filling the area.
  • keepAspectRatio: activate or not the scale non homothetic
  • move: activate or not the shifting
  • rotate: activate or not the rotation
  • scale: activate or not the stretching
  • delete: activate or not the removal
  • displayAreaBorder: on mode true the borders of the area are constantly visible
  • swapPictures: indicate this during the changement of an area if you swap with an element of the destination area
  • maxPictureByArea : indicate the maximum number of pictures that can contain the area.
  • 0 -> unlimited
  • If you add a picture in an area that can’t contain others in it, we delete the previous one.
  • If swapPictures is on mode true, you don’t delete anything.

Complete example

A complete example for the integration is available here:

http://storage.sakuradesigner.microclimat.com/apps/html5/heidi.html

Supported typographies by the API

                @font-face {
                        src:url("/fonts/Satisfy-Regular.ttf");
                        fontFamily:"Satisfy";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Rancho-Regular.ttf");
                        fontFamily:"Rancho";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/ChopinScript.ttf");
                        fontFamily:"ChopinScript";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }



                @font-face {
                        src:url("/fonts/Comfortaa-Regular.ttf");
                        fontFamily: Comfortaa;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/Comfortaa-Bold.ttf");
                        fontFamily: Comfortaa;
                        fontWeight: bold;
                        fontStyle:normal;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/Comfortaa-Light.ttf");
                        fontFamily: Comfortaa;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                        fontWeight: bold;
                        fontStyle:light;


                }


                @font-face {
                        src:url("/fonts/PatrickHand-Regular.ttf");
                        fontFamily:"Patrick Hand";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/amatic-sc.bold.ttf");
                        fontFamily:"Amatic SC Bold";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Sacramento-Regular.ttf");
                        fontFamily:"Sacramento";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Allura-Regular.ttf");
                        fontFamily:"Allura";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/EuphoriaScript-Regular.ttf");
                        fontFamily:"Euphoria Script";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Courgette-Regular.ttf");
                        fontFamily:"Courgette Regular";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/DK-Lemon-Yellow-Sun.otf");
                        fontFamily:"DKLemonYellowSun";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/OleoScriptSwashCaps-Regular.ttf");
                        fontFamily:"Oleo Script Swash Caps";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/AmaticSC-Regular.ttf");
                        fontFamily:"Amatic SC Regular";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Boogaloo-Regular.ttf");
                        fontFamily:"Boogaloo";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/DroidSans-Bold.ttf");
                        fontFamily:"Droid Sans Bold";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/Lobster-Regular.ttf");
                        fontFamily:"Lobster";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }


                @font-face {
                        src:url("/fonts/PatuaOne-Regular.otf");
                        fontFamily:"PatuaOne";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }

                @font-face {
                        src:url("/fonts/AvenirLTStd-Book.otf");
                        fontFamily:"AvenirLTStd";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                }


                @font-face {
                        src:url("/fonts/GochiHand-Regular.ttf");
                        fontFamily:"Gochi Hand";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/IndieFlower.ttf");
                        fontFamily:"Indie Flower";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/RougeScript.ttf");
                        fontFamily:"Rouge Script";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/AmaticSC.ttf");
                        fontFamily:"Amatic SC";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Marvel.ttf");
                        fontFamily:"Marvel";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/PinyonScript.ttf");
                        fontFamily:"Pinyon Script";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/NixieOne.ttf");
                        fontFamily:"Nixie One";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/CraftyGirls.ttf");
                        fontFamily:"Crafty Girls";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Monofett.ttf");
                        fontFamily:"Monofett";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Bangers.ttf");
                        fontFamily:"Bangers";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Rye.ttf");
                        fontFamily:"Rye";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/alamain.ttf");
                        fontFamily:"alamain";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/Pinyon-Script.ttf");
                        fontFamily: "Pinyon Script";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/Cabin-Bold.ttf");
                        fontFamily: "Cabin Sketch";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                        fontWeight:bold;

                }

                @font-face {
                        src:url("/fonts/Cabin.ttf");
                        fontFamily: "Cabin Sketch";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Blackout.ttf");
                        fontFamily: Blackout;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/Billabong.ttf");
                        fontFamily: Billabong;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }




                @font-face {
                        src:url("/fonts/varsity_regular.ttf");
                        fontFamily: varsity_regular;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }

                @font-face {
                        src:url("/fonts/fffwc2014.ttf");
                        fontFamily: fff_wc2014;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/helveticaneue.otf");
                        fontFamily: helvetica;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/BebasNeue-webfont.ttf");
                        fontFamily: bebas_neueregular;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/Typewriter-Regular.ttf");
                        fontFamily: typewriter;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/College.ttf");
                        fontFamily: college;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/ChalkDust.ttf");
                        fontFamily: chalkDust;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }


                @font-face {
                        src:url("/fonts/AvantQue.ttf");
                        fontFamily: avantque;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }


                @font-face {
                        src:url("/fonts/HoboStd.otf");
                        fontFamily: hobo;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/StencilStd.otf");
                        fontFamily: stencil;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/impact.ttf");
                        fontFamily: impact;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/YanoneKaffeesatz-Bold.ttf");
                        fontFamily: "Yanone Kaffeesatz";
                        advancedAntiAliasing: true;
                        embed-as-cff:false;

                }


                @font-face {
                        src:url("/fonts/GARA.ttf");
                        fontFamily: garamond;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/GARABI.ttf");
                        fontFamily: garamond;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;
                        fontWeight: bold;
                        fontStyle:italic;


                }

                @font-face {
                        src:url("/fonts/GARABD.ttf");
                        fontFamily: garamond;
                        fontWeight: bold;
                        fontStyle:normal;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/GARAIT.ttf");
                        fontFamily: garamond;
                        fontWeight: normal;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/times.ttf");
                        fontFamily: times;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/timesbd.ttf");
                        fontFamily: times;
                        fontWeight: bold;
                        fontStyle:normal;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/timesi.ttf");
                        fontFamily: times;
                        fontWeight: normal;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/timesbi.ttf");
                        fontFamily: times;
                        fontWeight: bold;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }


                @font-face {
                        src:url("/fonts/arial.ttf");
                        fontFamily: arial;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/arialbd.ttf");
                        fontFamily: arial;
                        fontWeight: bold;
                        fontStyle:normal;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/ariali.ttf");
                        fontFamily: arial;
                        fontWeight: normal;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/arialbi.ttf");
                        fontFamily: arial;
                        fontWeight: bold;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/verdana.ttf");
                        fontFamily: Verdana;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/verdanab.ttf");
                        fontFamily: Verdana;
                        fontWeight: bold;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/verdanai.ttf");
                        fontFamily: Verdana;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }

                @font-face {
                        src:url("/fonts/verdanaz.ttf");
                        fontFamily: Verdana;
                        fontWeight: bold;
                        fontStyle:italic;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/ArialRounded.ttf");
                        fontFamily: ArialRounded;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/Bauhaus.ttf");
                        fontFamily: Bauhaus;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/Copperplate.otf");
                        fontFamily: Copperplate;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/harrington.ttf");
                        fontFamily: harrington;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/segoe_print.ttf");
                        fontFamily: segoe_print;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/That_s_Font_Folks.ttf");
                        fontFamily: That_s_Font_Folks;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/vladimir.ttf");
                        fontFamily: vladimir;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }
                @font-face {
                        src:url("/fonts/Yearbook.ttf");
                        fontFamily: Yearbook;
                        advancedAntiAliasing: true;
                        embed-as-cff:false;


                }