Test Adapter mytime

[OliverIO]

@trojanhector

das ist leider ein effekt des transform befehls scale(0.5)
der bedeutet, das der inhalt des widgets gemäß dem faktor vergrößert/verkleinert wird. das widget muss die entsprechende größe behalten. daher kannst du den umbruch verhindern in dem du den rahmen des widgets einfach wieder vergrößerst (bzw width vergrößerst)
für dich ist es aber nur im editor ein problem, die ränder des widgets sieht man im runtime modus nicht.

da für nixie eine vorhandene bibliothek übernommen und angepasst wurde und der html aufbau relativ kompliziert ist, war ich nicht in der lage, die größe über andere parameter zu steuern. daher der hack per transform.

[trojanhector]

@oliverio Das ist sehr schade. Ich arbeite bei meinen Views mit Responsive Einstellungen, damit ich für Web und Handy Ansicht nur einmal entwickeln muss. Deshalb bin ich bei einer Spaltenbreite von 410 px. Die Weite gebe ich bei meinen Widgets in Prozent an. Das beisst sich also.
Das FlipFlop Widget scheint die gleiche Eigenschaft zu haben.
Beim Plain passt es, aber dort ist mir aufgefallen, dass beim Format HH\h mm\m ss\s nach dem Start des Timers die Tage doch wieder angezeigt werden. Nach dem Klicken auf Stop sind die Tage wieder weg.

[OliverIO]

@trojanhector

Ok, das 2. wäre dann ein Fehler.
Werd da mal reinschauen.

Ich hatte gestern auch nochmal das grössenproblem angeschaut.
Die Doppelpunkte sind das Problem. Ansonsten könnte man es über schriftgrösse machen. (Allerdings aktuell noch nicht der Nutzer).
Aber eventuell nehme ich das zur Motivation, mich mal dran zu machen.

[OliverIO]

@trojanhector sagte in Test Adapter mytime:

HH\h mm\m ss\s

Also, ich habe bei der nixie clock mal reingeschaut und es doch tatsächlich responsive hinbekommen.
Daher folgt gleich eine neue Version, aber als Major Versionswechsel, da dadurch die User etwas machen müssen, das es so wie vorher aussieht.

Das Problem mit Plain hab ich mir mit deiner Konfiguration HH\h mm\m ss\s angeschaut, aber kein Problem entdecken können. Siehe folgendes Video
9366308b-7038-4ac2-a17d-4ca90c8d6595-20250908-2205-39.9285445.mp4
HH\h mm\m ss\s

kannst du das bei dir nochmal prüfen und evtl mal zeigen und auch das widget mal exportieren?

[OliverIO]

Neue Version 2.0.1

Achtung Major Release
User die das widget nixie clock verwenden müssen Anpassungen vornehmen

• Das widget nixie clock wurde nun repsonsive gemacht, daher wird die Größe nun auf Basis der font-size Einstellung unter "CSS Font und Text" berechnet.
  Um eine ähnliche Größe wie bisher zu erzielen, kann in font-size nun bspw 100px oder eine andere Pixelgröße eingegeben werden.
  Eine evtl transition: scale(Zahl) muss/kann entfernt werden.

[trojanhector]

@oliverio Servus,
ja, das Widget ist jetzt responsive. Gilt für den Editor:
Das mit der Größe im Editor funktioniert scheinbar erstmal nicht. Aber wenn man die Seite refreshed sieht es passend aus.

In der Runtime auf dem Handy und auf dem Bildschirm sieht es gut aus.

Ich habe für alle meine Widgets grundsätzlich im CSS eine Klasse für den Rand definiert. Im Bild, eine Responsive Einstellung mit 2 Spalten, kann man jetzt wunderbar sehen, dass es jeweils oben und links einen Versatz gibt. Lässt sich das neutralisieren?

Kann man bei Nixie noch die Text Align Eigenschaft mit reinbringen? Jetzt ist es zwar klein, hängt bei einer 100% Width aber am linken Rand. Bei Plain ist es besser.

Zu 2. Das mit dem falschen Format im plain kann ich heute auch nicht mehr nachvollziehen. Kann am Reboot liegen.

[OliverIO]

@trojanhector

