effibemviewer 0.1.2__py3-none-any.whl → 0.2.0__py3-none-any.whl

effibemviewer/__init__.py

@@ -2,20 +2,24 @@
 
 __author__ = """Julien Marrec"""
 __email__ = 'contact@effibem.com'
-__version__ = '0.1.2'
+__version__ = '0.2.0'
 
 from effibemviewer.gltf import (
     create_example_model,
     display_model,
+    generate_loader_html,
+    get_css_library,
+    get_js_library,
     model_to_gltf_html,
     model_to_gltf_json,
-    model_to_gltf_script,
 )
 
 __all__ = [
     "create_example_model",
     "display_model",
+    "generate_loader_html",
+    "get_css_library",
+    "get_js_library",
     "model_to_gltf_html",
     "model_to_gltf_json",
-    "model_to_gltf_script",
 ]

effibemviewer/__main__.py

@@ -1,7 +1,21 @@
 import argparse
 from pathlib import Path
 
-from effibemviewer.gltf import create_example_model, model_to_gltf_html
+from effibemviewer.gltf import (
+    create_example_model,
+    generate_loader_html,
+    get_css_library,
+    get_js_library,
+    model_to_gltf_html,
+    model_to_gltf_json,
+)
+
+# Asset paths within the package
+ASSETS_DIR = Path(__file__).parent.parent / "docs" / "assets"
+
+BASE_NAME = "effibemviewer"
+JS_LIB_NAME = f"{BASE_NAME}.js"
+CSS_LIB_NAME = f"{BASE_NAME}.css"
 
 
 def main():
@@ -21,10 +35,56 @@ def main():
         help="Include geometry diagnostics (convex, correctly oriented, etc.)",
     )
     parser.add_argument(
-        "-o", "--output", type=Path, default=Path("test.html"), help="Output HTML file path (default: test.html)"
+        "-o", "--output", type=Path, default=Path("viewer.html"), help="Output HTML file path (default: viewer.html)"
+    )
+    # --embedded and --cdn are mutually exclusive options for how to include the JS library
+    lib_mode = parser.add_mutually_exclusive_group()
+    lib_mode.add_argument(
+        "--embedded",
+        action="store_true",
+        help="Embed JS library inline in HTML (default: generate separate effibemviewer.js file)",
+    )
+    lib_mode.add_argument(
+        "--cdn",
+        action="store_true",
+        help="Reference JS library from CDN instead of embedding or generating local file",
+    )
+
+    parser.add_argument(
+        "--pretty",
+        action="store_true",
+        help="Pretty-print the JSON output in the HTML (default: compact JSON)",
+    )
+    parser.add_argument(
+        "--loader",
+        action="store_true",
+        help="Generate a loader HTML with file input instead of embedding model data",
     )
     args = parser.parse_args()
 
+    # Determine paths (relative to output HTML)
+    output_dir = args.output.parent
+    output_dir.mkdir(parents=True, exist_ok=True)
+
+    if not args.embedded and not args.cdn:
+        js_lib_path = output_dir / JS_LIB_NAME
+        js_lib_path.write_text(get_js_library())
+        css_lib_path = output_dir / CSS_LIB_NAME
+        css_lib_path.write_text(get_css_library())
+
+        print(f"Generated: {js_lib_path} and {css_lib_path}")
+
+    if args.loader:
+        # Loader mode: generate HTML with file input, no model data
+        html_content = generate_loader_html(
+            include_geometry_diagnostics=args.geometry_diagnostics,
+            embedded=args.embedded,
+            cdn=args.cdn,
+        )
+        args.output.write_text(html_content)
+        print(f"Generated: {args.output}")
+        return
+
     if args.model:
         import openstudio
 
@@ -34,11 +94,22 @@ def main():
     else:
         print("No model file provided, using example model")
         model = create_example_model(include_geometry_diagnostics=args.geometry_diagnostics)
