Guida alle API di gestione dello spazio basata su regole

CADViewer, grazie al suo design flessibile e all’utilizzo di toolkit standard, può essere integrato con qualsiasi applicazione di gestione di database e utilizzato con una moltitudine di applicazioni personalizzate basate sui dati.

Questo tutorial

TQuesto tutorial si basa sui precedenti tutorial API di CADViewer: 1) Creazione automatizzata di hotspot, 2) Aggiungi e modifica hotspot, 3) Hotspot e immagini di stile, 4) Introduzione all’API Canvas to use the CADViewer API completa di gestione dello spazio basata su regole.

L’API Space Management di CADViewer fornisce una serie di metodi che consentono ai programmatori di applicazioni di determinare la relazione tra gli spazi sull’area di disegno quando si inseriscono o si spostano contenuti sull’area di disegno.

Ciò consente a CADViewer di essere utilizzato come strumento di gestione dello spazio in un’ampia gamma di applicazioni, come la logistica e la gestione delle strutture..

Un’implementazione standard di un’interazione basata su regole di oggetti spaziali con l’area di disegno consiste nei seguenti passaggi:

1: Definire una CADViewer Oggetto Spazio JSON struttura dei dati.
2: Estendere la struttura dati dell’oggetto spazio JSON con un customContent sezione sottostruttura.
3: Nella sezione customContent, creare una logica segnaposto per le regole dei dati durante l’inserimento o la modifica.
4: Nel gestore Canvas per Space Objects, implementa il metodo callback per popolare le regole logiche all’inserimento o alla modifica.
5: Strumento myCustomPopUpBody per controllare il menu personalizzato con qualsiasi clic su Oggetti spaziali.
6: Strumento callback in myCustomPopUpBody per controllare l’interazione personalizzata sugli oggetti spaziali.

Di seguito è riportata una definizione di esempio di un oggetto customContent e alcuni frammenti di codice per un ciclo A): Controlla che non siano consentiti spazi sovrapposti e B): Controlla che quando si posiziona uno spazio, questo deve essere all’interno di un altro spazio con alcune caratteristiche predefinite.

1: Definizione di una struttura dati oggetto spaziale JSON di CADViewer

Nel codice del modello, utilizza il metodo API cvjs_createNewJSonSpaceObject() per creare un oggetto spaziale predefinito


/**
 * Return a new JSON structure with default content: 
 * 	var jsonStructure =  	{	"path": path,
 *								"tags": tags, 
 *								"node": node, 
 *								"area": area, 
 *								"outerhtml": outerHTML, 
 *								"occupancy": occupancy, 
 *								"name": name, 
 *								"type": type, 
 *								"id": id, 
 *								"defaultcolor": defaultcolor, 
 *								"highlightcolor": highlightcolor, 
 *								"selectcolor": selectcolor, 
 *								"layer": layer, 
 *								"group": group, 
 *								"linked": linked, 
 *								"attributes": attributes, 
 *								"attributeStatus": attributeStatus, 
 *								"displaySpaceObjects": displaySpaceObjects,
 *								"translate_x": translate_x, 
 *								"translate_y": translate_y, 
 *								"scale_x": scale_x ,
 *								"scale_y": scale_y ,
 *								"rotate": rotate, 
 *								"transform": transform, 
 *								"svgx": svgx, 
 *								"svgy": svgx, 
 *								"dwgx": dwgx, 
 *								"dwgy": dwgy , 
 *                               "customContent" : mycustomcontent }
 * @return {Object} jsonSpaceObject - Object with the entire space objects content
 */
 function cvjs_createNewJSonSpaceObject()

All’oggetto spaziale ora possono essere aggiunte informazioni generali predefinite, come ID, nome, tipo, ecc.

2: Estensione della struttura dati dell’oggetto spazio con un elemento customContent

Il campo dati CustomContent offre un handle che può essere utilizzato per aggiungere impostazioni e regole per l’oggetto spazio se sono necessari più campi rispetto a quelli standard:

var customObject = 	{ 
"insertType" :  "mysubtype", 
"generalInfo": { "myotherid": mysubId, "name": myName, 
                "begindate" :  strDate , "enddate" : strDate2 }, 
"dimension" : { "unit" : "m", "width": mywidth, "length": mylength, 
                "rotationInsert": -90 },
"insertRules": {"initialPositionVerified" : false, "positionChanged" : false, 
                "infoAdded": false, "inserted" : false},
"logicalRules" : [],
"userAddedInfo" : {"date1" : date1, "date2" : date2}
};

