freedomotic / fd-vue-webapp

A Vue.js web application for Freedomotic Open IoT framework

Freedomotic Open IoT Framework

Official website is https://www.freedomotic-platform.com

Freedomotic is an open source, flexible, secure Internet of Things (IoT) application framework, useful to build and manage modern smart spaces. It is targeted to private individuals (home automation) as well as business users (smart retail environments, ambient aware marketing, monitoring and analytics, ...)

Freedomotic can run also on Raspberry Pi and can easily interact with DIY Arduino projects.

Starting from 2 Feb 2014, this is the Freedomotic mainstream repository. Previous repository was hosted on googlecode http://code.google.com/p/freedomotic

Requirements:

• Java Open JDK version 11+ or another JDK (to install on Ubuntu: sudo apt-get install openjdk-11-jdk)
• Maven version 2 or 3 (to install on Ubuntu: sudo apt-get install maven)
• Any OS with Java support (Linux, Windows, Mac, Solaris ...)

Development status:

• Current released version: 5.6.0 'Commander RC4' (released on 16 Aug 2017)
• Version in development (HEAD of this repository): 5.6.0 'Commander'

Quick Start

Follow these instructions if you want to compile Freedomotic from source (eg: to develop your own plugins). If you just want to try it, just download the precompiled binaries you can find at the official download page https://sourceforge.net/projects/freedomotic/

1) Fork Freedomotic on GitHub

• Create an account on https://github.com if you don't have one.
• Fork Freedomotic (What does it mean?) following this link: https://github.com/freedomotic/freedomotic/fork.
• Create the local clone of your online fork with this command:

git clone https://github.com/YOUR-GITHUB-USERNAME/freedomotic.git

Now the repository is ready to work with.

2) Enter the new local folder

cd freedomotic

3) Install the jar loader on local Maven repository

In order to compile the code you need to add the agent with a custom classloader (for loading jars at runtime in Java 9+). This file called freedomotic-jar-loader-0.0.1.jar is included inside third-party-libs folder.

So enter this folder

cd third-party-libs

and execute

mvn install:install-file -Dfile=freedomotic-jar-loader-0.0.1.jar -DgroupId=com.freedomotic -DartifactId=freedomotic-jar-loader -Dversion=0.0.1 -Dpackaging=jar

4) Compile Freedomotic with Maven

mvn clean install

5) IMPORTANT!!!! THIS IS REQUIRED: Copy the example-data folder into freedomotic-core/data. If you miss this step Freedomotic won't start

cp -r data-example/ framework/freedomotic-core/data

6) Run Freedomotic

java -javaagent:third-party-libs/freedomotic-jar-loader-0.0.1.jar -jar framework/freedomotic-core/target/freedomotic-core/freedomotic.jar

As an alternative you can start freedomotic-core project from your favourite IDE.

Getting help

Having trouble with Freedomotic? We’d like to help!

• Check out the user manual for reference documentation.
• Write on the mailing list
• Send an email to [email protected]
• Open an issue on https://github.com/freedomotic/freedomotic/issues

Contributing

Want to help us? It's very simple and funny. Here how to do.

License

Freedomotic is an Open Source software released under the GNU GPLv2 license.

Partners

This project is supported by:

fd-vue-webapp's Issues

Create a landing page (login form)

The landing page should be a login form to access to the dashboard.
Something like this

The code of the old Polymer client is https://github.com/freedomotic/fd-polymer-webapp/blob/master/app/index.html

Role component

This component is used to manage system roles.

Advanced Mode option

This option could be useful to enable/disable advanced features.
It should be added to the System component.

Markerplace component

It is used to represent the plugins' marketplace.
It shows a list of categories and for each of them a list of available plugin.

We can start from related Polymer component.

Here a screenshot from Jfrontend

Introduce a static background for the client

At the moment, the background of each screen of the client is randomly selected from a set of Flickr URL.

We'd like to get rid of this behavior by introducing a single static asset, namely a background.png. Since the color of Freedomotic logo is a green one, we'd like to have an image containing either #8bae2d or #75c200.

Create 'Plugin' Vue.js component

