{"id":1125,"date":"2022-05-24T12:15:19","date_gmt":"2022-05-24T11:15:19","guid":{"rendered":"https:\/\/wiskunst.nl\/?page_id=1125"},"modified":"2022-10-17T14:01:44","modified_gmt":"2022-10-17T13:01:44","slug":"lazarus-klokje-analoog","status":"publish","type":"page","link":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/","title":{"rendered":"Lazarus-Klokje-Analoog"},"content":{"rendered":"<p><strong><span class=\"collapseomatic \" id=\"id69de5fa7049e0\"  tabindex=\"0\" title=\"Afleveringen\"    >Afleveringen<\/span><div id=\"target-id69de5fa7049e0\" 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>Analoog<\/li>\n<li><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/\">Analoog opmaak<\/a><\/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 gaan de klok analoog maken.<\/h2>\n<p>In deze aflevering gaan we ons klokje de keus geven om digitaal of analoog te worden weergegeven.<\/p>\n<h4>Canvas<\/h4>\n<p>Om de klok analoog te maken moeten we kunnen &#8220;tekenen&#8221;. En tekenen kan in Lazarus (Free Pascal) op een schildersdoek ofwel een <em>Canvas<\/em>. Veel componenten hebben een <em>Canvas<\/em>, zo ook het <em>Form<\/em> zelf. En daar gaan we onze eerste tekeningetjes op maken.<\/p>\n<p>Allereerst moeten we de keuze Analoog gaan inbouwen.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Ga naar de code editor.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de globale variabele <strong><em>Analoog<\/em> <\/strong>van het type <em>Boolean<\/em> toe in het <em>implementation<\/em>-gedeelte (<em>MD<\/em> staat er al!).<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg een nieuwe menu optie <strong><em>Analog<\/em><\/strong>, met <em>Name<\/em> = <strong><em>popAnalog<\/em><\/strong>, toe als tweede item aan <em>popMenu<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg aan het item <em>Analog<\/em> een <em>sub menu<\/em> toe.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; In het submenu moet een item <strong><em>On<\/em> <\/strong>komen met als <em>Name<\/em> = <strong><em>popAnalogOn<\/em><\/strong>.<\/span><\/p>\n<p>Wanneer er op de optie <em>On<\/em> in het submenu van <em>Analog<\/em> wordt geklikt, dan moet er een vinkje komen en krijgt de variabele <em>Analoog<\/em> de waarde <em>True<\/em>, en anders moet het vinkje worden weggehaald en krijgt de variabele <em>Analoog<\/em> de waarde <em>False<\/em>.<br \/>\nUiteraard moet er, afhankelijk van <em>Analoog<\/em>, daarna ook nog de juiste klok worden weergegeven.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Maak de <em>event-handler<\/em> voor <em>popAnalogOn<\/em> aan.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende regels code toe:<\/span><br \/>\n&#8211; <span style=\"font-family: 'courier new', courier, monospace; font-size: 10pt;\">\u00a0 <strong><em>popAnalogOn.Checked := not popAnalogOn.Checked;<\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 Analoog := popAnalogOn.Checked;<\/span><\/em><\/strong><\/span><\/p>\n<p>Omdat de analoge klok straks iedere seconde moet worden ge-update gaan we gebruik maken van een passend event van het form: <em>OnPaint<\/em>.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Maak de <em>event-handler<\/em> <em>OnPaint<\/em> van het <em>Form<\/em> aan.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende regels code toe (als &#8220;raamwerk&#8221;):<\/span><br \/>\n&#8211; <span style=\"font-family: 'courier new', courier, monospace; font-size: 10pt;\">\u00a0 <em><strong>if Analoog then<\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 begin<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \/\/ code voor analoge klok<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 end<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 else<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 begin<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 \u00a0 \/\/ code voor digitale klok<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 end;<\/span><\/strong><\/em><\/span><\/p>\n<p>In de code voor de analoge klok moet in ieder geval de digitale klok worden &#8220;uitgezet&#8221; en in de code voor de digitale klok moet de digitale klok weer worden &#8220;aangezet&#8221;. Tevens moet het form ook de juiste afmetingen behouden dan wel krijgen.<br \/>\nDat aan- en uitzetten is niets meer dan de property <em>Visible<\/em> de waarde <em>True<\/em> of <em>False<\/em> geven.<\/p>\n<p>Om te beginnen gaan we onze analoge klok rond maken en zullen we er vast een wijzer inzetten.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Implementeer de code voor de analoge klok als volgt:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 lblTijd.Visible := False;<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Width := 100;<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Height := 100;<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Ellipse(0,0,100,100);<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Line(50,50,100,50);<\/span><\/strong><\/em><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Implementeer de code voor de digitale klok als volgt:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Width := lblTijd.Width;<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Height := lblTijd.Height;<\/span><\/strong><\/em><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg tot slot een regel toe (dus als laatste regel) aan <em>popAnalogOnClick<\/em>:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Repaint;<\/span><\/strong><\/em><\/span><\/p>\n<p>De meeste code zal nu wel voor zich spreken.<\/p>\n<h4>Ellipse<\/h4>\n<p>U ziet dat met de methode <em>Ellipse<\/em> op het <em>Canvas<\/em> van het <em>Form<\/em> een ellipse (in ons geval een cirkel) kan worden getekend. <em>Ellipse<\/em> verwacht 4 parameters die twee punten op het Form voorstellen, namelijk de linker bovenhoek en de rechter onderhoek. Het meeste linkse bovenhoek van het form is (0, 0) en het meest rechter onderhoek van de form is (<em>Width<\/em>, <em>Heigth<\/em>). In ons voorbeeld willen we de cirkel een zo groot mogelijke straal geven.<\/p>\n<h4>Line<\/h4>\n<p>Met de methode <em>Line<\/em> wordt er een lijn getekend van een startpunt naar een eindpunt. In ons voorbeeld is het startpunt (50, 50), het middelpunt van de cirkel, en het eindpunt (100,50). We verwachten dus een horizontale lijn vanuit het midden van de cirkel naar rechts.<\/p>\n<p>Laten we maar eens kijken.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Start de klok en kies vanuit het menu de optie Analog&#8211;&gt;On.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Kijk of u een cirkel met een lijn ziet.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Sluit de klok weer af.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1608 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_13.jpg\" alt=\"\" width=\"100\" height=\"100\" \/><\/p>\n<p>Laten we nog eens wat meer lijntjes tekenen.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Voeg na de <em>Line<\/em>-regel in <em>FormPaint<\/em> de volgende regels toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Line(50,50,50,0); \/\/ naar boven<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Line(50,50,0,50); \/\/ naar links<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Line(50,50,50,100); \/\/ naar onder<\/span><\/strong><\/em><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run de klok weer en activeer <em>Analog<\/em>&#8211;&gt;<em>On<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Sluit daarna de klok weer.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1609 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_14.jpg\" alt=\"\" width=\"100\" height=\"100\" \/><\/p>\n<p>De pen waarmee getekend wordt kan ook worden aangepast qua kleur en dikte.<\/p>\n<h4>Lijn- kleur en dikte<\/h4>\n<p>We gaan de &#8220;wijzers&#8221; rood maken en de lijn naar onder ook wat dikker.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Ga naar het &#8220;<em>analoge<\/em>&#8221; gedeelte van <em>FormPaint<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg na de regel met de ellips de volgende code toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Pen.Color := clRed;<\/span><\/strong><\/em><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg voor de laatste <em>Line<\/em> de volgende code toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Pen.Width := 3;<\/span><\/strong><\/em><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run het klokje (sluit daarna weer af).<\/span><\/p>\n<p>Het resultaat is wellicht niet wat u verwacht had:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1610 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_15.jpg\" alt=\"\" width=\"100\" height=\"100\" \/><\/p>\n<p>Naar alle waarschijnlijkheid zal de compiler (die altijd de meest effici\u00ebnte code wil maken) eerst de instellingen van de pen uitvoeren en pas daarna de tekening gaan maken. Een &#8220;ongelukkigheidje&#8221; van de compiler. Het kan natuurlijk ook aan de versie van de compiler (lees de versie van Lazarus) liggen, maar dat weet ik niet zeker.<br \/>\nHet gaat wel goed als we de volgende regels (op de juiste plaats) toevoegen.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Voeg de volgende regels toe voor de regel met <em>Ellipse<\/em>:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Pen.Color := clBlack;<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Pen.Width := 1;<\/span><\/strong><\/em><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run het klokje nogmaals (en weer sluiten, natuurlijk).<\/span><\/p>\n<p>Nu is, als het goed is, het resultaat zoals verwacht:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1611 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_16.jpg\" alt=\"\" width=\"100\" height=\"100\" \/><\/p>\n<p>Is u nog iets anders aan de analoge klok opgevallen?<br \/>\nWellicht twee zaken: De analoge klok is niet verplaatsbaar en de form van de klok is vierkant en dus niet rond.<br \/>\nHet verplaatsbaar maken van de klok is heel simpel en zullen we zo direct gaan doen.<br \/>\nHet rond maken van het form is iets ingewikkelder en zullen we aan het eind van deze aflevering gaan doen.<\/p>\n<h4>Verplaatsen analoge klok<\/h4>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Selecteer in de <em>Object Inspector<\/em> het <em>Form<\/em> en ga naar de tab <em>Gebeurtenissen<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Ga naar <em>OnMouseDown<\/em> en kies uit de combobox de optie <strong><em>lblTijdMouseDown<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Ga naar <em>OnMouseMove<\/em> en kies uit de combobox de optie <strong><em>lblTijdMouseMover<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Ga naar <em>OnMouseUp<\/em> en kies uit de combobox de optie <strong><em>lblTijdMouseUp<\/em><\/strong>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run de analoge klok en test of deze verplaatsbaar is.<\/span><\/p>\n<p>U ziet dat ook event-handlers herbruikt kunnen worden.<\/p>\n<h4>Wijzers laten lopen<\/h4>\n<p>Om nu wijzers te laten lopen zullen we beginnen met de seconde-wijzer. En ik doe een beroep op uw wiskundige kennis.<br \/>\nZoals u hopelijk (nog) weet is een cirkel onderverdeeld in 360 graden. De secondewijzer tikt 60 keer per minuut. Dus in 60 stapjes moet de seconde-wijzer 1 keer rond zijn geweest. Dit betekent dat de seconde-wijzer iedere seconde 6 graden (= 360[graden] \/ 60[seconden per minuut]) moet doorschuiven.<br \/>\nVerder weet u waarschijnlijk ook nog (van de zogenaamde eenheidscirkel) dat de x-co\u00f6rdinaat met de <em>cosinus<\/em> moet worden berekend en de y-co\u00f6rdinaat met de <em>sinus<\/em>.<br \/>\nDaar de computer met <em>radialen<\/em> zal werken moeten deze dus worden omgezet van <em>graden<\/em> naar <em>radialen<\/em>.<\/p>\n<p>E\u00e9n en ander leidt tot de volgende formules:<\/p>\n<p><em>x-co\u00f6rdinaat-seconde wijzer = cosinus(seconde * 6)<\/em><br \/>\n<em> y-co\u00f6rdinaat-seconde wijzer = sinus(seconde * 6)<\/em><\/p>\n<p>En voor Lazarus zal het er ongeveer zo uit gaan zien:<\/p>\n<p><span style=\"font-family: 'courier new', courier, monospace; font-size: 10pt;\">sx := Round(Cos(DegToRad(sec * 6)) * 40);<\/span><br \/>\n<span style=\"font-family: 'courier new', courier, monospace; font-size: 10pt;\"> sy := Round(Sin(DegToRad(sec * 6)) * 40);<\/span><\/p>\n<p>waarbij <em>sec<\/em> het aantal seconden van de huidige tijd is. De functies <em>Sin<\/em> en <em>Cos<\/em> verwachten als parameter een radiaal. Met de functie <em>DegToRad<\/em> zetten we graden om naar radialen. De &#8216;<em>* 6<\/em>&#8216; in de formules komt dus van het feit dat de wijzer iedere seconde 6 graden moet opschuiven. De &#8216;<em>* 40<\/em>&#8216; in de formule heeft te maken met het feit dat de <em>sinus<\/em> en de <em>cosinus<\/em> altijd een waarde tussen de -1 en de 1 opleveren en met de <em>Round<\/em>-functie wordt dit dus -1, 0 of 1, wat een zeer kleine wijzer oplevert. Vandaar een vergrotings-factor van 40.<\/p>\n<p>Laten we e.e.a. maar gaan implementeren.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Voeg aan de <em>uses<\/em>-clausule in het implementation-gedeelte de unit <strong><em>Math<\/em> <\/strong>toe (is nodig voor <em>DegToRad<\/em>).<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Bij <em>FormPaint<\/em>: Haal alle code vanaf <em>Ellipse<\/em> t\/m de laatste <em>Line<\/em> weg.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Ga naar het event <em>tmrTijdTimer<\/em>.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende variabelen toe (voor de <em>begin<\/em>):<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 var<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 h,m,s,ms: Word;<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 \u00a0 wx, wy: integer;<\/span><\/strong><\/em><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg na de regel <em>frmKlokje.Repaint<\/em> de volgende regels code toe:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 DecodeTime(Now,h,m,s,ms);<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 wx := Round(Cos(DegToRad(s * 6)) * 40) + 50;<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 wy := Round(Sin(DegToRad(s * 6)) * 40) + 50;<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><em><strong><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Line(50,50,wx,wy);<\/span><\/strong><\/em><\/span><br \/>\n&#8211; <span style=\"font-family: terminal, monaco, monospace;\">Run het klokje.<\/span><\/p>\n<p>Er loopt een wijzer!<br \/>\nMaar loopt de wijzer wel goed? Het loopt in ieder geval in de goede richting, maar geeft het ook de juiste secondes aan. Dat moeten we even testen.<br \/>\nWe gaan er (even) voor zorgen dat de digitale klok ook in beeld blijft.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; In het <em>tmrTijdTimer<\/em>-event:<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Maak van de regel <em>if&#8230;<\/em> commentaar (zet er <strong><em>\/\/<\/em><\/strong> voor).<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Maak van de regel <em>else<\/em> commentaar.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Maak van alle interne <em>begin<\/em>-regels en <em>end<\/em>-regels commentaar.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; In het <em>FormPaint<\/em>-event:<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Maak van de regel <em>lblTijd.Visible := False;<\/em> commentaar.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run de klok.<\/span><\/p>\n<p>Wat valt op?<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1612 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_17.jpg\" alt=\"\" width=\"100\" height=\"100\" \/><\/p>\n<p>De secondewijzer loopt 15 seconden voor!<br \/>\nDit komt omdat Lazarus de o-graden in het &#8220;Noorden&#8221; legt, terwijl de wiskunde de 0-graden in het &#8220;Oosten&#8221; legt. Onze formules zijn wiskundig en moeten dus worden aangepast voor Lazarus. Gelukkig is ook dat niet zo moeilijk.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Pas in de event <em>tmrTijdTimer<\/em> de volgende regels aan:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 wx := Round(Cos(DegToRad(s * 6 <span style=\"color: #ff0000;\">&#8211; 90<\/span>)) * 40) + 50;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 wy := Round(Sin(DegToRad(s * 6 <span style=\"color: #ff0000;\">&#8211; 90<\/span>)) * 40) + 50;<\/span><\/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-1613 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_18.jpg\" alt=\"\" width=\"100\" height=\"100\" \/><\/p>\n<p>En nu loopt de secondewijzer wel goed.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Haal alle toegevoegde commentaar-tekens (<strong><em>\/\/<\/em><\/strong>) weer weg.<\/span><\/p>\n<p>Met de procedure <em>DecodeTime<\/em> wordt uit een <em>TDateTime<\/em>-waarde (hier de functie <em>Now<\/em>) de uren, minuten, seconden en milliseconden gehaald.<\/p>\n<p>In de volgende stap zullen we de minuten- en de uren-wijzer gaan tekenen.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Ga naar het <em>trmTijdTimer<\/em>-event.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende regels toe voor de secondewijzer:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 wx := Round(Cos(DegToRad(m * 6 &#8211; 90)) * 30) + 50;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 wy := Round(Sin(DegToRad(m * 6 &#8211; 90)) * 30) + 50;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Line(50,50,wx,wy);<\/span><\/em><\/strong><\/span><\/p>\n<p>Voor de minutenwijzer geldt hetzelfde als de secondewijzer, alleen is het door de factor 30 iets kleiner.<\/p>\n<p>Tot slot de urenwijzer.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Ga naar het <em>trmTijdTimer<\/em>-event.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende regels toe voor de minutenwijzer:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 wx := Round(Cos(DegToRad(h * 30 + (m div 6) * 3 &#8211; 90)) * 20) + 50;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 wy := Round(Sin(DegToRad(h * 30 + (m div 6) * 3 &#8211; 90)) * 20) + 50;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Line(50,50,wx,wy);<\/span><\/em><\/strong><\/span><\/p>\n<p>Hier zien we een iets andere formule. Er zitten maar 12 uren in de analoge klok. Per uur betekent dat een sprong van 30 graden. Als we het hierbij zouden laten dan zou de urenwijzer slechts 1 keer per uur van positie veranderen en dat is lastig; dat betekent dat als het 5 voor 2 is de urenwijzer nog steeds op de 1 staat.<br \/>\nDe urenwijzer moet dus in een uur van de ene positie &#8220;kruipen&#8221; naar de volgende positie. En daarvoor is de aanpassing (m div 6) * 3 gebruikt, dat er voor zorgt dat de urenwijzer elke 6 minuten 3 graden opschuift, en aangezien er 10 * 6 minuten in een uur gaan, verloopt de urenwijzer dus precies 30 graden per uur.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Run de klok en kies voor analoog.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1614 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_19.jpg\" alt=\"\" width=\"100\" height=\"100\" \/><\/p>\n<p>De basis is er. Het is alleen nog niet goed zichtbaar welke wijzer wat is. Kleurtjes en diktes kunnen wellicht de zaken verduidelijken.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Zet in de code voor iedere wijzer de regels:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Pen.Color := clBlue;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 frmKlokje.Canvas.Pen.Width := 3;<\/span><\/em><\/strong><\/span><\/p>\n<p>Uiteraard mag u zelf de kleur en de dikte bepalen. Uw klokje zou er zo kunnen uitzien:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1615 size-full\" src=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_20.jpg\" alt=\"\" width=\"100\" height=\"100\" \/><\/p>\n<p>Natuurlijk kunnen we de analoge klok nog verder verfraaien, en dat gaan we ook doen in \u00e9\u00e9n van de volgende afleveringen. We hebben nu een goede basis gelegd!<\/p>\n<h4>Ronde Form<\/h4>\n<p>Tot slot van deze aflevering gaan we de vierkante Form wijzigen in een ronde Form.<\/p>\n<p>Lazarus\/Free Pascal kent hiervoor de opdracht <em>SetShape<\/em>. Als parameter kan een bitmap worden meegegeven en dan krijgt de form de vorm van de bitmap. En dat is wat we gaan doen. We gaan een bitmap maken in de vorm van een cirkel en gaan dan met <em>SetShape<\/em> het Form &#8220;verbouwen&#8221; tot een cirkel.<\/p>\n<p><span style=\"font-family: terminal, monaco, monospace;\">&#8211; Ga naar het <em>FormPaint<\/em>-event.<\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Declareer de variabele <em>aBitmap<\/em> als volgt:<\/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 \u00a0 aBitmap: TBitmap;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende regels code toe in het analoog stuk direct na begin:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap := TBitmap.Create;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Width := 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 := frmKlokje.Height;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Canvas.Brush.Color := clWhite;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Canvas.Ellipse(-1,-1,frmKlokje.Width+1,frmKlokje.Height+1);<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 SetShape(aBitmap);<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Free;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Voeg de volgende regels code toe in het else stuk voor lblTijd.Visible := True:<\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap := TBitmap.Create;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Width := lblTijd.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 := lblTijd.Height;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Canvas.Brush.Color := clWhite;<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Canvas.Rectangle(0,0,lblTijd.Width,lblTijd.Height);<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 SetShape(aBitmap);<\/span><\/em><\/strong><\/span><br \/>\n&#8211; <span style=\"font-size: 10pt;\"><strong><em><span style=\"font-family: 'courier new', courier, monospace;\">\u00a0 aBitmap.Free;<\/span><\/em><\/strong><\/span><br \/>\n<span style=\"font-family: terminal, monaco, monospace;\"> &#8211; Run de klok in analoge stand en merk op dat de hoeken rondom de cirkel zijn verdwenen.<\/span><\/p>\n<p>Bij de analoge klok wordt de ellips aan alle kanten van de klok 1 groter gemaakt. Dit is gedaan zodat de getekende ellips er keurig in past.<\/p>\n<p>Er moet nog veel gebeuren, maar dat doen we in een volgende aflevering.<\/p>\n<p><a href=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog-opmaak\/\">Naar de volgende aflevering&#8230;<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We gaan de klok analoog maken. In deze aflevering gaan we ons klokje de keus geven om digitaal of analoog te worden weergegeven. Canvas Om de klok analoog te maken moeten we kunnen &#8220;tekenen&#8221;. En tekenen kan in Lazarus (Free Pascal) op een schildersdoek ofwel een Canvas. Veel componenten hebben een Canvas, zo ook het [&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-1125","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 - 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\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lazarus-Klokje-Analoog - Wiskunst\" \/>\n<meta property=\"og:description\" content=\"We gaan de klok analoog maken. In deze aflevering gaan we ons klokje de keus geven om digitaal of analoog te worden weergegeven. Canvas Om de klok analoog te maken moeten we kunnen &#8220;tekenen&#8221;. En tekenen kan in Lazarus (Free Pascal) op een schildersdoek ofwel een Canvas. Veel componenten hebben een Canvas, zo ook het [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/\" \/>\n<meta property=\"og:site_name\" content=\"Wiskunst\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-17T13:01:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_13.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=\"12 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\\\/\",\"url\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog\\\/\",\"name\":\"Lazarus-Klokje-Analoog - Wiskunst\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wiskunst.nl\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Lazarus-Klokje_13.jpg\",\"datePublished\":\"2022-05-24T11:15:19+00:00\",\"dateModified\":\"2022-10-17T13:01:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wiskunst.nl\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Lazarus-Klokje_13.jpg\",\"contentUrl\":\"https:\\\/\\\/wiskunst.nl\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/Lazarus-Klokje_13.jpg\",\"width\":100,\"height\":100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wiskunst.nl\\\/index.php\\\/programmeren1\\\/delphi-lazarus\\\/lazarus-klokje-intro\\\/lazarus-klokje-analoog\\\/#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\"}]},{\"@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 - 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\/","og_locale":"nl_NL","og_type":"article","og_title":"Lazarus-Klokje-Analoog - Wiskunst","og_description":"We gaan de klok analoog maken. In deze aflevering gaan we ons klokje de keus geven om digitaal of analoog te worden weergegeven. Canvas Om de klok analoog te maken moeten we kunnen &#8220;tekenen&#8221;. En tekenen kan in Lazarus (Free Pascal) op een schildersdoek ofwel een Canvas. Veel componenten hebben een Canvas, zo ook het [&hellip;]","og_url":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/","og_site_name":"Wiskunst","article_modified_time":"2022-10-17T13:01:44+00:00","og_image":[{"url":"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_13.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"12 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/","url":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/","name":"Lazarus-Klokje-Analoog - Wiskunst","isPartOf":{"@id":"https:\/\/wiskunst.nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/#primaryimage"},"image":{"@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/#primaryimage"},"thumbnailUrl":"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_13.jpg","datePublished":"2022-05-24T11:15:19+00:00","dateModified":"2022-10-17T13:01:44+00:00","breadcrumb":{"@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/#primaryimage","url":"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_13.jpg","contentUrl":"https:\/\/wiskunst.nl\/wp-content\/uploads\/2022\/10\/Lazarus-Klokje_13.jpg","width":100,"height":100},{"@type":"BreadcrumbList","@id":"https:\/\/wiskunst.nl\/index.php\/programmeren1\/delphi-lazarus\/lazarus-klokje-intro\/lazarus-klokje-analoog\/#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"}]},{"@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\/1125","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=1125"}],"version-history":[{"count":7,"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/pages\/1125\/revisions"}],"predecessor-version":[{"id":1617,"href":"https:\/\/wiskunst.nl\/index.php\/wp-json\/wp\/v2\/pages\/1125\/revisions\/1617"}],"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=1125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}