search

NatuurkundePracticumAmsterdam / ecpc

3 stars 1 forks source link

ADC sliders #14

Closed AnneliesVlaar closed 2 months ago

AnneliesVlaar commented 3 months ago

Met sliders laten zien wat het verschil is tussen continu en discrete stappen met betrekken tot ADC en voltage.

OlivierSwaak commented 3 months ago

Verticale slider

OlivierSwaak commented 3 months ago

Wat is er al?

OlivierSwaak commented 3 months ago

Optie 1

Twee horizontale sliders: de continue boven en een discrete onder De max van de discrete slider kan worden ingesteld m.b.v. een textbox

https://github.com/NatuurkundePracticumAmsterdam/ecpc/assets/90635681/53573b6f-f269-47fa-8ab2-f0071ff75b8a

Slider van: https://www.w3schools.com/howto/howto_js_rangeslider.asp

OlivierSwaak commented 3 months ago

Gebruik van de default slider met ticks kan vervelend zijn: https://stackoverflow.com/questions/26612700/ticks-for-type-range-html-input Verticaal oriënteren van slider: https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically

OlivierSwaak commented 3 months ago

Eventueel met border: image

OlivierSwaak commented 3 months ago

Optie 2

Dropdown menu als max selector

https://github.com/NatuurkundePracticumAmsterdam/ecpc/assets/90635681/b293c237-d80c-429f-beb2-6976fcd9422f

Voordelen: makkelijker te besturen Nadelen: Minder 'exploration'

OlivierSwaak commented 3 months ago

Ik zal morgen/overmorgen kijken of ik de slider verticaal kan krijgen.

AnneliesVlaar commented 3 months ago

Ik zal morgen/overmorgen kijken of ik de slider verticaal kan krijgen.

Zo onder elkaar horizontaal is het ook al heel mooi vergelijkend. Dan past het mogelijk ook beter in de handleiding, anders krijgen we een groot leeg vlak ernaast?

OlivierSwaak commented 3 months ago

Ja lijkt mij ook, het zou dan eventueel naast deze foto kunnen image maar dat kan ook een beperking zijn op hoe groot de slider is, dus ik zal hem voor nu zo houden. Ik wil nu nog kijken of ik de specifieke values ook kan laten zien bijvoorbeeld aan de hand van een label die uit de button popt, zoals de mockup hieronder: mockup_adcsliders

OlivierSwaak commented 3 months ago

image https://github.com/material-components/material-components-android/issues/1316 Iets in deze richting

OlivierSwaak commented 3 months ago

Eerst probeerde ik het aan de hand van het volgende stackoverflow antwoord: https://stackoverflow.com/a/35391072

https://github.com/NatuurkundePracticumAmsterdam/ecpc/assets/90635681/64fcb751-6782-4c7f-8a0b-b4331b3f3f1f

Maar de offset werd niet goed berekend waardoor het steeds te veel of te weinig verschoof.

Ik heb nu een andere oplossing gevonden die ik ga proberen te gebruiken: https://css-tricks.com/value-bubbles-for-range-inputs/

OlivierSwaak commented 3 months ago

Met deze nieuwe methode is het me gelukt om labels toe te voegen

https://github.com/NatuurkundePracticumAmsterdam/ecpc/assets/90635681/d1d158c1-4134-4718-a7ae-1f3d3f333460

OlivierSwaak commented 3 months ago

Verder is er nog een bug met het reloaden van de website. De max range wordt gereset naar 15, maar de ingevulde waarde niet. Aangezien dit niet zo heel belangrijk is, zal ik er niet teveel tijd aan spenderen om dit te fixen.

https://github.com/NatuurkundePracticumAmsterdam/ecpc/assets/90635681/1e9f850e-fc82-4c09-9e68-e364049793ec

Er zijn hier twee mogenlijkheden: of we updaten de value van de textbox bij startup of de max range bij startup

OlivierSwaak commented 3 months ago

Verder moeten we ook alleen maar integer values accepten bij zo'n textbox

OlivierSwaak commented 3 months ago

Verder is er nog een bug met het reloaden van de website. De max range wordt gereset naar 15, maar de ingevulde waarde niet. Aangezien dit niet zo heel belangrijk is, zal ik er niet teveel tijd aan spenderen om dit te fixen. slider_reload.mp4

