Weekend Prosjekt: Lage Qt Kommuniserer med GIMP

¬ †

Interface design for grafiske programmer er sjelden lett i åpen kildekode-prosjekter. Det finnes en rekke grunner: brukergrensesnitt designere er mangelvare i forhold til utviklere, og brukertesting er ikke alltid mulig slik det er for proprietær programvare butikker, for eksempel. Men de verktøyene ikke alltid holde tritt med resten av plattformen, heller, som er en del av grunnen til at Qt er GIMP QML Eksportør er så interessant. Snarere enn en frittstående grensesnitt byggherre, lar det utvikleren designe grensesnittet direkte i GIMP, og direkte eksportere det som bruk kode

¬ †

få satt opp. GIMP, Qt Hurtig og QML

GIMP QML Eksportør er en GIMP manus skrevet i Python; du kan laste den ned fra Qt Gitorious depotet. For å installere det, kopierer du qmlexporter.py filen til .gimp-2.6 /plug-ins-mappen i hjemmekatalogen, og sørg for å gi skriptet utføre tillatelse. Når du laster GIMP, legger manuset en "Eksporter til QML" oppføring i Fil-menyen. Den Gitorious treet inneholder også et eksempel .XCF bildefil og (Qt Meta-objekt Language) utgang QML generert fra det.

QML er et brukergrensesnitt språk modellert på Javascript og CSS som Nokia introduserte med Qt 4.7. Syntaksen er veldig Javascript-aktig, med fokus på visuelle UI elementer (rasterbilder, rektangler, tekst etiketter, etc) med lett tilgjengelige egenskaper (farge, kilde, åpenhet, etc), og enkle animasjoner og transformasjoner. I tillegg kan du samhandle med QML elementer enten gjennom standard Javascript eller gjennom kroker levert av Qt selv.

For å skrive en QML-drevet program, vil du trenger for å få Qt Hurtig development kit fra Qt. Det inkluderer QML dokumentasjon og eksempler, en kjøretids QML tolk heter Qt Deklarativ, og den nyeste versjonen av Qt Creator IDE. Når du installerer Qt Creator, vil du fortsatt trenger å klikke på en knapp i hovedvinduet for å bekrefte aktivere "eksperimentelle" Qt Hurtig design komponent. Når du gjør det, blir det "Design" -kategorien på venstre aktivert, og du kan bruke den til å inspisere QML oppsett.

Designing

Med Qt Hurtig miljø satt opp, starte GIMP og begynne å tegne din grensesnitt. Hvert enkelt lag som du oppretter i XCF-fil vil bli forvandlet ved QML Exporter skriptet inn en egen QML "Image" objekt. Skriptet vil plassere den riktig på rutenettet, gi det et objekt ID navn som tilsvarer lagnavnet i den opprinnelige filen, og selv tildele riktig åpenhet via opacity eiendommen. Og som virkelig betyr hver
lag. Hvis du tegner en knapp på ett lag, og legger til en skygge på et lag under det, vil de begge bli opprettet som Images

Det er to bivirkninger av dette skriptet oppførsel. Først, hvis du har et sammensatt bilde som du vil ha gjengitt som en enkelt brikke (si, en bakgrunn med flere bildeelementer eller effekter i det), vil du ønsker å slå sammen disse lagene før du ringer QML Exporter script. For det andre, husk at GIMP ikke tvinge deg til å gi praktiske navn til dine lag. Så hvis du bygger massevis av knapper og statusikoner i design, men la dem alle med uheldige automatisk generert navn som "Layer 15" og "Layer 6 kopi," du kommer til å ende opp med "Layer 15" og "Layer 6 kopi" som QML objekt IDer i koden din, og du vil øke din egen arbeidsmengde prøver å opprettholde den.

Likevel, det meste av tiden det er hyggelig at QML Exporter gjengir hvert objekt individuelt, fordi du kan styre det meste av objektegenskapene gjennom QML selv. For eksempel, hvis du hadde en måte å eksportere knappen og skygge som et enkelt bilde, du vil for alltid være stuck med hva opacity du opprinnelig valgte for skyggen i GIMP. På den annen side, fordi knappen og skygge er separate objekter i QML, hvis du bestemmer deg for å endre tettheten fra 40% til 30%, alt du trenger å gjøre er å endre opacity: 0,4 til opacity. 0.3 i Qt Creator

