Shaders Looks Broken on New Build

clevername27

…but while I move the HISE canvas, the shaders render. But I stop moving, they stop rendering. Like the timers aren't running.

CSS no longer gives an error, and that's good…but nothing seems to render.

HISE is that hot ex that you can't quite quit…s/he keeps saying, "It's not you, babe…t's me."

Christoph Hart

@clevername27 hmm, the examples from the snippet browser still work here. can you upload a minimal example?

clevername27

@Christoph-Hart Will do try, cheers.

clevername27

This post is deleted!

clevername27

@Christoph-Hart CSS…

HiseSnippet 1017.3ocsVs0aiTCE1NIyRafEwJwC73n9BYQKUIM8RJqPz1bgMPSaTlvp8sHGaOYrxL1Cdb11np9KjG4OB+CfimIWlPyBnHV+Pxb7412b7243geugKYb1nDoHNlaPHbw9ZEkmjnzHb4gyi4H7m43MWZBZFPDRT2VH7ybXvBc07XRRBmgv3h+nUGd+Rnz0e7CWQBIRJe8VHzaUBJ+ZQjvrd29W7yhvvNDFenHJm0GeQWpR1TEplA3nnSUTLgNkLgeCwZVAGzaHIAH723bj+X5Q9mUuQsyqc9YGedsZmzX7wUOhxN4750OsNy+nFjSa.N8r1LgQo8LDCOAgKckhM2KPcmLKAuUjHFGxsB0PdPly1tiJjYeEs6hZFHBYqJPIP4pTtxUwrx0W5zSvDq1ecY6KRU3t1i7EPbgMgWwMfWs7vqZN3sEHgyAoRYP5ENdTsH1rViEOepSWogq8Iv4TdnjYKpvugcZp.KjlCiHS4czfvJOpbZ0puxE94kutrcAGWIF22SztwDIObzatsW6QdPxDJ4nKGLz86cWFrIbSSUTrRBBUNX6lefMrqiYHwuYRhW.gotqGfEctvQ0bnjcshRBuVoldoj0gyCqXCvSb6vDtwyLOj6Ev4PxifylCoIIooa6HYSWZFBkoJGPs+AGURFQyxheZH7mIoFvQWk7FkgeqrxKK+P48K+XY2+tJe+spy9VoUggb8VUaaSz+SNVQNKZLW+JnrENiuxPfJrI+x4CyuxS+oYE4bFpjckByswb4Gpo.s3jAd5W51hXHVR4h8.6h4ZivBAbK96gQBYTz8cZwSlZTwo1tfcfvehIU6yWPf6FAy.PBfltmS5y0P2CuK3SfbM29vuCObmfYBrB6U.gB3hIAFqzPLB4KBWLB4qcdn+fa+o1MGNpysW2p8fGShTS4iFOYDcTBvk3rCikS1DM6sIZ5aILon4qb1N4whtkyzFbw70BMtHlngXlO3KeiVg+R373+yAIUL4WmAH.W.8ztbX9hhMKjX1bnicz7BE.p1nS21MKSDl44Gc++1jn+qP7EN8EFZv1wXgsfQfO8w.iKle+bm199bpYM.K4z4cebFViFnlYDxI8HFsvxjuYVjGbmGkCYWBLJamJbXacMUtpU1VA7fKtSE9SXsPYMqLdgxZKUhhHTsZDMa9f8Fh8R2AvjLsUXemdVY2ZnzYF4qyQvEVinzMC0Sb7nc0w56piGuqNdxt53o6pimsqN13e2Q62Sb4LiJJqsAg50uc5.WLtsj.LvT1JhC2HvfuhIapU52HXGDBcQ1+xxZYmk2EtblOBelyga4hN2GJ6BqwvGjMQqlIYeKEX35uykpzjvWW9Qz5DJ422ARgko+WPlU9du

clevername27

@Christoph-Hart Shaders…

