Desarrollados previsualizadores de portada y cubierta

ci4/app/Controllers/Js_loader.php

@@ -21,6 +21,12 @@ class Js_loader extends BaseController
 
     }
 
+    function previsualizador_js()
+    {
+        $this->response->setHeader('Content-Type', 'text/javascript');
+        return view('themes/backend/vuexy/form/presupuestos/cosidotapablanda/previews.js');
+    }
+
 
 }
  

ci4/app/Controllers/Presupuestos/Js_loader.php

@@ -1,24 +0,0 @@
-<?php
-
-namespace App\Controllers\Presupuestos;
-use App\Controllers\BaseController;
-
-
-class Js_loader extends BaseController
-{
-
-    function __construct()
-    {
-
-    }
-
-
-    function comparadorCosidoTapablanda_js()
-    {
-
-        $this->load->view('themes/backend/vuexy/form/presupuestos/cosidotapablanda/comparador.js');
-        $this->output->set_content_type('text/javascript');
-    }
-
-}
- 

ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/_previewItems.php

@@ -13,7 +13,7 @@
             <div class="accordion-body">
                 <div class="nav-align-top mb-4">
                     <ul class="nav nav-pills mb-3" role="tablist">
-                        <li class="nav-item">
+                        <li id="tab-preview-maquina" class="nav-item">
                             <button
                                     type="button"
                                     class="nav-link active"
@@ -25,7 +25,7 @@
                                 <?= lang("Presupuestos.previewMaquina") ?>
                             </button>
                         </li>
-                        <li class="nav-item">
+                        <li id="tab-preview-cubierta" class="nav-item">
                             <button
                                     type="button"
                                     class="nav-link"
@@ -37,7 +37,7 @@
                                 <?= lang("Presupuestos.previewCubierta") ?>
                             </button>
                         </li>
-                        <li class="nav-item">
+                        <li id="tab-preview-portada" class="nav-item">
                             <button
                                     type="button"
                                     class="nav-link"
@@ -206,7 +206,56 @@
 
                         <div class="tab-pane fade" id="preview-portada" role="tabpanel">
                             <div class="row">
-                                <div class="col-12">
+                                <div class="col-3">
+                                    <div class="p-4 mb-3 pb-3" >
+                                        <!-- Configuraciones -->
+                                        <h6>Configuración de portada</h6>
+                                        <div class="row g-3 mb-3">
+                                            <div class="col-12">
+                                                <a href="#">
+                                                    <div class="d-grid">
+                                                        <button type="button" class="btn btn-label-primary">Papel
+                                                            generico
+                                                        </button>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="col-12">
+                                                <a href="#">
+                                                    <div class="d-grid">
+                                                        <button type="button" class="btn btn-label-primary">Papel de
+                                                            compra
+                                                        </button>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                            <div class="col-12">
+                                                <a href="#">
+                                                    <div class="d-grid">
+                                                        <button type="button" class="btn btn-label-primary">Máquina
+                                                        </button>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </div>
+
+                                        <hr class="mx-n4"/>
+
+                                        <!-- Detalles del presupuesto -->
+                                        <h6>Detalles del trabajo</h6>
+                                        <dl class="row mb-0">
+                                            <dt class="col-6 fw-normal">Libro:</dt>
+                                            <dd id='prevLibro' class="col-6 text-left">TBDxTBD</dd>
+
+                                            <dt class="col-6 fw-normal">Lomo:</dt>
+                                            <dd id='prevLomo' class="col-6 text-left">TBD</dd>
+
+                                            <dt class="col-6 fw-normal">Solapas:</dt>
+                                            <dd id='prevSolapas' class="col-6 text-left">TBD</dd>
+                                        </dl>
+                                    </div>
+                                </div>
+                                <div class="col-9">
                                     <div class="p-4 mb-3 pb-3">
                                         <!-- Configuraciones -->
                                         <h6>Posición de formas</h6>
@@ -233,6 +282,34 @@
 <!------------------------------------------------------->
 <?= $this->section("additionalInlineJs") ?>
 
