Visual Studio Code For OpenHAB On iPad

OpenHAB is amazing to empower the smart home. However, if you like to code there are various options and the best one’s relay on a Windows, Mac or Linux Maschine. If you prefer the powerful Visual Studio Code incl. the OpenHAB Extension, than you need this How To Use Visual Studio Code For OpenHAB On iPad that shows an option to get this running.

Edit OpenHAB3 with Visual-Code

Edit OpenHAB3 with Visual-Code

Index:

The Problem

The OpenHAB community is amazing and it provides not only cool bindings to enable the empowerment of the smart home, but it also offers various options to edit code, rules, items, etc. These options incl. the powerful VSCode that unfortunately is not available on the iPad. If you like or prefer Visual Studio Code, than it looks like you relay on your Windows, Mac, or Linux machine. The good message that there is a promising option to resolve this issue. This How to use Visual Studio Code For OpenHAB On iPad helps you to explore this promising option! Enjoy!

Environment Of Which This How To Builds On

This how to builds on an environment with two Raspberry Pi.

  • The first Raspberry Pi is the one on which OpenHAB is installed. For this, the standard OpenHABian image 2.5.12 was used
  • The other Raspberry Pi is used for the database, in this environment the MongoDB. This however should not matter too much as i will not be using it for this how to.

For the how to we will be installing the Visual Studio Code server, which allows us to use Visual Studio Code on the first Raspberry Pi. Lets call it the Openhabian Raspberry or OpenhHAB Raspberry.

How to Use Visual Studio Code For OpenHAB On iPad

To use Visual StudioFor OpenHAB On iPad we leverage on the so called “Code Server” package. This allows to edit OpenHAB code directly on the iPad. First you will learn how to install Code Server. Second this how to shows you how to configure the Code Server. Finally, the how to explains installing the OpenHAB Extension.

Lets Start

Lets install the Code Server Software. As described above, we will install code-server directly on the openhabian Raspberry.

First of all, you like to understand which release you like to install. I recommend the latest version, because this should also consist on all the security fixes, operational fixes, etc. You maybe like to go more experimental with the latest Pre-Release. To find the versions available, simply check out this link on Github. In this scenario we are using the currently latest available version which is Code-server version 4.5.2

  • Log in to your Raspberry
  • Once logged in, you like to create a backup, leveraging on your favorite system backup tooling
  • Now we start with the installation. Follow the below.

Install Code-Server On Your Raspberry

First we create a directory to download and work with. We do this in the openhabian user directory which is /home/openhabian/.

mkdir /home/openhabian/code-server

Then we download and install code-server by leveraging on the code-server script available on github.

sudo https://github.com/coder/code-server/releases/download/v4.5.2/code-server_4.5.2_armhf.deb
sudo dpkg -i code-server_4.5.2_armhf.deb 

After successful installation, the code server would start on port 8080. This means http://YourIPAdress:8080. For this you need to ensure that port 8080 is free. Alternatively change the port. Since we know that by default openHAB is leveraging on port 8080 it might be a good idea to change the port before starting code-server the first time. For this, follow the „Change Code-server Port“ chapter. Otherwise, jump over the „Change Code-server Port“ chapter and go the next one.

Change Code-server Port

To change the default port we first need to enforce code-server to create a config file which maybe is not yet made (at least for me this was the case). You do this by the command of code-server —port 8088.

 code-server --port 8088
[2022-08-18T20:08:55.026Z] info  Wrote default config file to ~/.config/code-server/config.yaml
[2022-08-18T20:08:58.297Z] info  code-server 4.5.2 35372d3832521d25327e11c9776096730df22ecb
[2022-08-18T20:08:58.305Z] info  Using user-data-dir ~/.local/share/code-server
[2022-08-18T20:08:58.342Z] error listen EADDRINUSE: address already in use 127.0.0.1:8088

Once done, edit the newly created file config.yaml that in which you can change the configuration of the code-server.

sudo vi  ~/.config/code-server/config.yaml

Edit it to make it look like something like this:

 bind-addr: 0.0.0.0:8088
auth: password
password: EnterYourPasswordHere
cert: false

Once done, start the server by entering 

sudo systemctl enable --now code-server@openhabian

Start code-server

Once the configuration is completed, you can simply start the code-server by entering

sudo systemctl enable --now code-server@openhabian

In the next step you open in your Mac, iPad, tablet or PC browser the following link:

 http://192.168.YOUR.IPAddress:8088/login

The browser will ask for a password which you can find and edit in your config.yaml. More details in the Change Code-server Port chapter.

Visual Studio Code For OpenHAB On iPad

Visual Studio Code For OpenHAB On iPad

Login, follow the guidance and you are ready to code! Enjoy!

Add the OpenHAB Extension

Once you arrived in the main menu of code-server you simply click on Settings and then select „Extension“. Please see in the below picture.

Add the OpenHAB extension to Code-server

Add the OpenHAB extension to Code-server

Once clicked you simply enter into the search field „openHAB“ and click install (see picture below).

OpenHAB Extension for Code-server

OpenHAB Extension for Code-server

 

Open OpenHAB configuration in Code-Server

This is very simple! You simply have to select the right folder which is in a standard installation. Usually in OpenHAB3 it is /etc/openhab.

Edit OpenHAB3 with Visual-Code

Edit OpenHAB3 with Visual-Code

Additional Information

Find more great How To‘s for OpenHAB via the following link: OpenHAB How To‘s. This consists of How To‘s starting from hardening guides for security reasons, ending with adding additional tooling like a UniFi Controller to your OpenHAB installation.

Further, there is a big community for OpenHAB. Check this link for the OpenHAB community!

For Code-Server you like to check GitHub for Code-Server. Follow this link to Code-Server.

A good documentation for Code-Server can be found here.

Please let me know your feedback to this HowTo or any other sort of input that you had via the feedback form

Please be aware, that you are free to link to this page or recommend it to friends, families or post a link into another community.