jobosaveme.js

jobosaveme.js

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form
        id="form"
>
  <div id="errorBox"></div>

  <crowd-keypoint
          src="https://images.unsplash.com/photo-1605056545110-c2ef2253aa8c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2507&q=80"
          labels="['Ripe','qwe']"
          header="Please locate the centers of each item."
          name="annotatedResult"

          id="demo"

  >
    <short-instructions>
      Describe your task briefly here and give examples
    </short-instructions>
    <full-instructions>
      Give additional instructions and good/bad examples here
    </full-instructions>

  </crowd-keypoint>
  <crowd-button
          form-action="reset"
                >
        <iron-icon icon="question-answer"/>

      </crowd-button>
</crowd-form>

<script>
  document.addEventListener("click", function(evnt){

    console.log("evnt.target.id",evnt.target,evnt.target.id);
    console.log("start document on click") ;
    var obs=document.getElementById('demo');
    //var obs=document.querySelector('crowd-keypoint');
    //obs._submit();
    console.log(Object.values(obs));
    console.log(Object.keys(obs));
    console.log(Object.values(obs.cvTool));
    console.log(Object.keys(obs.cvTool));
    console.log(obs.value)
    var kps=obs.value;
    let text = obs.getAttribute("crowd-keypoint");
    console.log(text);
    // console.log(obs.);
    console.log(kps);
    var viskeys=[];
    // function eachRecursive(obj)
    // {
    //     for (var k in obj)
    //     {
    //         if (!obj.hasOwnProperty(k))continue;
    //         if (typeof obj[k] == "object" && obj[k] !== null)
    //             eachRecursive(obj[k]);
    //         else{
    //             strs=["Ripe","qwe","keypoint"];
    //             if (strs.includes(k) || strs.includes(obj[k])) {
    //                 console.log("=================>keypoints",k,obj[k]);
    //             }
    //             console.log("key obj pair",k,obj[k]);
    //         }
    //     }
    // }
    //
    //
    // eachRecursive(obs);

    if(obs.__data.value.length%2==0){
      // obs.__data.value.pop();
      while(obs.__data.value.length>1){
          console.log(document.getElementById('demo').__data.value.length);
          //document.getElementById('demo').__data.value.splice(0, 1);
          document.getElementById('demo').__data.value.shift();
          //document.getElementById('demo').value.shift();
      }
    }
    console.log(document.getElementById('demo').__data.value);
    console.log(document.getElementById('demo').value);
    console.log(document.querySelector('crowd-keypoint'));
  });


  // var num_obj = 1;
  //
  // document.querySelector('crowd-form').onsubmit = function(e) {
  //
  //
  //   const keypoints = document.querySelector('crowd-keypoint').value.keypoints || document.querySelector('crowd-keypoint')._submittableValue.keypoints;
  //   const labels = keypoints.map(function(p) {
  //     return p.label;
  //   });
  //
  //   // 1. Make sure total number of keypoints is correct.
  //   var original_num_labels = document.getElementsByTagName("crowd-keypoint")[0].getAttribute("labels");
  //
  //   original_num_labels = original_num_labels.substring(2, original_num_labels.length - 2).split("\",\"");
  //   var goalNumKeypoints = num_obj*original_num_labels.length;
  //   if (keypoints.length != goalNumKeypoints) {
  //     e.preventDefault();
  //     errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must add all keypoint annotations and use each label only once.</crowd-alert>';
  //     errorBox.scrollIntoView();
  //     return;
  //   }
  //
  //   // 2. Make sure all labels are unique.
  //   labelCounts = {};
  //   for (var i = 0; i < labels.length; i++) {
  //     if (!labelCounts[labels[i]]) {
  //       labelCounts[labels[i]] = 0;
  //     }
  //     labelCounts[labels[i]]++;
  //   }
  //   const goalNumSingleLabel = num_obj;
  //
  //   const numLabels = Object.keys(labelCounts).length;
  //
  //   Object.entries(labelCounts).forEach(entry => {
  //     if (entry[1] != goalNumSingleLabel) {
  //       e.preventDefault();
  //       errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must use each label only once.</crowd-alert>';
  //       errorBox.scrollIntoView();
  //     }
  //   })
  // };
</script>