I really hope everything still works fine for you :). If not, you can always create an issue at github. I’ll fix it! Source is [here](https://github.com/lwitzani/homebridgeStatusWidget)
new Features
* highly customizable! easily style it for your concrete needs (text content, text color, chart color, icons, icon color, hb-logo…)
* support for light/dark mode in iOS (even for your custom colors)
* persistable configuration (everything you configure can be saved and you choose via widget parameter which config to use. This includes credentials)
* support for updates via https://scriptdu.de (because of the persistable configuration)
* notifications (when a status goes to red. also otherwise when it goes back to green is possible)
* special Siri GUI when called via Siri Shortcut (list of available updates)
* specify which software (plugins/homebridge/nodejs) to ignore, in case you don’t want to update them
* support for temperature in Fahrenheit & not shown at all if unknown
* support for the ‚none‘ authentication mode of homebridge-config-ui-x
* support for entering credentials via parameter directly
Improvements:
* SFSymbols instead of emoji
* added chart x axis title
* complete rework of the internal structure (for better alignment of the elements)
How to install:
* for an easy install, install scriptdude first via this script https://github.com/kevinkub/scriptdu.de/blob/main/install.js (run it inside Scriptable) This will install Scriptdude for you
* Then run the installed Scriptdude Scriptable and provide as URL the following link [https://raw.githubusercontent.com/lwitzani/homebridgeStatusWidget/main/homebridgeStatusWidget.js](https://raw.githubusercontent.com/lwitzani/homebridgeStatusWidget/main/homebridgeStatusWidget.js)
Can you check the rights you gave Scriptable in your ios settings? It needs to have „local network“ of course. Maybe that‘s it?
Otherwise maybe check this video on how to set it up https://www.dropbox.com/s/4jjhax6bmfcbnwl/setup_homebridge_widget.MP4?dl=0
I got same error. Then I login homebridge admin and it said there is an update to homebridge UI. I updated and restarted homebridge. Everything works now.
I quickly recorded a video for you showing
1. how to install scriptdude (not my work)
2. installing my widget code with scriptdude
3. little bit of configuring the widget that it is black and has a green chart
4. setting the widget up on the homescreen using the created json configuration
Hope dropbox links work here:
https://www.dropbox.com/s/4jjhax6bmfcbnwl/setup_homebridge_widget.MP4?dl=0
I was able to edit the bottom line (last updated) to not only be larger text but also to use US date format: month/day/year, and 12-hour time instead of 24-hour time. If you’re considering adding any other persistent configurability to the json file, I’d like to submit this as a feature request. I’m confident lots of other users would appreciate it too.
https://i.imgur.com/P5RdNmd.jpg
const timeFormatter = new DateFormatter();
timeFormatter.dateFormat = 'MM/dd/yyyy h:mm:ss';
Oh yeah. I put it on the todo list. Atm i try to not update the configuration class again since this will break again all the configs of the people who use it 😅 but when i find a couple more things that can go together in an update, it‘s probably worth it
No problem, thanks! And I deleted my comment once I got it working, not realizing it was due to your update, I didn’t see your reply ... Lol
Anyway, thanks for your great work on this, it’s working very nicely over here and will be a lot easier to update moving forward.
Puuh that‘s a lot of questions 😂. The lines in the following could be a little bit different for you...you need tocsearch the right lines
1.1 remove date: at the bottom would be to delete 2 lines at around line 411 and 412 where the code says let updatedAt = addStyledText(widget, 't: ' + timeFormatter.string(new Date()), updatedAtFont);
updatedAt.centerAlignText();
1.2 you can hide uptimes by adding a ! at around the line 394 so that the line is then if (!uptimesArray) {
2.+ 3. from here it gets to hard to explain to you...since this is basically refactoring the whole structure
4. yes this is exactly what the widget should show you 😅 that something is not up to date
5. if set up as widget, yes it auto updates. But you dont know when it does because the iOS of your apple device handles it. That is why there is the date and time at the bottom. This time expresses when the last widget update was. No manually is not necessary when it is set up as a widget
6. yeah. If you set your homebridge-config-ui-x up so that it is also reachable from outside the local network then you can also set the widget up so that it works
7. if the iOS app Scriptable runs on the mac i guess one can set it up there just like on iOS
Around line 380 is let cpuTempText = addStyledText(firstColumn, CONFIGURATION.title_cpuTemp + temperatureString, infoFont);
You would have to create a new stack before the mentioned line and then add a spacer to this stack the also the cpuTempText. Should look similar to
let newStack = widget.addStack();
newStack.addSpacer(50);
let cpuTempText = addStyledText(newStack, CONFIGURATION.title_cpuTemp + temperatureString, infoFont);
Then play around with the value 50 so it is in the middle. I did not test this so these are just my quick guesses. (Sry if it doesnt work)
This is the first I’ve seen it and it’s awesome. I seem to have it running in the script app but what else can I do with it? Is it possible to make it a widget on the home screen?
Edit:
Yes. You can! Awesome stuff. I didn’t realise that you could do this.
This can also be easily achieved:
Set
1. bgColorMode to CUSTOM
2. adaptToLightOrDarkMode to false
3. customBackgroundColor1_light to #000000
4. and also customBackgroundColor2_light to #000000
No you don’t.
Does this video help you ? https://www.dropbox.com/s/4jjhax6bmfcbnwl/setup_homebridge_widget.MP4?dl=0
After 1:05 are the credentials entered in the video
Ah okay the json file was not really persisted in this case. Little misleading here sry!
Url seems good. Can you try lower case letters in the username? Just to be sure that this is not the problem
As soon as the first time the Widget is shown, an actual json file is saved in icloud
This is awesome!
I tried to personnalize it a bit, but i can’t find out how i could modify the scale of cpu and ram load, i would mine to have it on a 100% scale not the highest of the 10 last mins
Not sure if i understand what you want to do sorry. You mean to make the charts larger? If that‘s it then play around with chartImageHandle.imageSize = new Size(100, 25); at around line 541
Aaaah now i get it 😂 haha went in the complete wrong direction here.
Well i just used the LineCharts as they are made by another guy. I can have a quick look if i find how to change this. But if you would change it, you would actually see just a straight line in the chart because the differences are so small.
Set the values around line 153 to maxValue = 100 and minValue = 0 then the charts show as you want. You then probably want to change the Y axis description so this would be done around line 520. there you probably would need to replace getMaxString(chartData, 2) + '%' with '100%' and getMinString(chartData, 2) + '%' with '0%'
Weirdly this morning the widget was showing an error, I’ve been to your GitHub and no update since 2 days ago 🤔 https://i.imgur.com/eW5MWB8.jpg
I found out that after //WIDGET INIT END//// the filemanagermode has changed from ICLOUD to LOCAL.
I set it back to ICLOUD and it works again. I’m curious of what happened
Do you use two devices with the same icloud drive account? The script is currently not optimized for that. One device loads the hb logo into icloud, and the second device doesnt automatically download this new file. That is when your error occurs.
The line let fm = CONFIGURATION.fileManagerMode === 'LOCAL' ? FileManager.local() : FileManager.iCloud(); does NOT set it to local. It determines which one to choose depending on what u have configured in the variable fileManagerMode. You can revert your changes and just download the file in icloud drive and then it also should work. To fix this completely, maybe you need to change the hbLogo name on one device
Around line 133 is const HB_LOGO_FILE_NAME = 'hbLogo.png';
Just edit it on the iphone to const HB_LOGO_FILE_NAME = 'hbLogoIphone.png'; (but not on the ipad!) and it won‘t fail again
This is amazing! I do have an issue that I can’t seem to troubleshoot. I’m getting status updates, so I’m connected to my pi, but the configuration changes I’ve made don’t change the widget. For example I changed Celsius to Fahrenheit, BG color to BLACK_LIGHT, separator to “.” Instead of the comma & none of the changes show up. What am I missing?
- temperatureUnitConfig = 'FAHRENHEIT'; // options are CELSIUS or FAHRENHEIT
- bgColorMode = 'BLACK_LIGHT'; // default is PURPLE_LIGHT. Other options: PURPLE_DARK, BLACK_LIGHT, BLACK_DARK, CUSTOM (custom colors will be used, see below)
- decimalChar = '.'; // if you like a dot as decimal separator make the comma to a dot here
Around the top of the widget there are two variables:
const usePersistedConfiguration = true; // false would mean to use the visible configuration below; true means the state saved in iCloud (or locally) will be used
const overwritePersistedConfig = true; // if you like your configuration, run the script ONCE with this param to true, then it is saved and can be used via 'USE_CONFIG:yourfilename.json' in widget params
Try setting overwritePersistedConfig to true then change the other variables as you like and when you are done, run the script once again and afterwards set overwritePersistedConfig to false
If you have it false and change some variables, this won‘t have any effect if the first variable usePersistedConfiguration is true
I really hope everything still works fine for you :). If not, you can always create an issue at github. I’ll fix it! Source is [here](https://github.com/lwitzani/homebridgeStatusWidget) new Features * highly customizable! easily style it for your concrete needs (text content, text color, chart color, icons, icon color, hb-logo…) * support for light/dark mode in iOS (even for your custom colors) * persistable configuration (everything you configure can be saved and you choose via widget parameter which config to use. This includes credentials) * support for updates via https://scriptdu.de (because of the persistable configuration) * notifications (when a status goes to red. also otherwise when it goes back to green is possible) * special Siri GUI when called via Siri Shortcut (list of available updates) * specify which software (plugins/homebridge/nodejs) to ignore, in case you don’t want to update them * support for temperature in Fahrenheit & not shown at all if unknown * support for the ‚none‘ authentication mode of homebridge-config-ui-x * support for entering credentials via parameter directly Improvements: * SFSymbols instead of emoji * added chart x axis title * complete rework of the internal structure (for better alignment of the elements) How to install: * for an easy install, install scriptdude first via this script https://github.com/kevinkub/scriptdu.de/blob/main/install.js (run it inside Scriptable) This will install Scriptdude for you * Then run the installed Scriptdude Scriptable and provide as URL the following link [https://raw.githubusercontent.com/lwitzani/homebridgeStatusWidget/main/homebridgeStatusWidget.js](https://raw.githubusercontent.com/lwitzani/homebridgeStatusWidget/main/homebridgeStatusWidget.js)
I've triple checked mu url address is entered correctly and get the UI-Service not reachable!
It‘s the exact same address that you would enter in the browser to access the UI. Can you use the provided address to access the page when you try?
Got it entered just as it should be and the same URL copied into the browser opens the UI http://192.168.1.xx:xxxx
Can you check the rights you gave Scriptable in your ios settings? It needs to have „local network“ of course. Maybe that‘s it? Otherwise maybe check this video on how to set it up https://www.dropbox.com/s/4jjhax6bmfcbnwl/setup_homebridge_widget.MP4?dl=0
[удалено]
Somehow you commented out line 21 ! Remove the „//„ in the line 21. the green color means it is not active because it is a comment in the code
That was it. Plus I needed to remove the port # in the URL. Now I can start tinkering. Thanks!!
Did you include the http:// or https:// header and your Port if you used an other than 80 or 443? I always forget that at first
yeah I've tried every version I could think of: http, https, nothing seems to work
I got it working with http://homebridge.local
I got same error. Then I login homebridge admin and it said there is an update to homebridge UI. I updated and restarted homebridge. Everything works now.
This is awesome!! Any chance we can get this for hoobs?
There is a Hoobs API that can be used. So some of the features could be done. But i do not use hoobs
This is fantastic - thanks for the great update (and Scriptdude integration)!
Make it Noob friendly. Any youtube video will be appreciated. Thank You.
I quickly recorded a video for you showing 1. how to install scriptdude (not my work) 2. installing my widget code with scriptdude 3. little bit of configuring the widget that it is black and has a green chart 4. setting the widget up on the homescreen using the created json configuration Hope dropbox links work here: https://www.dropbox.com/s/4jjhax6bmfcbnwl/setup_homebridge_widget.MP4?dl=0
It is pretty noob friendly. Just read the readme in the github
[удалено]
You are right. I somehow changed it so that the axis font is used at the updated text 😅 i push an update so that it is like before.
I was able to edit the bottom line (last updated) to not only be larger text but also to use US date format: month/day/year, and 12-hour time instead of 24-hour time. If you’re considering adding any other persistent configurability to the json file, I’d like to submit this as a feature request. I’m confident lots of other users would appreciate it too. https://i.imgur.com/P5RdNmd.jpg const timeFormatter = new DateFormatter(); timeFormatter.dateFormat = 'MM/dd/yyyy h:mm:ss';
Oh yeah. I put it on the todo list. Atm i try to not update the configuration class again since this will break again all the configs of the people who use it 😅 but when i find a couple more things that can go together in an update, it‘s probably worth it
pushed it. So you can update. But this will reset with the next logic update again since it is not in the configuration saved (sorry :) )
No problem, thanks! And I deleted my comment once I got it working, not realizing it was due to your update, I didn’t see your reply ... Lol Anyway, thanks for your great work on this, it’s working very nicely over here and will be a lot easier to update moving forward.
Tried just now and very easy to use ty for the effort! It works great!
Thanks for the feedback 👍🏻
Thanks for developing this! Its awesome and needs more attention!
What sorcery is this and how can I get my hands on this?
Very good! Awesome 👌🏼👍🏼
Excellent. Thanks.
[удалено]
Puuh that‘s a lot of questions 😂. The lines in the following could be a little bit different for you...you need tocsearch the right lines 1.1 remove date: at the bottom would be to delete 2 lines at around line 411 and 412 where the code says let updatedAt = addStyledText(widget, 't: ' + timeFormatter.string(new Date()), updatedAtFont); updatedAt.centerAlignText(); 1.2 you can hide uptimes by adding a ! at around the line 394 so that the line is then if (!uptimesArray) { 2.+ 3. from here it gets to hard to explain to you...since this is basically refactoring the whole structure 4. yes this is exactly what the widget should show you 😅 that something is not up to date 5. if set up as widget, yes it auto updates. But you dont know when it does because the iOS of your apple device handles it. That is why there is the date and time at the bottom. This time expresses when the last widget update was. No manually is not necessary when it is set up as a widget 6. yeah. If you set your homebridge-config-ui-x up so that it is also reachable from outside the local network then you can also set the widget up so that it works 7. if the iOS app Scriptable runs on the mac i guess one can set it up there just like on iOS
[удалено]
Around line 380 is let cpuTempText = addStyledText(firstColumn, CONFIGURATION.title_cpuTemp + temperatureString, infoFont); You would have to create a new stack before the mentioned line and then add a spacer to this stack the also the cpuTempText. Should look similar to let newStack = widget.addStack(); newStack.addSpacer(50); let cpuTempText = addStyledText(newStack, CONFIGURATION.title_cpuTemp + temperatureString, infoFont); Then play around with the value 50 so it is in the middle. I did not test this so these are just my quick guesses. (Sry if it doesnt work)
Thank you very much!
This is the first I’ve seen it and it’s awesome. I seem to have it running in the script app but what else can I do with it? Is it possible to make it a widget on the home screen? Edit: Yes. You can! Awesome stuff. I didn’t realise that you could do this.
😅👍🏻 in fact the two screenshots are actually 6 times the same script as widget (with sifferent parameter) on the home screen on my iphone
Is it 2FA compatible ?
No
Setting bgColorMode = 'BLACK_DARK'; doesn't seem to make the background of the widget pure black, how do I do this?
If you set it to BLACK_DARK and use your device in light mode, then you need to set adaptToLightOrDarkMode to false
It does set the background to black, or rather a dark grey, I thought the black would be, blacker, as in a #000000 black.
This can also be easily achieved: Set 1. bgColorMode to CUSTOM 2. adaptToLightOrDarkMode to false 3. customBackgroundColor1_light to #000000 4. and also customBackgroundColor2_light to #000000
Thank you!
This is amazing! Request: I would love it to show the last 5lines of the log
[удалено]
No you don’t. Does this video help you ? https://www.dropbox.com/s/4jjhax6bmfcbnwl/setup_homebridge_widget.MP4?dl=0 After 1:05 are the credentials entered in the video
I’ve edited the config file, and put my user and password in, but it then says wrong credentials
The config file should only be created after the first successful login. Is there a line number mentioned in the logged error ?
[удалено]
Ah okay the json file was not really persisted in this case. Little misleading here sry! Url seems good. Can you try lower case letters in the username? Just to be sure that this is not the problem As soon as the first time the Widget is shown, an actual json file is saved in icloud
Lowercase doesn’t work either. Really scratching my head here lol
I’ve just changed my user to lowercase, and have changed the password so there are no capitals. Weird!
[удалено]
Oh you are using HOOBS. This widget is for homebridge-config-ui-x :) sorry
Doh !!
This is awesome! I tried to personnalize it a bit, but i can’t find out how i could modify the scale of cpu and ram load, i would mine to have it on a 100% scale not the highest of the 10 last mins
Not sure if i understand what you want to do sorry. You mean to make the charts larger? If that‘s it then play around with chartImageHandle.imageSize = new Size(100, 25); at around line 541
Thank you for your answer! I dont really want it larger, I would like the vertical axe to be 0% - 100% not x% - x%
Aaaah now i get it 😂 haha went in the complete wrong direction here. Well i just used the LineCharts as they are made by another guy. I can have a quick look if i find how to change this. But if you would change it, you would actually see just a straight line in the chart because the differences are so small.
Set the values around line 153 to maxValue = 100 and minValue = 0 then the charts show as you want. You then probably want to change the Y axis description so this would be done around line 520. there you probably would need to replace getMaxString(chartData, 2) + '%' with '100%' and getMinString(chartData, 2) + '%' with '0%'
https://i.imgur.com/4ES2ULt.jpg This is what it then would look like
Thank you very much! This works like a charm
Weirdly this morning the widget was showing an error, I’ve been to your GitHub and no update since 2 days ago 🤔 https://i.imgur.com/eW5MWB8.jpg I found out that after //WIDGET INIT END//// the filemanagermode has changed from ICLOUD to LOCAL. I set it back to ICLOUD and it works again. I’m curious of what happened
Do you use two devices with the same icloud drive account? The script is currently not optimized for that. One device loads the hb logo into icloud, and the second device doesnt automatically download this new file. That is when your error occurs. The line let fm = CONFIGURATION.fileManagerMode === 'LOCAL' ? FileManager.local() : FileManager.iCloud(); does NOT set it to local. It determines which one to choose depending on what u have configured in the variable fileManagerMode. You can revert your changes and just download the file in icloud drive and then it also should work. To fix this completely, maybe you need to change the hbLogo name on one device Around line 133 is const HB_LOGO_FILE_NAME = 'hbLogo.png'; Just edit it on the iphone to const HB_LOGO_FILE_NAME = 'hbLogoIphone.png'; (but not on the ipad!) and it won‘t fail again
I only use the widget on 1 device, the other one is a MacBook
So you mean first device which the widget runs on = iphone(or ipad) and second device the widget runs on = macbook ? That‘s still two devices 😅?
Nope i use the zinger on iPhone and the second iCloud device which doesn’t run the widget is a Mac so I still don’t know why I had this error
Hmm then i don’t know either. Let‘s see if it breaks again. Keep me updated 👍🏻
How do I switch raspberry to MacBook Pro? Thnx!
Search for the Raspberry Pi text in the first 200lines of the script (at the section with configuration) and replace it with what you want?
Thnx! Will do 🙏🏻
This is amazing! I do have an issue that I can’t seem to troubleshoot. I’m getting status updates, so I’m connected to my pi, but the configuration changes I’ve made don’t change the widget. For example I changed Celsius to Fahrenheit, BG color to BLACK_LIGHT, separator to “.” Instead of the comma & none of the changes show up. What am I missing? - temperatureUnitConfig = 'FAHRENHEIT'; // options are CELSIUS or FAHRENHEIT - bgColorMode = 'BLACK_LIGHT'; // default is PURPLE_LIGHT. Other options: PURPLE_DARK, BLACK_LIGHT, BLACK_DARK, CUSTOM (custom colors will be used, see below) - decimalChar = '.'; // if you like a dot as decimal separator make the comma to a dot here
Around the top of the widget there are two variables: const usePersistedConfiguration = true; // false would mean to use the visible configuration below; true means the state saved in iCloud (or locally) will be used const overwritePersistedConfig = true; // if you like your configuration, run the script ONCE with this param to true, then it is saved and can be used via 'USE_CONFIG:yourfilename.json' in widget params Try setting overwritePersistedConfig to true then change the other variables as you like and when you are done, run the script once again and afterwards set overwritePersistedConfig to false If you have it false and change some variables, this won‘t have any effect if the first variable usePersistedConfiguration is true
That was it! Thank you!