HADashboard HTML guidance please!

Yakker · February 6, 2017, 8:29pm

Good Afternoon Automators!!

Does anybody have a good resource on how exactly to ‘code’ the HTML grid part of the HADashboard for widgets? it seems that every time I think I have it figured out, it’s always wrong…

data-row=“3” data-col=“1”

So far I’ve thrown seemingly random digits into the row and column values only to have to fix it on the GUI using the drag, drop, and save feature, but I’d like to know how to edit the files to put things where they belong in the first place instead of relying on my system of band-aid fixes that, while it works, is less than optimally productive. I do like pictures!! pictures are a nice learning tool and would greatly help to have a handy cheat-sheet to figure out where I am placing widgets.

aimc · February 6, 2017, 8:38pm

Not sure what to say here - data-row is the row on the grid, and data-column is the column, think of it as y axis for row and x axis for column. The drag and drop function is not really meant to be used and will be locked down in a future release.

If you are having problems, perhaps you could give us a sample of your dashboard.erb file and a screenshot of what it is doing that you are not expecting.

One thing to add - if you specify overlapping rows and columns one of the widgets will be moved to the next free space.

rpitera · February 6, 2017, 10:22pm

One of the things that helped me was adding comment lines to indicate what page and row I was working with.

<% content_for :title do %>HADashboard<% end %>

<div class="gridster"> <!-- Main Panel - PAGE 1 -->
  <ul>

  <!-- ROW 1 -->

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="clock" data-view="Clock" data-color="#FF0000"></div>
    </li>

    <li data-row="1" data-col="3" data-sizex="2" data-sizey="2">
      <div data-id="weather" data-view="Haweather" data-unit="&deg;F" data-color="#FF0000"></div>
    </li>

    <li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_multisensor_6_temperature_7_1" data-view="Hasensor" data-title="LR Temperature" data-unit="&deg;F" data-color="#FF0000"></div>
    </li>

    <li data-row="1" data-col="6" data-sizex="1" data-sizey="1" data-color="#FF0000">
      <div data-id="aeotec_multisensor_6_relative_humidity_7_5" data-view="Hameter" data-title="LR Humidity" data-unit="%" data-color="#FF0000"></div>
    </li>

    <li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_multisensor_6_luminance_7_3" data-view="Hasensor" data-title="LR Light Level" data-unit="lux" data-color="#FF0000"></div>
    </li>

    <li data-row="1" data-col="8" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_multisensor_6_sensor_7_0" data-view="Hamotion" data-title="LR Motion" data-unit="lux" data-color="#FF0000"></div>
    </li>


  <!-- ROW 2 -->

    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="rpitera_rpitera" data-view="Hadevicetracker" data-title="Robert" data-color="#FF0000"></div>
    </li>

    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
      <div data-id="front_door" data-view="Halock" data-title="Front Door" data-color="#FF0000"></div>
    </li>

    <li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_multisensor_6_temperature_8_1" data-view="Hasensor" data-title="BR Temperature" data-unit="&deg;F" data-color="#FF0000"></div>
    </li>
 
    <li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_multisensor_6_relative_humidity_8_5" data-view="Hameter" data-title="BR Humidity" data-unit="%" data-color="#FF0000"></div>
    </li>

    <li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_multisensor_6_luminance_8_3" data-view="Hasensor" data-title="BR Light Level" data-unit="lux" data-color="#FF0000"></div>
    </li>

    <li data-row="2" data-col="8" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_multisensor_6_sensor_8_0" data-view="Hamotion" data-title="BR Motion" data-unit="lux" data-color="#FF0000"></div>
    </li>


  <!-- ROW 3 -->

    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_smart_switch_6_power_10_8" data-view="Hameter" data-title="Washer" data-unit="watts" data-color="#FF0000"></div>
    </li>

    <li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_smart_switch_6_power_11_8" data-view="Hameter" data-title="Dryer"  data-unit="watts" data-color="#FF0000"></div>
    </li>

    <li data-row="3" data-col="2" data-sizex="2" data-sizey="2">
      <div data-id="Wink" data-view="News" data-title="Wink Status" data-interval="30" data-bgcolor="#643EBF" data-color="#FF0000">
    </li>

    <li data-row="3" data-col="2" data-sizex="2" data-sizey="2">
      <div data-id="News" data-view="News" data-title="News" data-interval="30" data-bgcolor="#643EBF" data-color="#FF0000">
    </li>

  <li data-row="3" data-col="7" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_smart_energy_switch_switch_9_0" data-view="Haswitch" data-title="Tea Room Fireplace" data-icon="sort-amount-desc" data-color="#FF0000"></div>
    </li>

    <li data-row="3" data-col="8" data-sizex="1" data-sizey="1">
      <div data-id="switched_outlet" data-view="Haswitch" data-icon="sort-amount-desc" data-title="Tea Room Fountain Light" data-color="#FF0000"></div>
    </li>

    <!-- ROW 4 -->

    <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_smart_switch_6_switch_10_0" data-view="Haswitch" data-title="Washer" data-icon="power-off" data-color="#FF0000"></div>
    </li>

    <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
      <div data-id="aeotec_smart_switch_6_switch_11_0" data-view="Haswitch" data-title="Dryer" data-icon="power-off" data-color="#FF0000"></div>
    </li>

    <li data-row="4" data-col="7" data-sizex="1" data-sizey="1">
      <div data-id="sunset" data-view="Hascene" data-title="Watch TV" data-icon="play" data-color="#FF0000"></div>
    </li>

    <li data-row="4" data-col="8" data-sizex="1" data-sizey="1">
      <div data-id="sunset" data-view="Hascene" data-title="Good Night" data-icon="moon-o" data-color="#FF0000"></div>
    </li>

   <!-- ROW 5 -->

    <li data-row="5" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="sunset" data-view="Hascene" data-title="Sunset" data-icon="sun-o" data-ontime="1000" data-color="#FF0000"></div>
    </li>

    <li data-row="5" data-col="3" data-sizex="2" data-sizey="1">
      <div data-id="sunset_dimmed" data-view="Hascene" data-title="Sunset Dimmed" data-icon="chevron-down"  data-ontime="1000" data-color="#FF0000"></div>
    </li>

    <li data-row="5" data-col="5" data-sizex="2" data-sizey="1">
      <div data-id="deep_blue" data-view="Hascene" data-title="Deep Blue" data-icon="tint" data-ontime="1000" data-color="#FF0000"></div>
    </li>

    <li data-row="5" data-col="7" data-sizex="2" data-sizey="1">
      <div data-id="green_forest" data-view="Hascene" data-title="Green Forest" data-icon="pagelines"  data-ontime="1000" data-color="#FF0000"></div>
    </li>


    <!-- pages buttons -->

    <li data-row="1" data-col="9" data-sizex="1" data-sizey="1">
      <div data-id="cpage1" data-view="ChangePage" data-icon="home" data-title="Home" style="color:#aaff00;" data-page="1" data-stagger="false" data-fasttransition="true" data-event-click="onClick"></div>
    </li>

    <li data-row="2" data-col="9" data-sizex="1" data-sizey="1">
      <div data-id="cpage1" data-view="ChangePage" data-icon="cogs" data-title="Panel Two" data-page="2" data-stagger="false" data-fasttransition="true" data-event-click="onClick"></div>
    </li>

    <li data-row="3" data-col="9" data-sizex="1" data-sizey="1">
      <div data-id="cpage1" data-view="ChangePage" data-icon="rss" data-title="Alarm" data-page="3" data-stagger="false" data-fasttransition="true" data-event-click="onClick"></div>
    </li>

    <li data-row="5" data-col="9" data-sizex="1" data-sizey="1">
      <div data-id="reload" data-view="Reload"></div>
    </li>

 </ul>
