# Spider IDF Viewer ~ alpha release

**URL:** <https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062>\
**Category:** spider\
**Tags:** energyplus, idf\
**Created:** [June 13, 2020, 7:22am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062 "2020-06-13T07:22:15Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheoA](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/theoa/32/5080_2.png) [@TheoA](https://discourse.ladybug.tools/u/TheoA)\
**Post date:** [June 13, 2020, 7:22am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/1 "2020-06-13T07:22:15Z")

</div>

https://www.ladybug.tools/spider-2020/spider-idf-viewer/

_Spider IDF Viewer_

### [Spider IDF Viewer](https://www.ladybug.tools/spider-2020/spider-idf-viewer/)

The script enables you to open [EnergyPlus](https://energyplus.net) Input Data Files (IDF) from your computer or via a URL. Ths script locates all surfaces and windows data and displays them in 3D in your browser.

- You may rotate, zoom and pan the model by clicking or touching it
- Clicking on a surface allow you to display data for the surface
- Sample files menu allows you to load hundreds of EnergyPlus demo files

Issues

- May have issues with unzipping non-UTF-8 files
- Only displays data with X, Y and Z coordinates

---

<div class="post-metadata">

**Author:** ![AbrahamYezioro](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/abrahamyezioro/32/3_2.png) [@AbrahamYezioro](https://discourse.ladybug.tools/u/AbrahamYezioro)\
**Post date:** [June 13, 2020, 10:51am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/2 "2020-06-13T10:51:02Z")

</div>

Tx @TheoA, this looks great.  
I tried to see one of my files but unfortunately the screen shows nothing. It can be caused becouse the geometry is not at the origin point but i can’t tell.  
This is the file in case you want to check …  
Best,  
-A.  
[in.zip](https://discourse.ladybug.tools/uploads/short-url/5irGBTgAT4TK9uIT9ztmCT3If0j.zip) (151.8 KB)

---

<div class="post-metadata">

**Author:** ![Nimafo](https://discourse.ladybug.tools/letter_avatar_proxy/v4/letter/n/b19c9b/32.png) [@Nimafo](https://discourse.ladybug.tools/u/Nimafo)\
**Post date:** [June 13, 2020, 2:42pm UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/3 "2020-06-13T14:42:04Z")

</div>

This is useful, awesome! 👏

---

<div class="post-metadata">

**Author:** ![TheoA](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/theoa/32/5080_2.png) [@TheoA](https://discourse.ladybug.tools/u/TheoA)\
**Post date:** [June 13, 2020, 8:40pm UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/4 "2020-06-13T20:40:25Z")

</div>

@AbrahamYezioro

1:40pm  
Thanks for sending a test case. I will report back on what I find.

1:44pm

Ah, easy!

Looking at you file, starting at line 213.

```
Shading:Building:Detailed,
  shdSurface_0_0, !- Name
  , !- Transmittance Schedule Name
  , !- Number of Vertices
  1264.47692871094, -598.30517578125, 18.3299999237061, !- X,Y,Z Vertex 1 {m}
  1264.47692871094, -598.30517578125, 0, !- X,Y,Z Vertex 2 {m}
  1261.41711425781, -573.459533691406, 0, !- X,Y,Z Vertex 3 {m}
  1261.41711425781, -573.459533691406, 18.3299999237061; !- X,Y,Z Vertex 4 {m}

```

On the line for number of vertices, no number is provided at the beginning of the line. The same is true for all the subsequent surfaces. @MichalDengusiak also sent me a file with a similar “feature”. This should be a fairly easy issue to overcome. Fingers crossed.

BTW, what program did you use to create this IDF file?

3:42pm

getting there…

 ![image](https://discourse.ladybug.tools/uploads/default/original/3X/4/c/4c2c1e799e0a7b1af7f022e4ce12de1a7c53434a.png)

---

<div class="post-metadata">

**Author:** ![AbrahamYezioro](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/abrahamyezioro/32/3_2.png) [@AbrahamYezioro](https://discourse.ladybug.tools/u/AbrahamYezioro)\
**Post date:** [June 14, 2020, 1:13am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/5 "2020-06-14T01:13:26Z")

</div>

> [@TheoA](#):
>
> BTW, what program did you use to create this IDF file?

Crossing fingers, if it is not yet solved.  
The IDF was created in HB. The Shading:Building:Detailed is coming from HB\_Context component.  
Tx.  
-A.

---

<div class="post-metadata">

**Author:** ![mostapha](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/mostapha/32/15244_2.png) [@mostapha](https://discourse.ladybug.tools/u/mostapha)\
**Post date:** [June 14, 2020, 2:09am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/6 "2020-06-14T02:09:18Z")

</div>

Nice work @TheoA! Number of vertices is optional. You should expect a lot of idf files which are missing this field.

---

<div class="post-metadata">

**Author:** ![AbrahamYezioro](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/abrahamyezioro/32/3_2.png) [@AbrahamYezioro](https://discourse.ladybug.tools/u/AbrahamYezioro)\
**Post date:** [June 14, 2020, 2:11am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/7 "2020-06-14T02:11:56Z")

</div>

@TheoA, One wish/feature that can be nice is to be able to pick windows. So far it pick the wall behind or the hosting wall.  
-A.

---

<div class="post-metadata">

**Author:** ![TheoA](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/theoa/32/5080_2.png) [@TheoA](https://discourse.ladybug.tools/u/TheoA)\
**Post date:** [June 14, 2020, 8:01am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/8 "2020-06-14T08:01:39Z")

</div>

@AbrahamYezioro

## Updated version: [Spider IDF Viewer v-2020-06-13](https://www.ladybug.tools/spider-2020/spider-idf-viewer/)

is up and should fix the lack of “Number of Vertices” issue.

_Getting the file that you want to display in an iframe is tricky…_

https://www.ladybug.tools/spider-2020/spider-idf-viewer/
## Window display

 ![image](https://discourse.ladybug.tools/uploads/default/original/3X/9/5/951d7ad331d7106ffd5ec0dca71b0348c84d071e.png)

It all depends.

If you click on the windows in the very nice test case you sent, you will note that the PopUp displays windows data as anticipated. On other files - as you point out - the window data does not behave nicely. I believe, this is because the window data appears either after or before the surface data in the file.

Now, just having had this clever insight, it would seem to me that the clever action to take would be to draw all the surfaces and then draw all the windows.

Another clever thing would be to stop the windows and walls “jiggering”. We will get there one day

---

<div class="post-metadata">

**Author:** ![AbrahamYezioro](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/abrahamyezioro/32/3_2.png) [@AbrahamYezioro](https://discourse.ladybug.tools/u/AbrahamYezioro)\
**Post date:** [June 14, 2020, 1:45pm UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/9 "2020-06-14T13:45:00Z")

</div>

This is great @TheoA!!  
Tx,  
-A.

---

<div class="post-metadata">

**Author:** ![AbrahamYezioro](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/abrahamyezioro/32/3_2.png) [@AbrahamYezioro](https://discourse.ladybug.tools/u/AbrahamYezioro)\
**Post date:** [June 15, 2020, 12:51am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/10 "2020-06-15T00:51:09Z")

</div>

Hi @TheoA,  
I think i’ve found kind of a bug. See this image:

 ![Capture](https://discourse.ladybug.tools/uploads/default/original/3X/9/d/9d2eb2a16bbddfb9648aa4f5d8d6feb54befa858.jpeg)  
I uploaded a new model, which is the one you see in the front. But as you can see in the back, there is the first model (the one i sent yesterday).  
I’m not sure both need to be there or just the last uploaded. Not sure also about the memory showing more than the last uploaded can have.  
This is the second model if you want something “heavy and complicated”.  
[in\_02.zip](https://discourse.ladybug.tools/uploads/short-url/ssOPJdwtm7g8eVEKXkIypaLedLb.zip) (125.8 KB)

Powerful it is!!  
Tx,  
-A.

---

<div class="post-metadata">

**Author:** ![TheoA](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/theoa/32/5080_2.png) [@TheoA](https://discourse.ladybug.tools/u/TheoA)\
**Post date:** [June 15, 2020, 1:02am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/11 "2020-06-15T01:02:43Z")

</div>

@AbrahamYezioro

this is the exact issue I’m working on right now as we speak. 😉

btw, if you look in the data menu you will begin to see the start of a JSON tree view for the file

And thank you for the new test file. I very much appreciate it. because so many people work in private organizations, it’s can be hard to get test files

---

<div class="post-metadata">

**Author:** ![TheoA](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/theoa/32/5080_2.png) [@TheoA](https://discourse.ladybug.tools/u/TheoA)\
**Post date:** [June 15, 2020, 3:53am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/12 "2020-06-15T03:53:45Z")

</div>

@AbrahamYezioro

If you look at the original post, fingers crossed, the viewer is now mostly working as expected.

You will note that your lates test case is the default model.

Please provide copyright and license details, so I can add these to the project.

---

<div class="post-metadata">

**Author:** ![AbrahamYezioro](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/abrahamyezioro/32/3_2.png) [@AbrahamYezioro](https://discourse.ladybug.tools/u/AbrahamYezioro)\
**Post date:** [June 15, 2020, 12:30pm UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/13 "2020-06-15T12:30:52Z")

</div>

> [@TheoA](#):
>
> If you look at the original post, fingers crossed, the viewer is now mostly working as expected.

This is great!!

> [@TheoA](#):
>
> You will note that your lates test case is the default model.

Yes. Nice and thanks.

> [@TheoA](#):
>
> Please provide copyright and license details, so I can add these to the project.

Well. The files are not real projects, but rather part of a research i’m doing.  
You can quote the first one as:  
Theoretical Residential Building - Center of Tel Aviv. By Abraham Yezioro and Elie Medioni  
The second one as:  
Theoretical Office building - Center of Tel Aviv. By Abraham Yezioro and Elie Medioni.

Best,  
-A.

---

<div class="post-metadata">

**Author:** ![TheoA](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/theoa/32/5080_2.png) [@TheoA](https://discourse.ladybug.tools/u/TheoA)\
**Post date:** [June 16, 2020, 9:08am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/14 "2020-06-16T09:08:25Z")

</div>

@AbrahamYezioro

## [https://www.ladybug.tools/spider-2020/spider-idf-viewer/](https://www.ladybug.tools/spider-2020/spider-idf-viewer/)

v-2020-06-15 is up

Adds quite a few new features.

Open the view menu to access a number of choices as to what to view.

 ![image](https://discourse.ladybug.tools/uploads/default/original/3X/7/a/7ae740c33ff625cf35396414813570f8bb29115d.png)

Also - it takes a while to load and you need to zoom out - the credits are visible in the distance.

 ![image](https://discourse.ladybug.tools/uploads/default/original/3X/a/5/a5545ed37874c8d939409eb72d9fe67c6db31631.png)

Getting a monospace font to work is an open issue

But what I need is the licence for your test cases

how about: [https://creativecommons.org/licenses/by-nc/4.0/legalcode](https://creativecommons.org/licenses/by-nc/4.0/legalcode) ??

---

<div class="post-metadata">

**Author:** ![AbrahamYezioro](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/abrahamyezioro/32/3_2.png) [@AbrahamYezioro](https://discourse.ladybug.tools/u/AbrahamYezioro)\
**Post date:** [June 16, 2020, 9:32am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/15 "2020-06-16T09:32:30Z")

</div>

> [@TheoA](#):
>
> But what I need is the licence for your test cases
> 
> how about: [CC BY-NC 4.0 Legal Code | Attribution-NonCommercial 4.0 International | Creative Commons](https://creativecommons.org/licenses/by-nc/4.0/legalcode) ??

@TheoA, You kill me with that … 😄  
Can you help me with this? I’m not used to those things …

> [@TheoA](#):
>
> Adds quite a few new features.
> 
> Open the view menu to access a number of choices as to what to view.

Those are great and useful. Though i found something “interesting” that i hope is a mistake on your side and not on mine. When checking accordint to Zone Name tere are some that take various of them at the same time (for instance, Apafrtment\_1\_Floor\_1 or Apartment\_1\_Floor\_2 (in the default file).

> [@TheoA](#):
>
> Also - it takes a while to load and you need to zoom out - the credits are visible in the distance.

i succeeded to see that for a while, but not anymore. It rotates with the model. I thing it better be part of the window settings as info and not as it is now.

Looking good!!  
-A.

---

<div class="post-metadata">

**Author:** ![Tokarzewski](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/tokarzewski/32/15653_2.png) [@Tokarzewski](https://discourse.ladybug.tools/u/Tokarzewski)\
**Post date:** [June 16, 2020, 8:37pm UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/16 "2020-06-16T20:37:18Z")

</div>

I cant open idf files exported from DesignBuilder nor created in EP-launch.  
The only idf I can open is the one created by Honeybee.  
Why is that the case?

[Ladybug.idf](https://discourse.ladybug.tools/uploads/short-url/fpbL3fRHw9dOcWOjMaE9ILF1K73.idf) (196.0 KB) [DB\_export.idf](https://discourse.ladybug.tools/uploads/short-url/4chjsjyzwDewQbf7pqBoVct9fBq.idf) (59.2 KB) [EP.idf](https://discourse.ladybug.tools/uploads/short-url/tOEmZsdZQ3fom0DNcoOzIkQw0SV.idf) (105.9 KB)

---

<div class="post-metadata">

**Author:** ![TheoA](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/theoa/32/5080_2.png) [@TheoA](https://discourse.ladybug.tools/u/TheoA)\
**Post date:** [June 16, 2020, 8:56pm UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/17 "2020-06-16T20:56:26Z")

</div>

@Tokarzewski

Good question! I have not the faintest idea.

but with your test cases I can find an answer - and reply when I do. Thank you!

14:07:

Interesting stuff. The files you provided have a very different method to identify vertices

```
BuildingSurface:Detailed,
    Block2:Zone1_GroundFloor_0_0_0, !- Name
    Floor, !- Surface Type
    BESTEST Floor, !- Construction Name
    Block2:Zone1, !- Zone Name
    Ground, !- Outside Boundary Condition
    , !- Outside Boundary Condition Object
    NoSun, !- Sun Exposure
    NoWind, !- Wind Exposure
    AutoCalculate, !- View Factor to Ground
    4, !- Number of Vertices
    8, !- Vertex 1 X-coordinate {m}
    0, !- Vertex 1 Y-coordinate {m}
    0, !- Vertex 1 Z-coordinate {m}
    0, !- Vertex 2 X-coordinate {m}
    0, !- Vertex 2 Y-coordinate {m}
    0, !- Vertex 2 Z-coordinate {m}
    0, !- Vertex 3 X-coordinate {m}
    6, !- Vertex 3 Y-coordinate {m}
    0, !- Vertex 3 Z-coordinate {m}
    8, !- Vertex 4 X-coordinate {m}
    6, !- Vertex 4 Y-coordinate {m}
    0; !- Vertex 4 Z-coordinate {m}

```

The files I have currently use

` 1200.50939941406, -578.038513183594, 0, !- X,Y,Z Vertex 2 {m}`

or

` 1200.50939941406, -578.038513183594, 0, !- X,Y,Z Vertex ==> 2 {m}`

I should be able to fix this reasonably easily. The interesting thing will be trying to identify easily which files uses which format.

---

<div class="post-metadata">

**Author:** ![Tokarzewski](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/tokarzewski/32/15653_2.png) [@Tokarzewski](https://discourse.ladybug.tools/u/Tokarzewski)\
**Post date:** [June 16, 2020, 10:05pm UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/18 "2020-06-16T22:05:07Z")

</div>

@TheoA

I am not an expert but I can share what I know 🙂

Geometry in all models was created using the same BuildingSurface:Detailed class.  
However, Honeybee structures data a bit differently.  
For the EP engine, it is exactly the same input, the method to identify vertices is exactly the same.  
It is just a different method of structuring the text inside the IDF file.  
Commas and semicolons are important and everything after exclamation marks is a comment and is not important. (at least for the EP)

Default structure from EnergyPlus:  
 ![image](https://discourse.ladybug.tools/uploads/default/original/3X/7/b/7be2905b6f06445d0320a5a24f6fb36f9e13cbee.png)  
that follows EP-launch structure

 ![image](https://discourse.ladybug.tools/uploads/default/original/3X/d/7/d7f4a71b72ccd080ee4ac45fd73763ceda2e1558.png)

![image](https://discourse.ladybug.tools/uploads/default/original/3X/f/a/fa9f3ec568b6adc0cd9d9de94fd7e50cf20ec9e9.png)  
**For EnergyPlus it is equal to this**

![image](https://discourse.ladybug.tools/uploads/default/original/3X/7/4/74ecf8580f2da83e72521a98f2ca2d917e017a68.png)

idf structure goes like this  
Class:input1,input2…inputn;

---

<div class="post-metadata">

**Author:** ![TheoA](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/theoa/32/5080_2.png) [@TheoA](https://discourse.ladybug.tools/u/TheoA)\
**Post date:** [June 16, 2020, 10:25pm UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/19 "2020-06-16T22:25:46Z")

</div>

@Tokarzewski

Thank you for the insights. They help

I should be able to get onto this in a few hours.

---

<div class="post-metadata">

**Author:** ![TheoA](https://discourse.ladybug.tools/user_avatar/discourse.ladybug.tools/theoa/32/5080_2.png) [@TheoA](https://discourse.ladybug.tools/u/TheoA)\
**Post date:** [June 17, 2020, 8:15am UTC](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062/20 "2020-06-17T08:15:17Z")

</div>

@Tokarzewski

 ![image](https://discourse.ladybug.tools/uploads/default/original/3X/9/8/9840fbf4c692c281374e75dcf309b9165722950e.png)

 ![image](https://discourse.ladybug.tools/uploads/default/original/3X/2/d/2dac21967aa158f7622eebf260abf56723726593.png)

here is the regex I’m using

```
` IDF.itemsSurfaces = IDF.items.filter( item => item.includes( "Number of Vertices" ) );

    const coordinates = IDF.itemsSurfaces.map( item => item
        .slice( item.indexOf( "Number of Vertices" ) + 18 ) )
        .map( item => item.replace( /!-(.*?)m}|;/gi, "") )
        .map( item => item.split( "," )
        .map( item => + item.trim() )
    );`

```

Seems to be working. In any case it’s shorter and simpler to what was there before. Having more test cases really helps.

Also there are a bunch of other small fixes.

### [https://www.ladybug.tools/spider-2020/spider-idf-viewer/](https://www.ladybug.tools/spider-2020/spider-idf-viewer/)

[Next page](https://discourse.ladybug.tools/t/spider-idf-viewer-alpha-release/10062.md?page=2)