irie 0.0.49__py3-none-any.whl → 0.0.51__py3-none-any.whl

irie/apps/templates/prediction/{form-submission.html → create-mdof.html}

@@ -31,27 +31,6 @@
   </div>
 <div class="row">
   <div class="container">
-    <p>
-      From <a href="https://json-editor.github.io/json-editor/form-submission.html">source</a>
-      See <a href="https://json-editor.github.io/json-editor/">also</a>
-
-    </p>
-    <p>
-        The form is set to send a <code>GET</code> request to the same page.
-        A change event listener has been added to the editor so that whenever the form changes, the editor value
-        is stored in a hidden input using <code>JSON.stringify()</code>.
-    </p>
-
-    <p>
-        The option <code>use_name_attributes</code> was set to <code>false</code>
-        to avoid sending the other field with the request.
-    </p>
-    <p>
-        When the form is submitted only the hidden input is sent in the request.
-        This allows to send data structures like arrays and object.
-        Also the same schema that is used to build the form can be used as parameter to backend json validators tools.
-        Try yourself, submit the form and look in the network tab of the developer tool.
-    </p>
     <div class="form-group"></div>
     <form action="/docs/form-submission.html" method="get">
         <input id="input" type="hidden" name="type" value="{{ runner. }}">

irie/apps/templates/prediction/new-runner.html

@@ -22,26 +22,6 @@
       <div class="modal-body">
         <div class="row">
           <div class="container">
-            {% comment %}
-            <!--
-            From <a href="https://json-editor.github.io/json-editor/form-submission.html">source</a>
-            See <a href="https://json-editor.github.io/json-editor/">also</a>
-
-            The form is set to send a <code>GET</code> request to the same page.
-            A change event listener has been added to the editor so that whenever the form changes, the editor value
-            is stored in a hidden input using <code>JSON.stringify()</code>.
-
-            The option <code>use_name_attributes</code> was set to <code>false</code>
-            to avoid sending the other field with the request.
-
-            When the form is submitted only the hidden input is sent in the request.
-            This allows to send data structures like arrays and object.
-            Also the same schema that is used to build the form can be used as parameter to backend json validators tools.
-            Try yourself, submit the form and look in the network tab of the developer tool.
-            -->
-            {% endcomment %}
-            {# form.as_p #}
-
             <div class="form-group"></div>
             <form id="{{runner.name}}" action="./create/" method="post" >
               {% csrf_token %}

irie/apps/templates/prediction/predictor-profile.html

@@ -1,132 +1,15 @@
 {% extends "layouts/base.html" %}
 {% load predictor %}
-{% block title %} {{ asset.calid }} | {{ predictor.name }} {% endblock %} 
-{% block stylesheets %}
-<style>
-@media print {
-  @page {
-    /* size:210mm 297mm;  */ 
-    size: 8.5in 11in;
-  }
-  #event-table, #rendering, #predictorProfile {
-    display:    none;
-    visibility: hidden;
-    max-width:  0;
-  }
-  #page {
-    width: 100%; 
-    margin-left:   0;
-    margin-right:  0;
-    margin-top:    0.5in;
-    margin-bottom: 0.75in;
-    float: none !important;
-  }
-  html, body {
-    margin:  0 !important;
-    padding: 0 !important;
-    height: 99%;
-    width: 100%;
-    float: none !important;
-  }
-  body {
-    font: 10pt "Computer Modern", Georgia, "Times New Roman", Times, serif;
-    line-height: 1.1;
-    background: #fff !important;
-    color: #000;
-  }
-  h1 {
-    font-size: 16pt;
-/*  position: fixed;
-    top: 0; */
-  }
-  h2, h3, h4 {
-    font-size: 14pt;
-    /* margin-top: 25px; */
-  }
-  main, div.print {
-    visibility: visible;
-    width: auto; /* 100%; */
-    font-size: 10pt;
-    margin: 0; /* 0.50in 0.5in 0.5in 0.5in; */
-    float: none ! important;
-    page-break-inside:auto ;
-    /* height: 900px; */
-  }
-  tr    { page-break-inside:avoid; page-break-after:auto }
-  thead { display:table-header-group }
-  tfoot { display:table-footer-group }
-  table {
-    border-bottom: 2px solid black;
-    border-top: 2px solid black;
-    font-size: 8pt;
-    visibility: visible;
-    width: 100%; 
-    margin: 0; 
-    float: none;
-    page-break-inside:auto ; 
-    page-break-after:auto;
-  }
-  hr, img, nav, footer, .button, #rendering, #event-table {
-    visibility: hidden;
-    display: none;
-    max-height: 0;
-    max-width: 0;
-  }
-  details > summary {
-    list-style: none;
-  }
-  details > summary::marker {
-    display:none;
-  }
-
-  /*
-  #header,
-  #footer,
-  #nav {
-    display: none !important;
-  }
-  */
-  .ssid-data {
-    visibility: visible;
-    display: block;
-  }
-}
-.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut{
-  stroke: #506690;
-}
-.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
-  stroke: #61DAFB;
-}
-</style>
-{% endblock stylesheets %}
+{% block title %} {{ asset.calid }} | {{ runner.name }} {% endblock %} 
 
 {% block content %}
-<div class="print">
+
     <h1 class="fs-2 lh-2 me-3"><code>{{ asset.calid }}</code> {{ asset.name }}</h1>
     <span id="predictorProfile" class="fs-2 lh-2 me-3">Predictor Profile</span>
 
-    {# BRIDGE RENDERING #}
-    <div id="rendering" class="row">
-      <div class="col-12 mb-4">
-        <div class="card h-100 bg-white-100 border-0 shadow">
-          <div class="card-header d-sm-flex flex-row align-items-center flex-0">
-          </div>
-          <div class="card-body p-2">
-            {% if predictor.rendering %}
-            <model-viewer alt="Model rendering" 
-                          src="{{ predictor.rendering.path }}" ar 
-                          style="width: 100%; height: 300px;"
-                          shadow-intensity="1" camera-controls touch-action="pan-y">
-            </model-viewer>
-            {% endif %}
-          </div>
-        </div>
-      </div>
-    </div>
-
     <details id="event-table" open><summary><h3>Configuraion</h3></summary>
       <div class="table-responsive">
-      {{ predictor|display_predictor }}
+      {{ runner|display_predictor }}
       </div>
     <div class="row">
         <div class="col-12 mb-4">
@@ -139,28 +22,19 @@
     <div class="col-10 card bg-white-100 border-0 shadow mb-4">
       <div class="card-body">
         <div class="crop">
-          <img src="data:image/jpeg;base64,{{ predictor.render }}" alt="Spectral content">
+          <img src="data:image/jpeg;base64,{{ runner.render }}" alt="Spectral content">
         </div>
       </div>
       <div class="card-footer">
         Powered by <a href="https://chrystalchern.github.io/mdof"><em>mdof</em></a>
       </div>
     </div>
-</div>
 {% endblock content %}
 
-<script>
-    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
-    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
-</script>
-{% block javascripts %}
 
-<script type="text/javascript">
-  function printTables() {
-    var myWindow = window.open('','','width=200,height=100')
-    myWindow.document.write("This is 'myWindow'")
-    myWindow.print();
-  }
+{% block javascripts %}
+<script>
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+  const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
 </script>
-
 {% endblock javascripts %}

irie/apps/templates/prediction/viewer/veux-viewer.js

@@ -0,0 +1,186 @@
+//===----------------------------------------------------------------------===//
+//
+//         STAIRLab -- STructural Artificial Intelligence Laboratory
+//
+//===----------------------------------------------------------------------===//
+//
+class VeuxViewer {
+    #initializedTabs;
+    #table;
+    #tabLinkContainer;
+    #tabContentContainer;
+
+    constructor(table, tabLinkContainer, tabContentContainer) {
+      this.#table = table;
+      this.#initializedTabs = [];
+      this.#tabLinkContainer = tabLinkContainer;
+      this.#tabContentContainer = tabContentContainer;
+    }
+
+    initTabs(tab1, tabselector) {
+        this.#initializedTabs.push(tab1);
+
+        const tabs = this.#tabLinkContainer.querySelectorAll(tabselector);
+
+        tabs.forEach(tab => {
+            tab.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.clickTab(tab);
+            });
+        });
+    }
+
+    select(elem) {
+        const sname =  elem.dataset.section;
+
+        if (this.#initializedTabs.includes(sname)) {
+            const tabLink = this.#tabLinkContainer.querySelector(`#${sname}-tab`);
+            this.clickTab(tabLink);
+            return;
+        }
+
+        this.addTab(sname);
+    }
+
+    addTab(corr) {
+        const tab = `${corr}`;
+    
+        //
+        //
+        //
+        const tabLink = document.createElement('a');
+        tabLink.id = `${tab}-tab`;
+        tabLink.classList.add("tab-link", "nav-link", "active");
+        tabLink.href = "#";
+        tabLink.setAttribute('data-tab', tab);
+        tabLink.setAttribute('data-section', corr);
+        tabLink.setAttribute('data-bs-toggle', 'tab');
+        tabLink.setAttribute('role', 'tab');
+        tabLink.innerHTML = `${corr} <button class="btn-close" type="button" aria-label="Close"></button>`;
+        const closeButton = tabLink.querySelector('.btn-close');
+        closeButton.addEventListener('click', (e) => {
+            this.delTab(tabLink);
+        });
+        tabLink.addEventListener('click', (e) => {
+            e.preventDefault(); 
+            this.clickTab(tabLink);
+        });
+    
+        const tabItem = document.createElement('li');
+        tabItem.role = 'presentation';
+        tabItem.classList.add('nav-item');
+        tabItem.appendChild(tabLink);
+        // Add to list of tabs
+        this.#tabLinkContainer.appendChild(tabItem);
+    
+        //
+        //
+        //
+        const tabContent = document.createElement('div');
+        tabContent.classList.add('tab-content', 'mt-3', 'card-body', 'p-2');
+        tabContent.id = `${tab}-content`;
+        tabContent.style.display = 'block';
+        this.#tabContentContainer.appendChild(tabContent);
+    
+        // Get the data-tab attribute to know which content to load
+        const selectedTab = tabLink.getAttribute('data-tab');
+    
+        this.#initializedTabs.push(tab);
+    
+        this.clickTab(tabLink);
+    
+        this.fetchAndUpdateTab(selectedTab, corr);
+        return tabLink;
+    }
+
+    clickTab(tabLink) {
+    
+        const tabs = this.#tabLinkContainer.querySelectorAll('.tab-link');
+    
+        // Remove 'active' class from all tabs
+        tabs.forEach(t => {
+            t.classList.remove('active');
+        });
+    
+        // Add 'active' class to the clicked tab
+        tabLink.classList.add('active');
+    
+        const tab = tabLink.getAttribute('data-tab');
+        const contentDiv = this.#tabContentContainer.querySelector(`#${tab}-content`);
+    
+        contentDiv.style.display = 'block';
+        this.#tabContentContainer.querySelectorAll(".tab-content").forEach((el) => {
+            if (el.id != `${tab}-content`) {
+                el.style.display = 'none';
+            }
+        });
+    }
+
+    delTab(tabLink) {
+        const tab = tabLink.getAttribute('data-tab');
+        const corr = tabLink.getAttribute('data-corridor');
+        const tabContent = this.#tabContentContainer.querySelector(`#${tab}-content`);
+        tabContent.remove();
+
+        const tabItem = tabLink.parentElement;
+        tabItem.remove();
+
+        const idx = this.#initializedTabs.indexOf(tab);
+        if (idx > -1) {
+            this.#initializedTabs.splice(idx, 1);
+        }
+        this.clickTab(document.getElementById('tab1-tab'));
+    }
+
+    fetchAndUpdateTab(tab) {
+        const contentDiv = this.#tabContentContainer.querySelector(`#${tab}-content`);
+
+        // Show loading message while content is being fetched
+        contentDiv.innerHTML = `
+        <div class="text-center">
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+        `;
+
+        let apiUrl = `/inventory/04-0236/predictors/1389/detail/?section=${tab}`;
+
+        if (true) {
+            contentDiv.innerHTML = "";
+            const mv = document.createElement('model-viewer');
+
+            mv.setAttribute('camera-controls', '');
+            mv.setAttribute('autoplay', '');
+            mv.setAttribute('interaction-prompt', 'none');
+            mv.style.width  = '100%';
+            mv.style.height = '400px';
+
+            mv.src = apiUrl;
+            contentDiv.appendChild(mv);
+            return;
+        }
+        fetch(apiUrl)
+            .then(response => response.json())
+            .then(data => {
+                // Replace the loading message with the fetched content
+                // when we get it
+                contentDiv.innerHTML = "";
+                const mv = document.createElement('model-viewer');
+
+                mv.setAttribute('camera-controls', '');
+                mv.setAttribute('autoplay', '');
+                mv.setAttribute('interaction-prompt', 'none');
+                mv.style.width  = '100%';
+                mv.style.height = '400px';
+
+                // set the data-URI source
+                mv.src = `data:model/gltf-binary;base64,${data.rendering}`;
+                contentDiv.appendChild(mv);
+            })
+            .catch(error => {
+                console.error('Error fetching content:', error);
+                document.getElementById('tab-content').innerHTML = '<p>Error loading content.</p>';
+            });
+    }
+}