Er zijn hier twee mogenlijkheden: of we updaten de value van de textbox bij startup of de max range bij startup

https://github.com/NatuurkundePracticumAmsterdam/ecpc/assets/90635681/4bd9fea9-0449-4faa-a85d-266726078e98

Het is gelukt, hij update nu de max van de range at startup.

OlivierSwaak commented 3 months ago

Verder moeten we ook alleen maar integer values accepten bij zo'n textbox

Lijkt vrij moeilijk te zijn, ik kreeg het niet snel werkend, dus we moeten kijken hoe belangrijk we dit vinden om verder uit te zoeken.

https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input https://javascript.plainenglish.io/how-to-make-an-input-only-accept-integers-9cc54f6217ad https://sentry.io/answers/html-text-input-allow-only-numeric-input/

OlivierSwaak commented 2 months ago

Dropbox, 3 keuzes

OlivierSwaak commented 2 months ago

Samenvoegen slider en label

OlivierSwaak commented 2 months ago

Maak deelbaar element van met --8<-- html bestand

OlivierSwaak commented 2 months ago

Eventueel deel-knopje

OlivierSwaak commented 2 months ago

Kleuren aanpassen naar ECPC of naar mkdocs

OlivierSwaak commented 2 months ago

Kleuren aanpassen naar ECPC of naar mkdocs

Donkere kleur voor slider handle te donker image

Daarom lichte kleur voor handle en donkere kleur voor label image

OlivierSwaak commented 2 months ago

Op verschillende monitoren is de label net op een ander plekje image

OlivierSwaak commented 2 months ago

Samenvoegen slider en label

Gelukt, ziet er overzichtelijk uit

https://github.com/NatuurkundePracticumAmsterdam/ecpc/assets/90635681/a00a9056-700f-480d-bedd-83c507808658

OlivierSwaak commented 2 months ago

Wederom met de ECPC kleuren: image De mkdocs versie (de comment hierboven) ziet er beter uit, naar mijn mening.

OlivierSwaak commented 2 months ago

Maak deelbaar element van met --8<-- html bestand

Het is me nog niet gelukt om daadwerkelijk een extern html bestand erin te 'snippeten'. Ik heb het wel samengevoegd in één html bestand (waar nog veel redundant code in staat) image maar de CSS is dus vrij website-specifiek, dus dat is niet helemaal 'plug-and-play', maar dit kan de gebruiker zelf aanpassen.

AnneliesVlaar commented 2 months ago

Samenvoegen slider en label

Gelukt, ziet er overzichtelijk uit

2024-07-08.16-24-31.mp4

Het ziet er zeker overzichtelijk uit. Het lijkt wel alsof het moeilijker te zien is wat continu en discontinu doet omdat de labels van verschillende grote zijn. Bij de circel zag je heel duidlijk wanneer ze niet uitgelijnd waren.

OlivierSwaak commented 2 months ago

Labels naast slider.

OlivierSwaak commented 2 months ago

Tekst selecteren uitzetten.

OlivierSwaak commented 2 months ago

3.3 V.

OlivierSwaak commented 2 months ago

" Ik zag dat ik die class.html als iframe erin gezet (https://github.com/NatuurkundePracticumAmsterdam/ecpc/commit/76e6077a79157e6ba48db63ba84bd1d9a76b2e66) dus misschien dat snippets idd niet werken. "

OlivierSwaak commented 2 months ago

" Ik zag dat ik die class.html als iframe erin gezet (76e6077) dus misschien dat snippets idd niet werken. "

image Het is me gelukt om de afgesplitste html als iframe in de handleiding te zetten. Ik heb het font van mkdocs, Roboto, er achteraf nog aan toe moeten voegen, maar het ziet er nog steeds niet helemaal hetzelfde uit. We kunnen hier altijd later nog naar kijken, maar de source code staat nu, met Roboto, in assets/ADC_slider, dus daar kan altijd alles gehaald worden.

OlivierSwaak commented 2 months ago

Ik heb de demo als een grijze opdracht toegevoegd. De tekst van de opdracht is niet definitief. Ik weet nog niet helemaal hoe ik opdrachten goed kan uitzetten. image