+    $('#tab-preview-cubierta').on( "click", function() {
+
+    var cubiertaObjeto = {
+            anchoMaquina: 487,
+            altoMaquina: 330,
+            anchoImpresion: 475,
+            altoImpresion: 310,
+            anchoLibro:170,
+            altoLibro:240,
+            solapas:45,
+            lomo:25};
+
+        previewCubierta(cubiertaObjeto);
+
+    } );
+
+    $('#tab-preview-portada').on( "click", function() {
+
+        var portadaObjeto = {
+            anchoLibro:170,
+            altoLibro:240,
+            solapas:45,
+            lomo:25};
+
+        previewPortada(portadaObjeto);
+
+    } );
+
     var elem = document.getElementById('draw-maquina');
     var twoMaquina = new Two({fitted: true}).appendTo(elem);
 
@@ -298,54 +375,6 @@
 
     twoMaquina.update();
 
-    var elemCubierta = document.getElementById('draw-cubierta');
-    var twoCubierta = new Two({fitted: true}).appendTo(elemCubierta);
-
-    var originCub = new Two.Vector(twoCubierta.width/2, twoCubierta.height/2);
-
-
-    var areaMaquinaCubierta = twoCubierta.makeRectangle(originCub.x, originCub.y, 360, 255);
-    areaMaquinaCubierta.stroke = 'black';
-    areaMaquinaCubierta.linewidth = 1;
-
-    var areaImpresionCubierta = twoCubierta.makeRectangle(originCub.x, originCub.y, AIx, AIy);
-    areaImpresionCubierta.stroke = 'red';
-    areaImpresionCubierta.linewidth = 1;
-
-    var formaCubierta = twoCubierta.makeRectangle(originCub.x, originCub.y, 2*sizeX, 2*sizeY);
-    formaCubierta.stroke = 'blue';
-    formaCubierta.fill = 'blue';
-    formaCubierta.linewidth = 1;
-
-    twoCubierta.update();
-
-    var elemPortada = document.getElementById('draw-portada');
-    var twoPortada = new Two({fitted: true}).appendTo(elemPortada);
-
-    var originPor = new Two.Vector(twoPortada.width/2, twoPortada.height/2);
-
-
-    var solapas = twoPortada.makeRectangle(originPor.x, originPor.y, 360, 255);
-    solapas.stroke = 'black';
-    solapas.fill = 'black';
-    solapas.linewidth = 1;
-
-    var libro = twoPortada.makeRectangle(originPor.x, originPor.y, 300, 255);
-    libro.stroke = 'red';
-    libro.fill = 'red';
-    libro.linewidth = 1;
-
-    var lomo = twoPortada.makeRectangle(originPor.x, originPor.y, 40, 255);
-    lomo.stroke = 'blue';
-    lomo.fill = 'blue';
-    lomo.linewidth = 1;
-
-    twoPortada.update();
-
-
-
-
-
 
 <?= $this->endSection() ?>
 

ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/previews.js

