Dashboard UI suitable for tablets

@rsachoc You’re most welcome! Great to hear that its all sorted.

The icons we use use are from “Font Awesome” - https://fortawesome.github.io/Font-Awesome/icons/. The bundled font awesome in Dashing is a few versions behind the current release, but if you have a look at the link, you should see most of the icons that are available and their names.

Hi @WuGGu,

I also tried to plot a graph. However, I was also not very successful. At least, I was able to load the data from the database, but I don´t get the data in the right format to pipe the data to the widget.

require 'mysql2'

SCHEDULER.every '15m', :first_in => 0 do |job|

  # Myql connection
  db = Mysql2::Client.new(:host => "localhost", :username => "openhab", :password => "WVnCadUKTSvyqbfn", :port => 3306, :database => "openhab" )

  # Mysql query
  sql = "SELECT Time,Value FROM Item93 WHERE Time >= DATE_ADD(NOW(),INTERVAL -1 DAY) order by time asc"

  # Execute the query
  results = db.query(sql)
  
  acctitems = Array.new
  # Sending to List widget, so map to :label and :value
  acctitems = results.map do |row|
    row = {
      "x" => row['Time'].to_time.to_i,
      "y" => row['Value']
      }
  end

  # Update the List widget
  send_event('grapha', points: acctitems)

end

Anyone with enough Ruby skills here?

EDIT:
I managed to get it working. I updated the upper scripts so that a graph is rendered in the grapha widget based on the data from the mysql data source.

The definition in the dashboard is like the following:

<li data-row="4" data-col="5" data-sizex="2" data-sizey="1">
   <div data-id="grapha" data-view="Rickshawgraph" data-renderer="line" data-max="35" data-min="-10"></div>
</li>

BR
André

I’ve begun experimenting with some of the different icons available, and was wondering if it is possible to toggle the background color of a widget?

I found how to toggle the background color of the icon itself, but not the widget yet.

In doing some google searches, I think there might be a class ‘status-danger’ and ‘status-warning’ to make a widget pulse as well, which would be pretty cool/neat for alarms.

Yes, its certainly possible to change the widget background colour.

If you want a permanent/fixed background colour, you could probably add something like style="background-color:#452136" into the widget’s div tag in the layout file.

If on the otherhand you want the background colour to be dynamic, depending on the current value of the widget’s state, then you’d have to code it into the coffeescript of the widget and add corresponding scss file entries. Have a look at the Ohalert widget which does exactly that - I use this widget to show visually when one of the outer doors are left open and so it’s background colour changes depending on whether the state of the openHAB item is open or closed.

@smar - Thank you for the tip to look at the ohalert widget. It turned out to be easier than I thought.

I ended up changing the ohswitch to use a lightbulb icon and then toggle the widget background if the light is on or off.

Still learning all of this, but its ‘fun’.

I also asked on the font awesome github of the ability to create a home ‘collection’ of icons for things like windows, doors, TV, etc. Hopefully its something they’ll consider adding in the future.

I’m guessing one pitfall though is that the icons are relying on an internet connection. One of the benefits of openhab is that we can control things without a internet connection (should it go out on you). I haven’t tried yet either, but I would think is possible to host images on your server and point to those instead if you wanted to.

EDIT. I think I may have something slightly incorrect though. I noticed if I refresh the browser, the widget background returns to the default dark grey vs the color what I set for on/off. Is it possible to have the background page get update correctly on a page refresh?

@ptmuldoon I’m not sure that we need to be connected for the font awesome icons, as the various ttf/otf/svg etc files are stored locally (in the /assets folder).

WRT the background colour issue, I am not seeing that. Even after a refresh, the widget (Ohalert) background is correctly set based on the state of the openHAB item. There maybe something missing in the coffeescript for the switch that you modified.

I would also love to get the #Ruter widget. @torsteinsunde

@Tms_Hervik_Fuglm @gaute91
Sorry guys for not getting back to you earlier. The setup to run the Ruter widget is kind of messy. Ideally, somone with a knowledge of json would set this up as a job in ruby. Anyways, here it goes!

