Dashboard looks

Hi, i was just looking at my dashboard setup, it looks a bit anemic for my taste :slight_smile:
How about option to colour the background of value boxes.

1 Like

you can use cayenne api to create your own customize app.

That is ok, but i use dashboard on my htpc system, and not all users know how properly create custom app.
It would be nice to have it in WYSIWYG style, similar to gauge ranges colour selector.

@bestes tagging for this.

Thanks for the tag @shramik_salgaonkar

I like this idea @Agroelektronik. Let me pass it by our designers and see what they think.

I’ve always wanted to ‘dark’ Cayenne theme too :slight_smile:

Keep the ideas coming!

~Benny

3 Likes

So, dear admins, was this ideas ever considered? 1.5 years, and still no dark theme. White background is blinding, especially when you’re constantly monitoring on a PC :cry:

we have kept this option on the cayenne roadmap but is not at high priority right now. As i mentioned earlier you can create your own dashboard and get all the cayenne data using the API. if you are familiar with nod-red i can get you a simple flow to do it.

Well, ok, thank you then :slight_smile: I’m not really familiar with Node Red (maybe I should be, since it could provide faster visual solutions for what I need - I normally code in C and Python - console). I preferred Cayenne over other IOT platforms for quick results, since I didn’t want to spend a lot of time on this current personal project of mine. If you already have a simple flow ready, please send it. And I will look into it when I have the time.

i have not done it yet but is in my to do list. so will start with it. which sensor data are you trying to view?

I use DS18B20’s and view them numerically and as graphs. I also use a relay board for heater and cooler control. If it’s gonna be a hassle for you, I can also try myself when I got the time. No worries at all.

not at all, it is almost done. i am done with getting with sensor data, now just needs to show it on widget.

Alright, thanks a bunch :slight_smile:

Hello,

Any ETA about that dashboard dark theme ? Regards.

i used node-red to show my temperature data on a custom black dashboard. you can customize it the way you want. here is a basic flow for it:

[{“id”:“5cee4b29.cbf964”,“type”:“http request”,“z”:“8df692c8.69c58”,“name”:“”,“method”:“POST”,“ret”:“obj”,“url”:“https://accounts.mydevices.com/auth/realms/cayenne/protocol/openid-connect/token",“tls”:“”,“x”:555,“y”:108,“wires”:[[“cff8b285.2105e”,“5fbbc736.c7ed18”]]},{“id”:“86d048b0.0b2368”,“type”:“inject”,“z”:“8df692c8.69c58”,“name”:"Get Access Token.”,“topic”:“”,“payload”:“{}”,“payloadType”:“json”,“repeat”:“”,“crontab”:“”,“once”:false,“onceDelay”:0.1,“x”:141,“y”:104,“wires”:[[“b50c3a3.d2096c8”]]},{“id”:“b50c3a3.d2096c8”,“type”:“change”,“z”:“8df692c8.69c58”,“name”:“”,“rules”:[{“t”:“set”,“p”:“headers”,“pt”:“msg”,“to”:“{"Content-Type":"application/x-www-form-urlencoded"}”,“tot”:“json”},{“t”:“set”,“p”:“payload”,“pt”:“msg”,“to”:“{"grant_type":"password","client_id":"CD","client_secret":"CS","username":"username","password":"password"}”,“tot”:“json”}],“action”:“”,“property”:“”,“from”:“”,“to”:“”,“reg”:false,“x”:344,“y”:105,“wires”:[[“5cee4b29.cbf964”]]},{“id”:“cff8b285.2105e”,“type”:“debug”,“z”:“8df692c8.69c58”,“name”:“”,“active”:true,“tosidebar”:true,“console”:false,“tostatus”:false,“complete”:“payload”,“x”:770.5,“y”:110,“wires”:},{“id”:“5fbbc736.c7ed18”,“type”:“change”,“z”:“8df692c8.69c58”,“name”:“”,“rules”:[{“t”:“set”,“p”:“payload”,“pt”:“msg”,“to”:“payload.access_token”,“tot”:“msg”}],“action”:“”,“property”:“”,“from”:“”,“to”:“”,“reg”:false,“x”:540.5,“y”:212,“wires”:[[“2be7cf78.1dfe1”]]},{“id”:“2be7cf78.1dfe1”,“type”:“debug”,“z”:“8df692c8.69c58”,“name”:“”,“active”:true,“tosidebar”:true,“console”:false,“tostatus”:false,“complete”:“payload”,“x”:779,“y”:216,“wires”:},{“id”:“9c955640.2927b8”,“type”:“function”,“z”:“8df692c8.69c58”,“name”:“”,“func”:“var access = msg.payload;\nmsg.headers = {};\nmsg.headers[‘Authorization’] = ‘Bearer accessToken’;\n//msg.headers[‘Authorization’] = 'Bearer ’ +access;\nreturn msg;”,“outputs”:1,“noerr”:0,“x”:318,“y”:333,“wires”:[[“9e1aab88.01c198”]]},{“id”:“9e1aab88.01c198”,“type”:“http request”,“z”:“8df692c8.69c58”,“name”:“”,“method”:“GET”,“ret”:“txt”,“paytoqs”:false,“url”:“https://platform.mydevices.com/v1.1/telemetry/DeviceID/sensors/sensorID/summaries?type=latest",“tls”:“”,“proxy”:“”,“x”:522,“y”:355,“wires”:[[“841e6f0d.9f093”,“d5d9a15a.16e8c”]]},{“id”:“841e6f0d.9f093”,“type”:“debug”,“z”:“8df692c8.69c58”,“name”:“”,“active”:true,“console”:false,“complete”:“payload”,“x”:727,“y”:358,“wires”:[]},{“id”:“fd3193ce.6d833”,“type”:“inject”,“z”:“8df692c8.69c58”,“name”:“”,“topic”:“”,“payload”:“{}”,“payloadType”:“json”,“repeat”:“20”,“crontab”:“”,“once”:false,“onceDelay”:“10”,“x”:87.5,“y”:343,“wires”:[[“9c955640.2927b8”]]},{“id”:“d5d9a15a.16e8c”,“type”:“json”,“z”:“8df692c8.69c58”,“name”:“”,“property”:“payload”,“action”:“”,“pretty”:false,“x”:187,“y”:465,“wires”:[[“fad6da1f.76e4f8”]]},{“id”:“20b7dc11.9f3da4”,“type”:“debug”,“z”:“8df692c8.69c58”,“name”:“”,“active”:true,“console”:false,“complete”:“payload”,“x”:718.5,“y”:463,“wires”:[]},{“id”:“fad6da1f.76e4f8”,“type”:“change”,“z”:“8df692c8.69c58”,“name”:“”,“rules”:[{“t”:“set”,“p”:“payload”,“pt”:“msg”,“to”:“payload[0].v”,“tot”:“msg”}],“action”:“”,“property”:“”,“from”:“”,“to”:“”,“reg”:false,“x”:394,“y”:467,“wires”:[[“20b7dc11.9f3da4”,“5516571f.9961d8”,“30560af4.fa63b6”,“243f8c5c.f077a4”]]},{“id”:“5516571f.9961d8”,“type”:“ui_gauge”,“z”:“8df692c8.69c58”,“name”:“Home”,“group”:“e4bc48d4.b9b258”,“order”:6,“width”:0,“height”:0,“gtype”:“gage”,“title”:“Temperature”,“label”:“celsius”,“format”:"{{value}}”,“min”:0,“max”:“100”,“colors”:[“#00b500”,“#e6e600”,“#ca3838”],“seg1”:“”,“seg2”:“”,“x”:618,“y”:554,“wires”:},{“id”:“30560af4.fa63b6”,“type”:“ui_text”,“z”:“8df692c8.69c58”,“group”:“e4bc48d4.b9b258”,“order”:2,“width”:0,“height”:0,“name”:“”,“label”:“Temperature”,“format”:“{{msg.payload}}”,“layout”:“row-spread”,“x”:635.5,“y”:648,“wires”:},{“id”:“243f8c5c.f077a4”,“type”:“ui_chart”,“z”:“8df692c8.69c58”,“name”:“”,“group”:“e4bc48d4.b9b258”,“order”:8,“width”:0,“height”:0,“label”:“chart”,“chartType”:“line”,“legend”:“false”,“xformat”:“HH:mm:ss”,“interpolate”:“linear”,“nodata”:“”,“dot”:false,“ymin”:“”,“ymax”:“”,“removeOlder”:1,“removeOlderPoints”:“”,“removeOlderUnit”:“3600”,“cutout”:0,“useOneColor”:false,“colors”:[“#1f77b4”,“#aec7e8”,“#ff7f0e”,“#2ca02c”,“#98df8a”,“#d62728”,“#ff9896”,“#9467bd”,“#c5b0d5”],“useOldStyle”:false,“outputs”:1,“x”:363.5,“y”:595,“wires”:[]},{“id”:“e4bc48d4.b9b258”,“type”:“ui_group”,“z”:“”,“name”:“Home”,“tab”:“607d5a1.a86dfa4”,“disp”:true,“width”:“6”,“collapse”:false},{“id”:“607d5a1.a86dfa4”,“type”:“ui_tab”,“z”:“”,“name”:“Home2”,“icon”:“dashboard”,“disabled”:false,“hidden”:false}]

there are two blocks in it. one to get the access token and other is to get the history data to display on the dashboard. you will have to the client id, client secret, username and password in the change node to get your access token.
once you get the access token you need to add it in the function node to get the history. Also you need to add the device ID and the sensor ID of the widget to need to get the data.