We want to convert this Polymer component to Vue.js.
It's the basic component to create the plugins' list.

Manage websockets

We need to manage some websockets to receive updates about plugins or things state or messages from the framework.

We could create a component for this based on vue-websocket or other solutions.

Here the Polymer component developed for that.

Tooltips for buttons not showed in Firefox

It seems a known problem as reported here.
Chrome is OK.

Reorganize Vuex with modules

Now we have a single file for actions, a single file for mutations etc. We could create different modules to collect all actions related to triggers or commands or plugins etc.
The same for mutations and application state.

Environment component

This component is intended to show a map with all the things in the environment.
Some features:

• drag and drop things
• show things' properties
• add new environments
• delete existent environments
• change environments' properties (name, rooms)

Prepare webpack scaffolding

In order to setup a proper environment for this project it could be useful to define a clean scaffolding containing the structure of the source code to start to work on.

It is adviced to use Webpack 2.x.

The Javascript framework of use is Vue.js.

AutomationPanel component

This component is intended to manage Freedomotic automations (aka reactions).
We'd think about the best UX.

Note: no component is currently implemented in Polymer client.

Introducing components documentation

Components should be properly documented.
propdoc is a possible solution.

Introduce responsive design

In order to make the client responsive we need to adopt a good solution for this.
I found out

• vue-mq
• vue-responsive

Vuex introduction

I see that in order to deal with client I18N, it has been introduced a dependency to Vuex.

Is it worth to use Vuex to manage all the model of this application? Opinions anyone?

@mcicolella @williamparry

Manage toast messages

We need a way to show info, warning, error messages.
I found out some interesting components based on Vuex:

• vuex-toast
• vue-toasted

Adding BrowserStack logo

This issue is intended only to upload BrowserStack logo.

Create a dashboard for Vuejs client

This dashboard can be used for desktop and tablet visualization.
Here the version developed in Polymer

The components should be converted or adapted to the new Vue.js client.
Demo available at try http://104.236.92.231:8090/ (credentials admin/admin)

Add Login component for mobile GUI

It should be called MobileLogin and loaded instead of Login when a mobile platform is detected.

InfoBox component requires a "title" attribute for i18n

Under the icon it shows action property as a title so if you translate it by i18n openWindow() doesn't work anymore.

Create a connector for RESTful API

