Custom Theme in HabPanel 2.1 Example

skin
theme
stylesheet
Tags: #<Tag:0x00007f6ce610c2f0> #<Tag:0x00007f6ce610c1b0> #<Tag:0x00007f6ce6113f78>

(Dominic Bialas) #123

I will try Tonight


(Dominic Bialas) #124

this ist the output - i cannot see the additional loggings:

[22:01:22] openhabian@openHABianPi:/etc/openhab2/html/matrix-theme$ sudo python svg_combiner.py

Processing file: Document & Folder_file-add.svg
Processing file: image video_cam-2 2.svg
Processing file: user-interaction-review_1-3-cross.svg
Processing file: Weather_dark-moon.svg
Processing file: emotions_mad 2.svg
Processing file: Control & Navigation_stop-04 2.svg
Processing file: Userinterface_medium-box 2.svg
Processing file: Household_back-stool.svg
Processing file: Celebration & Holidays_Christmas ball.svg
Processing file: Clothes & Shoes-02 2.svg
Processing file: Games & Entertainment_sports-wear 2.svg
Processing file: Finance & Shopping_partsal-2.svg
Processing file: Control & Navigation_left-blend-arrow 2.svg
Processing file: Userinterface_game 2.svg
Processing file: Games & Entertainment_shuttilebat.svg
Processing file: Household_bed-2.svg
Processing file: Audio & Music Instruments_sound2 2.svg
Processing file: arrow-with-circle-left 2.svg
Processing file: user-interaction-review_blocks 2.svg
Processing file: Control & Navigation_visual.svg
Processing file: github-with-circle.svg
Processing file: Design_indent-inside 2.svg
Processing file: thermometer 2.svg
Processing file: food and drink_coffee.svg
Processing file: gesture_4f-tap-up 3.svg
Processing file: Clothes & Shoes-73 2.svg
Processing file: Editing_test-veticle-line 2.svg
Processing file: Celebration & Holidays_navigator.svg
Processing file: Buildings-25 2.svg
Processing file: gesture_3fingers-56 4.svg
Processing file: map and locations_map-circle 2.svg
Processing file: Finance & Shopping_bank-2.svg
Processing file: Clothes & Shoes-31.svg
Processing file: Control & Navigation_share-right-down 2.svg
Processing file: Document & Folder_folder-lock.svg
Processing file: Editing_h5-05 2.svg
Processing file: Office-51.svg
Processing file: Games & Entertainment_stumps 2.svg
Processing file: Office-93 2.svg
Processing file: Devices & Network II_blend-file 2.svg
Processing file: Games & Entertainment_knight 2.svg
Processing file: Office-63.svg
Processing file: SociaI-icons_linkedin-1 2.svg
Processing file: Clothes & Shoes-53.svg
Processing file: Devices & Network_charging-2 2.svg
Processing file: image-inverted 2.svg
Processing file: Control & Navigation-II_arw-rd-left 2.svg
Processing file: Buildings-49 2.svg
Processing file: Celebration & Holidays_leef -dec 2.svg
Processing file: Editing_scale 2.svg
Processing file: gesture_5f-pinchin 4.svg
Processing file: gesture_2f-swipe-down-35.svg
Processing file: Finance & Shopping_coin-3.svg
Processing file: Buildings-52.svg
Processing file: image video_slier-1 2.svg
Processing file: Office-27 2.svg
Processing file: Finance & Shopping_locker-block 2.svg
Processing file: user-interaction-review_verticle-bars 2.svg
Processing file: Devices & Network_charging-3.svg
Processing file: Weather_rain-1 2.svg
Processing file: Finance & Shopping_report-up 2.svg
Processing file: Weather_night-thunder.svg
Processing file: Household_book-shelve 2.svg
Processing file: compass.svg
Processing file: Clothes & Shoes-79 2.svg
Processing file: arrow-long-up.svg
Processing file: creative-commons-attribution.svg
Processing file: check.svg
Processing file: Design_2-square-l.svg
Processing file: gesture_searching 4.svg
Processing file: Document & Folder_file-check 2.svg
Processing file: basecamp.svg
Processing file: Games & Entertainment_ball-4.svg
Processing file: map and locations_map-locate-39.svg
Processing file: food and drink_juice cup 2.svg
Processing file: gesture_3f-horizotal-dragin 3.svg
Processing file: Design_compress.svg
Processing file: Clothes & Shoes-29.svg
Processing file: Household_bedt-set 2.svg
Processing file: gesture_4f-drag-left-right.svg
Processing file: Celebration & Holidays-II_ghost.svg
Processing file: Audio & Music Instruments_cd-cover.svg
Processing file: help-with-circle 2.svg
Processing file: unread 2.svg
Processing file: Celebration & Holidays-II_net 2.svg
Processing file: Household_dining-set 2.svg
Processing file: Userinterface_report-flag 2.svg
Processing file: Userinterface_bookmark.svg
Processing file: Devices & Network_cloud-right.svg
Processing file: SociaI-icons_digg6.svg
Processing file: user-interaction-review_statitstics 2.svg
Processing file: SociaI-icons_blogger.svg
Processing file: Design_5-square 2.svg
Processing file: Clothes & Shoes-25.svg
Processing file: Control & Navigation_down3-arrow.svg
Processing file: Devices & Network_headphone 2.svg
Processing file: clapperboard 2.svg
Processing file: Control & Navigation_infinity.svg
Processing file: Games & Entertainment_globe-climp.svg
Processing file: Control & Navigation-II_node-right 2.svg
Processing file: Office-54.svg
Processing file: back-in-time 2.svg
Processing file: Control & Navigation-II_arw-rd-left.svg
Processing file: image video_web-cam.svg
Processing file: Office-57 2.svg
Processing file: Control & Navigation_close-arrows 2.svg
Processing file: Office-39.svg
Processing file: gesture_5f-drag.svg
Processing file: Games & Entertainment_winner.svg
Processing file: food and drink_cashews.svg
Processing file: game-controller.svg
Processing file: SociaI-icons_virb.svg
Processing file: Userinterface_cloud-down.svg
Processing file: Audio & Music Instruments_headphone-mic 2.svg
Processing file: Household_vacuum-cleaner.svg
Processing file: Celebration & Holidays_candles-43.svg
Processing file: facebook 2.svg
Processing file: Games & Entertainment_ball-5-77.svg
Processing file: Control & Navigation_left2-arrow 2.svg
Processing file: emoji-neutral.svg
Processing file: Control & Navigation_down-arrow-42.svg
Processing file: map and locations_map-locate-13 2.svg
Processing file: SociaI-icons_google-38.svg
Processing file: user-interaction-review_graph-x 2.svg
Processing file: dots-two-vertical 2.svg
Processing file: bowl.svg
Processing file: Audio & Music Instruments_headphone 2.svg
Processing file: SociaI-icons_black 2.svg
Processing file: sound.svg
Processing file: Userinterface_page-back 2.svg
Processing file: awareness-ribbon.svg
Processing file: gesture_2f-drag-left-right-54.svg
Processing file: tumblr 2.svg
Processing file: user-interaction-review_cross 2.svg
Processing file: SociaI-icons_qik 2.svg
Processing file: Userinterface_unloack.svg
Processing file: picasa.svg
Processing file: Control & Navigation-II_arw-rd-down.svg
Processing file: Design_decrease height 2.svg
Processing file: Buildings-01 2.svg
Processing file: remove-user 2.svg
Processing file: phone.svg
Processing file: gesture_finger-press 3.svg
Processing file: Control & Navigation-II_line-arw-rt 2.svg
Processing file: Buildings-46 2.svg
Processing file: SociaI-icons_arto 2.svg
Processing file: Celebration & Holidays_bag-2.svg
Processing file: credit-card 2.svg
Processing file: Devices & Network_nan0-sim.svg
Processing file: Document & Folder_file-chart.svg
Processing file: Document & Folder_board-close 2.svg
Processing file: Clothes & Shoes-43 2.svg
Processing file: food and drink_dryfruit.svg
Processing file: Control & Navigation_control-2.svg
Processing file: controller-fast-backward 2.svg
Processing file: Devices & Network_radio-2 2.svg
Processing file: Office-20 2.svg
Processing file: Editing_bottom-block 2.svg
Processing file: vine.svg
Processing file: Office-17.svg
Processing file: user-interaction-review_graph-top 2.svg
Processing file: Games & Entertainment_park-game-5 2.svg
Processing file: SociaI-icons_yahoo.svg
Processing file: circle-with-cross 2.svg
Processing file: Design_wave.svg
Processing file: food and drink_papper 2.svg
Processing file: image video_palyer.svg
Processing file: image video_photos-4-32.svg
Processing file: SociaI-icons_speech 2.svg
Processing file: Weather_direction-s 2.svg
Processing file: Userinterface_popup 2.svg
Processing file: loop.svg
Processing file: tv.svg
Processing file: power-plug.svg
Processing file: ccw.svg
Processing file: food and drink_juice-straw-66.svg
Processing file: Household_washing-machi 2.svg
Processing file: Design_cylindrical 2.svg
Processing file: Office-04 2.svg
Processing file: mouse-pointer 2.svg
Processing file: tablet-mobile-combo 2.svg
Processing file: user-interaction-review_girl-hair 2.svg
Processing file: gesture_3f-tap-down 2.svg
Processing file: Clothes & Shoes-27.svg
Processing file: Devices & Network_wifi 2.svg
Processing file: emotions_mad-smile-2 2.svg
Processing file: user-interaction-review_unlock-user-rd 2.svg
Processing file: Audio & Music Instruments_sound.svg
Processing file: pie-chart.svg
Processing file: map and locations_map-close 2.svg
Processing file: Control & Navigation_stretch 2.svg
Processing file: Celebration & Holidays_umbrella 2.svg
Processing file: Audio & Music Instruments_drum.svg
Processing file: Devices & Network_micro-sim 2.svg
Processing file: gesture_2f-swipe-up 3.svg
Processing file: controller-jump-to-start 2.svg
Processing file: Finance & Shopping_amex-card 2.svg
Processing file: trophy.svg
Processing file: Office-05 2.svg
Processing file: gesture_drag down 3.svg
Processing file: Editing_center-align.svg
Processing file: SociaI-icons_retweet.svg
Processing file: Celebration & Holidays_snowflake-6.svg
Processing file: image video_photo-1.svg
Processing file: gesture_2f-tap-25 4.svg
Processing file: Document & Folder_doc.svg
Processing file: Weather_half-moon.svg
Processing file: SociaI-icons_github 2.svg
Processing file: gesture_4f-tap-down 2.svg
Processing file: Weather_1-4-moon.svg
Processing file: map and locations_locate-add 2.svg
Processing file: Devices & Network_responsive.svg
Processing file: google+-with-circle 2.svg
Processing file: gesture_swipe-left-h 3.svg
Processing file: bell.svg
Processing file: Devices & Network_cpu.svg
Processing file: aircraft-take-off 2.svg
Processing file: Household_sofa-wood.svg
Processing file: old-phone 2.svg
Processing file: Celebration & Holidays_shore.svg
Processing file: Userinterface_player 2.svg
Processing file: Finance & Shopping_money-rotate-38.svg
Processing file: Audio & Music Instruments_sound1.svg
Processing file: food and drink_dish.svg
Processing file: emotions_laughter.svg
Processing file: Userinterface_mail-61.svg
Processing file: Design_square-c.svg
Processing file: Control & Navigation_round-close-arrow 2.svg
Processing file: Editing_left-align.svg
Processing file: user-interaction-review_upload-user 2.svg
Processing file: Finance & Shopping_dollar-bag.svg
Processing file: gesture_press.svg
Processing file: food and drink_cube cake.svg
Processing file: Document & Folder_after effects.svg
Processing file: Document & Folder_after effects 2.svg
Processing file: gesture_3fingers-41 2.svg
Processing file: Games & Entertainment_angribird-2.svg
Processing file: user-interaction-review_waves 2.svg
Processing file: Games & Entertainment_indoorgame 2.svg
Processing file: Buildings-53 2.svg
Processing file: user-interaction-review_round-chart.svg
Processing file: Celebration & Holidays_beach umbrella.svg
Processing file: Control & Navigation_channels.svg
Processing file: Devices & Network_magic-mouse 2.svg
Processing file: mic 2.svg
Processing file: tree.svg
Processing file: facebook.svg
Processing file: gesture_5f-swipe-left 3.svg
Processing file: Devices & Network II_left-folder.svg
Processing file: map and locations_map 2.svg
Processing file: Games & Entertainment_ball-3.svg
Processing file: image video_sun-file.svg
Processing file: Office-81.svg
Processing file: Clothes & Shoes-44.svg
Processing file: Devices & Network_tabs.svg
Processing file: gesture_5f-swipe-up 3.svg
Processing file: Finance & Shopping_coin-4.svg
Processing file: gesture_5f-tap-hold.svg
Processing file: gesture_5f-press.svg
Processing file: image video_cam-3 2.svg
Processing file: Buildings-54.svg
Processing file: Celebration & Holidays_Christmas ball -3.svg
Processing file: Weather_direction-n 2.svg
Processing file: Document & Folder_file-music.svg
Processing file: SociaI-icons_picasa 2.svg
Processing file: gesture_1f-tap-down 4.svg
Processing file: map and locations_locate-minus 2.svg
Processing file: user-interaction-review_favorite-user 2.svg
Processing file: Userinterface_details.svg
Processing file: Document & Folder_folder-settings 2.svg
Processing file: Household_refrigerator-s 2.svg
Processing file: Document & Folder_folder-trash.svg
Processing file: Games & Entertainment_helmat 2.svg
Processing file: Celebration & Holidays-II_fish.svg
Processing file: user-interaction-review_unlock-user 2.svg
Processing file: user-interaction-review_user-round 2.svg
Processing file: gesture_drag down.svg
Processing file: Devices & Network_storager 2.svg
Processing file: gesture_1f-tap-up 4.svg
Processing file: Document & Folder_board-unloack 2.svg
Processing file: food and drink_pubs.svg
Processing file: Household_round-lamp.svg
Processing file: arrow-long-right 2.svg
Processing file: Celebration & Holidays_wine-glass 2.svg
Processing file: align-vertical-middle.svg
Processing file: Audio & Music Instruments_sound-cancel 2.svg
Processing file: Control & Navigation-II_arw-right 2.svg
Processing file: Document & Folder_files-3 2.svg
Processing file: Celebration & Holidays-II-21.svg
Processing file: emotions_intence 2.svg
Processing file: Userinterface_blank-browser.svg
Processing file: SociaI-icons_bing-08 2.svg
Processing file: popup.svg
Processing file: SociaI-icons_slideshare-68 2.svg
Processing file: Celebration & Holidays-II_beach 2.svg
Processing file: image video_film 2.svg
Processing file: emotions_mustache 2.svg
Processing file: Household_dish-cleaner 2.svg
Processing file: aircraft-landing 2.svg
Processing file: map and locations_locate-people.svg
Processing file: Finance & Shopping_card-unloack 2.svg
Processing file: Control & Navigation_share-top 2.svg
Processing file: Games & Entertainment_Golf.svg
Processing file: info.svg
Processing file: gesture_2fingers 2.svg
Processing file: Buildings-12 2.svg
Processing file: Editing_braces.svg
Processing file: Devices & Network_cloud-up.svg
Processing file: image video_tick-file 2.svg
Processing file: gesture_5f-swipe-up 2.svg
Processing file: align-horizontal-middle 2.svg
Processing file: network.svg
Processing file: SociaI-icons_smugmug.svg
Processing file: video-camera.svg
Processing file: gauge 2.svg
Processing file: user-interaction-review_success-user 2.svg
Processing file: list.svg
Processing file: Buildings-55 2.svg
Processing file: gesture_5f-drag-up-down 4.svg
Processing file: Devices & Network II_drag-folder.svg
Processing file: drink 2.svg
Processing file: Clothes & Shoes-46.svg
Processing file: Document & Folder_file-music 2.svg
Processing file: emotions_spooked-2 2.svg
Processing file: cloud 2.svg
Processing file: Finance & Shopping_dollar-43 2.svg
Processing file: text-document 2.svg
Processing file: Control & Navigation-II_node-left 2.svg
Processing file: Household_lomg-table.svg
Processing file: tablet 2.svg
Processing file: emoji-flirt.svg
Processing file: Celebration & Holidays_snowflake-8 2.svg
Processing file: SociaI-icons_linkedin.svg
Processing file: Control & Navigation_share-left-down.svg
Processing file: Clothes & Shoes-62.svg
Processing file: Clothes & Shoes-23 2.svg
Processing file: Clothes & Shoes-03.svg
Processing file: Buildings-58 2.svg
Processing file: Celebration & Holidays-II-22.svg
Processing file: compass 2.svg
Processing file: time-slot 2.svg
Processing file: user-interaction-review_time-user 2.svg
Processing file: food and drink_corn-glass-67 2.svg
Processing file: food and drink_glass.svg
Processing file: gesture_5f-tap-up 4.svg
Processing file: user-interaction-review_chat-m.svg
Processing file: food and drink_coconut 2.svg
Processing file: Buildings-85.svg
Processing file: Audio & Music Instruments_music-note2 2.svg
Processing file: Control & Navigation_connection-arw-r.svg
Processing file: Games & Entertainment_Gymnastics 2.svg
Processing file: Control & Navigation-II_dropdown.svg
Processing file: emotions_devasation.svg
Processing file: Document & Folder_file-block 2.svg
Processing file: Games & Entertainment_table-tennis.svg
Processing file: Clothes & Shoes-36 2.svg
Processing file: Office-96.svg
Processing file: gesture_2f-tap-25 2.svg
Processing file: user-interaction-review_love-pople 2.svg
Processing file: Buildings-51.svg
Processing file: gesture_4f-drag-left-right 2.svg
Processing file: Control & Navigation_3-1 arrow 2.svg
Processing file: map and locations_locate-close-23.svg
Processing file: Household_food-maker.svg
Processing file: Userinterface_tick 2.svg
Processing file: emotions_kids 2.svg
Processing file: Document & Folder_file-rotate 2.svg
Processing file: dots-two-horizontal 2.svg
Processing file: Control & Navigation_anti-clock-arw.svg
Processing file: Celebration & Holidays_tree-1 2.svg
Processing file: gesture_2f-drag-left-right-38.svg
...
Processing file: SociaI-icons_forrst.svg
Processing file: user-interaction-review_girl 2.svg
Done in 70.682254076 seconds 0 symbols created