Sourcing the data
I’ve added the two bus stops as HTTP-bindings in the configuration file of openhab. Check out the API documentation of Ruter on how to manipulate this into your requirements.

http:RuterSann37.url=http://reisapi.ruter.no/stopvisit/getdepartures/3010324?linenames=37&json=true
http:RuterSann37.updateInterval=30000

http:RuterSann5434.url=http://reisapi.ruter.no/stopvisit/getdepartures/3010516?linenames=54,34&json=true
http:RuterSann5434.updateInterval=30000

The json string from the http-binding is parsed and added as items. I parse the 3 next departures per direction (south/north):

DateTime Ruter_37s_1n "[%1$tR]" (ruter) {http="<[RuterSann37:60000:JSONPATH($..MonitoredVehicleJourney[?(@.DirectionRef==2)].MonitoredCall.ExpectedDepartureTime[0])]"}
DateTime Ruter_37s_2n "[%1$tR]" (ruter) {http="<[RuterSann37:60000:JSONPATH($..MonitoredVehicleJourney[?(@.DirectionRef==2)].MonitoredCall.ExpectedDepartureTime[1])]"}
DateTime Ruter_37s_3n "[%1$tR]" (ruter) {http="<[RuterSann37:60000:JSONPATH($..MonitoredVehicleJourney[?(@.DirectionRef==2)].MonitoredCall.ExpectedDepartureTime[2])]"}
DateTime Ruter_37s_1s "[%1$tR]" (ruter) {http="<[RuterSann37:60000:JSONPATH($..MonitoredVehicleJourney[?(@.DirectionRef==1)].MonitoredCall.ExpectedDepartureTime[0])]"}
DateTime Ruter_37s_2s "[%1$tR]" (ruter) {http="<[RuterSann37:60000:JSONPATH($..MonitoredVehicleJourney[?(@.DirectionRef==1)].MonitoredCall.ExpectedDepartureTime[1])]"}
DateTime Ruter_37s_3s "[%1$tR]" (ruter) {http="<[RuterSann37:60000:JSONPATH($..MonitoredVehicleJourney[?(@.DirectionRef==1)].MonitoredCall.ExpectedDepartureTime[2])]"}

A problem with this, is that when there are no buses that run at night your log will be full of errors and warnings. This is due to the fact that the json strin beeing parsed is empty…

Sending data to dashing
I send the parsed data to dashing by concatenating the string in a rule. In this rule, I also transform the timestamp into “minutes left”.

rule "Ruter"
	when
			Time cron "0 0/1 * * * ?"
	then
			lock.lock()
			Thread::sleep(3000)
			
			var DateTimeType dt_Ruter_37s_1n = Ruter_37s_1n.state as DateTimeType
			var DateTimeType dt_Ruter_37s_2n = Ruter_37s_2n.state as DateTimeType
			var DateTimeType dt_Ruter_37s_3n = Ruter_37s_3n.state as DateTimeType

			var DateTimeType dt_Ruter_37s_1s = Ruter_37s_1s.state as DateTimeType
			var DateTimeType dt_Ruter_37s_2s = Ruter_37s_2s.state as DateTimeType
			var DateTimeType dt_Ruter_37s_3s = Ruter_37s_3s.state as DateTimeType

			var DateTimeType dt_Ruter_54s_1n = Ruter_54s_1n.state as DateTimeType
			var DateTimeType dt_Ruter_54s_2n = Ruter_54s_2n.state as DateTimeType
			var DateTimeType dt_Ruter_54s_3n = Ruter_54s_3n.state as DateTimeType

			var DateTimeType dt_Ruter_54s_1s = Ruter_54s_1s.state as DateTimeType
			var DateTimeType dt_Ruter_54s_2s = Ruter_54s_2s.state as DateTimeType
			var DateTimeType dt_Ruter_54s_3s = Ruter_54s_3s.state as DateTimeType

			var DateTimeType dt_Ruter_34s_1n = Ruter_34s_1n.state as DateTimeType
			var DateTimeType dt_Ruter_34s_2n = Ruter_34s_2n.state as DateTimeType
			var DateTimeType dt_Ruter_34s_3n = Ruter_34s_3n.state as DateTimeType

			var DateTimeType dt_Ruter_34s_1s = Ruter_34s_1s.state as DateTimeType
			var DateTimeType dt_Ruter_34s_2s = Ruter_34s_2s.state as DateTimeType
			var DateTimeType dt_Ruter_34s_3s = Ruter_34s_3s.state as DateTimeType

			var int m_ruter_37s_1n = Minutes::minutesBetween(now, new DateTime(dt_Ruter_37s_1n.calendar.timeInMillis)).getMinutes()
			var int m_ruter_37s_2n = Minutes::minutesBetween(now, new DateTime(dt_Ruter_37s_2n.calendar.timeInMillis)).getMinutes()
			var int m_ruter_37s_3n = Minutes::minutesBetween(now, new DateTime(dt_Ruter_37s_3n.calendar.timeInMillis)).getMinutes()

			var int m_ruter_37s_1s = Minutes::minutesBetween(now, new DateTime(dt_Ruter_37s_1s.calendar.timeInMillis)).getMinutes()
			var int m_ruter_37s_2s = Minutes::minutesBetween(now, new DateTime(dt_Ruter_37s_2s.calendar.timeInMillis)).getMinutes()
			var int m_ruter_37s_3s = Minutes::minutesBetween(now, new DateTime(dt_Ruter_37s_3s.calendar.timeInMillis)).getMinutes()

			var int m_ruter_54s_1n = Minutes::minutesBetween(now, new DateTime(dt_Ruter_54s_1n.calendar.timeInMillis)).getMinutes()
			var int m_ruter_54s_2n = Minutes::minutesBetween(now, new DateTime(dt_Ruter_54s_2n.calendar.timeInMillis)).getMinutes()
			var int m_ruter_54s_3n = Minutes::minutesBetween(now, new DateTime(dt_Ruter_54s_3n.calendar.timeInMillis)).getMinutes()

			var int m_ruter_54s_1s = Minutes::minutesBetween(now, new DateTime(dt_Ruter_54s_1s.calendar.timeInMillis)).getMinutes()
			var int m_ruter_54s_2s = Minutes::minutesBetween(now, new DateTime(dt_Ruter_54s_2s.calendar.timeInMillis)).getMinutes()
			var int m_ruter_54s_3s = Minutes::minutesBetween(now, new DateTime(dt_Ruter_54s_3s.calendar.timeInMillis)).getMinutes()

			var int m_ruter_34s_1n = Minutes::minutesBetween(now, new DateTime(dt_Ruter_34s_1n.calendar.timeInMillis)).getMinutes()
			var int m_ruter_34s_2n = Minutes::minutesBetween(now, new DateTime(dt_Ruter_34s_2n.calendar.timeInMillis)).getMinutes()
			var int m_ruter_34s_3n = Minutes::minutesBetween(now, new DateTime(dt_Ruter_34s_3n.calendar.timeInMillis)).getMinutes()

			var int m_ruter_34s_1s = Minutes::minutesBetween(now, new DateTime(dt_Ruter_34s_1s.calendar.timeInMillis)).getMinutes()
			var int m_ruter_34s_2s = Minutes::minutesBetween(now, new DateTime(dt_Ruter_34s_2s.calendar.timeInMillis)).getMinutes()
			var int m_ruter_34s_3s = Minutes::minutesBetween(now, new DateTime(dt_Ruter_34s_3s.calendar.timeInMillis)).getMinutes()

			dashing_ruter.postUpdate(

				//Ruter_37s_1n.state.toString +"|"+ Ruter_37s_2n.state.toString +"|"+ Ruter_37s_3n.state.toString +"|"+
				//Ruter_37s_1s.state.toString +"|"+ Ruter_37s_2s.state.toString +"|"+ Ruter_37s_3s.state.toString +"|"+
				//Ruter_54s_1n.state.toString +"|"+ Ruter_54s_2n.state.toString +"|"+ Ruter_54s_3n.state.toString +"|"+
				//Ruter_54s_1s.state.toString +"|"+ Ruter_54s_2s.state.toString +"|"+ Ruter_54s_3s.state.toString
				m_ruter_37s_1n +"|"+ m_ruter_37s_2n +"|"+ m_ruter_37s_3n +"|"+ 
				m_ruter_37s_1s +"|"+ m_ruter_37s_2s +"|"+ m_ruter_37s_3s +"|"+ 
				m_ruter_54s_1n +"|"+ m_ruter_54s_2n +"|"+ m_ruter_54s_3n +"|"+ 
				m_ruter_54s_1s +"|"+ m_ruter_54s_2s +"|"+ m_ruter_54s_3s +"|"+ 
				m_ruter_34s_1n +"|"+ m_ruter_34s_2n +"|"+ m_ruter_34s_3n +"|"+ 
				m_ruter_34s_1s +"|"+ m_ruter_34s_2s +"|"+ m_ruter_34s_3s
			)
			lock.unlock()
