-
Posts
182 -
Joined
-
Last visited
-
Days Won
9
MVakili last won the day on August 10 2023
MVakili had the most liked content!
Profile Information
-
Gender
Male
-
Location
Isfahan
MVakili's Achievements
![Rank: Active Member (3/4) Active Member](http://forums.unigui.com/uploads/set_resources_2/84c1e40ea0e759e3f1505eb1788ddf3c_default_rank.png)
Active Member (3/4)
49
Reputation
-
How can I show a splash screen until app loads complete ?
MVakili replied to KingOrmon's topic in uniGUI Mobile
Tank you I change it for myself SplashDemo.rar -
I think you can use any grid but dbgrid is really good
-
Hi @Sherzod did you check my test case?
-
put (or create at runtime) a htmlframe and insert this code to make a clock <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ANALOG CLOCK</title> <style> body { background-color: midnightblue; display: flex; justify-content: center; align-items: center; min-height: 10vh; } .clock { position: relative; overflow: hidden; background-color: inherit; height: 30vmin; width: 30vmin; border-radius: 50%; box-shadow: 0 -12px 12px rgba(255,255,255,.1), inset 0 -12px 12px rgba(255,255,255,.1), 0 12px 12px rgba(0,0,0,.1), inset 0 12px 12px rgba(0,0,0,.1); } .clock div { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: transparent; } .clock div div { left: 50%; width: 0; } .clock span { position: absolute; font-family: Arial; font-size: 5vmin; font-weight: bold; color: lime; } .clock .h12 { left: 50%; top: 3%; transform: translateX(-50%); } .clock .h12::before { content: "12"; } .clock .h3 { left: 97%; top: 50%; transform: translate(-100%, -50%); } .clock .h3::before { content: "3"; } .clock .h6 { left: 50%; top: 97%; transform: translate(-50%, -100%); } .clock .h6::before { content: "6"; } .clock .h9 { left: 3%; top: 50%; transform: translateY(-50%); } .clock .h9::before { content: "9"; } .clock .ctr { width: 3%; height: 3%; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: wheat; } #div-hour div { top: 20%; height: 30%; border-left: 3px solid wheat; margin-left: -1px; } #div-minute div { top: 10%; height: 40%; border-left: 3px solid wheat; margin-left: -1px; } #div-second div { top: 5%; height: 65%; border-left: 2px solid red; } </style> <script type="text/javascript"> function setClock() { var time = new Date(); var hd = 360.0 * time.getHours() / 12 + 30.0 * time.getMinutes() / 60; var md = 360.0 * time.getMinutes() / 60 + 6.0 * time.getSeconds() / 60; var sd = 360.0 * time.getSeconds() / 60 + 6.0 * time.getMilliseconds() / 1000; document.getElementById("div-hour").style.transform = "rotate(" + hd + "deg)"; document.getElementById("div-minute").style.transform = "rotate(" + md + "deg)"; document.getElementById("div-second").style.transform = "rotate(" + sd + "deg)"; } window.onload = function () { setClock(); setInterval(function () { setClock(); }, 10); }; </script> </head> <body> <div class="clock"> <div id="div-hour"><div></div></div> <div id="div-minute"><div></div></div> <div id="div-second"><div></div></div> <span class="ctr"></span> </div> </body> </html>
- 4 replies
-
- visual effects
- htlmlframe
-
(and 4 more)
Tagged with:
-
This version correctly identifies the version of Windows on the server side. But the client side shows wrongly for the Windows server version. For better test you can run this sample. I run this code in windows 11 (http://localhost:8077/) . and when I call it in windows 10 ( another client in address http://192.168.25.1:8077/) , it shows windows 11 again ! you can find 2 test movie in HELP folder Win_ver11_simple11_030324.zip
-
Hi @Sherzod I installed my test app in windows server 2016 and I check in client sides. You can see output of user agent in below with Google Chrome/ Mozilla Firefox / Microsoft edge browsers and all browsers in for windows 10/11/windows server 2016 shows "Windows NT 10.0". --------------------------------------------------------- output of user agent in Windows edition 11 Enterprise version 22H2 with Mozilla browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0 output of user agent in Windows edition 11 Enterprise version 22H2 with Chrome browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Apple WebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36 output of user agent in Windows edition 11 Enterprise version 22H2 with Microsoft edge browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Apple WebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36 Edge/125.0.0.0 --------------------------------------------------------- output of user agent in Windows edition 10 Enterprise with Chrome browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Apple WebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 --------------------------------------------------------- output of user agent in windows server 2016 data center with Mozilla browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0 output of user agent in windows server 2016 data center with Chrome browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Apple WebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Test case UNIGUI_UserAgent_Vakili.zip
-
put (or create at runtime) a htmlframe and insert this code to make a clock <!DOCTYPE html> <html lang="en"> <head> <style> body { background-color: #0000ffff ; text-align: center; color: #0000ffff ; font-family: 'Poppins', sans-serif; overflow: hidden; } canvas { width: 100%; Height: 100%; margin: 0px auto; display: block; } a { color: #0000ffff ; transition: linear 0.3s; } a:hover { opacity: 0.8; } </style> </head> <body> <canvas id="canvas"></canvas><br> <script> const ctx = canvas.getContext('2d'); const threePIByTwo = (3 * Math.PI) / 2; console.log(threePIByTwo); let amOrPm = 'AM'; const canvasBg = '#0000ffff'; // Define colors for hour, minute and second hand const hourActiveColor = '#FFF0BE', minuteActiveColor = '#FFD340', secondActiveColor = '#FFE48A'; // Define inactive colors for hour, minute and second hand const hourInactiveColor = '#0000ffff ', minuteInactiveColor = '#0000ffff ', secondInactiveColor = '#0000ffff '; const timerBg = '#0000ffff '; function init() { canvas.width = document.documentElement.clientWidth - 35; canvas.height = document.documentElement.clientHeight - 45; // This calls the draw function repeatedly at a rate of 60 times per second window.requestAnimationFrame(draw); } function draw() { // Finding center point of canvas const centerX = canvas.width / 2, centerY = canvas.height / 2; const date = new Date(); let hr = date.getHours(); let min = date.getMinutes(); let sec = date.getSeconds(); let ms = date.getMilliseconds(); if(hr > 12) { amOrPm = 'PM'; hr -= 12; } /* Defines how much radians each hand should move */ let radH = 0.000008333 * ( ( hr * 60 * 60 * 1000 ) + ( min * 60 * 1000 ) + ( sec * 1000 ) + ms ); let radM = 0.0001 * ( ( min * 60 * 1000 ) + ( sec * 1000 ) + ms ); let radS = 0.006 * ( ( sec * 1000 ) + ms ); // Draw Canvas drawRect(0, 0, canvas.width, canvas.height, canvasBg); // Hour Hand drawCircle(centerX, centerY, 110, 0, 360 , false, hourInactiveColor, 'stroke', 90); drawCircle(centerX, centerY, 110, threePIByTwo, rad(radH) + threePIByTwo, false, hourActiveColor, 'stroke', 90); // Minute Hand drawCircle(centerX, centerY, 180, 0, 360, false, minuteInactiveColor, 'stroke', 50); drawCircle(centerX, centerY, 180, threePIByTwo, rad(radM) + threePIByTwo, false, minuteActiveColor, 'stroke', 50); // Second Hand drawCircle(centerX, centerY, 220, 0, 360, false, secondInactiveColor, 'stroke', 30); drawCircle(centerX, centerY, 220, threePIByTwo, rad(radS) + threePIByTwo, false, secondActiveColor, 'stroke', 30); // Digital Timer drawCircle(centerX, centerY, 90, 0, 360, false, timerBg, 'fill', '50'); drawText(`${hr.toString().padStart(2, "0")}:${min.toString().padStart(2, "0")} ${amOrPm}`, canvas.width / 2 - 60, canvas.height / 2 + 15, '#ffffff', '28px'); window.requestAnimationFrame(draw); } init(); // Convert degree to radians function rad(deg){ return (Math.PI / 180) * deg; } function drawText(text, x, y, color, size) { ctx.font = `${size} "Poppins"`; ctx.fillStyle = color; ctx.fillText(text, x, y); } function drawRect(x, y, width, height, color) { ctx.fillStyle = color; ctx.fillRect(x, y, width, height); } function drawArc(x, y, radius, start, end, clockwise) { ctx.beginPath(); ctx.arc(x, y, radius, start, end, clockwise); } function drawCircle(x, y, radius, start, end, clockwise, color, type, thickness) { switch (type) { case 'fill': ctx.fillStyle = color; drawArc(x, y, radius, start, end, clockwise) ctx.fill(); break; case 'stroke': ctx.strokeStyle = color; ctx.lineWidth = thickness; drawArc(x, y, radius, start, end, clockwise) ctx.stroke(); break } } </script> </body> </html>
- 4 replies
-
- visual effects
- htlmlframe
-
(and 4 more)
Tagged with:
-
Hi @Sherzod I only work with Chrome
-
Hello In my opinion, UNIGUI doesn't identify the version of Windows clients correctly and often shows Windows 7/10/11 as Windows 10.
-
Thank you dear friend I hope I can repay your favor
-
Hello Thank you for your kindness As stated from the beginning in this topic, it is necessary that 1- A form should be displayed This page contains Persian calendar and for example 3 types of its pages are attached. It is acceptable to do any of these three examples. 2- When the user clicks on one of the days in the calendar, the page will be closed and the date including day, month, and year will be returned
-
Is it my files? no I cant I download this projects from Github or web
-
That was a good point 😀 main problem very briefly 1- Display the Persian calendar in a modal form 2- If a date is passed for it, it will go to the same date (OnShow) 3- He can easily choose the desired date 4- Double click to return the selected date and close form And a series of other features that will be added later. For example 1- Have a parameter to display the Gregorian calendar values 2- The size of the calendar should be automatic. I searched the internet for various calendars with these features and found a few that were usable But I don't know how to use them in UNIGUI main program HTML2.rar 3 samples of JS codes pwt.calheatmap-master.zip JalaliJSCalendar-1.4(PersianScript.ir).tar.gz JalaliDatePicker-main.zip HTML2.rar
-
Tank you , I will check The Persian planner and calendar make us some problem , I wish I find some way for it Do you have any suggestions?