Number buttons

[ronniebee]

Hi, I love this card. Finally can control my tv/netflix etc! great job!!!

I have one request, can you add the numbers 0-9 so it would be possible to select TV channels (i now have modified the back and forward buttons to switch channels). This would make this card complete.

My card ... :-)

[sbryfcz]

I have another request to allow for adding arbitrary buttons in rows or a grid. I think this will satisfy your request once complete. Hoping to get to it this weekend.

[ronniebee]

Wow!! That would be great… a cup of coffee/beer will follow :-)..

Op 12 feb. 2020, om 03:00 heeft Sam Bryfczynski notifications@github.com het volgende geschreven:

I have another request to allow for adding arbitrary buttons in rows or a grid. I think this will satisfy your request once complete. Hoping to get to it this weekend.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/sbryfcz/harmony-card/issues/19?email_source=notifications&email_token=ABVUJC5QWQMIGF3I5UZEYCTRCNJ25A5CNFSM4KTH2UOKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOELPBNOA#issuecomment-584980152, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABVUJCZ6MAKFOA5AGCH4IPDRCNJ25ANCNFSM4KTH2UOA.

[sbryfcz]

Ha!!! Thanks for the motivation 😊

[ronniebee]

Hi, any luck so far adding the numbers? @sbryfcz

[sbryfcz]

Sorry for the delay....life has been a bit crazy. I could actually use some help here. Do you have a proposed change to what configuration might be like to facilitate this functionality?

[ronniebee]

Hi Sam, same here. The world has changed dramatically...

Help... I think I know what the screen should look like but I’m not a software developer. Maybe it isn’t hard to learn to program in Python 🐍 but I really don’t know where to start. Testing is something I can try...😳.

Met vriendelijke groet,

Ronald

Op 29 mrt. 2020 om 21:25 heeft Sam Bryfczynski notifications@github.com het volgende geschreven:

 Sorry for the delay....life has been a bit crazy. I could actually use some help here. Do you have a proposed change to what configuration might be like to facilitate this functionality?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[ronniebee]

Btw still love the card. Use it every day!!

Met vriendelijke groet,

Ronald

Op 29 mrt. 2020 om 21:33 heeft Ronald buisr@home.nl het volgende geschreven:

Hi Sam, same here. The world has changed dramatically...

Help... I think I know what the screen should look like but I’m not a software developer. Maybe it isn’t hard to learn to program in Python 🐍 but I really don’t know where to start. Testing is something I can try...😳.

Met vriendelijke groet,

Ronald

Op 29 mrt. 2020 om 21:25 heeft Sam Bryfczynski notifications@github.com het volgende geschreven:

 Sorry for the delay....life has been a bit crazy. I could actually use some help here. Do you have a proposed change to what configuration might be like to facilitate this functionality?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[1ntroduc3]

Hi, I'd also love this, so that it would be a full tv remote (possibly)

[1ntroduc3]

Hey @sbryfcz Do you maybe have had time to work on this, or maybe can help us out if we can add it somewhere? Thanks in adance!

[interaction-designer]

I’d love to see a number pad added too. Thank you for considering adding this! Sorry to hear life has been a bit crazy.

[1ntroduc3]

@sbryfcz Do you have this still planned to add?

[sbryfcz]

I still could use some help on a proposed configuration for this sort of thing. I have some spare time the next few weeks and am hoping to clean up some of the reported bugs here. If we can come to an agreement on what configuration might look like for this, I can consider adding it in.

[werfpsa]

sbryfcz, I can help as I have build my own matrix for this. Below my example. The side buttons at left and right are by activity and represent buttons like 'info' , 'epg', main menu, top menu, etc.

Regards, Pedro

[werfpsa]

You could increase the matrix vertical to add the number buttons.

[scooper1]

Looks like that would be a good ideaOn 22 Oct 2020 17:03, werfpsa notifications@github.com wrote: sbryfcz, I can help as I have build my own matrix for this. Below my example.

The side buttons at left and right are by activity and represent buttons like 'info' , 'epg', main menu, top menu, etc. Regards, Pedro

—You are receiving this because you are subscribed to this thread.Reply to this email directly, view it on GitHub, or unsubscribe.

[sbryfcz]

@werfpsa Do you have an example of what the configuration could look like?

I struggle with how prescriptive or how flexible this should be.

We could build out generic grid/matrix capabilities such as something like whats below.....

buttonGrid:
   rowCount: number
   columnCount: number
   buttons: 
   -     row: number
          column: number
          command: string
          device: string
          icon: string
          color?: string

[werfpsa]

