generación de imágenes para preguntas de tipo ddimageortext

.actirepo/activity.py

@@ -5,14 +5,17 @@
 import json
 import xml.etree.ElementTree as ET
 import mimetypes
+import io
+import base64
 
 from __init__ import __icons_url__, __download_url__
 from jinja2 import Environment, FileSystemLoader
 from url_utils import normalize, encode
-from image_utils import html2png
+from image_utils import html2png, htmlsize
 from file_utils import slugify, is_newer_than, anchorify
 from bs4 import BeautifulSoup
 from pprint import pprint
+from PIL import Image
 
 ACTIVITY_FILE = 'activity.json'
 SUPPORTED_TYPES = {
@@ -85,9 +88,19 @@ def _get_questions(activity):
 def _is_activity(path):
     return os.path.isdir(path) and os.path.isfile(os.path.join(path, ACTIVITY_FILE))
 
+# get mimetype from file
 def _get_mimetype(file):
+    if file is None:
+        return None
     return mimetypes.types_map[os.path.splitext(file.get('name'))[1]]
 
+# get image dimensions
+def _get_image_size(file):
+    if file is None:
+        return None
+    with Image.open(io.BytesIO(base64.decodebytes(bytes(file.text, "utf-8")))) as img:
+        return img.size
+
 # process attachments in question element
 def _process_attachments(element):
     attachments = [ 
@@ -106,6 +119,16 @@ def _process_attachments(element):
                 img['src'] = attachment.get('image')
     return html.prettify()
 
+# get size of text
+def _drop_text_size(text):
+    html = f"""
+    <div style="box-sizing:border-box;">
+        <div style="padding: 5px;box-sizing:border-box;background-color:rgb(220, 220, 220);border-radius:0px 10px 0px 0px;display:none;vertical-align:top;margin:5px;height: auto;width: auto;cursor:move;border:1px solid rgb(0, 0, 0);font:13px / 16.003px arial, helvetica, clean, sans-serif;">{text}</div>
+        <div style="padding: 5px;user-select:none;box-sizing:border-box;background-color:rgb(220, 220, 220);border-radius:0px 10px 0px 0px;vertical-align:top;margin:5px;height: auto;width: auto;cursor:move;border:1px solid rgb(0, 0, 0);display:inline-block;font:13px / 16.003px arial, helvetica, clean, sans-serif;">{text}</div>
+    </div>
+    """
+    return htmlsize(html)
+
 # render question as image
 def _render_image(question, destination_dir):
     type = question.get("type")
@@ -171,6 +194,33 @@ def _render_image(question, destination_dir):
                     "icon": f"{__icons_url__}/crosshairs.png"
                 }
             )
+        case "ddimageortext":
+            background_file = question.find('file')
+            question_data.update(
+                { 
+                    "background": f"data:{_get_mimetype(background_file)};{background_file.get('encoding')},{background_file.text}",
+                    "drags": {
+                        int(drag.find('no').text) : {
+                            "no": int(drag.find('no').text),
+                            "text": drag.find('text').text,
+                            "type": "text" if drag.find('file') is None else "image",
+                            "image": f"data:{_get_mimetype(drag.find('file'))};{drag.find('file').get('encoding')},{drag.find('file').text}" if drag.find('file') is not None else None,
+                            "size": _drop_text_size(drag.find('text').text) if drag.find('file') is None else _get_image_size(drag.find('file')),
+                            "draggroup": int(drag.find('draggroup').text)
+                        } for drag in question.findall('drag')
+                    },
+                    "drops": {
+                        int(drop.find('choice').text) : {
+                            "no": int(drop.find('no').text),
+                            "text": drop.find('text').text,
+                            "choice": int(drop.find('choice').text),
+                            "xleft": int(drop.find('xleft').text),
+                            "ytop": int(drop.find('ytop').text)
+                        } for drop in question.findall('drop')
+                    }
+                }
+            )
+            pprint(question_data)
         case _:
             return
 

.actirepo/image_utils.py

@@ -1,4 +1,5 @@
 import os
+import tempfile
 from html2image import Html2Image
 from PIL import Image
 
@@ -9,4 +10,16 @@ def html2png(html, destination_dir, img_file):
     img_file = os.path.join(destination_dir, img_file)
     im = Image.open(img_file)
     im = im.crop(im.getbbox())
-    im.save(img_file)
+    im.save(img_file)
+
+def htmlsize(html):
+    tmp = tempfile.mkstemp(suffix='.png')
+    os.close(tmp[0])
+    file = tmp[1]
+    html2png(html, os.path.dirname(file), os.path.basename(file))
+    im = Image.open(file)
+    size = im.size
+    im.close()
+    os.remove(file)
+    return size
+

.actirepo/templates/ddimageortext.template.html