questi sono controllati in modo personalizzato, ma questa struttura è generalmente utile: campi di informazioni generali, campi per la dimensione in coordinate globali, rotazione, regole specifiche di inserimento non logico, l’effettivo set di regole per l’inserimento e campi per aggiungere contenuto quando si restituisce l’oggetto dati inserire o modificare.

3: Definizione delle impostazioni per le regole logiche

Come parte dell’oggetto personalizzato, un buon modo è definire un logicalRules sezione che definisce nomi e valori di inizializzazione di uno specifico insieme di regole.

var customObject = 	{ 
"insertType" :  "", 
"generalInfo": {}, 
"dimension" : { },
"insertRules": { },
"logicalRules" : [
        { "rule":"no_overlap_allowed", 
        "active": true, "initValue" : loadSpaceImage_ID, "insertStatus" : none},
        { "rule":"only_inside_space", 
        "active": true, "initValue" : "space_id_02", "insertStatus" : none},
        { "rule":"myrule_01", "active": false, "initValue" : none, "insertStatus" : none},
        { "rule":"myrule_02", "active": false, "initValue" : none, "insertStatus" : none},
        { "rule":"myrule_03", "active": false, "initValue" : none, "insertStatus" : none},
        { "rule":"myrule_04", "active": false, "initValue" : none, "insertStatus" : none},
        { "rule":"myrule_05", "active": false, "initValue" : none, "insertStatus" : none},
        { "rule":"myrule_06", "active": false, "initValue" : none, "insertStatus" : none},
        { "rule":"myrule_07", "active": false, "initValue" : none, "insertStatus" : none},
        { "rule":"myrule_08", "active": false, "initValue" : none, "insertStatus" : none},
        { "rule":"myrule_09", "active": false, "initValue" : none, "insertStatus" : none},
        { "rule":"myrule_10", "active": false, "initValue" : none, "insertStatus" : none},
        ,
                ],
"userAddedInfo" : {}
};

Una regola tipica potrebbe essere che non è consentita alcuna sovrapposizione di oggetti spaziali, oppure che uno spazio inserito deve trovarsi solo all’interno di un dato spazio. Qualsiasi regola è definita con un nome regola, se è attiva o meno, e qual è il suo valore iniziale (se presente).

4: Codificare le regole logiche

Il metodo personalizzato cvjs_insertSpaceObjectCustomCodePlaceholder() consente ai programmatori di applicazioni di aggiungere codice per valutare il contenuto dell’area di disegno durante l’inserimento o la manipolazione di oggetti spaziali

/**
 * Custom methods that programs rules against the CADViewer Space Management API
 * @param {*} spaceID   the id of the space object currently selected
 * @param {*} jsonObject  the space object itself currently selected
 * @returns {boolean} true if rules conditions are met, false otherwise
 */

