Creating Desktop using HTML as a GUI front-end

[alsaf]

I've tinkered about with projects that create desktop apps that use HTML as a GUI front-end (think off it as a webpage with the desktop app as a sort of server). These are the same as Mac's Dashboards widgets.

I like the idea of HTML front-ends. With my experience of mixing HTML technology with desktops apps the greatest benefit is the wealth of documentation available, the ease of creating GUI's and the flexibility of experimenting with new different types of GUI layouts.

I've had a look at HTML5 and by the looks of it, it will be easier to create desktop apps with this technology. I was wondering what peoples views on this are?

[Xdega]

I think that could be very interesting. You should keep us updated would be cool to see what you could come up with.

[alsaf]

Just to give a bit of background, there seems to be a few web based frameworks on the desktop, the most mature ones being XULRunner and Pyjamas-Desktop

http://en.wikipedia.org/wiki/XULRunner
http://pyjs.org/

I haven't tried XULRunner but it is the framework that Firefox and associated products are run on. Pyjamas is a framework where all code is written in the Python language. Again, I haven't tried that as the web-technology it uses, WebKit, needs patched to allow DOM Python bindings (not impossible but compiling from source is a pain in a backside).

I recently came across the following tutorial which is basically runs a 'server' on the desktop which allows a Python program to manipulate a webpage run in a webKit instance much like a Graphical User Interface:

http://www.aclevername.com/articles/pyt ... index.html

The means of communication from the Python program to the webpage is via injecting JavaScript into it. The web page communicates with the Python program by changing the webpage title (which the Python program monitors). This is usually done by a JavaScript onClick event. This code is as follows:

Code: Select all

function send(msg) {
    document.title = "null";
    document.title = msg;
}

There is another alternative which I had toyed about with last year which is called SeedKit:

http://live.gnome.org/SeedKit

It was born out of Seed, a JavaScript interpreter which can be used on the Desktop and has access to GTk Desktop Libraries. It is just an application that runs a webpage but has access to the Seed JavaScript libraries.

I had written an example which takes a folder contains images and displays it using the JQuery Cycle plugin. The code is here:

[code]// image.js
var Gio = imports.gi.Gio;
var Glib = imports.gi.GLib;

// @detail: Get contents of selected folder and enter into list
// @return: file_list List of file names
function get_folder_contents() {
var file_list = [];
// Name of list, change to foler where images are stored
var folder_name = "/usr/share/openclipart/png/computer/";

// Get contents of image folder
file = Gio.file_new_for_path(folder_name);
enumerator = file.enumerate_children("standard::name, standard_size");

// Place each filename into an array
while ((child = enumerator.next_file()))
file_list.push(folder_name + child.get_name());
file_list.sort();
return (file_list);
}

// @detail: Take list of file-names of image files and create a string containing img taglist. Add these to a
// list
// @param file_list List of file names containing log files in /var/log
// @return: div_list List of file names surrounded with div tags
// @bug : Clean up by removing this function and add Jquery command to create img tags in show_images function
function add_html_tags_to_list_elements (file_list) {

var img_list = [];

// Go through each element in list, create a new variable with the file name surronded with img tags and
// add them to new img_list
for (x in file_list) {
var img_contents = '<img src = \"' + file_list[x] + '\" />';
img_list.push(img_contents);
}
return (img_list);
}

// @detail: Get image file_names and add them to image.html. This is required to use the cycle plugin
function show_images(){
var file_list = get_folder_contents()
var img_list = add_html_tags_to_list_elements(file_list);

// Add images to HTML file via JQuery
for (x in img_list) {
// create a JQuery img element
var img = $(img_list[x]);
// Append img element to HTML file in the slideshow div
$(".slideshow").append(img)
}
}

