kreator.js checkin

I’ve reached a feature freeze state with the project, implemented all the functionalities that I wanted, the last one being image upload and resize. The files “uploaded” using the file API and the user can manipulate them in the browser but they are not included in the zip file because of size issues so he has to include them himself in the /img folder included in the archive. I have started cleaning up the code and looking for bugs to fix, I’m looking on improving the overall quality of the code I have written so far. I want to improve the interface if possible, I want a first time user to be able to get going with creating a presentation as soon as he lands on the page. I think a splash page is in order since right now the first impression for many might be confusing.

You can see the project in its latest version at http://piatra.jit.su/ or http://piatra.nodejitsu.com/

I want to implement a step by step walk through for first time users. Something basic made up of speech bubbles that will move around the interface describing the basic usage of the interface so as to eliminate and confusion. Also I am going to make another screencast of the application in use.

#4 Kreator – Intelligent grid system

The project reached quite a milestone recently, I’ve implemented most of the features I’ve hoped for and I’m really proud of the latest addition: an intelligent grid system. The way it works is pretty straight forward: when you select the grid button to draw it a canvas element is added to the DOM and you draw your lines (the grid system only works on horizontal/vertical lines for now) . The end and start points (x,y points) are stored in the localStorage. When you move an element the position is checked against each line and if the element is in range of a certain line it is drawn on canvas and snaps to it.

I am currently working on a File API way to store uploaded images, so you can add them several times in your slides or reuse them in other presentations. The way it would work is that you can drop the images or select them via a input file button and I would use File API permanent storage to store them. I would also add a nice interface for the user to  access the images later and I think it adds up to a interesting feature.

I hope to add that latest feature as soon as possible so I can get on refactoring some of the code and fix the bugs :D

#5 Webkit – Particle System

Hello,

Since my last post I have added a time property, as well as textures. There are some bugs wich I’ll try to resolve  this week. I’m also making a video demo for presenting the particle system with a little information and some examples so that anyone can understand how it works and looks. The video will be on Youtube probably some time this week.

#3 Kreator – More features more fun

The project is going along great. It received a lot of features

  • Google webfonts is now on the list, you can use any font just by typing the name
  • User settings are saved using localStorage and converted in a stylesheet
  • You can add custom CSS to your elements if you want to give them extra features
  • You can now rotate each element through an inline button that has been made available, you can use both an inputted value or a slider to set the value
  • Moving elements is now less laggy and I’m working on a feature where the user can draw his own grid system after which the elements align.
  • I removed templates
  • And fixed bugs

Working with images is still something I have to be working on. I will make drag and drop available on every slide and some feature in which you can add a background image to the whole presentation.

#4 Webkit – Particle System

Since my last post I have perfected the simple particle system and finished the movements. Since then, I have worked on rendering multiple movements and adding textures for the movements.

After the two will be finished, I will make a demo for the basic particle system and put it probably on my next post.

I also will put a video on Youtube with a presentation of what it can do.

#3 Webkit – Particle System

Since my last post I have completed the program for point particles (no textures). I have a little problem with the compiling of the opengl functions, but nothing that cannot be fixed. I have added a function for textures, but it isn’t ready.

The code can be found on Github, but if anyone wants to download it, you should wait, because next week I will put my final commit:

https://github.com/vlad-iordanescu/Particle-System.git

Next week I will start adding my program to the Webkit source.

#2 Kreator – reveal.js slide tool prototype

It’s been awhile since the last blog post and I have made a lot of progress with the project. Now you can actually download your presentation in a nice .zip archive, all packed with the css and js you need for your viewing pleasure. Nodejitsu entered public beta and being on the waiting list for pretty much 6 months I got an account right away, now the app is also online at here it’s very much up to date, I deploy a new version every time I push updates to the github repo.

A roundup of new features

  • Settings, allowing you to customize background color and default font size
  • Download button
  • Presentation mode in fullscreen (preview for the presentation)
  • Updated the code to the latest reveal.js version
  • Now with nodejs backend goodies
  • A lot of bug fixes

An issue I am currently having is with the user images. The server does not store any content from the slides, it just receives the content adds it to the archive and sends it back your way and I would like to keep it that way for images too. It would be a scalability problem if many images get added at once or even privacy issues. One solution might be to upload the images to imgur when the user adds them to the slides and embed the url or use imgur as temporary storage given that the API provides you with a delete url.

User settings are not available in the downloaded presentation, but they will be soon enough I plan to add a custom css file where all the options will be saved. This file will be created from scratch when the user requests to download his presentation. I need to find a CSS parser of some sort that converts JSON to CSS rules.