(Patrick) #125

Are you sure you copied all the files? It should be 2400 or so files. Looks much less.


(Dominic Bialas) #126

... the text would be much longer as the forum rules allow it. the "..." are thousands of files.

Is it possible to get some basic logging information to get rid out until which position the script runs correct?


(Patrick) #127

I added some more logging. Please rerun.


(Dominic Bialas) #128

this is the result;

Processing file: Household_king-sofa.svg
500
Processing file: Userinterface_letter.svg
500
Processing file: flag.svg
500
Processing file: Clothes & Shoes-97.svg
500
Processing file: Finance & Shopping_money-exchange.svg
500
Processing file: gesture_finger-security 4.svg
500
Processing file: Weather_1-3moon.svg
500
Processing file: Buildings_mosque.svg
500
Processing file: Document & Folder_file-drawer-2.svg
500
Processing file: Finance & Shopping_locker.svg
500
Processing file: SociaI-icons_orkut.svg
500
Processing file: SociaI-icons_forrst.svg
500
Processing file: user-interaction-review_girl 2.svg
500
Done in 72.8568069935 seconds 0 symbols created

(Patrick) #129

ah hah! It gets an internal server error when accessing the file via http.

Does this link work for you:

http://openhabianpi.local:8080/static/matrix-theme/original-svgs/Weather_dark-moon.svg

