Search the Community

Can someone show me how to get a HtmlFrame to load a URL on show - Thanks. PixiemForm.HTMLFrame.HTML.Clear; if UniServerModule.DeployFlag = True then begin PixiemForm.HTMLFrame.HTML.Add('http://www.mysite.org/pixie/index.html'); end else begin PixiemForm.HTMLFrame.HTML.Add('http://myip:8077/pixie/index.html'); end; PixiemForm.ShowModal;

Hi, Has a the possibility of doing a collapse the way it is in this example of Fiddle: https://jsfiddle.net/DTcHh/#&togetherjs=re4gOG14b5? When you click the link, there is an expansion, but using the bootstrap library? Thanks Charles

Hello, I tried to install the bootstrap theme that I found in this forum. Seems that with uniGUI 1.0 not works. Exist a new version or someone that works? thanks kind regards Antonello

Hello everyone, we are going to uniGUI in vein, so come on, this post is attached to the source code and a video showing how I did it. I hope you enjoy it, thanks. HTML Menu: https://bootsnipp.com/snippets/yplrV Olá pessoal, Bora de uniGUI na veia, então bora, neste post vai em anexo do codigo fonte e um vídeo mostrando como fiz. Espero que gostem, valeu. Menu HTML: https://bootsnipp.com/snippets/yplrV Video lessons (Vídeo Aula) MenuTreeHtml.rar

Hi, I Know there is UniHtmlMemo but, is there anyway a Unimemo can use html to display any formatting of text? The reason I ask is that using Fastreports and its memoview component can only understand very basic html tags so unihtmlmemo is too much for it to handle. If UniMemo can do html I want to create my own editor to only handle basic html tags which fastreports memoview can read from a db. If that makes any sense to anyone! Mark

Here's a simple example of how a html + css menu can be created and used in uniGUI by calling server procedures. MenuHtml.zip