end

Dashing
I have configured a widget called ohlist to make use of the concatenated string. First, I split the string into the original elements.

class Dashing.Ohlist extends Dashing.Widget
  constructor: ->
    super
    @queryState()

  @accessor 'ruter_37s_1n',
    get: -> @_ruter_37s_1n ? @get('state').split("|")[0]
    set: (key, value) ->
      @_ruter_37s_1n = value

  @accessor 'ruter_37s_2n',
    get: -> @_ruter_37s_2n ? @get('state').split("|")[1]
    set: (key, value) ->
      @_ruter_37s_2n = value

  @accessor 'ruter_37s_3n',
    get: -> @_ruter_37s_3n ? @get('state').split("|")[2]
    set: (key, value) ->
      @_ruter_37s_3n = value

  @accessor 'ruter_37s_1s',
    get: -> @_ruter_37s_1s ? @get('state').split("|")[3]
    set: (key, value) ->
      @_ruter_37s_1s = value

  @accessor 'ruter_37s_2s',
    get: -> @_ruter_37s_2s ? @get('state').split("|")[4]
    set: (key, value) ->
      @_ruter_37s_2s = value

  @accessor 'ruter_37s_3s',
    get: -> @_ruter_37s_3s ? @get('state').split("|")[5]
    set: (key, value) ->
      @_ruter_37s_3s = value

  @accessor 'ruter_54s_1n',
    get: -> @_ruter_54s_1n ? @get('state').split("|")[6]
    set: (key, value) ->
      @_ruter_54s_1n = value

  @accessor 'ruter_54s_2n',
    get: -> @_ruter_54s_2n ? @get('state').split("|")[7]
    set: (key, value) ->
      @_ruter_54s_2n = value

  @accessor 'ruter_54s_3n',
    get: -> @_ruter_54s_3n ? @get('state').split("|")[8]
    set: (key, value) ->
      @_ruter_54s_3n = value

  @accessor 'ruter_54s_1s',
    get: -> @_ruter_54s_1s ? @get('state').split("|")[9]
    set: (key, value) ->
      @_ruter_54s_1s = value

  @accessor 'ruter_54s_2s',
    get: -> @_ruter_54s_2s ? @get('state').split("|")[10]
    set: (key, value) ->
      @_ruter_54s_2s = value

  @accessor 'ruter_54s_3s',
    get: -> @_ruter_54s_3s ? @get('state').split("|")[11]
    set: (key, value) ->
      @_ruter_54s_3s = value

  @accessor 'ruter_34s_1n',
    get: -> @_ruter_34s_1n ? @get('state').split("|")[12]
    set: (key, value) ->
      @_ruter_34s_1n = value

  @accessor 'ruter_34s_2n',
    get: -> @_ruter_34s_2n ? @get('state').split("|")[13]
    set: (key, value) ->
      @_ruter_34s_2n = value

  @accessor 'ruter_34s_3n',
    get: -> @_ruter_34s_3n ? @get('state').split("|")[14]
    set: (key, value) ->
      @_ruter_34s_3n = value

  @accessor 'ruter_34s_1s',
    get: -> @_ruter_34s_1s ? @get('state').split("|")[15]
    set: (key, value) ->
      @_ruter_34s_1s = value

  @accessor 'ruter_34s_2s',
    get: -> @_ruter_34s_2s ? @get('state').split("|")[16]
    set: (key, value) ->
      @_ruter_34s_2s = value

  @accessor 'ruter_34s_3s',
    get: -> @_ruter_34s_3s ? @get('state').split("|")[17]
    set: (key, value) ->
      @_ruter_34s_3s = value


  queryState: ->
    $.get '/openhab/dispatch',
      widgetId: @get('id'),
      deviceId: @get('device'),
      deviceType: 'rutetider'
      (data) =>
        json = JSON.parse data
        @set 'state', json.state
  ready: ->

  onData: (data) ->

Each element is referenced in the html-part of the widget:

	<tr style="background-color: rgb(230, 0, 0); line-height: 24px; text-align: left;">
		<td colspan="3" style="align: left;">
			<img src="/assets/ruter.png" height="24px" style="padding-top: 10px;padding-left: 10px;padding-bottom: 10px;">
		</td>
	</tr>

	<tr class="RuteDest">
		<td></td>
		<td>Kjelsås</td>
		<td>Aker Brygge</td>
	</tr>

	<tr>
		<td rowspan="3" class="RuteNummer"><span>54</span></td>
		<td class="RuteTid"><span data-bind="ruter_54s_1n | append ' m'"></span></td>
		<td class="RuteTid"><span data-bind="ruter_54s_1s | append ' m'"></span></td>
	</tr>
	<tr>
		<td class="RuteTid"><span data-bind="ruter_54s_2n | append ' m'"></span></td>
		<td class="RuteTid"><span data-bind="ruter_54s_2s | append ' m'"></span></td>
	</tr>
	<tr>
		<td class="RuteTid"><span data-bind="ruter_54s_3n | append ' m'"></span></td>
		<td class="RuteTid"><span data-bind="ruter_54s_3s | append ' m'"></span></td>
	</tr>

	<tr class="RuteDest">
		<td></td>
		<td>Tåsen</td>
		<td>Ekeberg</td>
	</tr>

	<tr>
		<td rowspan="3" class="RuteNummer"><span>34</span></td>
		<td class="RuteTid"><span data-bind="ruter_34s_1n | append ' m'"></span></td>
		<td class="RuteTid"><span data-bind="ruter_34s_1s | append ' m'"></span></td>
	</tr>
	<tr>
		<td class="RuteTid"><span data-bind="ruter_34s_2n | append ' m'"></span></td>
		<td class="RuteTid"><span data-bind="ruter_34s_2s | append ' m'"></span></td>
	</tr>
	<tr>
		<td class="RuteTid"><span data-bind="ruter_34s_3n | append ' m'"></span></td>
		<td class="RuteTid"><span data-bind="ruter_34s_3s | append ' m'"></span></td>
	</tr>

	<tr class="RuteDest">
		<td></td>
		<td>Nydalen</td>
		<td>Helsfyr</td>
	</tr>

	<tr>
		<td rowspan="3" class="RuteNummer"><span>37</span></td>
		<td class="RuteTid"><span data-bind="ruter_37s_1n | append ' m'"></span></td>
		<td class="RuteTid"><span data-bind="ruter_37s_1s | append ' m'"></span></td>
	</tr>
	<tr>
		<td class="RuteTid"><span data-bind="ruter_37s_2n | append ' m'"></span></td>
		<td class="RuteTid"><span data-bind="ruter_37s_2s | append ' m'"></span></td>
	</tr>
	<tr>
		<td class="RuteTid"><span data-bind="ruter_37s_3n | append ' m'"></span></td>
		<td class="RuteTid"><span data-bind="ruter_37s_3s | append ' m'"></span></td>
	</tr>