looks like a good idea and much easier compard to how I have solved it.... as I have only added lines to your code like:

        <div class="remote">
            ${this.renderIconButton(r.dpad_left,s,{"grid-column":"3","grid-row":"2"})}
            ${this.renderIconButton(r.dpad_right,s,{"grid-column":"5","grid-row":"2"})}
            ${this.renderIconButton(r.dpad_up,s,{"grid-column":"4","grid-row":"1"})}
            ${this.renderIconButton(r.dpad_down,s,{"grid-column":"4","grid-row":"3"})}
            ${this.renderIconButton(r.dpad_center,s,{"grid-column":"4","grid-row":"2"})}
            ${this.renderIconButton(r.dpad_info,s,{"grid-column":"1","grid-row":"1"})}
            ${this.renderIconButton(r.dpad_tmenu,s,{"grid-column":"1","grid-row":"2"})}
            ${this.renderIconButton(r.dpad_option,s,{"grid-column":"1","grid-row":"3"})}
            ${this.renderIconButton(r.dpad_audio,s,{"grid-column":"7","grid-row":"3"})}
            ${this.renderIconButton(r.dpad_menu,s,{"grid-column":"7","grid-row":"2"})}
            ${this.renderIconButton(r.dpad_sub,s,{"grid-column":"7","grid-row":"1"})}
        </div>        

        <div class="xbox-buttons">
            ${this.renderIconButton(r.xbox,s,{"grid-column":"1","grid-row":"2"})}
            ${this.renderIconButton(r.back,s,{"grid-column":"2","grid-row":"2"})}
            ${this.renderIconButton(r.a,s,{"grid-column":"4","grid-row":"2"})}
            ${this.renderIconButton(r.b,s,{"grid-column":"5","grid-row":"2"})}
            ${this.renderIconButton(r.x,s,{"grid-column":"6","grid-row":"2"})}        
            ${this.renderIconButton(r.y,s,{"grid-column":"7","grid-row":"2"})}        
        </div>
    </div>