Hi everybody! Try to use htmlframe but have one problem (not my English;)). I use C3 libary in my project, and now i want to add a toggle switch that change chart color. Heres my css: /*-- Chart --*/ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input {display:none;} /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #5568ae; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #FF7F50; } input:focus + .slider { box-shadow: 0 0 1px #FF7F50; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .c3 svg { font: 10px sans-serif; -webkit-tap-highlight-color: transparent; } .c3 path, .c3 line { fill: none; stroke: #000; } .c3 text { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid, .c3-event-rect, .c3-bars path { shape-rendering: crispEdges; } .c3-chart-arc path { stroke: #fff; } .c3-chart-arc text { fill: #fff; font-size: 13px; } /*-- Axis --*/ /*-- Grid --*/ .c3-grid line { stroke: #aaa; } .c3-grid text { fill: #aaa; } .c3-xgrid, .c3-ygrid { stroke-dasharray: 3 3; } /*-- Text on Chart --*/ .c3-text.c3-empty { fill: #808080; font-size: 2em; } /*-- Line --*/ .c3-line { stroke-width: 1px; } /*-- Point --*/ .c3-circle._expanded_ { stroke-width: 1px; stroke: white; } .c3-selected-circle { fill: white; stroke-width: 2px; } /*-- Bar --*/ .c3-bar { stroke-width: 0; } .c3-bar._expanded_ { fill-opacity: 0.75; } /*-- Focus --*/ .c3-target.c3-focused { opacity: 1; } .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step { stroke-width: 2px; } .c3-target.c3-defocused { opacity: 0.3 !important; } /*-- Region --*/ .c3-region { fill: steelblue; fill-opacity: .1; } /*-- Brush --*/ .c3-brush .extent { fill-opacity: .1; } /*-- Select - Drag --*/ /*-- Legend --*/ .c3-legend-item { font-size: 12px; } .c3-legend-item-hidden { opacity: 0.15; } .c3-legend-background { opacity: 0.75; fill: white; stroke: lightgray; stroke-width: 1; } /*-- Title --*/ .c3-title { font: 14px sans-serif; } /*-- Tooltip --*/ .c3-tooltip-container { z-index: 10; } .c3-tooltip { border-collapse: collapse; border-spacing: 0; background-color: #fff; empty-cells: show; -webkit-box-shadow: 7px 7px 12px -9px #777777; -moz-box-shadow: 7px 7px 12px -9px #777777; box-shadow: 7px 7px 12px -9px #777777; opacity: 0.9; } .c3-tooltip tr { border: 1px solid #CCC; } .c3-tooltip th { background-color: #aaa; font-size: 14px; padding: 2px 5px; text-align: left; color: #FFF; } .c3-tooltip td { font-size: 13px; padding: 3px 6px; background-color: #fff; border-left: 1px dotted #999; } .c3-tooltip td > span { display: inline-block; width: 10px; height: 10px; margin-right: 6px; } .c3-tooltip td.value { text-align: right; } /*-- Area --*/ .c3-area { stroke-width: 0; opacity: 0.2; } /*-- Arc --*/ .c3-chart-arcs-title { dominant-baseline: middle; font-size: 1.3em; } .c3-chart-arcs .c3-chart-arcs-background { fill: #e0e0e0; stroke: none; } .c3-chart-arcs .c3-chart-arcs-gauge-unit { fill: #000; font-size: 16px; } .c3-chart-arcs .c3-chart-arcs-gauge-max { fill: #777; } .c3-chart-arcs .c3-chart-arcs-gauge-min { fill: #777; } .c3-chart-arc .c3-gauge-value { fill: #000; /* font-size: 28px !important;*/ } And here is my html: <html> <head> <link rel="stylesheet" type="text/css" href="../css/c3.css" > </head> <body> <div id="chart1"></div> <label class="switch"> <input type="checkbox" id = "toggles" name = "toggles1" onclick="load()"> <span class="slider round"></span> </label> <script src="../js/d3.v3.min.js" charset="utf-8"></script > <script src="../js/c3.js"></script > <script> var chart1 = c3.generate({ bindto: '#chart1', data: { columns: [ generateData(100) ], }, axis: { x: { default: [30, 60] } }, zoom: { enabled: true, onzoomstart: function (event) { console.log("onzoomstart", event); }, onzoomend: function (domain) { console.log("onzoomend", domain); }, }, subchart: { show: true } }); function load() { if (toggles.checked){ chart1.data.colors({ luxs: d3.rgb('#FF7F50').darker(0), }); } else { chart1.data.colors({ luxs: d3.rgb('#82a6cd').darker(0), }); }; } function generateData(n) { var column = ['luxs']; for (var i = 0; i < n; i++) { column.push(Math.random() * 500); } return column; } </script> </body> </html> js file is tipical and everybody can upload it. Its works perfect when im open html file. But when in my program i add: UniSession.AddJS( 'var json = '+obj.GetJSONString+';' +'var arr = [];' +'for(elem in json){' +'arr.push(json[elem]);' +'}' +'var chart1 = c3.generate({' +' bindto: '#39'#chart1'#39',' +' color: {' +' pattern: ['#39'#FF7F50'#39', '#39'#FF7F50'#39', '#39'#FF7F50'#39', '#39'#FF7F50'#39']' +' },' +' data: {' +' columns: [' +' generateData(arr.length)' +' ],' +' },' +' axis: {' +' x: {' +' default: [30, 60]' +' }' +' },' +' zoom: {' +' enabled: true,' +' onzoomstart: function (event) {' +' console.log("onzoomstart", event);' +' },' +' onzoomend: function (domain) {' +' console.log("onzoomend", domain);' +' },' +' },' +' subchart: { show: true }' +'});' +'' +'function load() {' +' var HTMLFrame = Ext.getCmp("_HTMLFrame");' +' var params=[];' +' if (toggles.checked){' +' chart1.data.colors({' +' luxs: d3.rgb('#39'#FF7F50'#39').darker(0),' +' });' +' }' +' else {' +' chart1.data.colors({' +' luxs: d3.rgb('#39'#82a6cd'#39').darker(0),' +' });' +' };' +' ajaxRequest(HTMLFrame, '#39'load'#39', params); ' +'}' +' function generateData(n) {' +' var HTMLFrame = Ext.getCmp("_HTMLFrame");' +' var params=[];' +' var column = ['#39'luxs'#39'];' +' for (var i = 0; i < n; i++) {' +' column.push (arr[i]);' +' }' +' ajaxRequest(HTMLFrame, '#39'callserver'#39', params); ' +' return column;' +' }') ; function Generatedate works perfect but function load() doesnot work. Does anybody know what i need to do with that? UNIGUI is the best