function cvjs_insertSpaceObjectCustomCodePlaceholder(spaceID, jsonObject){

Di seguito illustriamo come è possibile implementare due regole.

Regola 1: nessuna sovrapposizione consentita

Questo segmento di codice controlla se “no_overlap_allowed” è true, e quindi utilizzare il comando API cvjs_spaceObjectOverlapAnyOtherObject() per verificare rispetto a eventuali spazi, se tali spazi soddisfano la condizione: customContent.insertType == mysubtype


            // overlapping Spaces not allowed
            if (jsonObject.customcontent.logicalRules[i].rule == "no_overlap_allowed" && jsonObject.customcontent.logicalRules[i].active == true) {
                process = false;             
                jsonElement = ["customContent", "insertType"];
                process = cvjs_spaceObjectOverlapAnyOtherObject(jsonObject,  jsonElement, "mysubtype");

                console.log("overlap "+process);
                if (process) window.alert("NOTE Rule:"+i+", "+jsonObject.customcontent.logicalRules[i].rule+" not met, with init value:"+jsonObject.customcontent.logicalRules[i].initValue) 
                console.log(jsonObject.customcontent.logicalRules[i].rule+ " result: "+process);

                // we dont want overlay so we reverse the result
                process = !process;
                
                if (!process) return false;
            }

Regola 2: l’oggetto selezionato deve trovarsi all’interno di un altro oggetto specifico

Questo segmento di codice controlla se “only_inside_space” is true, e quindi utilizzare il comando API cvjs_isSpaceObjectInside() per verificare se jsonObject è all’interno dello spazio jsonObject.customContent.logicalRules[i].initValue:


        if (jsonObject.customContent.logicalRules[i].rule == "only_inside_space" && jsonObject.customContent.logicalRules[i].active == true) {
        process = false;             
        process = process_only_inside_spave(spaceID, i, jsonObject);                    
        if (!process) window.alert("rule:"+i+", "+jsonObject.customContent.logicalRules[i].rule+" not met, with init value:"+jsonObject.customContent.logicalRules[i].initValue) 
        console.log(jsonObject.customcontent.logicalRules[i].rule+ " result: "+process);
        if (!process) return false;
        }            

// rule for inside specific ID
function process_rule_vlcc_dock_1_3(spaceID, i, jsonObject){
    var term = false;
    // let us pull the init value from the spaceObject for the rule number i
    var space_value =jsonObject.customContent.logicalRules[i].initValue;
    // test the coordinates of object against base object. 
    var baseObject = cvjs_returnSpaceObjectID(space_value);

    term = cvjs_isSpaceObjectInside(baseObject, jsonObject)

    if (term) return true;

    // in any case return false
    return false;
}

Implementazione di cvjs_insertSpaceObjectCustomCodePlaceholder()

Di seguito è riportata l’implementazione completa del metodo cvjs_insertSpaceObjectCustomCodePlaceholder(), dove il ciclo si trova su tutte le regole nell’oggetto spazio JSON e, se qualcuna non corrisponde, verr� restituita false e l’azione Canvas viene interrotta:

function cvjs_insertSpaceObjectCustomCodePlaceholder(spaceID, jsonObject){

    try{
        console.log("cvjs_insertSpaceObjectCustomCodePlaceholder(): "+spaceID);
        // myobject = cvjs_returnSpaceObjectID(spaceID);  - cannot use, because object not created yet
        console.log(jsonObject);
        // general check, inside dock or berth areay

        var process = false;
        // loop over all rules rules
        for (var i=0; i<jsonObject.customContent.logicalRules.length; i++){
        
            console.log("    "+jsonObject.customContent.logicalRules[i].rule+" "+jsonObject.customContent.logicalRules[i].active);

            // overlapping Spaces not allowed
            if (jsonObject.customcontent.logicalRules[i].rule == "no_overlap_allowed" && jsonObject.customcontent.logicalRules[i].active == true) {
                process = false;             
                jsonElement = ["customContent", "insertType"];
                process = cvjs_spaceObjectOverlapAnyOtherObject(jsonObject,  jsonElement, "mysubtype");

                console.log("overlap "+process);
                if (process) window.alert("NOTE Rule:"+i+", "+jsonObject.customcontent.logicalRules[i].rule+" not met, with init value:"+jsonObject.customcontent.logicalRules[i].initValue) 
                console.log(jsonObject.customcontent.logicalRules[i].rule+ " result: "+process);
                
                // we dont want overlay so we reverse the result
                process = !process;
                
                if (!process) return false;
            }            

            

            if (jsonObject.customContent.logicalRules[i].rule == "only_inside_space" && jsonObject.customContent.           logicalRules[i].active == true) {
                process = false;             
                process = process_only_inside_spave(spaceID, i, jsonObject);                    
                if (!process) window.alert("rule:"+i+", "+jsonObject.customContent.logicalRules[i].rule+" not met, with init value:"+jsonObject.customContent.logicalRules[i].initValue) 
                console.log(jsonObject.customcontent.logicalRules[i].rule+ " result: "+process);
                
                if (!process) return false;
            }            
        }

        //

    }
    catch(err){
            console.log("cvjs_insertSpaceObjectCustomCodePlaceholder: "+err);
    }

    // return process
    return process;

}


// functions for rules
// rule for inside specific ID
function process_rule_vlcc_dock_1_3(spaceID, i, jsonObject){
    var term = false;
    // let us pull the init value from the spaceObject for the rule number i
    var space_value =jsonObject.customContent.logicalRules[i].initValue;
    // test the coordinates of object against base object. 
    var baseObject = cvjs_returnSpaceObjectID(space_value);

    term = cvjs_isSpaceObjectInside(baseObject, jsonObject)

    if (term) return true;

    // in any case return false
    return false;
}

5: Implementa myCustomPopUpBody per controllare l’evidenziazione

Il menu personalizzato è configurato per essere popolato con campi di immissione dall’oggetto spaziale JSON. Dovrebbe contenere un metodo di callback come custom_rules_clickmenu1() .

function myCustomPopUpBody(rmid){

    myobject = cvjs_returnSpaceObjectID(rmid);
    //console.log("myCustomPopUpBody is called: "+ rmid+" "+JSON.stringify(myobject));
    try{
        // template pop-up modal body
        cvjsPopUpBody = "<div> Id: <span id=\"mymodal_name_"+myobject.id+"\" >"+myobject.id+"</span><br>";
        cvjsPopUpBody += "Name: <span id=\"mymodal_name_"+myobject.name+"\" >"+myobject.name+"</span><br>";
        cvjsPopUpBody += "Type: <span id=\"mymodal_type_"+myobject.customContent.insertType+"\" >"+myobject.customContent.insertType+"</span><br>";
        cvjsPopUpBody += "Model: <span id=\"mymodal_type_"+myobject.type+"\" >"+myobject.type+"</span><br>";
        cvjsPopUpBody += "Begin Date: <span id=\"mymodal_startdate_"+myobject.customContent.generalInfo.begindate+"\" >"+myobject.customContent.generalInfo.begindate+"</span><br>";
        cvjsPopUpBody += "End Date: <span id=\"mymodal_startdate_"+myobject.customContent.generalInfo.enddate+"\" >"+myobject.customContent.generalInfo.enddate+"</span><br>";
//		cvjsPopUpBody += "Status: <div class=\"cvjs_callback_modal_1\" onclick=\"my_own_clickmenu1("+rmid+");\"><i class=\"glyphicon glyphicon-transfer\"></i>More Info </div>";
        cvjsPopUpBody += "Confirm change: <a href=\"javascript:custom_rules_clickmenu1('"+myobject.id+"');\"><i class=\"glyphicon glyphicon-transfer\" \"></i></a>&nbsp;&nbsp;<span id=\"mymodal_status_01_"+myobject.id+"\"><i style=\"color:gray\" class=\"glyphicon glyphicon-ok\" \"></i></span> ";
        cvjsPopUpBody += "</div>";
    }catch(err){
        // template pop-up modal body
        cvjsPopUpBody = "<div> Id: <span id=\"mymodal_name_"+myobject.id+"\" >"+myobject.id+"</span><br>";
        cvjsPopUpBody += "Name: <span id=\"mymodal_name_"+myobject.name+"\" >"+myobject.name+"</span><br>";
        cvjsPopUpBody += "Type: <span id=\"mymodal_type_"+myobject.type+"\" >"+myobject.type+"</span><br>";
        cvjsPopUpBody += "</div>";
    }
    return cvjsPopUpBody;
}

Se un oggetto spazio non contiene un oggetto customContent, per impostazione predefinita visualizza alcuni valori standard.

6: Callback per controllare l’interazione personalizzata sugli oggetti spaziali

Quando un oggetto viene inserito o manipolato sull’area di disegno il metodo di callback generale function cvjs_graphicalObjectOnChange(type, graphicalObject, spaceID) sparerà sempre. Per avere l’accettazione dell’inserimento guidata dall’utente, è una buona idea implementare un metodo come custom_rules_clickmenu1() , which let the user confirm any placement of object.

function custom_rules_clickmenu1(){
    
    var id = cvjs_idObjectClicked();
    //		var node = cvjs_NodeObjectClicked();
    window.alert("custom_rules_clickmenu1: this is the callback to DT app with content");

    // change check arrow to green!!!
    jQuery("#mymodal_status_01_"+id).html("<i style=\"color:green\" class=\"glyphicon glyphicon-ok\" \"></i>");

    var myobject = cvjs_returnSpaceObjectID(id);
    // update my internal DB with new JSON myobject 

    
}

Utilizzare questo metodo per estrarre l’oggetto spaziale JSON aggiornato, estrarre i valori appropriati e inserirli nel DB per un’ulteriore elaborazione sul lato dell’applicazione.

Guida alle API di gestione dello spazio basata su regole