diff --git a/ci4/app/Language/es/Presupuestos.php b/ci4/app/Language/es/Presupuestos.php
index f7fbe29a..11cd5e41 100644
--- a/ci4/app/Language/es/Presupuestos.php
+++ b/ci4/app/Language/es/Presupuestos.php
@@ -152,6 +152,10 @@ return [
'comentariosSafekat' => 'Comentarios Safekat',
'comentariosPresupuesto' => 'Comentarios Presupuesto',
'comentariosProduccion' => 'Comentarios Produccion',
+ 'preview' => 'Previsualización de configuraciones',
+ 'previewMaquina' => 'Configuración de máquina',
+ 'previewCubierta' => 'Configuración de cubierta',
+ 'previewPortada' => 'Configuración de portada',
'resumen' => 'Resumen del presupuesto',
'confirmar' => 'Confirmar presupuesto',
diff --git a/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/_previewItems.php b/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/_previewItems.php
new file mode 100644
index 00000000..ded1278e
--- /dev/null
+++ b/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/_previewItems.php
@@ -0,0 +1,352 @@
+
+
+
+
+
+
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
Configuración del papel: Rotativa
+
+
+
+
+
+
Detalles del trabajo
+
+ - Gramaje:
+ - TBD
+
+ - Mano:
+ - TBD
+
+ - Máquina:
+ - TBDxTBD
+
+ - Máquina impresión:
+ - TBDxTBD
+
+ - Libro:
+ - TBDxTBD
+
+ - Formas:
+ - TBD
+
+
+
+
+
+
+
+
Posición de formas
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Configuración del papel: Cubierta
+
+
+
+
+
+
Detalles del trabajo
+
+ - Gramaje:
+ - TBD
+
+ - Mano:
+ - TBD
+
+ - Máquina:
+ - TBDxTBD
+
+ - Máquina impresión:
+ - TBDxTBD
+
+ - Libro:
+ - TBDxTBD
+
+ - Formas:
+ - TBD
+
+
+
+
+
+
+
+
Posición de formas
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Posición de formas
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+= $this->section("additionalInlineJs") ?>
+
+ var elem = document.getElementById('draw-maquina');
+ var twoMaquina = new Two({fitted: true}).appendTo(elem);
+
+ var origin = new Two.Vector(twoMaquina.width/2, twoMaquina.height/2);
+
+ var sizeX = 148;
+ var sizeY = 98;
+
+ var AIx = 355;
+ var AIy = 250;
+
+ var styles = {
+ size: 14,
+ family: 'Lato'
+ };
+
+ //var texts = [];
+
+ var areaMaquina = twoMaquina.makeRectangle(origin.x, origin.y, 360, 255);
+ areaMaquina.stroke = 'black';
+ areaMaquina.linewidth = 1;
+
+ var areaImpresion = twoMaquina.makeRectangle(origin.x, origin.y, AIx, AIy);
+ areaImpresion.stroke = 'red';
+ areaImpresion.linewidth = 1;
+
+
+ var forma1 = twoMaquina.makeRectangle(origin.x - (AIx/4), origin.y - (AIy/4), sizeX, sizeY);
+ forma1.stroke = 'blue';
+ forma1.fill = 'blue';
+ forma1.linewidth = 1;
+
+ var forma2 = twoMaquina.makeRectangle(origin.x + (AIx/4), origin.y - (AIy/4), sizeX, sizeY);
+ forma2.stroke = 'grey';
+ forma2.fill = 'grey';
+ forma2.linewidth = 1;
+
+ var forma3 = twoMaquina.makeRectangle(origin.x - (AIx/4), origin.y + (AIy/4), sizeX, sizeY);
+ forma3.stroke = 'blue';
+ forma3.fill = 'blue';
+ forma3.linewidth = 1;
+
+ var forma4 = twoMaquina.makeRectangle(origin.x + (AIx/4), origin.y + (AIy/4), sizeX, sizeY);
+ forma4.stroke = 'grey';
+ forma4.fill = 'grey';
+ forma4.linewidth = 1;
+
+ var arrowX = twoMaquina.makeArrow(origin.x -200, origin.y, origin.x+200, origin.y, 0);
+ arrowX.stroke = 'green';
+ arrowX.dashes = [5, 5];
+ arrowX.linewidth = 1;
+
+ var arrowY = twoMaquina.makeArrow(origin.x, origin.y-200, origin.x, origin.y+200, 0);
+ arrowY.stroke = 'pink';
+ arrowY.dashes = [5, 5];
+ arrowY.linewidth = 2;
+
+
+ //group = twoMaquina.makeGroup(areaMaquina, areaImpresion, ...texts);
+
+ //group.position.set(twoMaquina.width / 2, twoMaquina.height / 2);
+ //group.center();
+
+ 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() ?>
+
+
diff --git a/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/viewCosidotapablandaForm.php b/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/viewCosidotapablandaForm.php
index 6d9e4323..b3cbacd6 100644
--- a/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/viewCosidotapablandaForm.php
+++ b/ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/viewCosidotapablandaForm.php
@@ -20,6 +20,7 @@
= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_datosLibroItems") ?>
= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_datosPresupuestoClienteItems") ?>
= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_lineasPresupuestoItems") ?>
+ = view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_previewItems") ?>
= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_datosServiciosItems") ?>
= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_comentariosItems") ?>
= view("themes/backend/vuexy/form/presupuestos/cosidotapablanda/_resumenPresupuestoItems") ?>
@@ -1087,6 +1088,7 @@
+
=$this->endSection() ?>
diff --git a/httpdocs/themes/vuexy/css/sk-datatables.css b/httpdocs/themes/vuexy/css/sk-datatables.css
index 48c1cf7a..391c2e1c 100644
--- a/httpdocs/themes/vuexy/css/sk-datatables.css
+++ b/httpdocs/themes/vuexy/css/sk-datatables.css
@@ -89,4 +89,10 @@ table.dataTable.table-hover>tbody>tr.selected:hover>* {
width: 100%;
height: 25px;
margin-top: 6px;
-}
\ No newline at end of file
+}
+
+div.draw-shapes {
+ width: 95%;
+ height: 500px;
+ margin: 2.5% auto;
+}