HAdashboard new widget link (also change dashboard)

Third party integrations HADashboard
1

like i promised yesterday is here the code and implement instructions for the halink.

you can make a link to an outside webside or to another dashboard.
giving you the option to split the dashboard with multiple pages.

make a dir in your widget dir and name that halink.

then make a file with the following code and save it as halink.coffee in that dir.

class Dashing.Halink extends Dashing.ClickableWidget

  @accessor 'icon',
    get: -> if @['icon'] then @['icon'] else
      if @get('state') == 'on' then @get('iconon') else @get('iconoff')
    set: Batman.Property.defaultAccessor.set

  @accessor 'iconon',
    get: -> @['iconon'] ? 'circle'
    set: Batman.Property.defaultAccessor.set

  @accessor 'iconoff',
    get: -> @['iconoff'] ? 'circle-thin'
    set: Batman.Property.defaultAccessor.set

  @accessor 'icon-style', ->
    if @get('state') == 'on' then 'switch-icon-on' else 'switch-icon-off'    

  ready: ->
    if @get('bgcolor')
      $(@node).css("background-color", @get('bgcolor'))
    else
      $(@node).css("background-color", "#444")
    @set 'state', "off"

  onClick: (event) ->
    window.location.href = @get('link')

save the following code as halink.html also in that dir

<h1 class="title" data-bind="title"></h1>
<h1 class="title2" data-bind="title2"></h1>
<h2 data-bind-class="icon-style"><i data-bind-class="icon | prepend 'fa fa-'"></i></h2>

and then save the next code as halink.scss in that dir

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #ec663c;

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

// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-halink {

  background-color: $background-color;

  .title {
    color: #fff;
    margin-bottom: 5px;
    margin-top: 5px;
  }

  .title2 {
    color: #fff;
    margin-bottom: 10px;
    margin-top: 0px;
  }

  .switch-icon-off .switch-icon-on {
    font-size: 150%;
  }

  .switch-icon-off {
    color: #000000;
  }

  .switch-icon-on {
  	color: #aaff00;
  }

}

now you are ready to go and implement it in your dashboard.
you can do it on 2 different ways:

  1. just the name of an existing mainboard like this:
    <li data-row="7" data-col="1" data-sizex="1" data-sizey="1">
      <div data-view="Halink" data-link="your_dashboard" data-icon="angle-double-down" data-title="just a title" data-title2="another title" ></div>
    </li>
  1. replace your_dashboard with a complete link like http://www.anysite.com

enjoy.

2 Likes
2

I would like a widget on my dashboard similar to the reload widget that would load another dashboard instead.
Is their a default widget that can do this?
I have tried the method above but upon creating the folders:

  • custom-widgets
    — halink.cofee
    — halink.html
    — halink.scss

i receive error:

500 Internal Server Error Server got itself in trouble

For the final step,

  1. just the name of an existing mainboard like this:
    I do not know where this code is supposed to go.

Thanks, Dave

3

sorry, but this widget was for HAdashboard V1 and wont work with V2
but to load another dashboard you can use the navigate widget.
you can find out about how to create a dashboard and which widgets are default in the docs.

http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html

1 Like
4

Thanks man! Just found the navigate widget :smiley: