Test Adapter mytime

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.

micklafisch

Hallo,
ich habe gerade ein Problem mit den mytime Widgets (2.0.1) in Verbindung mit vis2 (2.13.4).

Wenn ich den Countdown nur einblenden will wenn er tatsächlich läuft wird er erstmal nicht angezeigt.

Wenn ich allerdings während der Countdown aktiv ist die Seite neu lade, dann funktioniert die Anzeige. Das ausblenden geht auch im Anschluss wenn der Countdown abgelaufen ist. Wenn ich das 1x gemacht habe wird er auch wieder angezeigt wenn der Countdown erneut gestartet wird. So lange aber die Seite geladen wird während der Countdown nicht aktiv ist, wird das Widget dann nicht angezeigt wenn er startet.

Blöd zu erklären, aber so ists bei mir. Wenn ich einfache HTML Widgets mit dieser Sichtbarkeitsbedingung einblende funktioniert es immer problemlos.

OliverIO

@micklafisch

Muss ich mal ausprobieren.
Fällt mir gerade aber nix ein woran das scheitern sollte.

OliverIO

@micklafisch

also hier funktioniert das
280b9ef5-8adb-4c72-9aa9-b47bae458233-20251017-0031-06.7340814.mp4

getestet mit vis 1.5.6

micklafisch

@oliverio
ja, hatte ja die vis2 geschrieben. Unter vis1 habe ich in einem anderen Projekt auch ein Countdown, da läuft das. Mit vis2 gibts scheinbar Probleme.

OliverIO

@micklafisch

unter vis2 das selbe
d57529b9-82db-4072-9c09-3692f03d2519-20251017-1035-58.0979806.mp4

micklafisch

@oliverio
ich habe insg. 8 Countdowns auf der Seite über die Sichtbarkeit eingebunden und diese werden per Skript gesteuert und nicht per Button. Nichts was irgendwie auf einen Fehler hindeutet. Ich habe jetzt die 8 Countdowns mal auf eine neue leere Seite importiert, aktuell funktioniert alles. Ich beobachte mal weiter, ggf. hängt es mit einem anderen Widget zusammen.

OliverIO

@micklafisch

gut. dann schauen wir
die visibility funktion ist ja was von vis. unter vis1 und vis2 ist es jeweils der selbe code.
allerdings kann es schon sein, das sich in vis2 da irgendwas beißt. meiner Meinung nach ist vis2 auch nicht ganz so stabil wie vis1.

NEWS

Test Adapter mytime

Support us

1.1k
Online

32.3k
Users

81.0k
Topics

1.3m
Posts

NEWS

Test Adapter mytime

Support us

1.1kOnline

32.3kUsers

81.0kTopics

1.3mPosts

1.1k
Online

32.3k
Users

81.0k
Topics

1.3m
Posts