First setup openHAB and the VThing Binding as in the non-GUI openhab-tryout-guide.md.
Go to http://mymachine:8080
The gui prompts to create a user login. This will be your admin login.
Skip the setup for now.
First we have to chose a Binding, then create the Thing.
Click the blue plus square right below. (+)
We tell the system what kind of device it should create. A Binding is a driver for a kind of device. Instead of a driver for a graphics card, we need a driver for a VThing.
Click the "VThing Binding" line.
Click the "VLamp" line.
Replace the suggested Unique ID with vlamp1.
Label it VLamp1.
Click Create Thing.
You should see a line with your VLamp1.
A Thing (device) has attributes, e.g. on/off state, color or any other attribute of a physical device.
Attributes get accessed by a connection to the attribute. The connections are called Channels in openHAB. Data flows between the openHAB System and the Things through Channels.
Our virtual lamp has three attributes:
- state
- color
- ontime
with types Switch, Color and String. These are types as in a programming language. Possible values for Switch are ON and OFF, for Color Hue tuples.
To use the Things, we need the other end to the Channels. These ends are called Items. Page definitions and rules work with Items.
We create the Items from within our Thing, starting from its Channels.
We'll need all three Channels, so we create three Items.
Select our VLamp1.
In the red top lines click on Channels.
Click on the state(Switch) line.
An Add Link to Item.. line appears. Click it.
We have no Items yet, so click on the Create a new Item line.
A property sheet for the Item opens.
Enter:
Name: vlamp1_onoff
Label: VLamp1 State
The system knows from the Thing definition, what type the Channel is. So in the right appears type Switch. To change it, we'd click on it, but we leave it at Switch.
Category is for selecting an icon.
In the Category line click on the template text temperature, firstfloor.. and start typing: lig. Several suggestions matching the substring will pop up. Select lightbulb.
A lightbulb icon will appear.
Leave the rest at the defaults.
We're done. Click on Link the Item to the Channel.
Our Item VLamp1 State appears on an extra line, now. Click it.
The switch is already active. Click it. It changes to on.
In openhab.log you should see a line like
2021-03-24 21:26:55.983 [INFO ] [.openhab.binding.vthing.VLampHandler] - State: OnOffType: ON
Click Cancel to go back to the Channels overview.
Repeat for the two remaining Channels and create Items:
Name: vlamp1_color
Label: VLamp1 Color
Type: Color
Category: ColorLight
and
Name: vlamp1_ontime
Label: VLamp1 Ontime
Type: String
Category: time
When your done, you should see on the Channels overview that the ontime Item counts up. You might have to click the down arrow on the right.
On the top right click Save (Ctrl-S)
Now, that we've created the Items, we can list them at
Now we can create a page containing our Items. The page is the user interface for our Thing.
Click the blue plus square right below. (+)
Create Sitemap.
Click the New Sitemap line.
On the right sheet for the page properties appears.
Enter:
ID: vthings
Label: Virtual Things Test openHAB
The page will contain a Frame, that contains a heading and blocks to display our items and therefore the vlamp1 Thing's attributes.
Click Insert Widget Inside Sitemap
A popup with widgets will appear. Select Frame.
We have now
Sitemap
- Frame
Frame should be selected.
Click Insert Widget Inside Frame
Select Switch.
Fill its properties:
Label: Lamp
Click the Item Line and select VLamp1 State (vlamp1_onoff)
Click behind Icon and type lig and choose lightbulb.
We have now
Sitemap
- Frame
-- Lamp
Select Frame again
Repeat adding Widgets to the Frame for
Colorpicker
with
Label: Light Color
Item: vlamp1_color
Icon: colorwheel
and Text
Label: On time [%s]
Item: vlamp1_ontime
Icon: colorwheel
and finally
Webview
URL: /vlamp/lampcolor.html?thingUID=vthing:vlamp:vlamp1
We have now
On the top right click Save (Ctrl-S)
Click the openHAB Logo top left.
Quite at the right you should see a little icon
On click there appear previews of Basic UI and HABPanel. Click on Basic UI.
Click on Available sitemaps Uicomponents_vthings.
Switch the lamp with the blue switch. Same with the app and down arrows at the right top area.
Click the palette icon and play with the color settings.