Dashboard Tile/Rows Editing

One issue I have with dashboard, particularly one with many rows, is the awkwardness of inserting a tile/row in between existing rows. For example, a dashboard with say 10 rows, each row having multiple tiles. I then have a need to insert a tile/row in between rows 1 and 2. Having to move all the tiles in rows 2-10 is quite tedious.
For now I have written a python script that will read the dashboard *.js file and output a new file with each row parameter updated with the new value(s). I then simply paste the new *,js over the existing dashboard *,js. This works but I am interested in hearing what other do when they need to insert row(s). Has anyone found a quick/better way to do this?

Smartly drag-and-drop.


ANYthing that would not require us to move every, single, #)&(&)$'sk, tile below where we want to insert a new tile would be fantastic. I've often thought, "Oh, I'd like to add that to X dashboard, right below... Oh, that's right, I'd have to move 12 other tiles. Nevermind." It's the worst UI aspect of Hubitat (which, admittedly, is still a lot better than many other automation systems).


Where can I find this? All my searches come up with "bad news" suggesting it has been discontinued for Hubitat.

Well, if you have python installed on your Windows or Linux machine (Don't know anything about Macs) you can try this until we find something better

import sys,re

# Example of calling format [python3 hubitat-Dashboard.py input.js output.js 10 5]
# hubitat-Dashboard.py = the name of this file
# input.js = the file name of the js source copied from Dashboard/Settings(GearIcon)/Advanced/Layout and saved on the PC
# output.js = the desired output filename
# 10 = the row to start shifting (inserting) the tiles downward. This could be anything from 1 to [n] 
# 5 = the number of rows to insert. Could be anything from 1 to [n]
# workingFolder = where the input.js was saved and where the output.js will be written

workingFolder = 'e:/Users/SuperGeek/Desktop/'
    inputName = workingFolder + sys.argv[1]
    outputName = workingFolder + sys.argv[2]
    StartRow = int(sys.argv[3])
    numRows2Move = int(sys.argv[4])
    print("ERROR: Passed Parameter format = <inputName> <outputName> <startingRow> <rows2Move>")
file1 = open(inputName, 'r')
file2 = open(outputName, 'w')
Lines = file1.readlines() 
for line in Lines:
    newLine = line.rstrip()
    x= newLine.find('"row"')
    if x > -1:
        c= newLine.find(',')
        if c == -1:
            comma =''
        r = int(re.sub("[^0-9]", "", newLine[13:c]))
        if r >= StartRow:
            newLine = '      "row": ' + str(r + numRows2Move) + comma
    file2.write(newLine + "\n")
print("New file [" + outputName + "] has been created")
1 Like

Thanks. Appreciate that. I do think it might be good for Hubitat to release something, though, to make movement of dashboard tiles part of the core system.

Just think of it as the Hubitat version of Tetris! Move one square out of the way, then just start jumping the other ones over, up, and so on. I am not a gamer, so this satisfies my occasional need to play a game. :smile:


Could also insert a line quickly using some old fashion javascript in a web page (doesn't have to hosted, can run from your PC ).

HTML/Javascript Source
<!DOCTYPE html>
<script type="text/javascript">
function processJSON(rowNum){
	rowNum = parseInt(rowNum);
	if (Number.isNaN(rowNum)) return;
	lines = document.getElementById("jsonIN").value.toString().split('\n');
    outputCache = "";

	for(i = 0;i < lines.length;i++){
			startPos = lines[i].indexOf(":")+1;
			endPos = lines[i].indexOf(",");
			checkVal=parseInt(lines[i].substring(startPos, endPos));
			if(checkVal > rowNum-1){
				replVal = checkVal + 1;
				replLine = lines[i].substring(0,startPos)+replVal+lines[i].substr(endPos,lines[i].length)+"\n";

<div style="height:300px">
<h3>JSON in:</h3>
<textarea id="jsonIN" style="width:80%; height:90%">Paste JSON here</textarea>

<p>Insert new row before row:<input id="targetRow" type="text" /></p>
<button onclick="processJSON(document.getElementById('targetRow').value)">Go</button>
<h3>JSON out:</h3>
<textarea id="jsonOut" style="width:80%; height:90%"></textarea>


Just copy the JSON from the dashboard, paste it into the input, give it a row number to insert above, and press "Go", and paste the result back in. (As always I'd make a backup before playing like this though.)

1 Like

All this is appreciated. Thank You. But what I'm really hoping is that Hubitat just makes it easy to insert a tile in the middle of everything, with all the stuff below it moving down. That'd do it...

Easy enough to do, just add a column number to the code above and only do the row shift if the column number is equal; given that the column comes before the row in the JSON, you'd have to trap the column before you get to the row information.

1 Like

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.