@@ -0,0 +1,108 @@
+// Global parameters
+var _offsetSolapas = 2;  // millimeters
+
+var styles = {
+    size: 13,
+    family: 'Public Sans',
+}
+
+
+function previewCubierta(cubiertaObj) {
+
+    // Local parameters
+    let fullBookWith = ((2 * cubiertaObj.anchoLibro) + (2 * (cubiertaObj.solapas + _offsetSolapas)) + cubiertaObj.lomo);
+
+    // Clear the canvas element
+    $('#draw-cubierta').empty();
+    // Get the element for placing the graphical elements
+    var divCubierta = document.getElementById('draw-cubierta');
+    var _previewCubierta = new Two({fitted: true}).appendTo(divCubierta);
+    // Calculate the center of the canvas element
+    var origenCubierta = new Two.Vector(_previewCubierta.width / 2, _previewCubierta.height / 2);
+
+    var areaMaquinaCubierta = _previewCubierta.makeRectangle(
+        origenCubierta.x,
+        origenCubierta.y,
+        cubiertaObj.anchoMaquina,
+        cubiertaObj.altoMaquina);
+    areaMaquinaCubierta.stroke = 'black';
+    areaMaquinaCubierta.linewidth = 1;
+
+    var areaImpresionCubierta = _previewCubierta.makeRectangle(
+        origenCubierta.x,
+        origenCubierta.y,
+        cubiertaObj.anchoImpresion,
+        cubiertaObj.altoImpresion);
+    areaImpresionCubierta.stroke = 'red';
+    areaImpresionCubierta.linewidth = 1;
+
+    var formaCubierta = _previewCubierta.makeRectangle(
+        origenCubierta.x,
+        origenCubierta.y,
+        fullBookWith,
+        cubiertaObj.altoLibro);
+    formaCubierta.stroke = '#6997D3';
+    formaCubierta.fill = '#6997D3';
+    formaCubierta.linewidth = 1;
+
+    // Texts
+    _previewCubierta.makeText(cubiertaObj.altoLibro,  origenCubierta.x + (fullBookWith/2 -25), origenCubierta.y, styles);
+    _previewCubierta.makeText(fullBookWith,  origenCubierta.x, origenCubierta.y + (cubiertaObj.altoLibro/2-15) , styles);
+
+    _previewCubierta.update();
+
+    // Update preview info fields
+    $('#prevLibro').text(cubiertaObj.anchoLibro + "X" + cubiertaObj.altoLibro );
+    $('#prevLomo').text(cubiertaObj.lomo);
+    $('#prevSolapas').text(cubiertaObj.solapas);
+
+}
+
+
+function previewPortada(portadaObj) {
+
+    // Clear the canvas element
+    $('#draw-portada').empty();
+    // Get the element for placing the graphical elements
+    var divPortada = document.getElementById('draw-portada');
+    var _previewPortada = new Two({fitted: true}).appendTo(divPortada);
+    // Calculate the center of the canvas element
+    var origenPortada = new Two.Vector(_previewPortada.width / 2, _previewPortada.height / 2);
+
+    var solapas = _previewPortada.makeRectangle(
+        origenPortada.x,
+        origenPortada.y,
+        ((2 * portadaObj.anchoLibro) + (2 * (portadaObj.solapas + _offsetSolapas)) + portadaObj.lomo),
+        portadaObj.altoLibro);
+    solapas.stroke = '#5FD2B5';
+    solapas.fill = '#5FD2B5';
+    solapas.linewidth = 1;
+
+    var libro = _previewPortada.makeRectangle(
+        origenPortada.x,
+        origenPortada.y,
+        ((2 * portadaObj.anchoLibro) + portadaObj.lomo),
+        portadaObj.altoLibro);
+    libro.stroke = '#6997D3';
+    libro.fill = '#6997D3';
+    libro.linewidth = 1;
+
+    var lomo = _previewPortada.makeRectangle(
+        origenPortada.x,
+        origenPortada.y,
+        portadaObj.lomo,
+        portadaObj.altoLibro);
+    lomo.stroke = '#8171D4';
+    lomo.fill = '#8171D4';
+    lomo.linewidth = 1;
+    
+    _previewPortada.update();
+
+    // Update preview info fields
+    $('#prevLibro').text(portadaObj.anchoLibro + "X" + portadaObj.altoLibro );
+    $('#prevLomo').text(portadaObj.lomo);
+    $('#prevSolapas').text(portadaObj.solapas);
+
+}
+
+

ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/viewCosidotapablandaForm.php

@@ -1090,5 +1090,5 @@
     <script src="<?= site_url('themes/vuexy/vendor/libs/autosize/autosize.js') ?>"></script>
     <script src="<?= site_url('themes/vuexy/vendor/libs/two/two.js') ?>"></script>
     <script src="<?= site_url('js_loader/comparadorCosidoTapaBlanda_js') ?>"></script>
-
+    <script src="<?= site_url('js_loader/previsualizador_js') ?>"></script>
 <?=$this->endSection() ?>