TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Ahoj,
rád bych požádal někoho zkušenějšího o radu. V zásadě jsem to již popsal v názvu přízpěvku a k tomu směřuje i múj dotaz, jestli je to vůbec možné, abych na jiněm stroji stejného modelu při nastavení stejného rozlišení měl odlišné rozložení tlačítek? Kdo by měl zájem mohu poskytnout ještě detailnější popis ale v zýsadě jde o to že jsem si vyladil zobrazení na svém laptopu na jedno rozlišení otestoval jsem to i na externím monitoru- vše vpořádku.
V zasade jsi nerekl vubec nic. To je pak tezke. Nadpis je prilis kratky a v textu, ac je dlouhy, je informaci pomalu :)
Ceho presne potrebujes docilit? Co znamena rozlozeni tlacitek? Jak maji byt usporadana? Stacilo by ti pouzit bootstrap-css?
google = bootstrap css window size position buttons
https://bootstraptemple.com/…trap-buttons
google = bootstrap css buttons drag drop
https://mdbootstrap.com/…ag-and-drop/
nadpis treba Sortable basic example, zkus si tam tlacitka presunovat
google = bootstrap css buttons change position on click
https://peter.mlich.cz/
Kdyz si prepnes prohlizec na rezim okno a zacnes zuzovat rozmery, tak v urcite chvili leve menu odskoci a je nahore. To je podle mne, smena rozlozeni tlacitek.
Nebo potrebujes, aby si mohl uzivatel navolit rozlozeni tlacitek a ulozit mu tuto informaci to data-storage nebo cookies pro pristi pouziti? Nebo, pokud je prihlaseny, uloz mu to do databace k jeho profilu.
Nebo, kdysi jsem si udelal na webce nekolik rezimu zobrazeni stranky, kdy jsem premistoval menu nalevo, nahoru, do oblouku a pod. Stacilo jedno kliknuti na kolecku nastaveni a zmenil se vzhled i obrazky cele stranky. Je to sice cool, ale pro web neprakticke, vyznam ma mit svetly-tmavy rezim, pripadne minimalisticky pro mobily.
Takze, moznosti jsou. Kliknuti, zmena rozmeru okna, cookies a jeste mne napada treba v zavislosti na ruznem prohlizeci, Edge / Firefox. Otevres na pocitaci 2 ruzne prohlizece a do css nastavis podminku, ze se to v jednom zobrazi tak, v jinem jinak. To jde, vetsinou se takve chovani povazuje sis za bug.
"Ceho presne potrebujes docilit?"
Tim myslim to, jak jsou tlacitka usporadana nyni?
Jak maji byt usporadana v druhem pripade?
A jak si predstavujes, v zavislosti na cem, se ta poloha ma zmenit? (uzivatel, kliknuti, prohlizec... verze prohlizece)
A idealni je, kdyz se na to lidi nemusi ptat po zadani tematu. Ale, tak, i mne se to obcas povede nerict vlastne nic, z ceho muzou ostatni vychazet :) Jen je dobre se na dotaz podivat z pohledu treba tve mladsi sestry, zda by i ona pochopila, na co se ptas nebo, jestli mas nejake informace pouze ty v mysli a tak :)
#3 peter#3 peter
Ahoj, děkuji za odpovědi. Zkusím to popsat trochu jinak. Nachvíli úplně zapomeńte na klasické webovky. Je pouzit HTML, JS a CSS. Účel tohoto byl přiblížit grafické rozhraní stroje. Na obrazovce stroje vidíme nějaké grafické rozložení, jde o dotykový display takže kliknete na urcitý symmbol který představuje nějakou funkci pomocí které se dostanete na jiné rozhraní, grafické rozložení se změní a vy můžete v reálu něco nastavit a jít zase zpět do hlavní nabídky nebo do dalšího submenu atd. je to docela rozvětvené. Chtěl jsem zkusit naprogramovat něco co bude jenom simulovat chavání a logiku toho rozhraní. Takže jsem si udělal screeshoty vsech obrazovek interaktivitu jsem zajistil tak ze jsem ta tlacitka "nalepil" podle rozmisteni na obrazovce tak aby odpovídala realitě. Ještě jinak, předtavte si velké plátno na kterém budou nakresleny dva kruhy a dva čtverce. Já vezmu to plátno a udělám jeho přesnou kopii, z kopie vystřihnu pouze ty dva čtverce a dva kruhy a těmi přelepím kruhy a čtverce na tom původním plátně a to budou moje tlacítka. Takze pokud budu to platno chtit zobrazit na jinem pocitaci pri stejnem rozlisen i stejnem prohlizeci neboudou ty " nalepena" tlacitka odpovidat originalnim pozicim. Snažil jsem se a i tak to zní dost kostrbatě a omlouvám se za to. Je to i dost nestandartní použití takže se dost složitě něco hledá. Byl jsem připraveny že bdou problémy se zobrazením pro různá zařízení a prohlížeče. Já to ale nepotřebuji takto hluboce optimalizovat stačí aby to fungovalo v jednom rozlišení s Firefox nebo Edge, ale na všech počítačích. Spouštím offline ze souboru index.html
Ahoj,
rád bych požádal někoho zkušenějšího o radu. V zásadě jsem to již popsal v názvu přízpěvku a k tomu směřuje i múj dotaz, jestli je to vůbec možné, abych na jiněm stroji stejného modelu při nastavení stejného rozlišení měl odlišné rozložení tlačítek? Kdo by měl zájem mohu poskytnout ještě detailnější popis ale v zýsadě jde o to že jsem si vyladil zobrazení na svém laptopu na jedno rozlišení otestoval jsem to i na externím monitoru- vše vpořádku.
Cili, neco, co mam na webce, zmenit na kliknuti vzhled. To preci neni problem, to umi javascript.
Bud to budes generovat cele menu javascriptem nebo javascriptem zmenis class.
Jestli do toho css das pozici nebo barvu je jedno. V pripade, ze delas selecty, jakoze kun muze byt cerny nebo bily, ale kocka i cervena, tak je lepsi to javascriptem generovat. Nebo jeste muzes pouzit jenom skryvani css-display:"block" / ""
Duch
Nahlásit jako SPAM
IP: 83.164.140.–
https://jsfiddle.net/vdhgL8nq/
<div id=abc class=a>
<input type=button value=1>
<input type=button value=2>
<input type=button value=3>
</div>
<input type=button value=nastavA onclick="nastav('a')">
<input type=button value=nastavB onclick="nastav('b')">
<style>
.a input:nth-child(1) {background-color:red;}
.a input:nth-child(2) {background-color:blue;}
.a input:nth-child(3) {background-color:green;}
.b input:nth-child(1) {background-color:cyan;}
.b input:nth-child(2) {background-color:violet;}
.b input:nth-child(3) {background-color:white;}
</style>
<script>
function nastav(value)
{document.getElementById('abc').className = value;}
</script>to skryvani a zobrazovani pouzivva treba bootstrap
kliknes na tlacitko, zobrazi se menu
https://getbootstrap.com/…s/dropdowns/#…
https://getbootstrap.com/…ents/navbar/#…
https://getbootstrap.com/…ts/collapse/
https://getbootstrap.com/…ts/collapse/#…
#6 peter
#6 peter
Ahoj, děkuji za ukázku nejsem si jistý zdali by se to dalo použít. Na ukázku přikládám část kódu CSS :::
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
html, body {
height: 100%;
margin: 0;
}
#hmi-screen {
background-position: center;
position: relative;
background-size: cover;
margin: auto;
overflow: auto;
background-color: #f0f0f0;
width: 100%; /* oder eine spezifische Breite */
height: 100%; /* oder eine spezifische Höhe */
max-width: 1360px;
margin: auto; /* Zentriert den Container horizontal, wenn eine Breite festgelegt ist */
background-size: contain;
background-repeat: no-repeat;
}
/* Stile für Bildschirme bis zu 1920px Breite */
@media (max-width: 1920px) {
.button-type-1
/* Spezifische Stile hier */
{line-height: 0; vertical-align: middle; display: block; margin: 0;border: none; padding: 0; position: absolute;left: 14.1vw;top:92.45vh;
background-position: center;background-repeat: no-repeat;background-size: contain;}
.button-type-2
/* Spezifische Stile hier */
{line-height: 0; vertical-align: middle; display: block; margin: 0;border: none; padding: 0; position: absolute;left: 23.1vw;top:92.45vh;
background-position: center;background-repeat: no-repeat;background-size: contain;}
.button-type-3
/* Spezifische Stile hier */
{line-height: 0; vertical-align: middle; display: block; margin: 0;border: none; padding: 0; position: absolute;left: 32.14vw;top:92.45vh;
background-position: center;background-repeat: no-repeat;background-size: contain;}
.button-type-4
/* Spezifische Stile hier */
{line-height: 0; vertical-align: middle; display: block; margin: 0;border: none; padding: 0; position: absolute;left: 41.14vw;top:92.45vh;
background-position: center;background-repeat: no-repeat;background-size: contain;}
Aha, no, problem je tedy kompatibilita prohlizecu. Zjisti si verze prohlizecu a typ.Ja bych sel do bootstrap,
oni si davaji prac s tim to odladit, ty pak nemusis.
To css mas teda napsane dost strasidelne. V tom se asi nechci pokouset zorientovat :)
.button-type-1,
.button-type-2,
.button-type-3,
.button-type-4
{
line-height: 0; vertical-align: middle; display: block; margin: 0;border: none; padding: 0; position: absolute;
background-position: center;background-repeat: no-repeat;background-size: contain;
}
.button-type-1 {left: 14.1vw; top:92.45vh;}
.button-type-2 {left: 23.1vw; top:92.45vh;}
.button-type-3 {left: 32.14vw; top:92.45vh;}
.button-type-4 {left: 41.14vw; top:92.45vh;}
toto je naprosto zbytecne, zkopiruj si to raci z bootstrap.css...
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh; /* tady das body-height=100vh */
}
html, body {
height: 100%; /* a v zapeti to prepisujes jinou hodnotou :) */
margin: 0;
}
/* spis bych ty 2 definice prehodil, pak by to mohlo davat smysl */
Navic, css bez html kodu je opet tak nejak k nicemu.
Muzu poradit validator html, css, ktery by mohl odhalit nektere problemy. ale nevim, zda ti to problem vyresi.
https://validator.w3.org/#validate_by_input
https://jigsaw.w3.org/css-validator/#…
(html kod ziskas z prohlizece, FF - klik do stranky, ctrl+a oznacit vse, prave tlacitko, zobrazit zdrojovy kod vyberu, a tam pak ctrl+A oznacit vse, a zkopirujes to do policka pro primy vstup html a kliknes validovat)
Koukám, že pozice zadáváš s vw/vh. To je relativně k velikosti "viewportu", která se v různých prohlížečích může lišit (a liší). Samo o sobě je to dobře, ale když pak nad to dáš třeba obrázek s pevnou velikostí, tak nebude sedět. (Nevím, jestli něco takového děláš a jak ten "screenshot" reprodukuješ)
Já jsem myslel, že je to teoretický problém u primitivního HTM, ale když máš reálný problém, kde vidíš rozdíl, tak prostě oprav to, co je špatně :)
#11 peter
Ahoj, děkuji všem přizpěvatelům za podněty. Natočil jsem krátké video a uložil jsem jej na YT. Jde jen o klikací aplikaci která nic nedělá, jen simuluje chování prostředí Řídícího systému stroje. Vytvořil jsem to jako vlastní projekt v práci - není to moje standartní náplň. Nicméně na základě svých předchozích zkušeností jsem se do toho pustil s tím, že to podle zadaných požadavků to nebude problém. Tedy neni nutná optimalizace na vřechny prohlížeče a telefony stačí s jedním rozlišením na jeden prohlížeč. V závěru videa je ukázka jak se rozložení chová ve vývojovem prostředí Edge. Link here
https://youtube.com/watch?v=iJAUHD91INM
Těch problému tam je jen pár a když sis s tím tak vyhrál, tak by asi stálo za to opravit to, ale to by bylo potřeba vidět celé.
A pokud teda nepotřebuješ responzivní design, tak nejjednodušší asi bude nastavit rozměry body natvrdo v pixelech a ta tlačítka místo vw/vh napozicuj taky v pixelech (nebo procentech). Takže se prostě nebude nic hýbat.
A to "@media (max-width: 1920px)" není nastavení, ale podmínka, že ten blok bude aktivní jen pokud to platí. Což teď asi nic nerozbije, ale asi to není to, co jsi měl v úmyslu, tak to můžeš vyhodit.
Pekny :)
Nevim, proc se ti to rozsype. Vyber nejaky stav, kdy je to ok a kdy se to rozsype (pripis nazvy prohlizecu a verze, pripadne rozmery okna). Uloz to pres prohlizec jako html stranku a nekde to dej na web, at je mozne zkoumas html kod a css.
Jap pise gna, pokud te nezajima dynamicke rozmistovani prvku, pouzij pozicovani a dej to presne na pixely.
Ja si ted hraji s hrou pro staveni mostu. Hlavni okno nejak vycentruji a menicka a vrstvy v nem mam rozmistene pres position. Umi to zatim jen kreslit cary. Ale v jedne vrstve to kresli pri pohybu a do druhe to maluje. Nejspis se to nerozsype v novych prohlizecich, stare jsem nezkousel. Ale slo by to css upravit i pro ne. Jen jakoze priklad pouziti position.
https://mlich.zam.slu.cz/…/bb-edit.htm
#15 peter
Ahoj, všem tady na fóru. Právě jsem zveřejnil aplikaci přes Netlify. https://sparkling-douhua-057157.netlify.app/
Kdybyste měl někdo chuť mi s tím pomoci rád bych se i něco naučil. Rozumný peníz bych byl ochoten zapaltit za řešení tohoto problému. Děkuji.
Ta tlačítka vlož přímo do toho "hmi-screen", nebo ten "buttonContainer" spolu s "hmi-screen" uzavři do dalšího divu ať jsou přes sebe.
Šířku a výšku nastav natvrdo, nebo pokud to chceš mít responzivní, tak tam dej "aspect-ratio: 1366 / 768;" a nastav tlačítkům kromě pozice ještě rozměry a těm vnitřním obrázkům rozměry 100%.
Jde hlavně o to ať ta tlačítka umisťuješ na ten podkladový obrázek a nic jiného ti ty souřadnice nemrší, to je celé.
tak, ve FF mam ted okno asi 100 px sirku a cele se to rozsypalo a prekryva :) To je cele asi dost blbe udelane. Ale to nevadi, to se vyresi.Podstatne je tam udelat spravne kontejnery, do kterych naplnis obsah.
- potrebujes nejaky hlavni div, ve kterem bude vsechno, ktery si nejak napolohojes na obrazovce
- pak tam vidim, ze to rozdelujes na 2 radky, dalsi div hlavicka, obsah
- pak tam mas ruzna tlacitka a navigace, vse soustredene v zahlavi.
- na tom videjku jsi mel jakesi plujici menu po prave strane. Tam je otazka, zda to muze prekryvat pole s obsahem nebo ne, jestli tam posetrit misto. Ale to lze resit pozdeji. V hlavicce bude hodne zalezet na tom, jak to mas udelane, aby se to nerozpadalo. Musi tam byt fakt vsechna ta tlacitka, neslo by nektere mene pouzivane menu skryt pod jedno tlacitko s rozbalenim? Vis, zase jako kopirovat vzhled uplne je dost nepraktcka zalezitost.
<div class="hlavni">
<div class="hlavicka">
<div class="nav1">...</div> - cokoliv chces polohovat a bude
obsahovat skupinu prvku, tak musi byt uzavreno v divu
<div class="nav2">...</div>
<div class="nav3">...</div>
<div class="nav4">...</div>
<div class="text">...</div>
</div>
<div class="telo">
<div class="content">
... tabulka ...
</div>
</div>
<div class="paticka">
<div class="nav5">...</div>
</div>
</div>
pokud mas tu strukturu takhle nejak, ted na to koukat nejdu, tak neni problem nastavit
.hlavni {width... } /* tady musis mit width */
.hlavicka {position:relative; width:100%; height...}
.content {position:relative; width:100%; height...}
.paticka {position:relative; width:100%; height...}
/* a pak neni problem pres position absolute tam napozicovat jednotliva menicka */
/* sice se uplne nezbavis prekryvani, ale budes mit nad tim lepsi kontrolu */
.nav1 {position:absolute; width:300px; height...; top:0; left:0;}
.nav2 {position:absolute; width:300px; height...; top:0; right:0;}
.nav3 {position:absolute; width:300px; height...; top:0; left:300px;}
...
Takhle to dopadlo na tomhle notebooku, FF 130.0, https://ctrlv.cz/ttRk
Super, no, koukam na js a mas to cele generovane pres obrazky. Potes. Aspon jsi mohl pouzit svg nebo najit free-font, ktery je tomu podobny. Nebo jsi mohl pouzit jeden obrazek s abecedou a z nej pismenka vystrihovat.Nebo se na to vykasli a pouzij Arial, to je hodne dobry font.
Ahoj kolegové,
děkuji všem za příspěvky a pomoc. Bylo mi potěšení s vámi spolupracovat. Určitě jsem si od každého něco vzal. Nakonec po nikam nevedouci snaze o upraveni stavajiciho programu jsem vytvořil program nový. Není to komplet ještě hotové. Nyní abych se vyhnul dalším problémům o kterých nemám možná ani tušení jsem se rozhodnul, poslední verzi opět zveřejnit a požádat vás o menší supervizi. :) https://66e2b11f87b0752fce5fb708--fantastic-crumble-467df5.netlify.app/
Líbí se mi, že jsi zjednodušil to CSS.
Nelíbí se mi, že tam máš 400+ funkcí, které dělají to samé :) Ta obsluha kliknutí by mohla být jedna společná funkce, která by cílový screen třeba vytáhla z atributu kliknutého elementu.
Ale zdá se, že to funguje, tak asi v pohodě.
#1 Dave2K
"jestli je to vůbec možné, abych na jiněm stroji stejného modelu při nastavení stejného rozlišení měl odlišné rozložení tlačítek?"
V podstatě to je možné. Nebudu ti psát kódy, ty si napiš sám. Napíšu ti princip. V angličtině se tomu říká "customized setting". V prvé řadě tvůj program musí otestovat stroj. Testem zjistí rozlišení, dále zjistí typ stroje, třeba také operační systém, CPU a další info. Záleží na tom, zda se jedná o počítač na netu nebo nějaký samostatně fungující počítač, například počítač, který je řídí nějakou mašinu a ty potřebuješ podle vybavení té mašiny jen uspořádat tlačítka na obrazovce.
Z toho, co tvůj počítač zjistí testem pak uděláš nastavení tlačítek. Příklad na stránce remmidemmi.co.uk takto testuju počítač návštěvníka a podle toho co zjistím, pak běží program. Nejsou tam žádný pitomý kukíky. Je to založený na php testech. Vyber si tam záložku Info a pak "test your computer". Takto lze testovat také odkud kdo přijde a eliminovat třeba návštěvy z Ruska.
U systému který není na netu, třeba mikropočítačový systém, to samé podobné. Do této bedny
http://www.jplabs.co.uk/projects/bh1017a.html
se zezadu strkají desky, šuplíky s elektronikou. Hlavní mikropočítač pod LCD testuje jaké tam má šuplíky s elektronikou a podle toho si natahne program a ten spustí. Není to teda vůbec na internetu. Je to nějaký řídící mikropočítačový systém.
#4 Dave2K
"Zkusím to popsat trochu jinak. Nachvíli úplně zapomeńte na klasické webovky. Je pouzit HTML, JS a CSS. Účel tohoto byl přiblížit grafické rozhraní stroje. Na obrazovce stroje vidíme nějaké grafické rozložení, jde o dotykový display takže kliknete na urcitý symmbol který představuje nějakou funkci pomocí které se dostanete na jiné rozhraní, grafické rozložení se změní a vy můžete v reálu něco nastavit a jít zase zpět do hlavní nabídky nebo do dalšího submenu atd. je to docela rozvětvené. "
No jasně akorát furt není jasný, jestli to je na internetu nebo stand-alone computer s dotykovou LCD třeba v čekárně na úřadu práce :) kde podle použitého počítače se zobrazují tlačítka pro směrování osob někam...
Prostě na počátku musíš otestovat ten hardware a operační systém, pokud tam nějaký je. Třeba u mikropočítačového systému s dotykovou LCD nemusí být žádný OS. Naopak, když máš třeba wokna nebo liux a dokážeš nainstalovat PHP, máš pak mraky možností.
Blbe je, ze to jsou ted image. Ja treba bezne kopiruji ze stranek texty a tady nic oznacit nejde, pac mi chce pouzit funkci pro drag-drop obrazku a ten presunout jinam :)Jinak pekny, vypada to ted vic prehledneji.
Jeste jsem videl nekde pouzivat takovou fintu, ale nesmis tam mit jquery...
Věrný člen
$ = document.querySelector;
$$ = document.querySelectorAll;
//document.getElementById('button-E12').addEventListener('click', function() {
// changeScreen('AJC');
//});
$('#button-E12').addEventListener('click', function() {
changeScreen('AJC');
});
A jinak by slo asi priradit vsem tlacitkum podle class funkci stisknuti a uvnitr se podle if-case-pole rozhodnes, co se stane
//$('#button-E12').addEventListener('click', function() {
// changeScreen('AJC');
//});
$(.butt).addEventListener('click', function() {
buttClick(this);
});
function buttClick(el)
{
id= this.id.split('-')[1] // button id="button-ZC1" -> ZC1
case id of
{
'zc1' : changeScreen('AJC'); break
}
}
// nebo to zapsat primo do toho butonu, do class, value nebo tak
// <button id="button-ZC1-AJC" class="btn btn-A1"></button>
id= this.id.split('-')[2] // button id="button-ZC1" -> 1: ZC1 2: AJC
changeScreen(id);
#22 remmidemmi
Ahoj, vlastně jde jen o to, že celý soubor je uložený někde na firemním serveru. Přístup k němu bude puze přes firemní ethernet. V tom původním kódu programu byl problém hlavně problém v html. Bylo to napsané hodně nestandartně :D. Díky za odkaz, možná to ještě budu potřebovat.
Mno, jenom jsem prepsal myslenku, co zminil gna. jako atribut jsem pouzil zrovna id, protoze ho nejspis pouzivas i pro dalsi css. Ale, jinak se pouziva spis dataSet.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
<article
id="electric-cars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
…
</article>
const article = document.querySelector("#electric-cars");
// The following would also work:
// const article = document.getElementById("electric-cars")
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
// jakoze pro tvuj pripad by to bylo neco takoveho...
// <button id="button-ZC1-AJC" class="btn btn-A1" data-scr="ZC1"></button>
document.querySelector(.butt).addEventListener('click', function() {
changeScreen(this.data.scr);
});
Cili, do html kodu bys primo napsal, jaka scr se ma spustit a v js by na to byl jen ten jeden radek. A pokud bys potreboval odlisovat funkci, tak bych pouzival jen jiny atribut v data, misto src treba neco jineho. Pak bys mel teda 2 funkce i v js.
Ted to mas tak, ze kdys pridas tlacitko, musis pripsat i js a css kod, jinak nic nefunguje.
Ale, je videt, ze ses inspiroval tim BootsTrap. Taky to tak delam, ze si vykopiruji jen ty class, ktere pouzivam, kdyz se mi chce setrit misto :)
Zjistit počet nových příspěvků
© 2003–2024 Programujte.com