irie/apps/templates/prediction/xara-profile.html

@@ -0,0 +1,221 @@
+{% extends "layouts/base.html" %}
+{% load predictor %}
+{% block title %} {{ asset.calid }} | {{ runner.name }} {% endblock %} 
+{% block stylesheets %}
+<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" integrity="sha512-rqQltXRuHxtPWhktpAZxLHUVJ3Eombn3hvk9PHjV/N5DMUYnzKPC1i3ub0mEXgFzsaZNeJcoE0YHq0j/GFsdGg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
+<script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.172.0/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.172.0/examples/jsm/"
+    }
+  }
+</script>
+<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
+
+{% endblock stylesheets %}
+
+{% block content %}
+
+<div class="col-10 mb-4 d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
+  <div class="d-block mb-4 mb-md-0">
+      <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
+        <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
+          <li class="breadcrumb-item">
+            <a href="{% url 'dashboard' %}">
+              <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+            </a>
+          </li>
+          <li class="breadcrumb-item" aria-current="page"><a href="{% url 'asset_table' %}">Inventory</a></li>
+          <li class="breadcrumb-item"><a href="{% url 'asset_profile' asset.calid %}"><code>{{ asset.calid }}</code></a></li>
+          <li class="breadcrumb-item"><a href="{% url 'asset_predictors' asset.calid %}">Predictors</a></li>
+          <li class="breadcrumb-item active"><code>{{ predictor.id }}</code></li>
+        </ol>
+      </nav>
+      <h1 class="fs-2 lh-2 me-3"><code>{{ asset.calid }}</code> {{ asset.name }}</h1>
+  </div>
+</div>
+
+<div class="">
+  <div class="row align-right">
+<!-- Left Side: Sensor Form -->
+    <div class="col-md-4" >
+      <div class="card bg-white-100 border-1 rounded-0 shadow">
+        <div class="card-header d-sm-flex flex-row align-items-center flex-0">
+          <select id="table-switcher" 
+                  class="form-select form-select-sm me-2">
+            <option value="members">Members</option>
+            <option value="sensors">Sensors</option>
+          </select>
+        </div>
+        <div class="card-body">
+          <div class="table-response">
+            <table id="members" 
+                  class="table align-items-center table-flush">
+              <thead class="thead-light">
+              <tr>
+                <th class="border-bottom" scope="col">#</th>
+                <th class="border-bottom" scope="col">Type</th>
+                <th class="border-bottom" scope="col">Section</th>
+              </tr>
+              </thead>
+              <tbody>
+                {% for member in members %}
+                <tr id="veux-member-{{member.id}}" 
+                    data-section="{{ member.section }}"
+                    style="cursor: pointer;" 
+                    onClick="handleMemberSelection(this)">
+                <td><code>{{ member.name }}</code></td>
+                <td>{{ member.type }}</td>
+                <td class="fw-bolder text-gray-800">
+                {{ member.section }}
+                </td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+
+            <table id="sensors" class="table align-items-center table-flush" hidden>
+              <thead class="thead-light">
+              <tr>
+                <th class="border-bottom" scope="col">#</th>
+                <th class="border-bottom" scope="col">Node</th>
+                <th class="border-bottom" scope="col">Type</th>
+              </tr>
+              </thead>
+              <tbody>
+                {% for sensor in sensors %}
+                <tr id="sensor-{{sensor.id}}"
+                    data-sensor-x="{{  sensor.sensor.x }}"
+                    data-sensor-y="{{  sensor.sensor.y }}"
+                    data-sensor-z="{{  sensor.sensor.z }}"
+                    data-sensor-dx="{{ sensor.sensor.dx }}"
+                    data-sensor-dy="{{ sensor.sensor.dy }}"
+                    data-sensor-dz="{{ sensor.sensor.dy }}">
+                  <td><code>{{ sensor.id }}</code></td>
+                  <td>{{ sensor.node }}</td>
+                  <td>{{ sensor.role }}</td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+            <nav>
+              <ul class="pagination" id="pagination"></ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+
+<!-- Right Side: Predictor Rendering -->
+    <div class="col-md-8">
+      <div id="rendering" class="card bg-white-100 border-1 rounded-0 shadow">
+        <div class="card-header">
+          <ul id="tab-link-container" class="nav nav-tabs" id="myTab" role="tablist">
+              <li class="nav-item" role="presentation">
+                <a class="nav-link tab-link active" 
+                   id="tab1-tab" 
+                   data-bs-toggle="tab" href="#"
+                   data-tab="tab1" 
+                   role="tab">Model</a>
+              </li>
+          </ul>
+        </div>
+        <div class="card-body text-center" style="background-color: #f0f0f0;">
+            <div id="tab-content-container">
+              <div id="tab1-content" class="tab-content">
+                <div id="main-viewer"
+                    style="width: 100%; height: 300px; background-color: #f0f0f0; margin: 0 auto;">
+                </div>
+              </div>
+            </div>
+        </div>
+        <div class="card-footer text-center">
+            Powered by <a href="https://veux.io/">veux</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock content %}
+
+{% block javascripts %}
+
+<script>
+{% include "prediction/viewer/veux-viewer.js" %}
+
+const VIEWER = new VeuxViewer(document.querySelector('#members'), 
+                              document.querySelector('#tab-link-container'),
+                              document.getElementById('tab-content-container'));
+
+function handleMemberSelection(elem) {
+    VIEWER.select(elem);
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    VIEWER.initTabs('tab1', '.tab-link');
+});
+
+</script>
+
+<script>
+  const select  = document.getElementById('table-switcher');
+  const tables  = Object.fromEntries(
+    Array.from(document.querySelectorAll('table')).map(t => [t.id, t])
+  );
+
+  select.addEventListener('change', e => {
+    const chosen = e.target.value;
+    for (const [id, tbl] of Object.entries(tables)) {
+      tbl.hidden = id !== chosen;        // HTML `hidden` handles show/hide
+    }
+  });
+</script>
+
+<script type="module">
+  {% include "sensors/render-sensors.js" %}
+
+  document.addEventListener('DOMContentLoaded', () => {
+      const container = document.getElementById("main-viewer");
+
+      const modelPath = "{{ predictor.render_file.url|safe }}";
+
+      const scene = createSensorRenderer(container, modelPath);
+  
+      const arrowObjects = [];
+
+      // Loop through each sensor form and create an arrow
+      document.querySelector('#sensors').querySelectorAll('tr').forEach((row) => {
+          const x  = parseFloat(row.dataset.sensorX)  || 0;
+          const y  = parseFloat(row.dataset.sensorY)  || 0;
+          const z  = parseFloat(row.dataset.sensorZ)  || 0;
+          const dx = parseFloat(row.dataset.sensorDx) || 0;
+          const dy = parseFloat(row.dataset.sensorDy) || 0;
+          const dz = parseFloat(row.dataset.sensorDz) || 0;
+          console.log(x, y, z, dx, dy, dz);
+          console.log(row)
+
+          // Create a direction vector from dx,dy,dz
+          const direction = new THREE.Vector3(dx, dy, dz);
+          const length = direction.length() || 0.1; // arrow length
+          direction.normalize();
+
+          const origin = new THREE.Vector3(x, y, z);
+          const color = 0xff0000;
+          const arrow = createArrow(
+                                      origin,
+                                      direction, 
+                                      length,
+                                      color,
+                                      0.3*length, // head length 
+                                      0.2*length, // head width
+                                      0.1*length  // shaft radius
+                                  );
+
+          scene.add(arrow);
+          arrowObjects.push(arrow);
+      });
+      
+  });
+  </script>
+{% endblock javascripts %}