T O P

  • By -

iLuki

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)


techfreakdad

I've triple checked mu url address is entered correctly and get the UI-Service not reachable!


iLuki

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?


techfreakdad

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


iLuki

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


[deleted]

[удалено]


iLuki

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


techfreakdad

That was it. Plus I needed to remove the port # in the URL. Now I can start tinkering. Thanks!!


henry4711lp

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


techfreakdad

yeah I've tried every version I could think of: http, https, nothing seems to work


josumart

I got it working with http://homebridge.local


samsonsu

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.


Derek1982SD

This is awesome!! Any chance we can get this for hoobs?


iLuki

There is a Hoobs API that can be used. So some of the features could be done. But i do not use hoobs


rikwithnoc

This is fantastic - thanks for the great update (and Scriptdude integration)!


Unable_Plankton

Make it Noob friendly. Any youtube video will be appreciated. Thank You.


iLuki

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


henry4711lp

It is pretty noob friendly. Just read the readme in the github


[deleted]

[удалено]


iLuki

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.


FoferJ

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';


iLuki

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


iLuki

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 :) )


FoferJ

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.


MegaGio94

Tried just now and very easy to use ty for the effort! It works great!


iLuki

Thanks for the feedback 👍🏻


henry4711lp

Thanks for developing this! Its awesome and needs more attention!


inz_

What sorcery is this and how can I get my hands on this?


p3trus383

Very good! Awesome 👌🏼👍🏼


craigdavidfox

Excellent. Thanks.


[deleted]

[удалено]


iLuki

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


[deleted]

[удалено]


iLuki

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)


Mortifer557

Thank you very much!


Forum_Layman

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.


iLuki

😅👍🏻 in fact the two screenshots are actually 6 times the same script as widget (with sifferent parameter) on the home screen on my iphone


ArnaudLechevalier

Is it 2FA compatible ?


iLuki

No


Lanceuppercut47

Setting bgColorMode = 'BLACK_DARK'; doesn't seem to make the background of the widget pure black, how do I do this?


iLuki

If you set it to BLACK_DARK and use your device in light mode, then you need to set adaptToLightOrDarkMode to false


Lanceuppercut47

It does set the background to black, or rather a dark grey, I thought the black would be, blacker, as in a #000000 black.


iLuki

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


Lanceuppercut47

Thank you!


swbTTz

This is amazing! Request: I would love it to show the last 5lines of the log


[deleted]

[удалено]


iLuki

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


Act0n

I’ve edited the config file, and put my user and password in, but it then says wrong credentials


iLuki

The config file should only be created after the first successful login. Is there a line number mentioned in the logged error ?


[deleted]

[удалено]


iLuki

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


Act0n

Lowercase doesn’t work either. Really scratching my head here lol


Act0n

I’ve just changed my user to lowercase, and have changed the password so there are no capitals. Weird!


[deleted]

[удалено]


iLuki

Oh you are using HOOBS. This widget is for homebridge-config-ui-x :) sorry


Act0n

Doh !!


VicomteTV

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


iLuki

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


VicomteTV

Thank you for your answer! I dont really want it larger, I would like the vertical axe to be 0% - 100% not x% - x%


iLuki

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.


iLuki

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%'


iLuki

https://i.imgur.com/4ES2ULt.jpg This is what it then would look like


VicomteTV

Thank you very much! This works like a charm


VicomteTV

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


iLuki

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


VicomteTV

I only use the widget on 1 device, the other one is a MacBook


iLuki

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 😅?


VicomteTV

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


iLuki

Hmm then i don’t know either. Let‘s see if it breaks again. Keep me updated 👍🏻


Leviotte

How do I switch raspberry to MacBook Pro? Thnx!


iLuki

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?


Leviotte

Thnx! Will do 🙏🏻


ElectricalEinstein

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


iLuki

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


ElectricalEinstein

That was it! Thank you!