Widget Rehberleri

Styled Button, Icon Button ve Image Button Kullanım Rehberi

MicroControlPanel'de Styled Button, Icon Button ve Image Button widget'ları ile görsel olarak zengin buton kontrolleri oluşturun. Emoji ikon, özel resim ve renkli durum butonları.

admin@microcontrolpanel.com 10 Temmuz 2025 5 görüntülenme

🎨 Görsel Buton Widget'ları

Standart BUTTON widget'ının daha zengin görsel varyantlarıdır. Davranış aynıdır (basıldığında 1, bırakıldığında 0) — fark sadece görünümdedir.

Varyant Karşılaştırması

Tip	Görsel Fark	Ek Config
STYLED_BUTTON	ON/OFF renkli durum butonu	`onColor`, `offColor`
ICON_BUTTON	Buton üzerinde emoji ikon	`icon` (⚡🔔💡🚀), `onColor`, `offColor`
IMAGE_BUTTON	Buton arka planında özel resim	`imageUrl`, `onColor`, `offColor`

Hepsinin enerji maliyeti: 200⚡

⚙️ Yapılandırma Detayları

Styled Button

onColor:  #4ADE80  (açıkken yeşil)
offColor: #3A3B55  (kapalıyken koyu)

Icon Button

icon: ⚡ (veya 💡🔔🚀🏠)
onColor:  #4ADE80
offColor: #3A3B55

Image Button

imageUrl: https://example.com/lamp-icon.png
onColor:  #4ADE80
offColor: #3A3B55

💻 Firmware

Tüm buton varyantları aynı firmware kodunu kullanır:

MCP_WRITE(V0)
{
    int val = param.asInt();
    digitalWrite(RELAY_PIN, val == 1 ? LOW : HIGH);
    MCP.virtualWrite(V1, val);
}

💡 Önerilen Kullanım

Styled Button: Durum göstergeli kontroller — lamba, fan, pompa
Icon Button: Emoji ile hızlı tanıma — ⚡ enerji, 💡 ışık, 🔔 alarm
Image Button: Marka logosu veya cihaz fotoğrafı ile kişiselleştirilmiş butonlar

💡 İpucu: Tüm buton varyantları aynı şekilde çalışır — sadece görünüm farklıdır. Dashboard'unuzu daha sezgisel yapmak için ilgili emoji ikonu veya cihaz resmi kullanın.

#StyledButton #IconButton #ImageButton #Widget #Buton #Kontrol #MicroControlPanel #IoT