It may be a permission problem when you copied the files.


(Patrick) #130

How about something like this:


(coasting) #131

Looks very good :wink:
Are the buttons responsive, i.e. setting and showing the set temperature? I guess the left number shall represent the actual temp. Further optional settings would be a button to toggle the auto-mode of the thermostat and a label showing the window state (open/closed), but this seems to be an easy part I could do myself.

Very nice! Can you share the code?


(Dominic Bialas) #132

so, tried it with the local link. result is:

HTTP ERROR: 500

Problem accessing /static/matrix-theme/original-svgs/Weather_dark-moon.svg. Reason:

/etc/openhab2/html/matrix-theme/original-svgs/Weather_dark-moon.svg (Permission denied)

Powered by Jetty://

at the moment the permissions are:

-rwx------ 1 openhabian openhabian    801 Jan  7  2015 youtube-with-circle.svg

which permissions are needed?


(Patrick) #133

You should set the read permission to all!


(Dominic Bialas) #134

thank you, Patrick.

after a sudo chmod -R a+r /etc/openhab2/html/matrix-theme/original-svgs

now i get the following result:

Done in 120.657310963 seconds 96 symbols created

(Patrick) #135

Victory! :slight_smile:


(Dominic Bialas) #136

Hello Patrick,
after solving the first problem - the next appears :slight_smile:

I´m trying to use the grafana graphs, but can´t get them work.

The adress is:
http://192.168.178.115:3000/dashboard/db/outdoor_temp?orgId=1&from=1500930423933&to=1500952023934&theme=dark

and this looks like this:

but after using this adress in the theme, it looks like this (i typed the url in for the outdoor graph only):

could you help me one again?

edit:

the webconsole says the following:
GET
http://192.168.178.115:3000/dashboard/db/outdoor_temp [HTTP/1.1 200 OK 71ms]


(Patrick) #137

A couple of things:

First -- There are different ways to get your grafana graphs into habpanel. One is to embedd the dashboard. I don't like that option because it's too crowded and slow. Instead I output a barebones image (in the share menu of grafana there is a "output as direct image" (or similar). It looks like you are using your embedd-link as the image href. That won't work. Either you embed (iframe) or you use an img-tag with the image link.

In my case, those image links look like this:

http://openhabianpi.local:3000/render/dashboard-solo/db/mini-graphs?orgId=1&panelId=1&from=now-24h&to=now&width=500&height=250&tz=UTC%2B02%3A00

Here's more info on how to output the "image":

http://docs.grafana.org/reference/sharing/#direct-link-rendered-image

Second -- Grafana needs to authenticate the user. I wasn't able to make it work without authentication (even setting anonymous access to true). So, on every device that you access your habpanel, you have to first log in to grafana (looks like that's not your problem though here).

Hope this helps!


(coasting) #138

Hey Patrick

Did you meanwhile finish the thermostat theme and can you upload it to your github folder? Thx!


(Herbie Villachez) #139

Do the habpanel grafana graphs refresh as they are updated or only when you switch dashboards? I was playing around quite a bit and thought they were refreshing, but now that I have just left the panel alone they seem to be static until I switch/reload the dashboard. Using a Safari add to home screen link on an iPad.


(Herbie Villachez) #140

Not sure about the refresh. Just made a rule to have it switch to another dashboard, using 'switch dashboard with item value', and then immediately back to the main dashboard 15 minutes after every outside temperature update. Not too eloquent, but it seems to work for now.


(Andres) #141

Hi Patrick. Thank you for sharing all of this knowledge!
I just need some help to get the icon-thing done... This is how it looks on my hubPanel. I couldn't follow your guide to get it done.

Also the script is working great, but it doesn't get automatically updated. I just need to press UPDATE to get the current song artist and the current album cover.

(sorry about my english)


(Dominic Bialas) #142

@pmpkk and @herbus

Could you tell me where the index.html is located?