// @details This function is required to run Seed JavaScript code when running SeedKit. This function is run as soon
// as SeedKit loads the HTML file
$(document).ready(function(){

// Call function to add images to HTML files
show_images();
// Run the cycle plugin
$('.slideshow').cycle({
fx: 'scrollRight' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});

I am thinking of developing the Python 'Desktop Server' but it requires a lot of work. My motivation is to create a framework that allows HTML front-end but the other major one is to allow web-developers to feel comfortable using the framework using their web based skills. From the point of view of a web-developer, what are your thoughts on the Python and SeedKit based options?

[alsaf]

The SeedKit code didn't work

Code: Select all

// image.js
var Gio = imports.gi.Gio;
var Glib = imports.gi.GLib;

// @detail: Get contents of selected folder and enter into list
// @return: file_list List of file names
function get_folder_contents() {
   var file_list = [];
   // Name of list, change to foler where images are stored
   var folder_name = "/usr/share/openclipart/png/computer/";

   // Get contents of image folder
   file = Gio.file_new_for_path(folder_name);
   enumerator = file.enumerate_children("standard::name, standard_size");

   // Place each filename into an array
   while ((child = enumerator.next_file()))
      file_list.push(folder_name + child.get_name());
   file_list.sort();
   return (file_list);
}

// @detail: Take list of file-names of image files and create a string containing img taglist. Add these to a
//          list
// @param   file_list List of file names containing log files in /var/log
// @return: div_list List of file names surrounded with div tags
// @bug   : Clean up by removing this function and add Jquery command to create img tags in show_images function
function add_html_tags_to_list_elements (file_list) {

   var img_list = [];

   // Go through each element in list, create a new variable with the file name surronded with img tags and
   // add them to new img_list
   for (x in file_list) {
         var img_contents = '<img src = \"' + file_list[x]  + '\" />';
         img_list.push(img_contents);   
   }
   return (img_list);
}

// @detail: Get image file_names and add them to image.html. This is required to use the cycle plugin
function show_images(){
   var file_list = get_folder_contents()
   var img_list = add_html_tags_to_list_elements(file_list);

   // Add images to HTML file via JQuery
   for (x in img_list) {
      // create a JQuery img element
      var img = $(img_list[x]);
      // Append img element to HTML file in the slideshow div   
      $(".slideshow").append(img)
   }
}

// @details This function is required to run Seed JavaScript code when running SeedKit. This function is run as soon
// as SeedKit loads the HTML file
$(document).ready(function(){

   // Call function to add images to HTML files
   show_images();
   // Run the cycle plugin
  $('.slideshow').cycle({
      fx: 'scrollRight' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
   });

});


[JAB Creations]

Two critical pieces of advice...

1.) Don't use junk code like document.write or innerHTML at all for any reason. They're not compatible with XHTML, they break accessibility and they're wholly unreliable.

2.) Don't use frameworks as they add yet another level of programming, they're horribly buggy, they rely on junk code like innerHTML, they're not cross-browser compatible, they've exceptionally bloated and since anyone who knows how to trigger a JavaScript alert and their brother use it there are usually multiple conflicting instances of frameworks.

---

Any and all work that contains any of that should be completely null and void if you want your project to be considered reliable otherwise you'll be struggling with so many complications and issues that you'll likely just walk away from the project.

---

Three major pieces of advice...

1.) Turn error reporting to the most sensitive levels.

2.) Use XHTML served as application/xhtml+xml and fix parsing errors as you find them instead of years later because someone manually copied the code and ran it through a validator.

3.) Keep all your scripts limited to two files that are only served via script includes in the head element; index.js (to at the server include individual files) that does not contains only functions and onload.js that contains your onload event anonymous function along with any global variables you'll need that may change with your user's preferences.

[alsaf]

thanks for the advice, JAB Creations, much appreciated.

Just to clarify, when I mention frameworks, I am talking about the means of a webpage to communicate with a desktop-based app, which can be thought of a sort of server. I totally agree with your statement about keeping it simple by avoiding layers of programming below your code.

Your reply has also gave me some thought about the purpose of what is trying to be achieved by HTML GUI's.

