I have made 3 new widgets for HAdashboard.
this is the first 1 you can use in HAdashboard. if it is liked enough, maybe that @aimc will take it up in the Dashboard, but till then there is no risk to use it.
You dont need to edit any existing files for this widget.
create a subdir hagraph in your widget dir.
make a file with the next code and save it as hagraph.coffee
class Dashing.Hagraph extends Dashing.Widget
constructor: ->
super
@queryState()
@accessor 'value',
get: -> if @_value then (if isNaN(Math.round(@_value)) then @_value else @_value ) else "??"
set: (key, value) ->
if typeof @_value is 'undefined'
today = new Date
@_old_x=Math.round(today.getTime()/1000)
@_my_list = [{x: @_old_x, y: parseFloat(value)}]
@_value = value
else
today = new Date
@_old_x=Math.round(today.getTime()/1000)
@_my_list.push ({x: @_old_x, y: parseFloat(value)})
@_value = value
if typeof @graph isnt 'undefined'
@graph.series[0].data = @_my_list
@graph.render()
queryState: ->
$.get '/homeassistant/sensor',
widgetId: @get('id'),
deviceId: @get('device')
(data) =>
json = JSON.parse data
@set 'value', json.value
ready: ->
if @get('bgcolor')
$(@node).css("background-color", @get('bgcolor'))
else
$(@node).css("background-color", "#444")
container = $(@node).parent()
# Gross hacks. Let's fix this.
width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)-10
height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))-55
@graph = new Rickshaw.Graph(
element: @node
width: width
height: height
renderer: @get('renderer')
series: [
{
color: "#000",
data: @_my_list
}
]
)
@graph.series[0].data = @get('points') if @get('points')
x_axis = new Rickshaw.Graph.Axis.Time(graph: @graph)
y_axis = new Rickshaw.Graph.Axis.Y(graph: @graph, tickFormat: Rickshaw.Fixtures.Number.formatKMBT)
@graph.render()
onData: (data) ->
make a file with the next code and save it as hagraph.html
<h1 class="title" data-bind="title"></h1>
<h1 class="title2" data-bind="title2"></h1>
<h2 class="value" data-bind="current | prettyNumber | prepend prefix"></h2>
make a file with the next code and save it as hagraph.scss
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #dc5945;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.3);
$tick-color: rgba(0, 0, 0, 0.4);
// ----------------------------------------------------------------------------
// Widget-graph styles
// ----------------------------------------------------------------------------
.widget-hagraph {
background-color: $background-color;
position: relative;
svg {
position: absolute;
opacity: 1;
fill-opacity: 0.4;
left: 5px;
top: 50px;
}
.title, .value {
position: relative;
z-index: 99;
}
.title {
color: #fff;
margin-bottom: 5px;
margin-top: 5px;
}
.title2 {
color: #fff;
margin-bottom: 10px;
margin-top: 0px;
}
.more-info {
color: $moreinfo-color;
font-weight: 600;
font-size: 100%;
margin-top: 0;
}
.x_tick {
position: absolute;
bottom: 0;
.title {
font-size: 80%;
color: $tick-color;
opacity: 1;
padding-bottom: 3px;
}
}
.y_ticks {
font-size: 100%;
fill: $tick-color;
fill-opacity: 1;
}
.domain {
display: none;
}
}
now you are ready to put your graph into your dashboard.
in your dashboard you need to use it like this:
<li data-row="2" data-col="1" data-sizex="2" data-sizey="2">
<div data-id="your_sensor_id" data-view="Hagraph" data-title="any title text" data-title2="more title text" data-renderer="area" data-bgcolor="#2266CC"></div>
</li>
you can choose the next options for your renderer (graph type)
- area
- line
- bar
- scatterplot
at this moment it isnt time based but inputbased. i am working on making it timebased. i will keep you posted for the neccesary changes.
the graph is not persistent (yet) so it only collects data as long as you have your dashboard opened.
I am thinking about how to put in a persitent option.
but i am not sure how to implement that. would i save just 1 day, 1 week or everything, and then how and where.
below you see an example how it could look:
thats kind … really nice project dude! do u have some samples screenshots of good dashboards? like : show your dashboard thread?