Hi Friends, In my opinion another excellent javascript library D3 for data visualization (and not only) ... D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. http://d3js.org/ examples Best regards.

Configuration is always easy extjs-theme-bootstrap-master.zip

Hello friends, I would like to know how to change the image of a TUniImage when the mouse passes over. Thank you very much in advance.

Preview video of a legacy Delphi application we are porting to the web with Unigui, check it out: Grtz. Bernaert Dominique

Dear friends, does anyone of you have an idea, how I could style a TabControl, so that the buttons are shown at the bottom of the panel (also arranged like they are hanging at the botton). I found some information on the sencha Website with the TabPosition Property of the "Ext.tab.Panel", but it seems not to work or even causes an error. Any suggestions greatly appreciated! Gerhard Ziegler Wien & Berlin

Hello, I am creating a login screen using bootstrap, the information that is in the tEdits I have been able to retrieve, however I have a checkbox that indicates whether or not to save the user data in cookies, I can not in any way recover a true or false Coming from checkbox, I'm using a tuniurlframe to display the controls I pass the data to the form using the OnAjaxEvent event In the end it does not return the property in the event I'm sending the project to make it easier to understand Login HTML.rar

For instance, would pafina made ​​in html and plain javascript , calling a unit method of Delphi , it is possible ?

Hello, Sharing the things I'm learning. Example of how to call a function by external js unigui. This alert is pretty cool. Sincerely Alert.zip

Hi, I want to use third party javascript library for my web front end, so I search posts for how to use javascript library like c3js working under uniGUI, I found uniHtMLFrame component can do it, following is my steps: step1: ServerModule.pas -> CustomFiles -> Add css/c3.css js/d3.v3.min.js js/c3.js step2: Main.pas -> Add UniHTMLFrame1\ UniButton1\ UniButton2\ UniButton3 Click UniButton1 Load html file into UniHTMLFrame1. Click UniButton2 Update Web Front End with javascript code random numbers. Click UniButton3 Update Web Front End with uniGui(delphi code) random numbers. procedure TMainForm.UniButton1Click(Sender: TObject); begin HTML.HTML.LoadFromFile('files\simple.html'); end; procedure TMainForm.UniButton2Click(Sender: TObject); begin UniSession.AddJS( 'var chart = c3.generate({ ' + ' data: { ' + ' columns: [ ' + ' [''data1'', Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000], ' + ' [''data2'', Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000] ' + ' ], ' + ' onclick: function (d, element) { console.log("onclick", d, element); }, ' + ' onmouseover: function (d) { console.log("onmouseover", d); }, ' + ' onmouseout: function (d) { console.log("onmouseout", d); }, ' + ' } ' + '}); ' ); end; procedure TMainForm.UniButton3Click(Sender: TObject); var data1: array[0..5] of Integer; data2: array[0..5] of Integer; i: Integer; begin for i := 0 to 5 do begin data1[i] := Random(1000); data2[i] := Random(1000); end; UniSession.AddJS( 'var chart = c3.generate({ ' + ' data: { ' + ' columns: [ ' + ' [''data1'', ' + IntToStr(data1[0]) + ', ' + IntToStr(data1[1]) + ', ' + IntToStr(data1[2]) + ', ' + IntToStr(data1[3]) + ', ' + IntToStr(data1[4]) + ', ' + IntToStr(data1[5]) +'], ' + ' [''data2'', ' + IntToStr(data2[0]) + ', ' + IntToStr(data2[1]) + ', ' + IntToStr(data2[2]) + ', ' + IntToStr(data2[3]) + ', ' + IntToStr(data2[4]) + ', ' + IntToStr(data2[5]) +'], ' + ' ], ' + ' onclick: function (d, element) { console.log("onclick", d, element); }, ' + ' onmouseover: function (d) { console.log("onmouseover", d); }, ' + ' onmouseout: function (d) { console.log("onmouseout", d); }, ' + ' } ' + '}); ' ); end; simple.html <html> <head> <!-- link rel="stylesheet" type="text/css" href="../css/c3.css" --> </head> <body> <div id="chart"></div> <!-- script src="../js/d3.v3.min.js" charset="utf-8"></script --> <!-- script src="../js/c3.js"></script --> <script> var chart = c3.generate({ data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ], onclick: function (d, element) { console.log("onclick", d, element); }, onmouseover: function (d) { console.log("onmouseover", d); }, onmouseout: function (d) { console.log("onmouseout", d); }, } }); </script> </body> </html> The code run smoothly and I attach uniGUI project including csj3. If you have more concise code, let me know. My question: Is there more easy and Efficient method to interface between Server End and Front End javascript? because I need to monitor some modbus device like thermometers or switches connecting to my uniGUI server directly, and updating the display accordingly, and it is realtime monitor and quick response, the smaller traffic between server and web front is welcome. thermometers <-- Modbus TCP/RTU --> uniGUI server <-- javascript --> web front (C3js) Thanks Farshad Mohajeri, Delphi Developer, mohammad et al for your valuable posts. C3js.rar