As I mentioned, it is to attract web developers to the desktop and to make GUI programming easier but another crucial point is to separate the GUI code and the main code of the application.

This is desirable in two aspects. firstly, it makes the code easier to maintain and secondly, it allows people with differing skill sets to be able to contribute to projects. This would be beneficial in that the UI work can be left to somebody with web based skills which allows people with say C++ or C skills to get on with the main coding.

I need to get the right balance of when to use web based technologies like HTML5 and desktop based ones.

[JAB Creations]

A desktop GUI written in web code would be absolutely awesome and I'd personally would love to code one especially since software GUI has absolutely gone in the wrong direction the past few years.

[alsaf]

A desktop GUI written in web code would be absolutely awesome and I'd personally would love to code one especially since software GUI has absolutely gone in the wrong direction the past few years.

It can be done using SeedKit where I have written a program that displays the contents of all log files in the /var/log folder and, with the JS code example I had posted earlier, display the contents of a folder containing images.

The only problem is that SeedKit is limited to Linux and the project, as well as Seed which it is based on, needs a lot of development and the documentation is sparse. I can't see why it can't be ported over to Windows and for documentation to be created but it will take time and people willing to contribute as both are open source project which doesn't have any corporate support.

[JAB Creations]

I'm talking full OS GUI replacement, everything. The program/start menu, desktop, file manager, sign-in screen, control panel etc.

A simple JavaScript API that returns an array of whatever application's commands would pretty much be the only thing necessary I would imagine thus giving access of the OS to the rendering engine. All that would need to really be documented was how to access the OS/application array/API via JavaScript I think offhand.

[alsaf]

I believe something like what you are suggesting is being done using the Pyjamas framework which I mentioned earlier:

http://sourceforge.net/projects/pyjdwm/

Although this is done in Python, it can be done in JavaScript using Seed which exposes the underlying OS API, in this case Gtk libraries.

http://live.gnome.org/Seed

Existing Linux programs can be amended by removing the existing GUI code and replacing it with SeedKit which will allow the HTML/JS front-end.

It will take a lot of work though and as long as security issues such as injecting malicious JS code and possible DOS attacks? can be overcome then it would invigorate the Linux Desktop!

[alsaf]

Just remembered, security issues could be overcome but locking specific parts in Linux Containers which allows processes to be isolated via os-level virtualisation:

http://lxc.sourceforge.net/

[JAB Creations]

For clarification I don't have any non-web related programming background, just web stuff including Apache, PHP and MySQL so I'm more interested in using the software to build my own GUI than building the software that would allow me to build a GUI. My goal at the end of the day would be to build my own GUI and actually use it, not simply do it for the sake of doing it. That is where my interest is in this realm of things.

[alsaf]

For clarification I don't have any non-web related programming background, just web stuff including Apache, PHP and MySQL so I'm more interested in using the software to build my own GUI than building the software that would allow me to build a GUI. My goal at the end of the day would be to build my own GUI and actually use it, not simply do it for the sake of doing it. That is where my interest is in this realm of things.

The only way this can be resolved is when the software is mature enough to allow web-based devs to come to be desktop.

Apache wouldn’t be needed but unfortunately you won't be able to use PHP unless somebody writes something like Seed which uses PHP instead of JavaScript. MySQL as well as other desktop based technologies can be run.

[alsaf]

My goal at the end of the day would be to build my own GUI and actually use it, not simply do it for the sake of doing it. That is where my interest is in this realm of things.

These two projects may interest you although they are still in development:

http://mozillalabs.com/chromeless/
http://webian.org/
https://wiki.mozilla.org/B2G

The Webian and Back to Gecko projects are full replacements of GUI's on the desktop and mobile devices but the Chromeless projects looks like it is in a a state where apps similar to those of Android and Ipad can be developed now. The other good thing is that they are cross platform and in theory be able to run on mobile devices unlike the previous projects I had mentioned which are restricted to Linux (unless you can want to go through the hassle of installing libraries on Windows)