Skip to content

How to model IFC using only HTML, CSS and JS

Notifications You must be signed in to change notification settings

timmcginley/HTML-Build

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Building description using custom HTML entities

Developed based on conversations with JosepMariaPujol for his super awesome thesis project. Now expanded to include conversations with aothms. This repo is focused on defining custom HTML entities that represent (IFC) building entities with minimal CSS to define layers of attributes and properties.

This has now been further expanded to include an IFC converter to HTML-Build repo using ifcOpenShell. This was then explored by students in the DTU course Advanced BIM (41934).

Aim

Define a set of custom entities for building elements within an index.html file using HTML5 principles (in the first instance, this means only using HTML, CSS and JS).

Objectives:

1) Provide useful information

  • Provide a useful description of the building wihtout having to open the full 3d model.
  • Be possible to adapt or create a custom view for specific use cases.

html-build-basic

Basic building description result in HTML with some CSS

2) Standardised

  • Provide a common file format across softwares / systems following IFC / ISO / National standards as much as possible.
  • Use HTML5 principles to solve building modelling challenges, for instance IfcPropertySets would be defined in Cascading Style Sheets (CSS).
project- {
	display:block;
	padding:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color:#ccc;
	width:100%;
	border:none;
	color:#1b1b1b;
	margin:auto;
	padding-bottom:50px;
}

CSS example for project- custom entity (just display) instance attributes and properties would be contained in further CSS files declared in the document head.

3) Human editable

  • Be super easy to learn (from)
  • fun for humans to hack.
<html>
	<head> <!--- this contains property links and entity attributes in css ---> </head>
	<body>
		<project->
			<site->
				<building->
					<floor-></floor->
				</building->
			</site->
		</project->
	</body>
</html>

Basic building description example in HTML

4) Extendable

  • Possible to add new entities?
  • Custom entities should support links to Linked data, Speckle streams, IFC.js and other emerging AEC web technologies.
<!--- possible example of extension --->
		<project- src="[(url) link to IFC.js / speckle stream etc.]">
			<site->
				<building->
					<!--- alternatively an entity could have link(s) --->
					<floor-></floor->
				</building->
			</site->
		</project->
	</body>
<html>

This repo contains a minimal example with the basic CSS file. Other examples will be added soon.

About

How to model IFC using only HTML, CSS and JS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 67.2%
  • CSS 32.8%