{"id":1127,"date":"2022-05-24T12:16:23","date_gmt":"2022-05-24T11:16:23","guid":{"rendered":"https:\/\/wiskunst.nl\/?page_id=1127"},"modified":"2022-10-17T14:11:54","modified_gmt":"2022-10-17T13:11:54","slug":"lazarus-klokje-analoog-opmaak","status":"publish","type":"page","link":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/","title":{"rendered":"Lazarus-Klokje-Analoog opmaak"},"content":{"rendered":"<p><strong><span class=\"collapseomatic \" id=\"id69deafb135435\"  tabindex=\"0\" title=\"Afleveringen\"    >Afleveringen<\/span><div id=\"target-id69deafb135435\" class=\"collapseomatic_content \"><\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-start\/\">Start<\/a><\/li>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-zonder-form\/\">Zonder form<\/a><\/li>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-zichtbaarheid-en-pop\/\">Zichtbaarheid en pop<\/a><\/li>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-opmaak\/\">Opmaak<\/a><\/li>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-instellingen-bewaren\/\">Instellingen bewaren<\/a><\/li>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/\">Analoog<\/a><\/li>\n<li>Analoog opmaak<\/li>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-nieuwe-vensters\/\">Nieuwe vensters<\/a><\/li>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-alarm\/\">Alarm<\/a><\/li>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-finale\/\">Finale<\/a> <\/div><\/li>\n<\/ul>\n<h2>We hebben de analoge klok!<\/h2>\n<p>We willen de klok echter nog wat netter maken en we moeten wat mogelijkheden van opmaak toevoegen aan het menu. Tevens moeten de nieuwe instellingen bewaard worden.<\/p>\n<h4>Wijzerplaat<\/h4>\n<p>Als eerste gaan we er voor zorgen dat de analoge klok wordt voorzien van een heuse wijzerplaat:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1618 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_21.jpg\" alt=\"\" width=\"100\" height=\"100\" \/><\/p>\n<p>En dit is gemakkelijker dan u denkt. Het enige wat we nodig hebben is een &#8220;wijzerplaat&#8221; en een <em>Image<\/em>-component en wat kleine instellingen. Google even op &#8220;<em>clockfaces<\/em>&#8221; in Google-afbeeldingen en u vindt vast een plaat naar uw zin. Als u er meer mooi vindt, zorg er dan voor dat ze wel allemaal ongeveer dezelfde afmeting hebben. Later gaan we er dan voor zorgen dat u in de klok kunt wisselen van wijzerplaat.<\/p>\n<p>U kunt natuurlijk ook even onderstaande wijzerplaten downloaden (klikken en daarna met rechts klik afbeelding downloaden):<\/p>\n<p><a href=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_02.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1620 size-thumbnail\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_02-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_02-150x150.png 150w, https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_02.png 225w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_05.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1621 size-thumbnail\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_05-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_05-150x150.png 150w, https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_05.png 224w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_09.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1622 size-thumbnail\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_09-150x150.jpg\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_09-150x150.jpg 150w, https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/clockface_09.jpg 225w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Zet een <em>Image<\/em> control (4<sup>e<\/sup> knop van links op de tab <em>Additional<\/em>) op de <em>Form<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Geef de property <em>Name<\/em> de waarde <strong><em>imgFace<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Zet de property <em>Stretch<\/em> op <strong><em>True<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Zet de property <em>Transparent<\/em> op <strong><em>True<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Klik op de ellips-knop (<em>&#8230;<\/em>) naast de property <em>Picture<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Laad een wijzerplaat naar keuze.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Ga in de code naar <em>FormActivate<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg voor <em>LeesIni<\/em> de volgende regels code toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Left := 0;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Top := 0;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Width := 100;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Height := 100;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Visible := False;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Ga naar <em>FormPaint<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg in het Analoog gedeelte na de regel <em>lblTijd.Visible := False;<\/em> de volgende regel toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Visible := True;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Haal in het Analoog gedeelte de regel <em>frmKlokje.Canvas.Ellipse(0,0,100,100);<\/em> weg of becommentarieer deze regel.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg in het Digitaal gedeelte direct na <em>begin<\/em> de volgende regel toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Visible := False;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run het klokje in Analoge stand en geniet ervan.<\/span><\/p>\n<h4>Grootte analoge klok<\/h4>\n<p>De volgende stap is dat de analoge klok van grootte moet kunnen veranderen. We gaan drie groottes maken: <em>Small<\/em>, <em>Medium<\/em> en <em>Big<\/em>. We gaan hiervoor een globale variabele <em>ClockSize<\/em> (<em>integer<\/em>) gebruiken. De keuze moet, uiteraard, in het menu te maken zijn.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Voeg in de code in het implementation-gedeelte de variabele <em>ClockSize<\/em> van het type <em>integer<\/em> toe (dus bij <em>MyX<\/em> en <em>MyY<\/em>).<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende code na <em>Analoog := False;<\/em> toe in <em>FormActivate<\/em>:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 ClockSize := 120;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Verander de regels <em>imgFace.Width<\/em> en <em>imgFace.Height<\/em> als volgt:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Width := ClockSize;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Height := ClockSize;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Ga naar <em>FormPaint<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Vervang hier de volgende regels als volgt:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Width := ClockSize; \/\/ was frmKlokje.Width;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Height := ClockSize; \/\/ was frmKlokje.Height;<\/span><\/em><\/strong><\/span><\/p>\n<p><span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">&#8211; \u00a0 aBitmap.Canvas.Ellipse(-1,-1,ClockSize+1,ClockSize+1); \/\/ was\u00a0aBitmap.Canvas.Ellipse(-1,-1,frmKlokje.Width+1,frmKlokje.Height+1);<\/span><\/em><\/strong><\/span><\/p>\n<p><span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">&#8211; \u00a0 frmKlokje.Width := ClockSize; \/\/ was 100;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Height := ClockSize; \/\/ was 100;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg drie nieuwe regels toe boven <em>frmKlokje.Width<\/em>:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Width := ClockSize;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Height := ClockSize;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 imgFace.Visible := True;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run het klokje.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1623 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_22.jpg\" alt=\"\" width=\"120\" height=\"120\" \/><\/p>\n<p>Wat is hier aan de hand?<br \/>\nWe hebben <em>ClockSize<\/em> op 120 gezet, terwijl de wijzers nog worden getekend met een klokgrootte van 100, dus vanuit het middelpunt (50,50). Dat middelpunt moet nu dus (60,60) zijn. Maar omdat we ook nog andere groottes gaan implementeren moeten we dit middelpunt variabel maken, namelijk (<em>ClockSize div 2, ClockSize div 2<\/em>).<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Ga naar <em>tmrTijdTimer<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg een variabele <em>c<\/em> van het type <em>integer<\/em> toe.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende regel code in het Analoog gedeelte toe, direct na <em>begin<\/em>:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 c := ClockSize div 2;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Vervang nu in de formules <em>wx<\/em> en <em>wy<\/em> de <em>+ 50<\/em> door <strong><em>+ c<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Vervang in de regels met <em>Line(50,50,&#8230;<\/em> de <em>50<\/em> door <strong><em>c<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run de klok.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1624 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_23.jpg\" alt=\"\" width=\"120\" height=\"120\" \/><\/p>\n<p>Dit ziet er gelukkig weer beter uit.<br \/>\nWat misschien niet zo opvalt is dat de wijzers naar verhouding kleiner zijn dan toen de klok 100 x 100 was. Dit wordt beter zichtbaar als de klok bijvoorbeeld 200 x 200 is.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Verander in <em>FormActivate<\/em> <em>ClockSize<\/em> van <em>120<\/em> naar <strong><em>200<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run de klok.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1625 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_24.jpg\" alt=\"\" width=\"200\" height=\"200\" srcset=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_24.jpg 200w, https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_24-150x150.jpg 150w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/p>\n<p>Ziet u wat ik bedoel? Dit zijn toch wel hele zielige wijzertjes geworden. De wijzers moeten dus mee groeien met de grootte van de klok. We hadden de volgende verhoudingen: Voor de seconde wijzer 40\/50 ofwel 0.8 van de <em>ClockSize div 2<\/em>, voor de minuten wijzer een verhouding van 30\/50 = 0.6 en voor de uren 20\/50 = 0.4. En deze verhoudingen gaan we gebruiken.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Ga naar <em>tmrTijdTimer<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Declareer helemaal bovenaan, dus nog boven <em>var<\/em> de volgende constanten:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 const<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 fhw: Real = 0.4;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 fmw: Real = 0.6;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 fsw: Real = 0.8;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Vervang bij de urenwijzer-formules <em>wx<\/em> en <em>wy<\/em> de <em>* 20<\/em> door <strong><em>* c * fhw<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Vervang bij de minutenwijzer-formules <em>wx<\/em> en <em>wy<\/em> de <em>* 30<\/em> door <strong><em>* c * fmw<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Vervang bij de secondenwijzer-formules <em>wx<\/em> en <em>wy<\/em> de <em>* 40<\/em> door <strong><em>* c * fsw<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run de klok.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1626 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_25.jpg\" alt=\"\" width=\"200\" height=\"200\" srcset=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_25.jpg 200w, https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_25-150x150.jpg 150w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/p>\n<p>En dit ziet er al weer veel beter uit. We gaan de grootte door de gebruiker laten kiezen.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Verander in <em>FormActivate<\/em> <em>ClockSize<\/em> weer terug van <em>200<\/em> naar <strong><em>120<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg aan het <em>popMenu<\/em> de volgende items toe:<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; In het submenu van <em>Analog<\/em> na het item <em>On<\/em> het item <strong><em>Size<\/em> <\/strong>met <em>Name<\/em> = <strong><em>popAnalogSize<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Maak een submenu bij <em>Size<\/em> met de volgende items:<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> <em>&#8211;<\/em><strong><em> Small<\/em><\/strong>: <em>Name<\/em> = <strong><em>popAnalogSizeSmall<\/em> <\/strong>en <em>Checked<\/em> = <strong><em>True<\/em><\/strong>,<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> <em>&#8211;<\/em><strong><em> Medium<\/em><\/strong>: <em>Name<\/em> = <strong><em>popAnalogSizeMedium<\/em><\/strong>,<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> <em>&#8211;<\/em><strong><em> Big<\/em><\/strong>: <em>Name<\/em> = <strong><em>popAnalogSizeBig<\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Maak het event <strong><em>popAnalogSizeClick<\/em> <\/strong>aan.<\/span><\/p>\n<h4>Sender<\/h4>\n<p>In dit event gaan we de drie size-opties afwerken. Dus 1 event voor drie opties. Daarvoor gaan we handig gebruik maken van de parameter <em>Sender<\/em>.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Implementeer de event <em>popAnalogSizeClick<\/em> als volgt:\u00a0<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de variabele <strong><em>s<\/em><\/strong> van het type <strong><em>String<\/em> <\/strong>toe (voor <em>begin<\/em>).<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Zet de volgende regels tussen <em>begin<\/em> en <em>end<\/em>:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 popAnalogSizeSmall.Checked := False;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 popAnalogSizeMedium.Checked := False;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 popAnalogSizeBig.Checked := False;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 (Sender as TMenuItem).Checked := True;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 s := (Sender as TMenuItem).Name;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 s := Uppercase(Trim(Copy(s,14,Length(s))));<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 Case s of<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 &#8216;MEDIUM&#8217;: ClockSize := 160;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 &#8216;BIG&#8217;: ClockSize := 200<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 else<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 ClockSize := 120;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 end;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Repaint;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Haal vanuit de <em>Object Inspector<\/em> (tab <em>Gebeurtenissen<\/em>) bij <em>popAnalogSize<\/em> de event-handler weg (kies <strong><em>(geen)<\/em><\/strong>).<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de event handler <em>popAnalogSizeClick<\/em> toe bij de opties <em>popAnalogSizeSmall<\/em>,\u00a0<em>popAnalogSizeMedium<\/em> en\u00a0<em>popAnalogSizeBig<\/em>.<\/span><\/p>\n<p>Even wat uitleg over de code. In de parameter <em>Sender<\/em> zitten de gegevens van de aanroepende control. Omdat <em>Sender<\/em> van het type <em>TObject<\/em> (zeg maar het basis object in Lazarus) is moet deze &#8220;<em>gecast<\/em>&#8221; worden naar het juiste type. In dit voorbeeld gaat het over een menuoptie dus wordt er gecast naar <em>TMenuItem<\/em>. Dat casten gebeurt met de <em>as<\/em>-operator. Door middel van dit soort constructies is het mogelijk om hele effici\u00ebnte code te schrijven.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Run het klokje en verander een aantal malen de grootte van de analoge klok.<\/span><\/p>\n<p>We hebben nu aardig wat nieuwe functionaliteiten toegevoegd wat ook nieuwe instellingen met zich mee brengt. Deze instellingen moeten natuurlijk ook bewaard worden via <em>SchrijfIni<\/em> en bij het starten door <em>LeesIni<\/em> weer verwerkt worden.<br \/>\nIk ga ervan uit dat u nu weet hoe dat moet.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Zorg voor de volgende uitbreidingen van de cfg-file <em>klokje.cfg<\/em>:<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg in de sectie <em>[CLOCK]<\/em> een indent <strong><em>Analog<\/em> <\/strong>toe dat aangeeft of de klok analoog is (<strong><em>-1<\/em><\/strong>) of niet (<strong><em>0<\/em><\/strong>); is dus een <em>Boolean<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Maak een nieuwe sectie <strong><em>[ANALOG]<\/em><\/strong> met de indent <strong><em>ClockSize<\/em> <\/strong>dat de waarde <strong><em>Small<\/em><\/strong>, <strong><em>Medium<\/em><\/strong> of <strong><em>Big<\/em><\/strong> heeft.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Breid dus zowel <em>SchrijfIni<\/em> als <em>LeesIni<\/em> uit.<\/span><\/p>\n<p>Mocht dit niet meteen lukken, dan geen nood. In de laatste aflevering zal de complete code staan.<\/p>\n<h4>Andere wijzerkleurtjes<\/h4>\n<p>We gaan nu de kleuren van de wijzers variabel maken en laten het aan de gebruiker over om deze te kunnen wijzigen.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Voeg in het implementation-gedeelte de volgende drie globale variabelen toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 ColorHour, ColorMinute, ColorSecond: TColor;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg bij <em>FormActivate<\/em> voor <em>LeesIni<\/em> de volgende regels code toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 ColorHour := clGreen;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 ColorMinute := clBlue;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 ColorSecond := clRed;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg in het <em>popMenu<\/em> in het submenu <em>Analog<\/em> onder het item <em>Size<\/em> het item <strong><em>Colors<\/em> <\/strong>(<em>Name<\/em> = <strong><em>popAnalogColors<\/em><\/strong>) toe.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg een submenu aan het item <em>Colors<\/em> toe met de volgende items:<\/span><br \/>\n<em><span style=\"font-family: terminal, monaco, monospace;\"> &#8211;<strong> Hour<\/strong>: Name = <strong>popAnalogColorsHour<\/strong><\/span><\/em><br \/>\n<em><span style=\"font-family: terminal, monaco, monospace;\"> &#8211;<strong> Minute<\/strong>: Name = <strong>popAnalogColorsMinute<\/strong><\/span><\/em><br \/>\n<em><span style=\"font-family: terminal, monaco, monospace;\"> &#8211;<strong> Second<\/strong>: Name = <strong>popAnalogColorsSecond<\/strong><\/span><\/em><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Implementeer het event <em>popAnalogColorsClick<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende variabelen toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 var<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 s: String;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 c: TColor;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; En hierna (na <em>begin<\/em>) de volgende code:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 s := (Sender as TMenuItem).Name;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 s := UpperCase(Copy(s,16,Length(s)));<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 case s of<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 &#8216;HOUR&#8217;: c := ColorHour;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 &#8216;MINUTE&#8217;: c := ColorMinute;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 &#8216;SECOND&#8217;: c := ColorSecond;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 end;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 if s &lt;&gt; &#8221; then<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 begin<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 dlgColor.Color := c;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 if dlgColor.Execute then<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \u00a0 begin<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 c := dlgColor.Color;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 case s of<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8216;HOUR&#8217;: ColorHour := c;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8216;MINUTE&#8217;: ColorMinute := c;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8216;SECOND&#8217;: ColorSecond := c;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 end;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \u00a0 end;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 end;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Haal via de <em>Object Inspector<\/em> (tab <em>Gebeurtenissen<\/em>) bij <em>popAnalogColors<\/em> het <em>OnClick<\/em>-event weg.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Koppel de event handler <em>popAnalogColorsClick<\/em> toe aan de opties <em>popAnalogColorsHour<\/em>,\u00a0<em>popAnalogColorsMinute<\/em> en\u00a0<em>popAnalogColorsSecond<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Vervang in het <em>tmrTijdTimer<\/em> event <em>clGreen<\/em> door <strong><em>ColorHour<\/em><\/strong>, <em>clBlue<\/em> door <strong><em>ColorMinute<\/em> <\/strong>en <em>clRed<\/em> door <strong><em>ColorSecond<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run de klok en speel wat met de kleuren voor de verschillende wijzers.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1627 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_26.jpg\" alt=\"\" width=\"120\" height=\"120\" \/><\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Voeg in de cfg-file onder de sectie <em>[ANALOG]<\/em> de volgende indents toe:<\/span><br \/>\n<em><span style=\"font-family: terminal, monaco, monospace;\">&#8211;<\/span><\/em><strong><em><span style=\"font-family: terminal, monaco, monospace;\"> ColorHour<\/span><\/em><\/strong><br \/>\n<em><span style=\"font-family: terminal, monaco, monospace;\">&#8211;<\/span><\/em><strong><em><span style=\"font-family: terminal, monaco, monospace;\"> ColorMinute<\/span><\/em><\/strong><br \/>\n<em><span style=\"font-family: terminal, monaco, monospace;\">&#8211;<\/span><\/em><strong><em><span style=\"font-family: terminal, monaco, monospace;\"> ColorSecond<\/span><\/em><\/strong><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Waardes van het type <em>TColor<\/em> zijn gewone <em>integers<\/em>.<\/span><\/p>\n<p>De cfg-file zou er nu als volgt kunnen uitzien:<\/p>\n<p><em>[CLOCK]<\/em><br \/>\n<em> OnTop=-1<\/em><br \/>\n<em> Position-X=907<\/em><br \/>\n<em> Position-Y=67<\/em><br \/>\n<em> Analog=-1<\/em><\/p>\n<p><em>[FONT]<\/em><br \/>\n<em> Name=Microsoft Sans Serif<\/em><br \/>\n<em> Size=16<\/em><br \/>\n<em> Style=Standard<\/em><br \/>\n<em> ForeColor=0<\/em><br \/>\n<em> BackColor=536870912<\/em><\/p>\n<p><em>[OPACITY]<\/em><br \/>\n<em> Percentage=75<\/em><\/p>\n<p><em>[ANALOG]<\/em><br \/>\n<em> ClockSize=Small<\/em><br \/>\n<em> ColorHour=32768<\/em><br \/>\n<em> ColorMinute=16711680<\/em><br \/>\n<em> ColorSecond=255<\/em><\/p>\n<p>Ons klokje begint nu aardig te werken.<\/p>\n<p>In de volgende aflevering gaan we nieuwe vensters toevoegen voor onder andere het kiezen van de wijzerplaat en een zogenaamde About-venster.<\/p>\n<p><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-nieuwe-vensters\/\">Naar de volgende aflevering&#8230;<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We hebben de analoge klok! We willen de klok echter nog wat netter maken en we moeten wat mogelijkheden van opmaak toevoegen aan het menu. Tevens moeten de nieuwe instellingen bewaard worden. Wijzerplaat Als eerste gaan we er voor zorgen dat de analoge klok wordt voorzien van een heuse wijzerplaat: En dit is gemakkelijker dan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1121,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width.php","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"class_list":["post-1127","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Lazarus-Klokje-Analoog opmaak - Wiskunst<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazarus-Klokje-Analoog opmaak - Wiskunst\" \/>\n<meta property=\"og:description\" content=\"We hebben de analoge klok! We willen de klok echter nog wat netter maken en we moeten wat mogelijkheden van opmaak toevoegen aan het menu. Tevens moeten de nieuwe instellingen bewaard worden. Wijzerplaat Als eerste gaan we er voor zorgen dat de analoge klok wordt voorzien van een heuse wijzerplaat: En dit is gemakkelijker dan [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/\" \/>\n<meta property=\"og:site_name\" content=\"Wiskunst\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-17T13:11:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_21.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog-opmaak\\\/\",\"url\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog-opmaak\\\/\",\"name\":\"Lazarus-Klokje-Analoog opmaak - Wiskunst\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog-opmaak\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog-opmaak\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wiskunst.nl\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Lazarus-Klokje_21.jpg\",\"datePublished\":\"2022-05-24T11:16:23+00:00\",\"dateModified\":\"2022-10-17T13:11:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog-opmaak\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog-opmaak\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog-opmaak\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wiskunst.nl\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Lazarus-Klokje_21.jpg\",\"contentUrl\":\"https:\\\/\\\/wiskunst.nl\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Lazarus-Klokje_21.jpg\",\"width\":100,\"height\":100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog-opmaak\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wiskunst.nl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Programmeren\",\"item\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Delphi\\\/Lazarus\",\"item\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Lazarus-Klokje-Intro\",\"item\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Lazarus-Klokje-Analoog opmaak\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/#website\",\"url\":\"https:\\\/\\\/wiskunst.nl\\\/\",\"name\":\"Wiskunst\",\"description\":\"2\u221e\u2227&gt;\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wiskunst.nl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lazarus-Klokje-Analoog opmaak - Wiskunst","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/","og_locale":"nl_NL","og_type":"article","og_title":"Lazarus-Klokje-Analoog opmaak - Wiskunst","og_description":"We hebben de analoge klok! We willen de klok echter nog wat netter maken en we moeten wat mogelijkheden van opmaak toevoegen aan het menu. Tevens moeten de nieuwe instellingen bewaard worden. Wijzerplaat Als eerste gaan we er voor zorgen dat de analoge klok wordt voorzien van een heuse wijzerplaat: En dit is gemakkelijker dan [&hellip;]","og_url":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/","og_site_name":"Wiskunst","article_modified_time":"2022-10-17T13:11:54+00:00","og_image":[{"url":"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_21.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"10 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/","url":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/","name":"Lazarus-Klokje-Analoog opmaak - Wiskunst","isPartOf":{"@id":"https:\/\/wiskunst.nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/#primaryimage"},"image":{"@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/#primaryimage"},"thumbnailUrl":"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_21.jpg","datePublished":"2022-05-24T11:16:23+00:00","dateModified":"2022-10-17T13:11:54+00:00","breadcrumb":{"@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/#primaryimage","url":"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_21.jpg","contentUrl":"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_21.jpg","width":100,"height":100},{"@type":"BreadcrumbList","@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wiskunst.nl\/"},{"@type":"ListItem","position":2,"name":"Programmeren","item":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/"},{"@type":"ListItem","position":3,"name":"Delphi\/Lazarus","item":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/"},{"@type":"ListItem","position":4,"name":"Lazarus-Klokje-Intro","item":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/"},{"@type":"ListItem","position":5,"name":"Lazarus-Klokje-Analoog opmaak"}]},{"@type":"WebSite","@id":"https:\/\/wiskunst.nl\/#website","url":"https:\/\/wiskunst.nl\/","name":"Wiskunst","description":"2\u221e\u2227&gt;","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wiskunst.nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/pages\/1127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/comments?post=1127"}],"version-history":[{"count":9,"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/pages\/1127\/revisions"}],"predecessor-version":[{"id":1631,"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/pages\/1127\/revisions\/1631"}],"up":[{"embeddable":true,"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/pages\/1121"}],"wp:attachment":[{"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/media?parent=1127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}