kannst du mir die view exportieren?
das würde meinen test einfacher machen.
wenn du noch extra css anweisungen hast, dann die bitte auch.
so das ich deine situation exakt nachstellen kann

[trojanhector]

@oliverio Klar,
hier ist die View:

{
  "name": "TestTimerSwitch",
  "parentId": "f0d589f9-21d6-447c-9e47-8f9cf4d95d28",
  "settings": {
    "style": {
      "background-color": "var(--background_1)"
    },
    "columnWidth": 410,
    "columnGap": 2,
    "rowGap": 2,
    "order": [
      "w000631",
      "w000636"
    ],
    "useAsDefault": false,
    "alwaysRender": false,
    "navigationBar": false,
    "navigation": false
  },
  "widgets": {
    "w000631": {
      "tpl": "tplJquiButtonState",
      "data": {
        "bindings": [],
        "type": "button",
        "g_common": true,
        "oid": "mytime.0.Countdowns.Kaffee30.cmd",
        "count": 2,
        "variant": "contained",
        "orientation": "horizontal",
        "text1": "An",
        "value1": "start",
        "icon1": "",
        "image1": "",
        "color1": "rgba(98,74,232,1)",
        "tooltip1": "",
        "activeColor1": "rgba(236,16,16,1)",
        "g_states-1": true,
        "text2": "Aus",
        "value2": "end",
        "icon2": "",
        "image2": "",
        "color2": "rgba(68,40,212,1)",
        "tooltip2": "",
        "activeColor2": "rgba(90,232,9,1)",
        "g_states-2": true,
        "test1": false,
        "test2": false,
        "name": null,
        "comment": null,
        "class": "border-def",
        "filterkey": null,
        "multi-views": null,
        "locked": null,
        "g_fixed": true
      },
      "style": {
        "bindings": [],
        "left": 8,
        "top": "0",
        "width": "100%",
        "height": 45,
        "position": "relative",
        "z-index": "",
        "newLine": true,
        "absoluteWidth": "50%"
      },
      "widgetSet": "jqui"
    },
    "w000636": {
      "tpl": "tplMyTimeCountdownNixie",
      "data": {
        "bindings": [],
        "countdown_showsec": "true",
        "g_common": true,
        "countdown_color_active": "#FFE548",
        "countdown_color_inactive": "#323232",
        "countdown_opacity_inactive": "0.35",
        "countdown_glowcolor": "#F58732",
        "name": "myNixieClock",
        "comment": null,
        "class": "border-def",
        "filterkey": null,
        "multi-views": null,
        "locked": null,
        "g_fixed": true,
        "countdown_oid": "mytime.0.Countdowns.Kaffee30.timer",
        "g_css_font_text": true,
        "countdown_showmin": true,
        "countdown_showhrs": true
      },
      "style": {
        "bindings": [],
        "left": "293px",
        "top": "627px",
        "position": "relative",
        "width": "100%",
        "height": "1.25em",
        "z-index": 15,
        "font-size": "xx-large",
        "newLine": true,
        "text-align": ""
      },
      "widgetSet": "mytime"
    },
    "w000637": {
      "tpl": "tplMyTimeCountdownPlain",
      "data": {
        "bindings": [],
        "countdown_format": "HH\\h mm\\m ss\\s",
        "g_common": true,
        "name": null,
        "comment": null,
        "class": "border-def",
        "filterkey": null,
        "multi-views": null,
        "locked": null,
        "g_fixed": true,
        "countdown_oid": "mytime.0.Countdowns.Kaffee30.timer",
        "g_css_font_text": true
      },
      "style": {
        "bindings": [],
        "left": "576px",
        "top": "418px",
        "position": "relative",
        "color": "rgba(255,255,255,1)",
        "font-size": "xx-large",
        "width": "100%",
        "height": "1.5em",
        "newLine": false,
        "absoluteWidth": "100px",
        "text-align": "center"
      },
      "widgetSet": "mytime"
    }
  },
  "activeWidgets": []
}

und das CSS Fragment:

.border-def{
    margin: 0.0em;
    border-width: 1px;
    border-style: solid;
    border-color: white;
    border-radius: 5px ;
    box-shadow:  2px 2px 5px white;
}

border-def:hover{
    border-color:  hsl(46, 100%, 49%);    
}

[trojanhector]

@trojanhector ich habe von css die root vergessen.