Templates would be a nice feature but I’m not sure if I will keep them since you can customly move elements around and position them wherever you like, making it a much for flexible option.

Custom fonts are still on the list. Google Webfonts exposes an API so it is just a matter of making the UX easy for the user to understand.

The backend uses NodeJS, I use 0.8 on my localhost and 0.6 on the server. ExpressJS for routing and templating (ejs module for parsing html, quick and dirty, I will rewrite the template in jade but that is not a priority), requestjs for fetching the different files that go into the archive, node async to make sure those request happen in the correct order and node-native-zip to create the archive.

That’s about it, hope I will manage to accomplish the things I discussed here until my next blog post <3

#2 Webkit – Particle System

The progress in the past two weeks has been steady and on schedule.

I have written the source code for a basic particle system with points, textures will added in the near future. I also worked on the a couple basic movements, for example:

- expanding from a point

- a ripple effect(like in water)

- a curve or straight line between two points

- a random movement on the screen

I also included some room for customization, like size of the particle, the color(or transition between two colors), movement speed(some basic accelerating and decelerating effects).

I wrote the rendering file for a standalone product to test the behavior of the particle and fix any bugs that could appear.

The next step is to include this particle system with webkit and expand it.

#1 Webkit – Particle System

Hello my name is Iordanescu Vlad and I’m currently working on implementing a particle system for webkit. A work in progress plan for to upcoming particle system can be viewed here:

https://docs.google.com/document/d/1qEThn8dueQWUupAf83Jh21POhr8-Lpr8ED2KCKLG-fg/edit

I downloaded the source code and documentation for chromium and i will inspire my work from the css shaders. I haven’t started coding yet, but I will start first thing next week.

More details will be giving this upcoming week.

Introducing Kreator an interactive reveal.js slide creator

If you don’t already know reveal.js is a CSS 3D slideshow tool for quickly creating good looking HTML presentations, you can see it in action here. I have often had to create presentations and almost every time it has been related to a web application or technology. Therefore going into a program like PowerPoint or Impress felt a bit weird, the interface always seemed cluttered and awkward and I was never good at it. Coding is what I like to do so writing HTML for a presentation feels like home and reveal.js makes it a lot easier, the default style makes anything look great. Kreator.js is here to help you avoid all the boilerplate code you have to write every time and lets you get on with what you really want: writing a great presentation!

Features*

  • - Create your slides in any direction you like and edit the content inline. No more HTML formatting and tweaking, you concentrate on the content and Kreator will do the rest
  • - Custom fonts from Google Fonts for an extra touch of good looks
  • - Saving your presentation in the form of a gist for safekeeping
  • - Importing existing reveal.js presentations. You just found out about Kreator ? Bring your existing presentations in for a tweak.
  • - Easy image manipulation, drag and drop, resize, grid alignment
  • - Download link for your presentation for any advanced tweeks that the application might not be prepared

*this is what is planned so far for this project, some might be added along the way, some might be removed, some I might not be able in implement

Kreator comes as a response to a reveal.js issue on github which asks of a GUI Editor for reveal.js. I offered my reply and hope that people will submit features to this project. So far I have commited code on an almost daily basis. There is no online version at this point but the code is available on github. The actual code is javascript, and I have used LessCSS for the interface. My thoughts are that this should be an application mostly client side and that is why there is currently no backend. It will be implemented in nodejs and when that happens I plan on switching from Less to Stylus and to use Jade for the templating language. The backend will receive all the content of your presentation and serve it back in a nice zip archive along with reveal.js standard files and your custom formatting.

I’ve managed to get some features of the interface working, if you try it out you can get a general feel of how this tool will work out, I’m still trying to grasp the flow of creating a presentation to see how I can make things easier for the user. My main inspiration is Dribbble, the amount of attention to details people put into some of those shots inspire me to pay more attention to the UX.

There is of course a github project here https://github.com/piatra/kreator.js and all feature request are welcomed on the issues page where I have started adding my own goals for this project.

I’d like to talk about the tools I’m using for this project. I’m interested in trying out new stuff. First off I am running Chrome Canary you can run it along side your current Chrome version if you want to or any other browser, I run this dev build because I want to have early access to APIs. Sublime Text 2 is my editor of choice I’ll just say that the workflow with this editor is unbeatable (add in Sublime Package control for easy plugin installation LiveReload, JSHint, JSLint and your development experience will change). Apart from this I’m trying out RequireJS for loading script modules, so far the learning curve is painful but I am was promised great advantages. More on the tools in future posts.

There are currently 6 watchers on the project I hope to draw more attention and even some contributions in the future.