</div>

You can do this with the example.erb file and it gives you a basis to work with. Part of the problem is that while dashing (which is the underlying framework of HADashboard) effectively is rendering a table, it doesn’t use table tags and instead uses list item tags.

If it worked with table tags, then you could put the HTML in most WYSIWYG editors and manipulate easily in a more visual fashion.

Yakker · February 7, 2017, 11:33pm

oh man, I’m bummed, it seems like this was a really well thought-out plan to make it easy to move things around!!

rpitera · February 7, 2017, 11:38pm

Yeah, I was kind of bummed about that too.

Yakker · February 7, 2017, 11:41pm

commenting out rows wasn’t even something I had considered before! A little embarrassing because while I “code” as a hobby, it’s something I should have thought of but didn’t lol

rpitera · February 7, 2017, 11:47pm

I did it out of frustration. LOL

aimc · February 10, 2017, 2:28pm

The underlying component that does the layout supports it but AFAIK Dashing doesn’t.

I am looking into making a v2 of HADashboard that doesn’t use Dashing, and would be easier to maintain - adding this functionality might be an example of what I could do with a different framework - no promises though

rpitera · February 10, 2017, 2:41pm

It would be nice if it were possible to change the list items with tables; then you could do the layout in any HTML editor including WYSIWYG ones.

aimc · February 10, 2017, 2:43pm

A good suggestion

rpitera · February 10, 2017, 2:45pm

BTW, good move on locking the AD Q&A thread.