</table>

<p class="updated-at" data-bind="updatedAtMessage"></p>

And finally some css to make it look nice.

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #12b0c5;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-ohlist {

  background-color: $background-color;
  vertical-align: top;

  .title {
    color: $title-color;
  }

  .RuteNummer {
    font-size: 300%;
    width: 20px;
    padding-left: 10px;
    padding-top: 5px;
  }

  .RuteTid {
    font-weight: 600;
    
  }

  .RuteDest {
    line-height: 23px;
    background-color: rgb(230, 0, 0);
  }

  ol, ul {
    margin: 0 15px;
    text-align: left;
    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }

  .list-nostyle {
    list-style: none;
  }

  .label {
    color: $label-color;
  }

  .value {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: $value-color;
  }

  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }

  .more-info {
    color: $moreinfo-color;
  }

}

Hopefully you will be able to make use of this! And again, this is a very hacky solution and should definitely be improved upon. First step would be to just simply parse the json in dashing itself.

Can somebody help me with this problem? :slight_smile:

items file:

Group	Weather	(All)
Group   livingRoomLights (All)
Group   officeLights 


// precipitation
Number   Weather_Rain   "Rain [%.0f in/h]"   (Weather)     {weather="locationId=home, type=precipitation, property=rain, unit=inches"}
Number   Weather_Snow  "Snow [%.0f in/h]"   (Weather)     {weather="locationId=home, type=precipitation, property=snow, unit=inches"}


// temperature
Number   Weather_Temperature    "Temperature [%.0f °F]"       (Weather)      {weather="locationId=home, type=temperature, property=current"}
Number   Weather_Temp_Feel      "Temperature feel [%.2f °F]"  (Weather)     {weather="locationId=home, type=temperature, property=feel"}
Number   Weather_Temp_Feel_1      "Temperature feel [%.2f °F]"  (Weather)     {weather="locationId=home, type=temperature, property=feel"}
Number   Weather_Humidity         "Humidity [%d %%]"      (Weather)     {weather="locationId=home, type=atmosphere, property=humidity"}

// wind
Number   Weather_Wind_Speed       "Windspeed [%.0f mph]"     (Weather)     {weather="locationId=home, type=wind, property=speed, unit=mph"}
Number   Weather_Wind_Gust        "Wind gust [%.0f mph]"     (Weather)     {weather="locationId=home, type=wind, property=gust, unit=mph"}
Number   Weather_Wind_Chill         "Wind chill [%.0f °F]"     (Weather)     {weather="locationId=home, type=wind, property=chill,"}

// forecast
String   Weather_Condition_Long        "Condition [%s]"      (Weather)     {weather="locationId=home, forecast=0, type=condition, property=text"}
String   Weather_Condition_ID   "[MAP(weather_en.map):%s]"  (Weather) {weather="locationId=home, type=condition, property=commonId"}
String   Weather_Condition_1   "[MAP(weather_en.map):%s]"  (Weather) {weather="locationId=home, forecast=1, type=condition, property=commonId"}
String   Weather_Condition_2   "[MAP(weather_en.map):%s]"  (Weather) {weather="locationId=home, forecast=2, type=condition, property=commonId"}
String   Weather_Condition_3   "[MAP(weather_en.map):%s]"  (Weather) {weather="locationId=home, forecast=3, type=condition, property=commonId"}
String   Weather_Condition_4   "[MAP(weather_en.map):%s]"  (Weather) {weather="locationId=home, forecast=4, type=condition, property=commonId"}
String   Weather_Condition_5   "[MAP(weather_en.map):%s]"  (Weather) {weather="locationId=home, forecast=4, type=condition, property=commonId"}
String   Weather_CommonId         "Common id [%s]"      (Weather)     {weather="locationId=home, type=condition, property=commonId"}
String                 Weather_Wind_Direction      "Wind direction [%s]"                                      (All, Weather)                   {weather="locationId=home, type=wind, property=direction"}
String                 Weather_Conditions          "Conditions [%s]"                                          (All, Weather)                   {weather="locationId=home, type=condition, property=text" }
String                 Weather_Code                "Weather Common ID [%s]"                                   (All, Weather)                   {weather="locationId=home, type=condition, property=commonId" }