and }};t([K()],kt.prototype,"hass",void 0),t([K()],kt.prototype,"_config",void 0),t([K()],kt.prototype,"_toggle",void 0),kt=t([Z("harmony-card-editor")],kt);const Et="ontouchstart"in window||navigator.maxTouchPoints>0||navigator.msMaxTouchPoints>0;class Mt extends HTMLElement{constructor(){super(),this.holdTime=500,this.ripple=document.createElement("mwc-ripple"),this.timer=void 0,this.held=!1,this.cooldownStart=!1,this.cooldownEnd=!1}connectedCallback(){Object.assign(this.style,{position:"absolute",width:Et?"100px":"50px",height:Et?"100px":"50px",transform:"translate(-50%, -50%)",pointerEvents:"none"}),this.appendChild(this.ripple),this.ripple.primary=!0,["touchcancel","mouseout","mouseup","touchmove","mousewheel","wheel","scroll"].forEach(t=>{document.addEventListener(t,()=>{clearTimeout(this.timer),this.stopAnimation(),this.timer=void 0},{passive:!0})})}bind(t,e){if(t.actionHandler)return;t.actionHandler=!0,t.addEventListener("contextmenu",t=>{const e=t||window.event;e.preventDefault&&e.preventDefault(),e.stopPropagation&&e.stopPropagation(),e.cancelBubble=!0,e.returnValue=!1});const n=t=>{if(this.cooldownStart)return;let e,n;this.held=!1,t.touches?(e=t.touches[0].pageX,n=t.touches[0].pageY):(e=t.pageX,n=t.pageY),this.timer=window.setTimeout(()=>{this.startAnimation(e,n),this.held=!0},this.holdTime),this.cooldownStart=!0,window.setTimeout(()=>this.cooldownStart=!1,100)},i=n=>{this.cooldownEnd||["touchend","touchcancel"].includes(n.type)&&void 0===this.timer||(clearTimeout(this.timer),this.stopAnimation(),this.timer=void 0,this.held?yt(t,"action",{action:"hold"}):e.hasDoubleTap?1===n.detail||"keyup"===n.type?this.dblClickTimeout=window.setTimeout(()=>{yt(t,"action",{action:"tap"})},250):(clearTimeout(this.dblClickTimeout),yt(t,"action",{action:"double_tap"})):yt(t,"action",{action:"tap"}),this.cooldownEnd=!0,window.setTimeout(()=>this.cooldownEnd=!1,100))};t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchend",i),t.addEventListener("touchcancel",i),t.addEventListener("keyup",t=>{if(13===t.keyCode)return i(t)}),/iPhone OS 13_/.test(window.navigator.userAgent)||(t.addEventListener("mousedown",n,{passive:!0}),t.addEventListener("click",i))}startAnimation(t,e){Object.assign(this.style,{left:${t}px,top:${e}px,display:null}),this.ripple.disabled=!1,this.ripple.active=!0,this.ripple.unbounded=!0}stopAnimation(){this.ripple.active=!1,this.ripple.disabled=!0,this.style.display="none"}}customElements.define("action-handler-harmony",Mt);const At=(t,e)=>{const n=(()=>{const t=document.body;if(t.querySelector("action-handler-harmony"))return t.querySelector("action-handler-harmony");const e=document.createElement("action-handler-harmony");return t.appendChild(e),e})();n&&n.bind(t,e)},Nt=n((t={})=>e=>{At(e.committer.element,t)}),Tt={volume_down:{command:"VolumeDown",icon:"mdi:volume-medium",hide:!1},volume_up:{command:"VolumeUp",icon:"mdi:volume-high",hide:!1},volume_mute:{command:"Mute",icon:"mdi:volume-off",hide:!1},skip_back:{command:"SkipBack",icon:"mdi:skip-previous",hide:!1},play:{command:"Play",icon:"mdi:play",hide:!1},pause:{command:"Pause",icon:"mdi:pause",hide:!1},skip_forward:{command:"SkipForward",icon:"mdi:skip-next",hide:!1},dpad_up:{command:"DirectionUp",icon:"mdi:chevron-up-circle",hide:!1},dpad_down:{command:"DirectionDown",icon:"mdi:chevron-down-circle",hide:!1},dpad_left:{command:"DirectionLeft",icon:"mdi:chevron-left-circle",hide:!1},dpad_right:{command:"DirectionRight",icon:"mdi:chevron-right-circle",hide:!1},dpad_center:{command:"OK",icon:"mdi:checkbox-blank-circle",hide:!1},dpad_info:{command:"Info",icon:"mdi:information",hide:!1},dpad_option:{command:"Option",icon:"mdi:alpha-o-circle",hide:!1},dpad_audio:{command:"Audio",icon:"mdi:music-circle",hide:!1},dpad_sub:{command:"Subtitle",icon:"mdi:subtitles",hide:!1},dpad_tmenu:{command:"TopMenu",icon:"mdi:menu",hide:!1},dpad_menu:{command:"PopUpMenu",icon:"mdi:menu-open",hide:!1},xbox:{command:"Xbox",icon:"mdi:xbox",hide:!1},back:{command:"Back",icon:"mdi:undo-variant",hide:!1},a:{command:"A",icon:"mdi:alpha-a-circle",hide:!1,color:"#2d9f1c"},b:{command:"B",icon:"mdi:alpha-b-circle",hide:!1,color:"#e43308"},x:{command:"X",icon:"mdi:alpha-x-circle",hide:!1,color:"#003bbd"},y:{command:"Y",icon:"mdi:alpha-y-circle",hide:!1,color:"#f1c70f"}};var Ot={version:"Version",invalid_configuration:"Invalid configuration",show_warning:"Show Warning"},Vt={common:Ot},Dt={version:"Versjon",invalid_configuration:"Ikke gyldig konfiguration",show_warning:"Vis advarsel"},jt={common:Dt},Bt={en:Object.freeze({__proto__:null,common:Ot,default:Vt}),nb:Object.freeze({__proto__:null,common:Dt,default:jt})};function Yt(t,e="",n=""){const i=t.split(".")[0],o=t.split(".")[1],s=(localStorage.getItem("selectedLanguage")||"en").replace(/['"]+/g,"").replace("-","_");var r;try{r=Bt[s][i][o]}catch(t){r=Bt.en[i][o]}return void 0===r&&(r=Bt.en[i][o]),""!==e&&""!==n&&(r=r.replace(e,n)),r}var Rt=function(t){return function(t){return!!t&&"object"==typeof t}(t)&&!function(t){var e=Object.prototype.toString.call(t);return"[object RegExp]"===e||"[object Date]"===e||function(t){return t.$$typeof===Ht}(t)}(t)};var Ht="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function It(t,e){return!1!==e.clone&&e.isMergeableObject(t)?Ft((n=t,Array.isArray(n)?[]:{}),t,e):t;var n}function Ut(t,e,n){return t.concat(e).map((function(t){return It(t,n)}))}function qt(t){return Object.keys(t).concat(function(t){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t).filter((function(e){return t.propertyIsEnumerable(e)})):[]}(t))}function zt(t,e){try{return e in t}catch(t){return!1}}function Lt(t,e,n){var i={};return n.isMergeableObject(t)&&qt(t).forEach((function(e){i[e]=It(t[e],n)})),qt(e).forEach((function(o){(function(t,e){return zt(t,e)&&!(Object.hasOwnProperty.call(t,e)&&Object.propertyIsEnumerable.call(t,e))})(t,o)||(zt(t,o)&&n.isMergeableObject(e[o])?i[o]=function(t,e){if(!e.customMerge)return Ft;var n=e.customMerge(t);return"function"==typeof n?n:Ft}(o,n)(t[o],e[o],n):i[o]=It(e[o],n))})),i}function Ft(t,e,n){(n=n||{}).arrayMerge=n.arrayMerge||Ut,n.isMergeableObject=n.isMergeableObject||Rt,n.cloneUnlessOtherwiseSpecified=It;var i=Array.isArray(e);return i===Array.isArray(t)?i?n.arrayMerge(t,e,n):Lt(t,e,n):It(e,n)}Ft.all=function(t,e){if(!Array.isArray(t))throw new Error("first argument should be an array");return t.reduce((function(t,n){return Ft(t,n,e)}),{})};var Wt=Ft;console.info(%c HARMONY-CARD \n%c ${Yt("common.version")} 0.11.0 ,"color: orange; font-weight: bold; background: black","color: white; font-weight: bold; background: dimgray");let Jt=class extends it{static async getConfigElement(){return document.createElement("harmony-card-editor")}static getStubConfig(){return{}}setConfig(t){if(!t||t.show_error)throw new Error(Yt("common.invalid_configuration"));if(!t.entity||"remote"!==t.entity.split(".")[0])throw new Error("Specify an entity from within the remote domain for a harmony hub.");t.test_gui&&function(){var t=document.querySelector("home-assistant");if(t=(t=(t=(t=(t=(t=(t=(t=t&&t.shadowRoot)&&t.querySelector("home-assistant-main"))&&t.shadowRoot)&&t.querySelector("app-drawer-layout partial-panel-resolver"))&&t.shadowRoot||t)&&t.querySelector("ha-panel-lovelace"))&&t.shadowRoot)&&t.querySelector("hui-root")){var e=t.lovelace;return e.current_view=t.___curView,e}return null}().setEditMode(!0),this._config=Object.assign({name:""},t)}preventBubbling(t){t.stopPropagation(),t.cancelBubble=!0}deviceCommand(t,e,n){var i,o;this.preventBubbling(t),null!=e&&(null===(i=this.hass)||void 0===i||i.callService("remote","send_command",{entity_id:null===(o=this._config)||void 0===o?void 0:o.entity,command:n,device:e}))}harmonyCommand(t,e){var n,i,o,s;this.preventBubbling(t),null==e||"off"==e||"turn_off"==e?null===(n=this.hass)||void 0===n||n.callService("remote","turn_off",{entity_id:null===(i=this._config)||void 0===i?void 0:i.entity}):null===(o=this.hass)||void 0===o||o.callService("remote","turn_on",{entity_id:null===(s=this._config)||void 0===s?void 0:s.entity,activity:e})}volumeCommand(t,e,n){var i,o,s;if(this.preventBubbling(t),null===(i=this._config)||void 0===i?void 0:i.volume_entity){var r={entity_id:null===(o=this._config)||void 0===o?void 0:o.volume_entity};null===(s=this.hass)||void 0===s||s.callService("media_player",e,Object.assign(r,n||{}))}}shouldUpdate(t){return!!t.has("config")||this.hasEntityChanged(this,t,"entity")}hasEntityChanged(t,e,n){if(t._config.entity){const i=e.get("hass");return i&&(i.states[t._config[n]],t.hass.states[t._config[n]]),!0}return!1}render(){var t;if(!this._config||!this.hass)return V``;if(this._config.show_warning)return V

[1ntroduc3]

@werfpsa Do you have an example of what the configuration could look like?

I struggle with how prescriptive or how flexible this should be.

We could build out generic grid/matrix capabilities such as something like whats below.....

buttonGrid:
   rowCount: number
   columnCount: number
   buttons: 
   -     row: number
          column: number
          command: string
          device: string
          icon: string
          color?: string

That could be good. I think adding numbers just as a "normal" remote that are configurable (or even flex-fields so interpretablefor own choises would be great.

1 2 3 4 5 6 7 8 9 < 0 >

something like that

[sbryfcz]

Yeah. That's part of where I am stuck debating. Maybe it would be better to allow rows that can have varying numbers of columns. In an effort not to let "perfection be the enemy of done" and to move agilely, let me add my proposed changes. We can gauge feedback from the community if this serves the variety of requests I am seeing. If so, great. If not, we can always iterate :)

For the number pad, I will supply that in the documentation as an example for others to easily copy and paste in.

What do you think?

[1ntroduc3]

Yeah. That's part of where I am stuck debating. Maybe it would be better to allow rows that can have varying numbers of columns. In an effort not to let "perfection be the enemy of done" and to move agilely, let me add my proposed changes. We can gauge feedback from the community if this serves the variety of requests I am seeing. If so, great. If not, we can always iterate :)

For the number pad, I will supply that in the documentation as an example for others to easily copy and paste in.

What do you think? Good!

[sbryfcz]

Going to close this as it was just released. Would love feedback. I'll try working on a more generic custom button grid for more exotic/custom use cases.

[ronniebee]

Yes!!! Great job. Now the card is perfect. Many many many thx!

[sbryfcz]

All credit goes to @ItzYanick!