HiseSnippet 2351.3ocsXs0baiaElx1Z6F0c6rYl9ReCSZefxVQljRx1pZ8j3qId55rdrSR69R8.SBIg0TDbIgbj7N9+b+GzdN.fhj5RhWOc4Lwh.37cvGN2vggMQxhBXAWmFwiiYRKqJqeQhvmklJRrpT68SiYVU9lpWMMRN7ngTdj0YGaU4qpF.OVGNMlllxBrpTY82fqU4YaXod9Ou5PZHMxmkOkk0GEbe1OvGwk4ydwq+G7vvSoAr2yGUP51u9LeQzQhPwXfGqW0wJl5eKc.6cTTr0pZ8VZ5PqJaV0q+M9d82s0dtcc6ta6tttc16l1Nd9Ac51p0NsB56sGcm8.Pe0IAboH4JIUxRsprwghfoWMT7oH8F7QdJ+lPFNv05JXm0SepHL.Oh3rVGMjGFLy.kBlqMJXtVWat9yUOmGvmMetY66TKPxQTz.VYsxza8RzysH8bJPukPoJEnzFZJ87pW4mvik4qf74OV8rHIKoOE7SEohVVq0d0ZUOR.RDIaNhdK6zDXvLD1633zf.+oduZvC3sRkj6nIjXZDK752dxAGexkWmNDbsIWevkumrOISYCXxiDihEQv.6WrB4eAp2bsNjgKbkZ4BpxOgAlK8z1uHcj3VVyAgogJzqPyMSYxK.eh7RwXIOhY2ebjujKhrGTu1uV6YCZRiiCmZTZwMtAQNjmh7+GD9zvCEiiBRscpCa1CegMDCuSNhFFdCDGmuipMTozDVLxI6untjzDs1rc6nr8YJiHhdmPx9QiVq8PMx7K0u+RWCslIhvPPmKaY8t8Y.ZGMdzMn44NZ3X1LAgvuxwzUWcLcwTNesysffhnyh3xeLlEspDQKSDA71GN6XpjhIBl4.4hYIRNRgJGytCJCoSKdV0iYo2JEwJYMQjVU9CR0peaVRC5Ir3Ppweo5J7JVSxKc8ue8z7Au60ehGHgBUUqrQEKqgL9fgRbzeBFIho+xXXiprl0horPwBQv3PprbEDrNqYAvETJsESMiR4xoEqC++sxJOVJ97pWvk9CWNGWaIbDbT+dvQSw3us5I86y7k4Dbipm9u98oxqktfxfyoxDNDQT8ciGcEbAlOC18HHvASA.mMBUM1AGiVfqfagUC9uviYQWbbEyhtYKZMh5mHt1Wm3gk6+Z0L.mhTWM9rpmiiItVpjwh14QvsOW66WVUK.z6oBr0SEX6mJvNOUf67TAt6SE3deYfXyAGLVJFoSarrN+hSTUxpT4jHJDAphVsXPo1.nkDcwI0E984X34Z3O5c8apleUXV4Tq09aOu5eMf0GtxibwYjVMca61oq2NcZ0oKbKRnfJIo+xXZBbinZvj5jekjvjiShHo7AQ1o7H6IjMAz0qC+3zrCYK7u8HOXvmPGEmtD3iDA1SZ31zo9llsXR8bT.YExgPanqBtVfTIK11ooCpmFZQmTunZf0WFZXFQBP7sIdMczLt9bT9ZktWDZ1t.nzZe0zdUpXtC2pzU7PFXUti42hHZPLTqfZ.W6.4PaQcxKII437mFxiv9T9xHaN49YfgXLORh.q3YnLsn2BV01WjZSq2.84vOuz7qdVEwqo1x9LnZuY2AUTi.OZMBgZhjQPyZbrABU7hmG3DbZ1pSOkbhlSumr49YDYY1yRX2hfQPp.PPOsah8dp0yjo+1zCFBrL8b+jeC5Y4Zfr09vptvZnICNhvatNp.OsEImzyK58qTzoyK5jUHZA6u3leFt3Cr+lXKH3PE4qDg2mXaD36gocxbc3ixY5CWzgcZiCrmsD9Xu.CJaTl4kfEc0FaGuFKSESeTpnkVEtcVpNt+wniVYzXlFLlA7QeR2dezMlOqIUPsnd1GHvM3rB1IiHJKjyrPfGfVeqs81ji3I9PKPIP1T5s4MM+ItbHIfCkogOjhvfhggDofn6LTw1c6jkaazv4fBvLLOx36ZPTu3yvuCaV1NMfONctrOdJ56MI+iuCx70fLzbwJqZszvnMPdzn2PoH7iRTGpSBC4wfQX1wAB8fOJhQFDJ9DgoZ0xvdinZh+gOlw0+I1Ob1f2pN0yQ7bVaa+gOBlDOzO9R0A2F8o0gTN0.itLZAJJU7j4GBYs1H..a.hI.S.fOZ0U4qvBXBd.3df3nLJnHaLv.a7phMI8SnCNBt8H.qv7RB+RVpHbLdxgIPcVblo8pMK8IT4N2uXvQ9hhBKX3zKcmE.oDAsBQPZMMjeu9ZA6XXKanLFKlqiakSV3K5SrgukjvwY6A+78DOG7ks1pXdtTWTwwMOpWSaXZcY8.vD.CgJ6Yw1pef.gi08QftdcXEgFEjE5jET3WLEH29Z.ru1IVxlpuitQYypdRCEJFwi9oxRpyepqQzaFaO.+f9kPms2VqNUJ59kS3J55aLKgyjp0y.WaufqLPMjueuIOafDJFv8yO7PlHv5YJOOsb9fIUfe6tEO02IBcMNZbWvOXg6iyNFp6gF8T9n3PtO78UJTiuSewAhyPNS2Fo9D8zJKVaU0QyVADDNOfDE24PVoZIPI2ldY4al9GRKMLj4oP.gdXF3qvW+64gnTz2IoPKEXUbP3YYuJiTTon+42P.7lpaC6tiYlHbBfAYZnsttsqNFqMVD.yy1oXA.xbB6kILzexBRqHvdKfoUNFWMnVJT6kCyCaOdNXsygsiFl67vba1dAXcxgsqFVmEg4VzN1O5xrzLHhyWZioXaQvl3xurrkAX8FjLglpBHZ40ozspsz2s5VudofIezLmUsG1QksqcGrUkTeE+5TNTw28lBHJvNE81TUKLqGsOGYitr4z5lcq79nnzH5DaeWbgt.FXSqW1z7lkYZl+z1waQ6hqxtfAtKvq1JqSoCqWIqyaT70US3tcliRG9Xnj6p4zRrUdKiSsJwoCy3TtKa2En1O8XnVqOu4Z0zaN90tD+9oh1rkvLuGC01c0TqrnK0I1YQB4YHzdcy5o1TyAJE4CYglhJ3HudYkKvQs5kUE.G0tWVxMNpTsBrmpiLsgaz8VYpcqLMtUlxLujoghfGwmXOabCcMDJzoW9+ToQclYYKBN+8sVJRCD0MD1YE7qCU7wrXSI+r6EODtBIP0ZfHgOfGA89puAU0UbVej4cA0GEo3oPIcibN0LYvM5KGf+FxTUrK0cj5dVM9X9DV3AgwCofrpSRt5yaJzJ++fkH1jS4gL7+Yu+Gvc98wO