Number   Weather_Precipitation     "Precip probability [%d %%]" (Weather) {weather="locationId=home, forecast=0, type=precipitation, property=probability"}
Number   Weather_Precipitation_1   "Precip probability [%d %%]" (Weather) {weather="locationId=home, forecast=1, type=precipitation, property=probability"}
Number   Weather_Precipitation_2   "Precip probability [%d %%]" (Weather) {weather="locationId=home, forecast=2, type=precipitation, property=probability"}
Number   Weather_Precipitation_3   "Precip probability [%d %%]" (Weather) {weather="locationId=home, forecast=3, type=precipitation, property=probability"}
Number   Weather_Precipitation_4   "Precip probability [%d %%]" (Weather) {weather="locationId=home, forecast=4, type=precipitation, property=probability"}
Number   Weather_Precipitation_5   "Precip probability [%d %%]" (Weather) {weather="locationId=home, forecast=5, type=precipitation, property=probability"}


Number   Weather_Temp_Min_0       "Temperature min [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=0, type=temperature, property=min"}
Number   Weather_Temp_Min_1       "Temperature min [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=1, type=temperature, property=min"}
Number   Weather_Temp_Min_2       "Temperature min [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=2, type=temperature, property=min"}
Number   Weather_Temp_Min_3       "Temperature min [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=3, type=temperature, property=min"}
Number   Weather_Temp_Min_4       "Temperature min [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=4, type=temperature, property=min"}
Number   Weather_Temp_Min_5       "Temperature min [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=5, type=temperature, property=min"}

Number   Weather_Temp_Max_0       "Temperature max [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=0, type=temperature, property=max"}
Number   Weather_Temp_Max_1       "Temperature max [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=1, type=temperature, property=max"}
Number   Weather_Temp_Max_2       "Temperature max [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=2, type=temperature, property=max"}
Number   Weather_Temp_Max_3       "Temperature max [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=3, type=temperature, property=max"}
Number   Weather_Temp_Max_4       "Temperature max [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=4, type=temperature, property=max"}
Number   Weather_Temp_Max_5       "Temperature max [%.0f °F]"   (Weather)     {weather="locationId=home, forecast=5, type=temperature, property=max"}

Edit: Dont know what I did but it started working after me changing things like crazy O.o

Hi todward, It looks like you have the widget “server_status” (Server Stati) running!

I have tried to set this up myself but the icons that should indicate if server is up or not does not show up at all for me, just blank space… How did you make the icons show?

I am running dashing on a raspberry pi 2.

Can anyone help me with this? Been searching for a fix for hours now…

Thanks in advance!

Hi sebastian,

here is my server_status.rb located in …/dashboard/jobs/ :

require 'net/http'
require 'uri'

# Check whether a server is responding
# you can set a server to check via http request or ping
#
# server options:
# name: how it will show up on the dashboard
# url: either a website url or an IP address (do not include https:// when usnig ping method)
# method: either 'http' or 'ping'
# if the server you're checking redirects (from http to https for example) the check will
# return false

servers = [{name: 'OpenHAB/ZWave', url: 'ip.server.#.1', method: 'ping'},
	{name: 'Homegear', url: 'ip.server.#.2', method: 'ping'},
	{name: 'MySQL-Server', url: 'ip.server.#.3', method: 'ping'}]

SCHEDULER.every '300s', :first_in => 0 do |job|

statuses = Array.new

