Animera ett stapeldiagram
Visualisera en sensor som förändras med en rörlig stapel.
Animera ett stapeldiagram är en gratis lektion i Arduino & IoT Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Arduino & IoT Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Arduino & IoT Academy innehåller totalt 4 lektioner.
Varför ett stapeldiagram
Tal är exakta, men en stapel berättar direkt vad som händer. En växande stapel visar ett stigande sensorvärde mycket snabbare än om Ni läser siffror. 📊
Börja med en avläsning
Animering börjar med nya data. I varje varv hämtar Ni ett nytt sensorvärde, till exempel ett analogRead-resultat mellan 0 och 1023.
int value = analogRead(A0);Mappa till stapelbredd
Det råa intervallet motsvarar sällan skärmen. Använd map för att skala om 0–1023 till 0–128 pixlar, så att värdet ryms på skärmens bredd.
int barWidth = map(value, 0, 1023, 0, 128);Begränsa resultatet
En brusig avläsning kan gå utanför intervallet. Omslut den med constrain så att stapeln aldrig ritas utanför skärmkanten och förstör layouten.
barWidth = constrain(barWidth, 0, 128);Rensa varje bildruta
Animering innebär helt enkelt att rita om snabbt. Varje bildruta börjar med clearDisplay, så att den gamla stapeln försvinner innan den nya längden ritas.
display.clearDisplay();Rita stapeln
Rita nu stapeln med fillRect och använd den mappade bredden. Ett fast x, y och en fast höjd håller stapeln på plats medan bredden följer datan.
display.fillRect(0, 28, barWidth, 8, WHITE);Lägg till en ram
Rita konturen av hela spåret med drawRect så att användaren ser maxvärdet. Fyllningen växer innanför kanten, vilket ger stapeln ett tydligt sammanhang.
display.drawRect(0, 28, 128, 8, WHITE);Märk värdet
Kombinera stapeln med det exakta talet. Placera markören ovanför den och skriv ut avläsningen med print, så att användaren får både formen och det exakta värdet.
display.setCursor(0, 0);
display.print(value);Visa bildrutan
Skicka den färdiga bildrutan med display.display(). Eftersom hela bufferten uppdateras på en gång flyttas stapeln jämnt utan flimrande halvritade bilder.
display.display();Anpassa animeringens hastighet
Om Ni ritar om så snabbt som möjligt ser rörelsen ryckig ut. En kort delay på 50 millisekunder jämnar ut rörelsen och stabiliserar en skakig sensoravläsning.
delay(50);Hela loopen
Sätt ihop allt: läs av, mappa, rensa, rita, visa och pausa. Den cykeln i loop() är motorn bakom all liveanimering på OLED-skärmen som Ni bygger.
Snabb kontroll
Stapeln visar spöklika spår från tidigare bildrutor.
Sammanfattning
Ni omvandlade avläsningar till ett levande stapeldiagram: läs av, mappa, begränsa, rensa, fyll, rama in, märk och visa i en loop med rätt tempo. Det är visualisering i realtid.
Lär dig C++ med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Animera ett stapeldiagram” gratis?
Ja – hela texten till ”Animera ett stapeldiagram” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Arduino & IoT Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Arduino & IoT Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Animera ett stapeldiagram”?
Visualisera en sensor som förändras med en rörlig stapel. Ni övar på Arduino & IoT Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Arduino & IoT Academy?
Du behöver inga förkunskaper. Utbildningen i Arduino & IoT Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Animera ett stapeldiagram”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Arduino & IoT Academy-lektionen?
Ja. Varje Arduino & IoT Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Koppla och initiera en SSD1306 OLED
- Rita text i flera storlekar
- Linjer, rektanglar och cirklar
- Animera ett stapeldiagram