A Vue.js Web Application for Freedomotic Open IoT framework

A Vue.js Web Application for Freedomotic Open IoT framework

fd-vue-webapp A Vue.js web application for Freedomotic Open IoT framework

fd-vue-webapp

A Vue.js client for Freedomotic framework.

Scope of the project

This repository contains the implementation of a front end client for Freedomotic. The aim of this project is to reproduce all features already integrated in our Java frontend, that's available here.

To have a broad idea about its features you can have a look at our YouTube channel.

Screenshoot

Dashboard Page

Dashboard page Dashboard page with environment menu open

Things Panel

Things Panel

Plugins Panel

Plugins Panel

Automations Panel

Automations Panel

Mobile

Mobile home page Mobile things page Mobile plugins page Mobile automations page

Pre-requirements

In order to execute this fd-vue-webapp client locally, first you need to download and launch an instance of Freedomotic on your machine. Freedomotic is a framework built in Java, so the only pre-requirement to make it running is to have a Jre8 installation on your machine.

Download and launch the latest build of the framework

You can download the latest available daily build available here

The zipped version of this daily build contains a jar file, named freedomotic.jar that you can run by executing the following command:

java -jar freedomotic.jar

Freedomotic RESTful endpoints

Once launched, a local setup of Freedomotic RESTful APIs will be available at localhost:9111.

Freedomotic Polymer client, an inspiration

Some time ago we developed a first client prototype using Polymer (here it is a brief video showing its features). Polymer client source code is hosted here on GitHub: maybe you can look at it to have some inspiration.

WARNING: At the moment that project is deprecated.

Technical notes

This project uses Vue.js and Quasar framework.

How to launch it

Clone or fork this repository, then follows the following set of commands:

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# create a production build
npm run build

Contributing

If you like to contribute to this project, please follow our guidelines, available here.

Download Details:

Author: freedomotic

Demo: http://fd-vue-webapp.herokuapp.com/

Source Code: https://github.com/freedomotic/fd-vue-webapp

vuejs vue javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.