HabPanel template touchy

Apps & Services HABPanel
1

Hoi zäme,

I am currently trying for the first time to set up some tables in habpanel with the template method.

I noticed that when I copy code out of the browser into another program an back again it does not work. It showed me at some point the > in red, but I did not change anything.

Moreover sometimes it just shows the code and not what it should show if I click play. I do not know how to debug, could anyone help?

Browser is chrome:

<h4>
Farmbot Daten
</h4>
<table class="table table-condensed">
  <tr ng-repeat="item in itemsInGroup('gHPFB')">
   <td class ="text-left">{{item.label}}</td>
   <td class="text-left" ng-style="{color:'lightblue'}">{{itemState(item.name)}}</td>
 	</tr>
  <tr>
   <td class="text-left">X:</td>
   <td class="text-left">{{itemValue('position_x')}}</td>
  </tr>
  <tr>
   <td class="text-left">Y:</td>
   <td class="text-left">{{itemValue('position_y)}}></td>
  </tr>
</table>

Thanks, Best Klim

2 
<td class="text-left">{{itemValue('position_y')}}</td>
2 Likes
3

You can also use

<td class="text-left" ng-style="{color:'lightblue'}">{{item.state}}</td>
2 Likes
4

:man_facepalming:

thanx, sometimes quite worrying to figure out what it does not want!
Do you have a good way of debugging those faults, @hr3?

5

I have tested before and after my changes and it solved the problem. It works fine and I get no errors more.
Post your actual code please and the configuration for the used group and items.

6

It works now for me. Just the question wether you have a good way of debugging those things rather than really looking at where I could have forgotten something? Maybe it was too late yesterday…

There´s no log that would tell me where the error happens, right? Which line for instance…?

7

Debugging it is actually pretty easy, because everything inside curly braces is intepreted as angularjs - and thus javascript - language. Your browser has a javascript console that you can bring up pressing F12.

When you are working on your template widget, open the the Console with F12 (and click on the Console tab) before you save and run your HABPanel dashboard. Your browser will look like this:

image
image.png1262×1064 81.1 KB

Then, save the widget and click on image

The console will spit out some error messages that may seem cryptic at first. There you already have a hint what the error is (something unterminated (un-closed)) and somewhere near position_y:

image
image.png1246×367 40.8 KB

You can click on the link to read a documented error message on the angularjs.org website. By clicking it, any content that is contained in the link will be sent to angularjs.org, so ensure that it doesn’t contain any secrets you don’t want to send anywhere. Click on it and read the full error:

image
image.png1246×1001 45.5 KB

This is your exact error with the exact position.

Good luck! :slight_smile:

2 Likes
8

Thank you guys for providing such good support, I’m pretty busy these days so it’s certainly appreciated!

Keep it up :wink:

2 Likes