Category: Design

Plani3D – Planimetry/map to 3D model

In the last days I’ve been working on this helper software to make it easy to turn a planimetry of a house into a simple 3D model to make it easy to visualize it or any modification you would want to make.

 

plani3deditor

Plani3D

plani3d_conpla

The functionalities are extremely limited and it may be buggy – it was only coded to suit my specific needs.

So far it lets you:

  • Load a custom image (planimetry, map)
  • Define a scale (so the 3d model will have the right measures)
  • Draw 3 types of entity with the mouse
    • Walls
    • Windows
    • Doors
  • Change thickness of walls
  • Generate the 3D model
    • saving the link will let you see it in the future too, the model gets encoded in the url (which could get veeery big)
  • Export the generated model as a GTLF file

Note: no deletion of added walls is possible at this time. Not even editing the generated model. It’s more a rapid prototype tool, doesn’t let you make things precisely.

The project can be tested here.

 

3D website experiment

Greatly inspired by this article, it came to my mind that would be cool making some website which could be explored like the real world, rather than just consulted or read.

I picked the original code from the article, which already let you build a simple 3D world which could be navigated in first person, and modified it to have customizable blocks, with action, photos and mouse to control the view, enriching the experience.

Actually, then I spent a lot of time developing what would be the map editor, which has been really useful when designing my own map/world.

A first experiment that I have made is here.

I also uploaded the editor so that people can design and try their own world.

Everything will be saved locally to the localstorage of the browser, so for now, you can’t share the world you have created. Anyway, I’m planning to offer the possibility to create and share your own world, but it will take some effort so I will do it later.

The thing should work fine with chrome and firefox.

JSGenetic Curriculum

This is my last experiment: text which creates itself with a genetic algorithm, implemented in JS by my library JSGenetic, which I wrote some time ago and described in a previous post.

I used this kind of self-generating text to implement a timeline based curriculum vitae, of which I’ll have to review the content, but i’m quite happy with the structure.

As you can see when it computes the icons, this doesn’t work only for text, but with with generic pixel templates too.

Here’s the link.

CUE Framework

Today I write about another project I’ve been developing in these days.

It is the natural evolution of one of my last projects, which took me to think about a more general framework to make simple HTML 5 based websites, which look a lot like presentations, but with some enhanced components and interactive capabilities.

I named it CUE, and it’s declarative. I thought that a very tight framework like this could be the right thing to make declarative, given his simplicity and relatively few components. So you could write a simple website with this framework just by editing one html file, without needing any scripting (if you don’t need any additional components).

If you want to take a look and have a little introduction to it, visit the CUE presentation website, made of course with CUE.

Now let’s get more technical.

First of all, the framework is strongly based on jQuery, so you’ll need to include it for getting it to work. Then you can just include the CUE script file, which is quite straightforward:

<script src="http://www.nicassio.it/daniele/cue/cue.js"></script>

Then, writing the pages is quite easy too.

If you have already visited the presentation website, you should now understand what Screens and Pages are. Now that you now this, we will learn how to create some sample screens and pages, to make a little presentation website, with a bgImage and a bgGradient, with the music player and the sitemap component.

Actually, it’s really easy, and this is what your HTML should look like:

<html>
  <head>
    <title>Your title</title>
  </head>
  <body>
  <script src="your_jquery_include.js"></script>
  <cue>
      <player song="your_song.ogg"></player>
      <sitemap></sitemap>
      <page>
        <screen>
          <bgImage src="your_image.jpg"></bgImage>
          <bgCaption>First screen caption</bgCaption>
          <content>
            This is my content, here I can place any <span class="banana">HTML code</span>.
          <span trigger="nextScreen">This is a trigger</span>
          </content>
        </screen>
        <screen>
          <bgGradient type="top" color1="red" color2="black"></bgGradient>
          <bgCaption>Second screen caption</bgCaption>
          <content>
            This is the second page.
          </content>
        </screen>
      </page>
      <page>
        <screen>
          <bgImage src="your_image.jpg"></bgImage>
          <bgCaption>First screen caption</bgCaption>
          <content>
            This is the third page.
            <span trigger="nextScreen">This is a trigger</span>
          </content>
        </screen>
        <screen>
          <bgGradient type="top" color1="red" color2="black"></bgGradient>
          <bgCaption>Second screen caption</bgCaption>
          <content>
            This is the fourth page.
          </content>
        </screen>
      </page>
    </cue>
    <script src="http://www.nicassio.it/daniele/cue/cue.js"></script>
  </body>
</html>

Styling

Now, you should worry about the styling. Of course, to be customizable, you can style all your content with usual CSS. Anyway, you should know that there are other components which can be styled in the usual way: bgCaption can be provided with a class=”” parameter which will be used as a class by the framework. The same works with player and bgImage, if you need some extra styling there.

Fonts

In general, fonts can be styled with usual CSS too. But since nowadays the screen size is very variable, I introduced a class which manages the font dimension and keeps it dinamically sized relatively to the screen size.

Therefore, if you use a relative font size unit like % or em, the font size will be automatically adjusted by the framework, which modifies the body style so that every child which uses relative fonts will be modified too.

Triggers

The last thing to talk about is triggers. As you read in the presentation, a click in the first screen by default triggers the next page, not the next screen. You will need a way to set a trigger. As you see in the code above, a trigger is set simply by adding the trigger=”” parameter in an element of the content.

The triggers avaiable for use are so far:

  • nextScreen
  • nextPage
  • play
  • showPlayer

If you want to use multiple triggers for an element, do it the HTML way:

<span trigger="play showPlayer">trigger</span>

And that’s it.

I’ve developed this framework for fun, and it may be buggy. I will probably keep updating it for a while, but I can’t promise I will update this post too.

An engaging design with HTML5

This little project consists in an HTML5 page/script to make “rich presentations”. The idea is to create a design which easily takes advantage of what HTML5 offers.

In this example I decided to implement a slideshow of photos enhanced with background music, which helps creating a very pleasing experience for the user. You could fully control the user experience also by setting timers to trigger the pages, or preventing people to skip pages by clicking, and so on. Unfortunately, the code is still very messed up, but I’m planning to organize it better and maybe share it in the future updating this post.

The project was created to experience some of the power of HTML5, which includes the audio tag and the fullscreen option (which I get with this jQuery plugin).

I didn’t try (I run linux on my PCs) but I wouldn’t be surprised in discovering that IE cannot execute the page correctly. It was tested on Firefox and Chromium, having a little better performances achieved by Firefox.

Here’s the link to the example, which uses photos taken by a friend of mine, Stefano Collovati, who I want to publicly thanks here for his help in designing the prototype.

All the photos are property of Stefano Collovati, you should contact him if you want further information about using and/or sharing them.