CIQ Layout Composer

About

This is a specific tool I've created to assist Garmin Connect IQ developers when creating user interfaces (views). This tool enables developers to create a user interface in an editor while previewing the end result in the simulator app. When finished the app can generate Connect IQ View code that can be copied into a view.

###Features

• Create drawable elements in the editor
• Show the end-result in the simulator while editing
• Generate code to include in your own app

While this tool is fully usable now, the intention is to be able to deploy this to a web server, making it far more accessible to all Connect IC developers. Running in Docker should be a simple alternative to get started.

I've used this as a way to learn React, Redux and Node development. I would appreciate feedback on ways to improve this codebase.

Show and Tell

####Feature Animation

Based on:

• Garmin Connect IQ
• Swagger API
• MongoDB
• react-redux-universal-hot-example
• Universal rendering
• Both client and server make calls to load data from separate API server
• React
• React Router
• Express
• Babel for ES6 and ES7 magic
• Webpack for bundling
• Redux's futuristic Flux implementation
• ESLint to maintain a consistent code style
• redux-form to manage form state in Redux
• mocha to allow writing unit tests for the project.

Requirements

• Node / npm
• MongoDB

Installation

npm install

Running the App

It is possible to run this as a full development image, but also in separate docker containers. See descriptions below for alternatives.

Running Dev Server

(Make sure MongoDB is installed and running)
(run this is a separate terminal)

>npm run dev
open your browser to http://localhost:3040

Running the Connect IQ Simulator App

With Eclipse and the Connect IQ SDK:

Open and run the CIQLayoutViewer project
Make sure to "activate" the current layout in the editor

Running in Docker

This project has been set up to run in Docker containers. Docker Compose has been set up to run MongoDB, API and WEB as separate docker machines.

..Set up docker on your system (windows/mac/linux)

>docker-compose build
>docker-compose up

>docker-machine ls to determine the ip adress
open your browser to http://<ip address from docker-machine>:8080
NB - you also need to point the Connect IQ Viewer application to this ip address.

Alternative - Running production Server

NB - This is not needed for testing/development

(Make sure MongoDB is installed and running)
(run this is a separate terminal)

>npm run build
>npm run start
open your browser to http://localhost:8080

Documentation

• VIEWER.md for details about the simulator Viewer app
• API.md for details about the API
• Development info contains details about Development.

FAQ

This Faq will contain more information at a later stage Check issues or create an issue for any unresolved issues.

Version history

• 0.1.2 Added/Enabled Docker containers
• 0.1.1 Fixed to run production scripts
• 0.1.0 Initial version

Roadmap

There are many things that I had to omit in the first release:

• Publish to a web server as an open source community tool
• Enable user login and use the Connect IQ Viewer as an app on their watch
• Ability to set order of elements (z-order)
• Duplicate elements
• Watch constraints and images
• Visual editor to set/draw coordinates
• Polygon and Bitmap elements
• Input validation

Contributing

Using Waffle.io to handle backlog/issues:

I am more than happy to accept external contributions to the project in the form of feedback, bug reports and pull requests.

If you would like to submit a pull request, please make an effort to follow the guide in CONTRIBUTING.md.

---

Thanks for checking this out.

– Håkon Rossebø, @hakonrossebo