+        model.save(output_dir / "example_model.osm", True)
+        gltf_data = model_to_gltf_json(model=model, include_geometry_diagnostics=args.geometry_diagnostics)
+        indent = 2 if args.pretty else None
+        import json
+
+        (output_dir / "example_model.gltf").write_text(json.dumps(gltf_data, indent=indent))
 
-    args.output.write_text(
-        model_to_gltf_html(model=model, pretty_json=True, include_geometry_diagnostics=args.geometry_diagnostics)
+    html_content = model_to_gltf_html(
+        model=model,
+        pretty_json=args.pretty,
+        include_geometry_diagnostics=args.geometry_diagnostics,
+        embedded=args.embedded,
+        cdn=args.cdn,
     )
-    model.save("model.osm", True)
+    args.output.write_text(html_content)
+    print(f"Generated: {args.output}")
 
 
 if __name__ == "__main__":

effibemviewer/gltf.py

@@ -1,8 +1,19 @@
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
 import openstudio
 from jinja2 import Environment, PackageLoader
 
+from effibemviewer import __version__
+
+if TYPE_CHECKING:
+    from IPython.display import HTML, IFrame
+
 env = Environment(loader=PackageLoader("effibemviewer", "templates"))
 
+CDN_BASE_URL = f"https://cdn.jsdelivr.net/gh/jmarrec/effibemviewer@v{__version__}/public/cdn"
+
 
 def model_to_gltf_json(model: openstudio.model.Model, include_geometry_diagnostics: bool = False) -> dict:
     """Convert an OpenStudio model to GLTF JSON format (dict).
@@ -27,51 +38,71 @@ def model_to_gltf_json(model: openstudio.model.Model, include_geometry_diagnosti
     return ft.modelToGLTFJSON(model)
 
 
-def model_to_gltf_script(
+def get_js_library() -> str:
+    """Get the EffiBEMViewer JavaScript library content.
+
+    Returns:
+        str: The JavaScript library content (uses bare specifiers, requires importmap)
+    """
+    template = env.get_template("effibemviewer.js.j2")
+    return template.render()
+
+
+def get_css_library(height: str = "100vh") -> str:
+    """Get the EffiBEMViewer CSS library content.
+
+    Returns:
+        str: The CSS library content
+    """
+    template = env.get_template("effibemviewer.css.j2")
+    return template.render(height=height)
+
+
+def model_to_gltf_html(
     model: openstudio.model.Model,
-    height: str = "500px",
+    height: str = "100vh",
     pretty_json: bool = False,
     include_geometry_diagnostics: bool = False,
+    embedded: bool = True,
+    loader_mode: bool = False,
+    script_only: bool = False,
+    cdn: bool = False,
 ) -> str:
-    """Generate HTML/JS fragment to render an OpenStudio model as GLTF.
+    """Generate a full standalone HTML page for viewing an OpenStudio model.
 
     Args:
         model: OpenStudio model to render
-        height: CSS height value (default "500px", use "100vh" for full viewport)
+        height: CSS height value (default "100vh" for full viewport)
         pretty_json: If True, format JSON with indentation
         include_geometry_diagnostics: If True, include geometry diagnostic info
+        embedded: If True, inline the JS library. If False, reference external JS file.
+        loader_mode: If True, generate file-input loader instead of embedding model data
+        script_only: If True, generate only the script fragment (for Jupyter)
+        cdn: If True, reference JS/CSS from jsDelivr CDN (overrides embedded)
     """
     data = model_to_gltf_json(model=model, include_geometry_diagnostics=include_geometry_diagnostics)
 
-    template = env.get_template("gltf_viewer.html.j2")
+    template = env.get_template("effibemviewer.html.j2")
     indent = 2 if pretty_json else None
+
     return template.render(
         height=height,
         gltf_data=data,
         indent=indent,
         include_geometry_diagnostics=include_geometry_diagnostics,
+        embedded=embedded,
+        loader_mode=loader_mode,
+        script_only=script_only,
+        cdn_base_url=CDN_BASE_URL if cdn else None,
     )
 
 
-def model_to_gltf_html(
-    model: openstudio.model.Model,
-    height: str = "100vh",
-    pretty_json: bool = False,
-    include_geometry_diagnostics: bool = False,
-) -> str:
-    """Generate a full standalone HTML page for viewing an OpenStudio model."""
-    fragment = model_to_gltf_script(
-        model=model, height=height, pretty_json=pretty_json, include_geometry_diagnostics=include_geometry_diagnostics
-    )
-    return f"<!DOCTYPE html><html><head></head><body style='margin:0'>{fragment}</body></html>"
-
-
 def display_model(
     model: openstudio.model.Model,
     height: str = "500px",
     use_iframe: bool = False,
     include_geometry_diagnostics: bool = False,
-):
+) -> HTML | IFrame:
     """Display an OpenStudio model in a Jupyter notebook.
 
     Args:
@@ -83,23 +114,68 @@ def display_model(
     Returns:
         IPython display object (HTML or IFrame)
     """