:root{

	/*eigene Parameter*/
    --btn-bck-true: hsla(360, 63%, 88%, 1);
    --btn-bck-false: hsla(78, 63%, 79%, 1);
    --btn-bord-color-true: hsla(0, 0%, 0%, 1);
    --btn-bord-hccolor-false: hsla(0, 0%, 100%, 1);
    --btn-txt-true: hsla(0, 0%, 0%, 1);
    --btn-txt-false: hsla(0, 0%, 0%, 1);
    --btn-outershadow-col-true: hsla(34, 77%, 53%, 1);
    --btn-outershadow-col-false: hsla(0, 0%, 100%, 1);
    --page_bar: rgba(25,45,77,1);
    --text_sel: rgba(245,167,8,1);
    --text_col_menue: rgba(255,255,255,1);
    --show_btn_col: rgba(245,167,8,1);
    --backgrd_sel_menue:rgba(148,255,154,1);
    --pastell_blue: #bad6e5;

    --antrazit_1: #424242;
    --black: #000000;
    --bluegrey_1: #607d8b;
    --bluegrey_2: #78909c;
    --bluegrey_3: #90a4ae;
    --bluegrey_4: #b0bec5;
    --bluegrey_5: #cfd8dc;
    --bluegrey_6: #eceff1;
    --dimgray: #696969;
    --gray_1:rgba(60,75,80,1);
    --green_1: #adf701;
    --gold: #ffd700;
    --red_1: #FF5733;
    --thistle: #d8bfd8; 
    --violet_1: rgba(55,27,195,1);   
    --white: #ffffff;    
    --whitesmoke: #f5f5f5;
    --yellow_8:#fbc02d;

    
    --cbocol: var(--dimgray);
    --cboborderhover: var(--gold);
    --light_sld_l: 40px; 
    --light_sld_w: 97px; 
    --light_sld_h: 2em; 

    --light_sze_l:15px;
    --light_sze_w: 127px;
    --light_sze_h: 44px;

    --light_swl_l: 2px;
    --light_swl_w: 140px;
    --light_swl_h: 2em;
    
    --light_msw_l:20px;

    --light_sws_l: 107px;
    --light_sws_o: 1px; //oben
    --light_sws_w: 48px;
    --light_sws_h: 2em;
    
    --light_l_45: 45px;
    --light_w_53: 53px;
    --light_h_2_5: 2.5em;
    --light_o_3_4: 3.4em;
    --light_o_O: 1px;
    --light_o_2_5: 2.5em;
    --light_th: 1.15em;
    --cursor_p: pointer;
    
    --headerh_1: 2em;
    
    /*Begin Gradient*/
    --black_3d: linear-gradient(135deg, #7d7e7d 0%,#0e0e0e 100%);
    --yellow_3D: linear-gradient(135deg, #f1e767 0%,#feb645 100%);
    --yellow_3D_2:linear-gradient(135deg, #fff787 0%,#ffcc79 100%);
    --yellow_red_wave: linear-gradient(135deg, #ffa787 0%,#f1e767 72%,#ff7980 100%);
    --gray_horizon_1: linear-gradient(to right, #f6f8f9 0%,#e5ebee 24%,#d7dee3 37%,#e5ebee 78%,#f5f7f9 100%);
    --green_3d_4: linear-gradient(135deg, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);
    --green_gloss_3d: linear-gradient(135deg, #9dd53a 0%,#80c217 60%,#a1d54f 76%,#a1d54f 76%,#7cbc0a 100%);
    --green_flat: linear-gradient(to bottom, #b6e026 0%,#abdc28 100%);
    --blue_gloss_2: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
    --blue_gloss_1: linear-gradient(135deg, #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);
    --red_gloss_wave: linear-gradient(135deg, #feccb1 0%,#f17432 26%,#f17432 39%,#ea5507 62%,#fb955e 100%);
    --blue_3d_12 :linear-gradient(135deg, #feffff 0%,#d2ebf9 100%);
    --red_3d_1: linear-gradient(135deg, #fedada 0%,#fec0c0 45%,#ffa3a3 100%);
    /*Ende Gradient*/ 
    
    --background_1: var(--gray_1);
    --button_m_l: var(--light_l_45);
    --button_m_w: var(--light_w_53);
    --button_m_h: var(--light_h_2_5);
    --button_m_o: var(--light_o_O);
    --button_m_c: var(--cursor_p);
    --wl_switch_bg: var(--yellow_3D);
    --wl_switch_o_r_green: var(--green_flat);
    --wl_switch_o_r_red: var(--red_1);
    --wl_switch_o_r_white: var(--whitesmoke);
    --wl_switch_o_r: var(--whitesmoke);
    --wl_switch_width: 47%;
    --wl_switch_hight: 4.7em;
    --wl_switch_bc_on: var(--black);
    --wl_switch_bc_off: var(--black);
    --wl_switch_cc_std: var(--black);
    
    --wl_border_weather_hc: var(--gold);
    --wl_border_weather_tb: var(--gold);
    --wl_border_weather_tfc: var(--bluegrey_1);
    --wl_border_width_1: 100%;
    --wl_border_top_1: 0px;
    --wl_border_left_1: 0px;

    --rssFeedWidget_Font: var(--whitesmoke);
    --rssFeedWidget_Background: var(--gray_1);

    /*shutterControl begin*/
    /*color*/
    --sc-vis-tbl-caption-bckgrd: var(--yellow_3D);
    --sc-vis-tbl-caption-color: var(--bluegrey_1);
    --sc-vis-tbl-header-bckgrd: var(--red_1);
    --sc-vis-tbl-header-color: var(--smokewhite);
    --sc-vis-tbl-bckgrd: var(--gray);
    --sc-vis-tbl-border-color: var(--white);
    --sc-vis-tbl-color: var(--white);
    --sc-vis-tbl-fcol-bckgrd: var(--thistle);
    --sc-vis-tbl-fcol-color: var(--white);
    --sc-vis-tbl-row-bckgrd: var(--thistle);
    --sc-vis-tbl-row-color: var(--white);
    --sc-vis-tbl-row2-bckgrd: var(--thistle);
    --sc-vis-tbl-row2-color: var(--white); 
    /*shutterControl end*/
}

[OliverIO]

@trojanhector sagte in Test Adapter mytime:

kann man jetzt wunderbar sehen, dass es jeweils oben und links einen Versatz gibt. Lässt sich das neutralisieren

das mit dem versatz verstehe ich noch nicht ganz.
meinst du das die schrift nicht ganz exakt am rand oben und unten aufhört?

grund 1
du hast die zeile mit 1.25em definiert. ich habe ein zeichen mit 1em höhe definiert.

grund 2
die schriftart lato ist vertikal nicht zentriert sondern eher unten orientiert. dadurch ist der doppelpunkt auch nicht so ganz in der mitte
der abstand nach oben hin ist der größe eines zeichens geschuldet wie es vom font her definiert ist

hier mal ein screenshot mit em zeilenhöhe

um jetzt den letzten rand oben auch noch weg zu bekommen, musst du mit einem negative margin arbeiten.
hier mal ein screenshot mit margin-top: -4px auf dem element cdclock

.cdclock {
  margin-top: -4px;
}

dann passt allerdings die zeilenhöhe nicht mehr, die dann ebenfalls angepasst werden muss, dazu könnte man dann im widget bei heigth
das eintragen

calc(1em - 6px)

[OliverIO]

@trojanhector sagte in Test Adapter mytime:

Text Align Eigenschaft

welchen effekt versuchst du da zu erreichen?
cdclock ist eine flexbox und die display eigenschaft des widgets lässt sich nur begrenz beeinflussen

wenn du den inhalt zentrieren möchtest, mach am besten eine zusätzliche css klasse

#w000000 {
  display: flex;
  justify-content: center;
}

somit würde alles so aussehen

klar ist das jetzt eine extreme darstellung und so knapp willst du das nicht haben, aber auf der basis kannst du weitermachen

werde das mal in die doku aufnehmen

[trojanhector]

@oliverio Die Formatierungen waren genau das, was ich brauche.
Und das mit dem Versatz verstehe ich auch nicht. Du kannst ja auf dem Foto erkennen, dass die Widgets weder oben noch links bündig sind. Aber jetzt nach dem erneuten Aufruf der Seite passt auf einmal alles.
Nochmal danke für die schnelle Erklärung, und ja, ein Eintrag in die Doku wäre klasse.