@@ -0,0 +1,30 @@
+<div style="color:rgb(0, 26, 30);background-color:rgb(231, 243, 245);border-color:rgb(184, 220, 226);position:relative;padding:12px 20px;margin-bottom:16px;border:0px solid rgb(184, 220, 226);border-radius:4px;box-sizing:border-box; width: 800px;">
+    <div style="margin-bottom:7.5px;box-sizing:border-box;display:block;">
+        {{ question.statement }}
+    </div>
+    <div style="box-sizing:border-box;text-align:center;">
+        <div style="box-sizing:border-box;display:inline-block;position:relative;">
+            <img src="{{ question.background }}" alt="Imagen de fondo para arrastrar marcadores dentro de este" style="width: 100% !important;max-width:100%;height: auto;vertical-align:middle;border-style:solid;box-sizing:border-box;border:1px solid rgb(0, 0, 0);margin: 0px auto;" />
+            <div style="box-sizing:border-box;position:absolute;top:0px;left:0px;">
+                {% for choice, drop in question.drops.items() %}
+                <div tabindex="0" style="width: {{ question.drags[choice].size[0] }}px; height: {{ question.drags[choice].size[1] }}px; left: {{ drop.xleft }}px; top: {{ drop.ytop }}px; transform: scale(1); transform-origin: left top;transform:matrix(1, 0, 0, 1, 0, 0);transform-origin:0px 0px;box-sizing:border-box;background-color:rgb(255, 255, 255);display:block;position:absolute;opacity:0.5;border:1px solid rgb(0, 0, 0);"><span style="position:absolute;width: 1px;height:1px;padding:0px;margin:-1px;overflow:hidden;clip:rect(0px, 0px, 0px, 0px);white-space:nowrap;border:0px none rgb(0, 26, 30);box-sizing:border-box;">vacío</span>&nbsp;</div>
+                {% endfor %}
+            </div>
+        </div>
+        <div style="box-sizing:border-box;">
+            {% for no, drag in question.drags.items() %}
+            {% if drag.type == 'image' %}
+            <div style="box-sizing:border-box;">
+                <img src="{{ drag.image }}" alt="{{ drag.text }}" style="padding: 5px;vertical-align:top;border-style:solid;box-sizing:border-box;background-color:rgb(255, 255, 255);display:none;margin:5px;height: auto;width: auto;cursor:move;border:1px solid rgb(0, 0, 0);font:13px / 16.003px arial, helvetica, clean, sans-serif;" />
+                <img src="{{ drag.image }}" alt="{{ drag.text }}" style="padding: 5px;user-select:none;vertical-align:top;border-style:solid;box-sizing:border-box;background-color:rgb(255, 255, 255);margin:5px;height: auto;width: auto;cursor:move;border:1px solid rgb(0, 0, 0);display:inline-block;font:13px / 16.003px arial, helvetica, clean, sans-serif;" />
+            </div>
+            {% else %}
+            <div style="box-sizing:border-box;">
+                <div style="padding: 5px;box-sizing:border-box;background-color:rgb(220, 220, 220);border-radius:0px 0px 0px 0px;display:none;vertical-align:top;margin:5px;height: auto;width: auto;cursor:move;border:1px solid rgb(0, 0, 0);font:13px / 16.003px arial, helvetica, clean, sans-serif;">{{ drag.text }}</div>
+                <div style="padding: 5px;user-select:none;box-sizing:border-box;background-color:rgb(220, 220, 220);border-radius:0px 0px 0px 0px;vertical-align:top;margin:5px;height: auto;width: auto;cursor:move;border:1px solid rgb(0, 0, 0);display:inline-block;font:13px / 16.003px arial, helvetica, clean, sans-serif;">{{ drag.text }}</div>
+            </div>
+            {% endif %}
+            {% endfor %}
+        </div>
+    </div>
+</div>

.actirepo/test/README.md

@@ -32,6 +32,13 @@ Ficheros de preguntas disponibles en esta actividad:
 |   | **TOTAL**         | 14 |
 
 
+#### Arrastrar y soltar sobre una imagen
+
+
+![arrastrar-y-soltar-sobre-una-imagen_0.png](images/arrastrar-y-soltar-sobre-una-imagen_0.png)
+
+
+
 #### Arrastrar y soltar marcadores
 
 

redes/cableado/normas T-568A y T-568B/README.md

@@ -25,6 +25,25 @@ Ficheros de preguntas disponibles en esta actividad:
 |   | **TOTAL**         | 12 |
 
 
+#### Arrastrar y soltar sobre una imagen
+
+
+![01-arrastrar-etiquetas-sobre-conector-con-norma-t-568a_0.png](images/01-arrastrar-etiquetas-sobre-conector-con-norma-t-568a_0.png)
+
+![02-arrastrar-etiquetas-sobre-conector-con-norma-t-568b_0.png](images/02-arrastrar-etiquetas-sobre-conector-con-norma-t-568b_0.png)
+
+![03-arrastrar-etiquetas-para-formar-cable-directo-t-568a_0.png](images/03-arrastrar-etiquetas-para-formar-cable-directo-t-568a_0.png)
+
+![04-arrastrar-etiquetas-para-formar-cable-cruzado_0.png](images/04-arrastrar-etiquetas-para-formar-cable-cruzado_0.png)
+
+![09-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png](images/09-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png)
+
+![10-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png](images/10-arrastrar-marcadores-a-panel-de-parcheo-t-568a-sin-codigo-colores_0.png)
+
+![12-arrastrar-etiquetas-sobre-conector-hembra-rj-45-norma-t-568a_0.png](images/12-arrastrar-etiquetas-sobre-conector-hembra-rj-45-norma-t-568a_0.png)
+
+
+
 #### Arrastrar y soltar marcadores