# check status for each server
servers.each do |server|
	if server[:method] == 'http'
		uri = URI.parse(server[:url])
		http = Net::HTTP.new(uri.host, uri.port)
		if uri.scheme == "https"
			http.use_ssl=true
			http.verify_mode = OpenSSL::SSL::VERIFY_NONE
		end
		request = Net::HTTP::Get.new(uri.request_uri)
		response = http.request(request)
		if response.code == "200"
		 	result = 1
		 else
		 	result = 0
		 end
	elsif server[:method] == 'ping'
		ping_count = 5
		result = `ping -q -c #{ping_count} #{server[:url]}`
		if ($?.exitstatus == 0)
			result = 1
		else
			result = 0
		end
	end

	if result == 1
		arrow = "fa fa-check-circle"
		color = "green"
	else
		arrow = "fa fa-warning"
		color = "red"
	end

	statuses.push({label: server[:name], value: result, arrow: arrow, color: color})
end

# print statuses to dashboard
send_event('server_status', {items: statuses})
end

I use the ping method only. I did edit the part ’ if result == 1 …’ to display the fav icons correctly.

1 Like

Thank you very much! The icon part solved it instantly :slight_smile:

Is it possible to integrate openhab2 of openhab-dashboard.
Or openhab2 works with openhab-dashboard.

Ok i try for weeks now to get it run. But my problem is that the mysql2 gem errors all the time.

``require’: cannot load such file – mysql2 (LoadError)`

Please can you tell me what version you use. OS Ruby mysql2

I worked me through a lot of stuff, guides from stackoverflow and installing a ubuntu VM to setup all new. But in the end i get the same error.

Thank you =)

I´m using a Raspberry Pi 2 with Raspbian Wheezy:
>uname -a Linux smarthome 4.1.13-v7+ #826 SMP PREEMPT Fri Nov 13 20:19:03 GMT 2015 armv7l GNU/Linux

My Ruby version is

>ruby -v ruby 1.9.3p194 (2012-04-20 revision 35410) [arm-linux-eabihf]

and my mysql2 version is

mysql2 (0.4.2)

However, I could install all dependencies without problems including the mysql2 gem.

I haven’t yet tried with openHAB 2, but if the rest endpoints are the same, it should work. If you do try it out, please let us know how you get on.

@smar I am unable to get make the dashing autostart :frowning: I have followed the service file that comes with your github without success… I am running this on a raspberry pi 2.
Also, thanks for your great work with this project!

I created a simple two-way switch as I have a light I use two settings for - dim & bright:

Anyone interest can download the widget here - https://drive.google.com/open?id=0Bwfvf57HSA1oS2hKeE5SYlFYY3M

Hi @smar,
congratulation for your work!
Since the new version of the weather binding cannot be used anymore to get the status of other items I have to start from scratch with a new panel interface :sweat: . I downloaded your project and I was able to make it successfully running.
I’m just trying to understand how weather icons work. The weather icon info is got from the openhab items using the weather code (or id) and the job openhab.rb store the value in icon ; the weather widget data-bind is set to climacon[icon]. The climaicon is defined in ohweather.scss making an array of climaicon fonts; but the icon code from Yahoo Weather is a number from 0 to 47, how the correct value can be retrieved? I don’t understand the full logic, could you help me?
Thank you.

@sebastian_strindlund I have not tried using a Raspberry Pi myself and so am not familiar with how it starts services. The startup script in my repo is for Ubuntu. As long as you have the dashboard working correctly, I would expect that getting the service to automatically start at boot up should be relatively straight forward, and suggest you look into how to define daemon services on the RP.

@mortommy Its been a while since I last looked at that part of the code, but if I recall, the appropriate climaicon character is selected based the weather code (Weather_Code item). This is set in the ohapp.rb ruby script. The Weather_Code is a string code and not numeric. E.g. my openHAB is showing the current Weather_Code as sunny. Any dashes (“-”) or the word “day” in the Weather_Code is also stripped out.

The weather widget (Ohweather) coffeescript then maps the stripped weather code from above to the corresponding character code number.

There are more climaicons available in the font than are currently being used. These can be easily incorporated by adding the appropriate mapping in the coffeescript.

Hope that helps.