Our framework exposes a RESTful API (see code https://github.com/freedomotic/freedomotic/tree/master/plugins/devices/restapi-v3).
To try it start Freedomotic and point your browser to http://localhost:9111 (API documented by Swagger).

We want to connect this Vue.js client to the RESTful service.

In the case consider a possible reuse of code written for another client in Polymer:
https://github.com/freedomotic/fd-polymer-api-settings
https://github.com/freedomotic/fd-polymer-webapp
https://github.com/freedomotic/fd-polymer-rest-service

User component

This component is used to manage users.

Populate Environment component with things

Every Environment component should be populated with a list of related things.
For developing purpose it's possible to retrieve the list of things from

fd-vue-webapp/src/store/index.js

Line 45 in ce3a25b

environmentThings,

.
Every element in the list has x,y coordinates for position and a reference to the right icon to show (based on the current representation).
We need to add an 'edit mode' to enable drag and drop.
Right click on each of them calls Things Editor component to manage them.
Mouse over an icon shows its details.
#41

Zone component

It is used to represent a zone inside an environment (#41).
We can start from related Polymer component.

Add country flags to Language component

It'd be nice to change the current buttons with the flags of the countries to represent the supported languages.

Trigger component

Different mobile and desktop layouts

The following layout is good for PCs and tablets but not for smartphones.

So we should adapt the layout to different devices.

Update README.md with more info about the app

System component

Currently Polymer client shows only a button to shutdown the system.
We should define which controls to add to this component.

Command component

Find a way to load components only when required

Looking for web developers to create a Vue.js application

We'd like to create a webapp for our domotic framework.

The aim is to reproduce all features integrated int our Java frontend https://github.com/freedomotic/freedomotic/tree/master/plugins/devices/frontend-java
To have an idea you can look at our YouTube channel https://www.youtube.com/freedomotic

Time ago we developed a first prototype in Polymer.You can try it by downloading Freedomotic and pointing your browser to http://localhost:8090. A brief video is available on https://www.youtube.com/watch?v=0pN-8mbNuQk
And the source code is hosted on https://github.com/freedomotic/fd-polymer-webapp

Maybe some components can be reused in Vue.js.

The interaction with our framework is based on a RESTful API https://github.com/freedomotic/freedomotic/tree/master/plugins/devices/restapi-v3/src/main/java/com/freedomotic/plugins/devices/restapiv3

Demo available at try http://104.236.92.231:8090/ (credentials admin/admin)
We are defining the webapp structure and the tasks to execute.
If you want to contribute please comment.

Add authentication for web client

In the first prototype we are using a fake authentication system to make some tests.
We should create a "real" system to interact with our domotic framework APIs.
Axios is already installed.
This is an interesting article.

Add PanelToolbar component

Now every "Panel" component has a duplicated code for the toolbar as

<md-toolbar class="md-accent">
          <md-content class="small-icon" @click="openSettings">
            <md-icon>undo</md-icon>
          </md-content>
          <md-content class="small-icon" @click="closeWindow">
            <md-icon>clear</md-icon>
          </md-content> 
          <h3 class="md-title">{{$t('automations').toUpperCase()}}</h3>
</md-toolbar>

We'd consider to extract this code and create a reusable component "PanelToolbar" with a property "title" and maybe another "background-color" for customization.

Convert Polymer corner-button component to Vue.js component

We want to convert this Polymer component to Vue.js.
It is used at the four corners in the dashboard as in the attached image.

Demo available at try http://104.236.92.231:8090/ (credentials admin/admin)

AutomationPanel component

This component is used to manage all Freedomotic's automations.

Transform 'props' in other properties of the Vuex global state

Affected components:

• InfoBox
• Plugin
• CornerButton

Create a 'list' component

We need a 'list' component for our Vue.js client.
Possibly convert this Polymer component.

Manage Rooms in Environment component

#41

Slider component

We need a slider component to manage some behaviors as lights' dimming but it's missing in Vue Material.
It's on the way as reported here but there isn't a deadline.
Maybe we should adopt a temporarly (or not) alternative solution. Any idea?

ThingsPanel component

Things Panel component shows a list of things based on the current selected environment.

Thing component

IMHO current Polymer implementation requires some improvements

• sensors don't show values directly but only their icon as shown in the attached image
• things' behaviors are not shown
• it's possible to create a new thing only by duplicating an existing one (after pressing '+' button that enables 'copy' feature) so you can't select a template not already present on the map

Bad color rendering in production

I tried to update our webserver plugin with the new Vue client but the rendering of colors is wrong.
In attachment a sample image. The same for Chrome and Firefox.

Introducing Trello board for organizing project implementation

What do you think to organize a Trello board to define priorities for all the issues opened so far?
Indeed, at the moment, the opened issues are definitely ok, but maybe we need to prioritize them a little in order to have a cleaner approach to development itself.

Adjust layout of EnvironmentsPanel

This component manages the list of available environments and uses Environment component to manage them.

It should be centered in the dashboard and scaled as needed.
In the Polymer client a slider with left and right chevrons is used to choose an environment.

Some problems with i18n inside attributes

When you try to add an i18n string inside an attribute an exception is raised.
For example in Dashboard component
tooltip="{{$t('user_account')}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">

Add vue-axios plugin

In order to interact with our Restful API we need to add vue-axios plugin.

Add multilanguage support for web client

We want to have a multilanguage web client.
For Freedomotic java client we are using i18N and the same for the old client in Polymer.
Here the code https://github.com/freedomotic/fd-polymer-i18next-translate
Please consider how to reuse the available translations https://github.com/freedomotic/fd-polymer-i18next-translate/tree/master/translation

Of course you can suggest other possible solutions.

Add AddButton component

This type of component could be useful for each panels requiring an 'add' function.
E.g. add a new automation, add a new thing, add a new plugin...

It could be similar to CloseButton but located at right bottom corner and having a property "function to call". This way you can reuse it in different component.

Add Travis CI configuration for web client