Du har ett alternativ på eksport scenen: om ikke å konvertere tekst
lag til bilder, eller for å generere QML "Tekst" stedene. Hvis du velger tekst, kan du manipulere skriftstørrelse, farge og andre attributter via QML, men selvfølgelig du mister muligheten til å lage fancy effekter.

Når du tar opp QML Eksportør vinduet, kan du også Velg et navn for prosjektet og en katalog der du vil lagre utdataene. Eksportøren gjentas gjennom filen, ett lag om gangen, eksportere bilder i full størrelse som PNG-filer (tilsynelatende den eneste utgang alternativ i øyeblikket), og skaper en QML fil med prosjektnavnet du valgte. Bildene i seg selv er plassert i en underkatalog med _images
føyd til navnet.

Innen Qt Creator, kan du redigere QML koden direkte (som sannsynligvis er hva folk flest vil gjøre, siden Syntaksen er så enkelt), men kategorien Utforming raskt lar deg gjøre justeringer, også. Du kan redigere tekst, flytte bilder og satt de vanligste objektegenskaper via objektet navigatør og standard glidebryteren og avmerkingsboksen kontroller. Du kan også raskt legge til flere stater i prosjektet. Erfarne utviklere kan finne det mindre presis, men det er også en grei måte å lære deg QML: foreta endringer i kategorien design, deretter inspisere den oppdaterte kildekoden i kategorien Rediger

GUI på Speed ​​of Light.

GIMP QML Exporter sikkert gjør GUI designen enkel – i hvert fall for de av oss som er visuelle tenkere. Hvis du noen gang slitt med Glade eller slå hodet mot veggen prøver å få en annen Toolkit padding og pakking regler for å samarbeide, vil du uten tvil sette pris på både Qt Quick and den enkle som du kan sette sammen en arbeidsgruppe mockup i QML .

Likevel er det noen glitches å være klar over. For én ting, bare QML godtar objekt-IDer som inneholder bokstaver, tall og understrek, og selv om eksportør skriptet er snill nok til å konvertere mellomrom for å understrek, betyr det ikke fange andre reserverte tegn, som tegnsetting, og det gjør ikke advare deg av deres tilstedeværelse.

Også eksempelet filen i Gitorious treet, for å være ærlig, ganske tørt. Det er fint å kontrollere UI elementer med en CSS-og-Javascript-lignende syntaks og alle, men en av de beste tingene om QML er at det frigjør deg fra begrensninger av standard Qt widgets "utseende og følelse. En bedre innføring i hva skriptet kan gjøre er funnet i Forfatter Jens Bache-Wiig YouTube video, Photoshop til QML eksportør, som viser hvordan du legger til animasjonseffekter, rotasjoner, og andre niceties til QML utgang.

Til slutt , som tittelen på at YouTube-video avslører, gjør Bache-Wiig en Photoshop-versjon av manuset også, og for nå GIMP utgaven av eksportøren mangler et par av de bedre funksjoner. I Photoshop skriptet, kan du velge en eksport tid mulighet til å ikke
eksportere noen lag som synlighet er slått av. Det kan være lurt å holde et par lag usynlig under designfasen hvis du har forskjellige ikoner for ulike programland, men det er fint å kontrollere hvorvidt de blir generert. Photoshop utgaven utnytter også at programmets evne til å gruppere lagene sammen, slik at du kan eksportere en gruppe som én sammensatt bilde – men GIMP kan ikke støtte denne funksjonen, i hvert fall i den gjeldende utgaven.

Kanskje enda viktigere, skjønt, kan du un-sjekk .QML fil generasjon funksjon i Photoshop eksportør. Gjør du det bare skaper nye versjoner av bildefilene. Hvis du oppretter QML filen deretter redigere den i Qt Creator, kanskje legge til effekter eller helt ny kode, re-generere QML overskriver alle disse endringene. Forhåpentligvis som funksjonen vil gjøre det til GIMP utgave snart.

QML og Qt Hurtig kit er rettet mot utviklere av lette, mobile applikasjoner, ikke fullverdig desktop Linux-programmer. Likevel er GIMP QML Exporter en virkelig finne. Den lar GUI utforming take front og senter i en kreativ app, der layout og ser og følelsen er førsteklasses egenskaper, ikke ettertanker. Ville det ikke vært fint om alle grafiske verktøy var dette lett å kontrollere? Anmeldelser