+    fragment = model_to_gltf_html(
+        model=model,
+        height=height,
+        pretty_json=False,
+        include_geometry_diagnostics=include_geometry_diagnostics,
+        embedded=True,
+        loader_mode=False,
+        script_only=True,
+    )
+    if not use_iframe:
+        from IPython.display import HTML
+
+        return HTML(fragment)
+
     import base64
 
-    from IPython.display import HTML, IFrame
+    from IPython.display import IFrame
+
+    full_html = f"""<!DOCTYPE html>
+<html>
+  <head>
+  </head>
+  <body style='margin:0'>
+{fragment}
+  </body>
+</html>"""
+    data_url = f"data:text/html;base64,{base64.b64encode(full_html.encode()).decode()}"
+    # Parse height for IFrame (needs integer pixels)
+    h = int(height.replace("px", "")) if height.endswith("px") else 500
+    return IFrame(src=data_url, width="100%", height=h)
 
-    if use_iframe:
-        full_html = model_to_gltf_html(
-            model=model, height=height, include_geometry_diagnostics=include_geometry_diagnostics
-        )
-        data_url = f"data:text/html;base64,{base64.b64encode(full_html.encode()).decode()}"
-        # Parse height for IFrame (needs integer pixels)
-        h = int(height.replace("px", "")) if height.endswith("px") else 500
-        return IFrame(src=data_url, width="100%", height=h)
-
-    fragment = model_to_gltf_script(
-        model=model, height=height, include_geometry_diagnostics=include_geometry_diagnostics
+
+def generate_loader_html(
+    height: str = "100vh",
+    include_geometry_diagnostics: bool = False,
+    embedded: bool = True,
+    cdn: bool = False,
+) -> str:
+    """Generate a standalone HTML page with a file input for loading GLTF files.
+
+    Args:
+        height: CSS height value (default "100vh" for full viewport)
+        include_geometry_diagnostics: If True, enable geometry diagnostic display
+        embedded: If True, inline the JS library. If False, reference external JS file.
+        cdn: If True, reference JS/CSS from jsDelivr CDN (overrides embedded)
+
+    Returns:
+        str: Full HTML page with file input for loading GLTF files
+    """
+    template = env.get_template("effibemviewer.html.j2")
+
+    html = template.render(
+        height=height,
+        gltf_data=None,
+        indent=None,
+        include_geometry_diagnostics=include_geometry_diagnostics,
+        embedded=embedded,
+        loader_mode=True,
+        script_only=False,
+        cdn_base_url=CDN_BASE_URL if cdn else None,
     )
-    return HTML(fragment)
+    return html
 
 
 def create_example_model(include_geometry_diagnostics: bool = False) -> openstudio.model.Model:
@@ -135,6 +211,7 @@ def create_example_model(include_geometry_diagnostics: bool = False) -> openstud
 
     if include_geometry_diagnostics:
         surface = next(s for s in space_clone.surfaces() if s.surfaceType() == "Wall")
-        surface.setVertices(openstudio.reverse(surface.vertices()))  # Make one surface incorrectly oriented
+        # Make one surface incorrectly oriented
+        surface.setVertices(openstudio.reverse(surface.vertices()))
 
     return model

effibemviewer/templates/effibemviewer.css.j2

@@ -0,0 +1,120 @@
+html, body {
+  height: 100%;
+  margin: 0;
+}
+body {
+  display: flex;
+  flex-direction: column;
+}
+#header {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  background: #fff;
+  border-bottom: 1px solid #e0e0e0;
+  font-family: sans-serif;
+  flex-shrink: 0;
+}
+#header img {
+  height: 32px;
+  margin-right: 12px;
+}
+#header h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+.effibem-viewer {
+  width: 100%;
+  height: {{ height }};
+  flex: 1;
+  position: relative;
+}
+footer {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  background: #f5f5f5;
+  border-top: 1px solid #e0e0e0;
+  font-family: sans-serif;
+  font-size: 12px;
+  color: #666;
+  text-align: center;
+}
+footer a {
+  color: #1a73e8;
+  text-decoration: none;
+}
+footer a:hover {
+  text-decoration: underline;
+}
+footer p {
+  margin: 0;
+}
+  .effibem-viewer .controls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(255,255,255,0.9);
+    padding: 10px;
+    border-radius: 4px;
+    font-family: sans-serif;
+    font-size: 12px;
+    z-index: 100;
+  }
+  .effibem-viewer .controls label { display: block; margin: 4px 0; cursor: pointer; }
+  .effibem-viewer .controls input { margin-right: 6px; }
+  .effibem-viewer .info-panel {
+    display: none;
+    position: absolute;
+    background: rgba(255,255,255,0.95);
+    padding: 10px 14px;
+    border-radius: 4px;
+    font-family: sans-serif;
+    font-size: 12px;
+    z-index: 100;
+    max-width: 300px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    pointer-events: none;
+  }
+  .effibem-viewer .info-panel h4 { margin: 0 0 8px 0; font-size: 13px; }
+  .effibem-viewer .info-panel .info-row { margin: 4px 0; }
+  .effibem-viewer .info-panel .info-row.emphasized { background: #1a73e8; color: white; margin: 4px -8px; padding: 4px 8px; border-radius: 4px; font-weight: 600; }
+  .effibem-viewer .info-panel .info-row.emphasized .info-label { color: white; }
+  .effibem-viewer .info-panel .info-label { color: #666; }
+  .effibem-viewer .badge {
+    display: inline-block;
+    padding: 2px 8px;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 10px;
+    text-transform: capitalize;
+  }
+  .effibem-viewer .badge-success { background-color: #198754; color: white; }
+  .effibem-viewer .badge-danger { background-color: #dc3545; color: white; }
+  .effibem-viewer .diagnostics-section { display: none; }
+  .effibem-viewer.include-diagnostics .diagnostics-section { display: block; }
+  .effibem-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    font-family: sans-serif;
+    z-index: 50;
+  }
+  .effibem-loader.hidden { display: none; }
+  .effibem-loader h2 {
+    margin: 0 0 8px 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+  .effibem-loader p {
+    margin: 0 0 16px 0;
+    font-size: 13px;
+    color: #666;
+  }
+  .effibem-loader input[type="file"] {
+    font-size: 14px;
+  }

effibemviewer/templates/effibemviewer.html.j2

@@ -0,0 +1,162 @@
+{% if not script_only %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="EffiBEM Viewer - OpenStudio Model to GLTF with ThreeJS">
+    <meta name="author" content="EffiBEM EURL">
+    <meta name="keywords" content="EnergyPlus, OpenStudio, Python, GLTF, Jupyter">
+    <title>EffiBEM Viewer</title>
+
+    <!-- Favicons -->
+    <link rel="icon" type="image/png" href="https://effibem.com/images/ico/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/svg+xml" href="https://effibem.com/images/ico/favicon.svg">
+    <link rel="shortcut icon" href="https://effibem.com/images/ico/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://effibem.com/images/ico/apple-touch-icon.png">
+    <meta name="apple-mobile-web-app-title" content="EffiBEM">
+    <link rel="manifest" href="https://effibem.com/images/ico/site.webmanifest">
+{% endif %}
+
+{# CDN takes precedence over embedded, so check cdn_base_url first #}
+{% if cdn_base_url %}
+    <link rel="stylesheet" href="{{ cdn_base_url }}/effibemviewer.css">
+{% elif embedded %}
+    <style>
+{% include "effibemviewer.css.j2" %}
+    </style>
+{% else %}
+    <link rel="stylesheet" href="./effibemviewer.css">
+{% endif %}
+
+{% if not script_only %}
+  </head>
+
+  <body>
+    <header id="header">
+      <img src="https://effibem.com/images/logo.png" alt="EffiBEM Logo">
+      <h1>EffiBEM Viewer</h1>
+    </header>
+
+  {% if loader_mode %}
+    <div id="loaderPrompt" class="effibem-loader">
+      <h2>EffiBEM Viewer</h2>
+      <p>Select an OpenStudio GLTF file to visualize</p>
+      <input type="file" id="fileInput" accept=".gltf,.json">
+    </div>
+  {% endif %}
+{% endif %}
+
+  <div id="viewer" class="effibem-viewer">
+
+    <div class="controls">
+      <div style="margin-bottom: 8px;">
+        <label style="display: inline;"><strong>Render By</strong></label>
+        <select class="renderBy" style="margin-left: 8px; font-size: 12px;">
+          <option value="surfaceType">Surface Type</option>
+          <option value="boundary">Boundary</option>
+          <option value="construction">Construction</option>
+          <option value="thermalZone">Thermal Zone</option>
+          <option value="spaceType">Space Type</option>
+          <option value="buildingStory">Building Story</option>
+        </select>
+      </div>
+      <div style="margin: 8px 0;">
+        <label style="display: inline;"><strong>Show Story</strong></label>
+        <select class="showStory" style="margin-left: 8px; font-size: 12px;">
+          <option value="">All Stories</option>
+        </select>
+      </div>
+      <hr style="margin: 8px 0; border: none; border-top: 1px solid #ccc;">
+      <strong>Surface Filters</strong>
+      <label><input type="checkbox" class="showFloors" checked> Floors</label>
+      <label><input type="checkbox" class="showWalls" checked> Walls</label>
+      <label><input type="checkbox" class="showRoofs" checked> Roofs/Ceilings</label>
+      <label><input type="checkbox" class="showWindows" checked> Windows</label>
+      <label><input type="checkbox" class="showDoors" checked> Doors</label>
+      <label><input type="checkbox" class="showShading" checked> Shading</label>
+      <label><input type="checkbox" class="showPartitions" checked> Partitions</label>
+      <hr style="margin: 8px 0; border: none; border-top: 1px solid #ccc;">
+      <label><input type="checkbox" class="showEdges" checked> Show Edges</label>
+      <div class="diagnostics-section">
+        <hr style="margin: 8px 0; border: none; border-top: 1px solid #ccc;">
+        <strong>Geometry Diagnostics</strong>
+        <label><input type="checkbox" class="showOnlyNonConvexSurfaces"> Non-Convex Surfaces Only</label>
+        <label><input type="checkbox" class="showOnlyIncorrectlyOriented"> Incorrectly Oriented Only</label>
+        <label><input type="checkbox" class="showOnlyNonConvexSpaces"> Non-Convex Spaces Only</label>
+        <label><input type="checkbox" class="showOnlyNonEnclosedSpaces"> Non-Enclosed Spaces Only</label>
+      </div>
+    </div>
+
+    <div class="info-panel">
+      <h4 class="info-name"></h4>
+      <div class="info-row info-type-row"><span class="info-label">Surface Type:</span> <span class="info-type"></span></div>
+      <div class="info-row info-space-row"><span class="info-label">Space:</span> <span class="info-space"></span></div>
+      <div class="info-row info-spaceType-row"><span class="info-label">Space Type:</span> <span class="info-spaceType"></span></div>
+      <div class="info-row info-thermalZone-row"><span class="info-label">Thermal Zone:</span> <span class="info-thermalZone"></span></div>
+      <div class="info-row info-buildingStory-row"><span class="info-label">Building Story:</span> <span class="info-buildingStory"></span></div>
+      <div class="info-row info-construction-row"><span class="info-label">Construction:</span> <span class="info-construction"></span></div>
+      <div class="info-row info-boundary-row"><span class="info-label">Boundary:</span> <span class="info-boundary"></span></div>
+      <div class="info-row info-boundaryObject-row"><span class="info-label">Adjacent To:</span> <span class="info-boundaryObject"></span></div>
+      <div class="info-row info-sunExposure-row"><span class="info-label">Sun Exposure:</span> <span class="info-sunExposure"></span></div>
+      <div class="info-row info-windExposure-row"><span class="info-label">Wind Exposure:</span> <span class="info-windExposure"></span></div>
+      <div class="diagnostics-section">
+        <div class="info-row info-convex-row"><span class="info-label">Convex:</span> <span class="info-convex"></span></div>
+        <div class="info-row info-correctlyOriented-row"><span class="info-label">Correctly Oriented:</span> <span class="info-correctlyOriented"></span></div>
+        <div class="info-row info-spaceConvex-row"><span class="info-label">Space Convex:</span> <span class="info-spaceConvex"></span></div>
+        <div class="info-row info-spaceEnclosed-row"><span class="info-label">Space Enclosed:</span> <span class="info-spaceEnclosed"></span></div>
+      </div>
+    </div>
+  </div>
+
+  {% if not script_only %}
+  <footer>
+    <p>Copyright &copy; 2026 - {{ current_year }} <a href="https://effibem.com" target="_blank">EffiBEM EURL</a>. All rights reserved.</p>
+  </footer>
+  {% endif %}
+
+  <script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
+    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/"
+  }
+}
+  </script>
+
+{# CDN takes precedence over embedded, so check cdn_base_url first #}
+{% if cdn_base_url %}
+  <script type="module" src="{{ cdn_base_url }}/effibemviewer.js"></script>
+{% elif embedded %}
+  <script type="module">
+{% include "effibemviewer.js.j2" %}
+  </script>
+{% else %}
+  <script type="module" src="./effibemviewer.js"></script>
+{% endif %}
+
+  <script type="module">
+{% if loader_mode %}
+    const options = { includeGeometryDiagnostics: {{ include_geometry_diagnostics | tojson }} };
+    const viewer = new EffiBEMViewer('viewer', options);
+
+    document.getElementById('fileInput').addEventListener('change', (e) => {
+      const file = e.target.files[0];
+      if (file) {
+        document.getElementById('loaderPrompt').classList.add('hidden');
+        viewer.loadFromFileObject(file);
+      }
+    });
+{% else %}
+    const gltfData = {{ gltf_data | tojson(indent=indent) }};
+
+    const options = { includeGeometryDiagnostics: {{ include_geometry_diagnostics | tojson }} };
+    const viewer = new EffiBEMViewer('viewer', options);
+    viewer.loadFromJSON(gltfData);
+{% endif %}
+  </script>
+
+{% if not script_only %}
+  </body>
+</html>
+{% endif %}