Web interface Dashboard Designer
A couple of weeks ago we introduced a customize-able dashboard. On this dashboard you are able to put interactive components so you have a complete overview of the most important stuff in one overview. The screenshot below shows an example of this interface for tablets (but looks exactly the same on the desktop):
The above dashboard is 100% customize-able, you can re-arrange/re-size/add/delete buttons, graphs, gauges, scenes, macro’s, weather, time and date and more. You have the freedome in choosing how you want your data to be displayed. For example numeric data can be shown in graphs, gauges or as a plain text field. It is your choice.
We where very pleased with these first results, but our users wanted a personalized dashboard. We also thought this was a good idea, so every user in PiDome now get’s it’s own personalized dashboard. But, not every user wants to log in on the web interface.
Evolving the Dashboard designer
At first we had button on the dashboard with the text “Edit dashboard” so the dashboard was editable in place. This means the user has to log in and got the possibility to edit their own dashboard. But not every user wants to do this. So we have done some extra changes so it now is possible for the both the admin as the user to change any (admin) or their own (user) dashboard.
So far the dashboard designer. On to the clients.
One of the most important clients to focus on. As written earlier we want to create a coherent interface between clients to maintain consistency. We already have started with the rewrite of the Android client but we have taken it a little step further. With evolving the dashboard designer we decided to raise the bar. Let users create a dashboard for their phone and tablets.
Take a look at the screenshot below:
Here side by side the dashboard as it looks in the designer, and on an (small display) Android client. What you see is what you get. Do you also notice the design of the components? They are exactly the same as the web interface.
Not lesser important, Android tablets. These devices have a larger screen. This means you can create larger dashboards. The above screenshot also applies on tablets but then with a bigger display. So nothing different there. Because tablets have bigger screens there is more to utilize. So what we have done is use this extra space. Take a look at the screenshots below to see what we mean:
The most important difference is that it is possible to show locations and complete listings of what you have on the tablet interfaces. The media display for tablets also has room for fanart. The screenshots are also a bit outdated already as the media displays now also shows your current playlist. It is a continuously evolving process.
The android client tries to find out what kind of device you are using and will adjust it’s information according to this. Later versions will ask you what you are using if it can’t figure it out (not uncommon for android devices).
Some other android client changes
We have updated the menu. It now looks like this:
Also already outdated, as there already is functionality added. It shows the same information as in the earlier updated client but this design gives us some extra room. Also the menu looks exactly the same on the tablet as the phone screenshot above. You will get some differences in functionalities though. The presences (person group icon) and the scenes (lamp icon) will show a popup on the tablet but a listing on the phone.
Another change in the android client is the at first we created a service which runs in the background and only runs when the application was started. We have changed this to a service which is capable to always run in the background. Android sometimes still kills this service and we are looking into come around to this. You will in the end be able to set a setting to have the service always running or only when the app is running.
This one hurts a little bit (a lot to be honest). The original desktop client was not only an enormous undertaking (months of work, numerous iterations), but also my very first JavaFX project. I resent this client as much as i love it. It behaved like an operating system with a full blown window manager, task bar, desktop icons, shortcut creations, widgets etc.. But it became completely unmanageable also, creating an OS like system targeted at desktops which already have an OS sounds weird, right? If i have time, i will do stuff with it. But for now. It ain’t an official client anymore and has been superseded with a new desktop client. Also the original desktop client was way to graphical demanding for the raspberry pi.
This new desktop client looks exactly the same as the tablet interface. The difference is that the desktop interface has a close and full screen button. The desktop client runs on Java 8 and will run on every desktop device. This includes Windows and *nix (including mac).
Question: Will the widget mode return as in the original desktop client? Answer: Maybe, depends on demand.
Raspberry Pi (arm) client
As with the desktop client the Raspberry Pi client looks like the tablet interface. But this version needs some extra attention to be able to run. What we have done is we include the Java 8 SE for ARM and JavaFX for ARM.
There are some limits with this client. You are not allowed to use it in any commercial environment or purpose because of this bundling. Also we have not modified the supplied Java 8 SE for ARM binary or copied the JavaFX runtime libraries inside this Java 8 SE runtime. When you download this client you will see two folders with one containing the Java 8 SE runtime and one with the JavaFX runtime next to and not inside it.
I can now officially say: “Working on it”.
How it’s done
One combined word: JavaFXPorts. The client is written in Java and uses JavaFX for the UI. Some small components are platform specific like for android and desktop environments. But in the end, the JavaFXPorts project made it possible to be able to have a single client on all of the above devices. I really think this is an awesome piece of software which puts together all the needed parts.
Finally, clients that look exactly the same, work exactly the same (with some logical differences) and multi purpose. We are very proud to make this announcement as a lot of work and especially a lot of community input has been put together to create these clients. These clients are still alpha releases, but they are upgrade safe! This means that you can just copy new versions over old versions without loosing settings. Also one of the biggest advantages for us in this project is that these clients all share a single code base. This means we only have to write the source code once. We only have t consider some small things like screen sizes and if you are using a mobile device or not.
By using JavaFXPorts we are able to quickly iterate over different versions and we do not have to manage a lot of different code bases. This helps a lot in quickly add/fix functionalities once and have this reflected on all clients at the same time.
There is a lot more then shown in this post. but, it was about time, ain’t it?
Some last screenshots. All the current clients:
And last but not least, a clip to show the client in action on a Raspberry Pi 2 and a low budget Android phone:
We want to thank
This one is very important. There are a couple of very important people for the Java community as well for the JavaFX eco system which make or have helped to make this project possible.
- Johan Vos (Gluon) (Twitter: https://twitter.com/johanvos, https://twitter.com/gluonhq)) Without him this project would not exist. He/They are the guys who created JavafXPorts of what is the foundation of this project so we are able to create a single client which runs on all the above devices.
- Jens Deters (Twitter: https://twitter.com/jerady) For his ideas, input on the project, hours of skyping and his amazing support for the FontAwesomeFX project which this project uses.
- José Pereda (Twitter: https://twitter.com/jperedadnr) Hours debugging JavaFX on mobile, hours of skyping, project inputs and supporting me on some JavaFX components.
Thank you guys!
P.S. The clients are available on the Download page