Christoph Hart

Alright, CSS: Two mistakes from you, one bug on my side, I win...

const var panel_HOME_Session_ART = Content.getComponent("panel_HOME_Session_ART");

const var lafCssShadowMaker = Content.createLocalLookAndFeel();

// use the CSS ID instead of the class identifier for now
lafCssShadowMaker.setInlineStyleSheet("
#panel_HOME_Session_ART {
    background-color: coral;
}
");

// 1. you need to set the LAF to the panel...
panel_HOME_Session_ART.setLocalLookAndFeel(lafCssShadowMaker);

// 2. Buddy Opaque strikes again
panel_HOME_Session_ART.set("opaque", false);

// 3. Apparently the panels do not pickup the class identifiers, let me fix that...
// panel_HOME_Session_ART.setStyleSheetClass(".classStandardShadow");

BTW: you can inspect some CSS insights with the CSS debugger. Select the panel, right click and choose "Show CSS debugger". You'll see this:

Current variable values:
{
  "bgColour": "#55FFFFFF",
  "itemColour": "#30000000",
  "itemColour2": "#30000000",
  "textColour": "#23FFFFFF"
}
==============================

/* CSS for component hierarchy: */

div 
// [...] boring stuff
                       div #panel_HOME_Session_ART .scriptpanel .

/** Component stylesheet: */
div #panel_HOME_Session_ART .scriptpanel . {
  background-color[]: 0xFFFF7F50
  box-shadow[]: t:outer;c:ffffffff;p:[ 0px 0px 5px 0px ]|
  margin-top[]: 10px
  margin-bottom[]: 10px
  margin-left[]: 10px
  margin-right[]: 10px
}


/** Inherited style sheets: */
#panel_HOME_Session_ART {
  background-color[]: 0xFFFF7F50
  box-shadow[]: t:outer;c:ffffffff;p:[ 0px 0px 5px 0px ]|
  margin-top[]: 10px
  margin-bottom[]: 10px
  margin-left[]: 10px
  margin-right[]: 10px
}

So from this you can see that any of those CSS selectors would work:

div #panel_HOME_Session_ART .scriptpanel

Also if you want to make a box shadow, you'll have to increase the Panel size and use the margin property. This is non-standard CSS behaviour, but required because HISE components cannot render outside their boundaries. See:

HISE | Docs

(docs.hise.dev)

Christoph Hart

Actually it does work with the class selector, but only after you assign the LAF to the panel:


// 1. you need to set the LAF to the panel...
panel_HOME_Session_ART.setLocalLookAndFeel(lafCssShadowMaker);

// 2. then assign the CSS class. The other way around it doesn't work. Still not 100% clean...
panel_HOME_Session_ART.setStyleSheetClass(".classStandardShadow");

clevername27

@Christoph-Hart Thank you very much,.

Shaders Looks Broken on New Build

HISE | Docs

33

1.6k

11.4k

99.4k