Help with html buttons I have a button created in html and I would like that when I click the button it executes what I want, I have doubt of how to do somebody could guide me. This is an example of the button in html <Button type = "button" name = "normal"> Normal </ button>

Hi, I tried implementing server side javascript with mormot SpiderMonkey, SyNode. I always get an error : Project XXXXX.exe raised exception class $C0000005 with message 'c00000005 ACCESS_VIOLATION' When running the same lines of code in a VCL application everynting works fine. The exception Is raised in Spidermonkey Unit in the line : function JS_NewRuntime(maxbytes: uint32; maxNurseryBytes: uint32; parentRuntime: PJSRuntime): PJSRuntime; cdecl; external SpiderMonkeyLib; What should I do? Is mormot's implementation incompatible with uniGui? If so what are my alternatives? Thanks...

I've got the Google Charts API thing working (thanks to the poster who posted the sample code, I will post my code when it's all working) Basically, I build the HTML in Delphi code (which I know inside out) then pass that HTML to a UniURLFrame and it displays fine. All is good with the world. However, if I want to re-draw the chart because the user has selected different options, it doesn't work. If I assign new HTML to the UniURLFrame it doesn't draw and produces errors. Without going into detail, these errors are caused because I have already loaded things and created things in the Javascript HTMl the first time round. My question is this: is this the right way to do this sort of thing (i.e. assign HTML to a UniURLFrame) or is there a better way to do it? If this was in Windows development, you would clear what had gone before, then change the HTML then call a refresh method or the like to load in the new HTML. I know this isn't how JavaScript works but any pointers would be gratefully received. Thanks and all the best to all in the Unigui community :-) Andy

Hi there, I just started two days ago with uniGui - an generally I am fascinated! I wanted to built up a more Office2016 like style, with no runded buttons and no shades, mostly white. I managed it quite with the buttons, but concerning the PageControl and the Grid, I simply dont know the CSS Properties of these components. I found something like "x.tab....", but it seems I dont know all properties, so I spoiled it a bit. And I know nothing about the grid? By the way, maybe you also know, how can I handle wordwrap in the UniGui Buttons? Greetings from Berlin!

Hello, Can somebody help me with inserting pdf document from disc to uniHTMLFrame. I've got following code, but its not working. <div id="pdf"> <object width="400" height="500" type="application/pdf" data="3.pdf" id="pdf_content"> <p>Cant find document.</p> </object> </div>

Hi, How to config custom font in uniGui ? i wish client-side can render the new font without installing it Thank you

Hi, how can I open a form from an css menu I am using a htmlframe but I dont know how to capture the selection clicked in the extevent for execute an action

Hi, Are there any plans of integrating Unigui with Extjs 5?

as I apply css to only itens of a listbox??? when applying a css to the items of a listbox also is applied to the combobox as I can avoid that.