Jump to content

novikov.alexander

Members
 View Profile  See their activity

  • Posts

    7

  • Joined

  • Last visited

Recent Profile Visitors

481 profile views

novikov.alexander's Achievements

Newbie

Newbie (1/4)

0

Reputation

  1. novikov.alexander
    Hi! The problem was solved! I dont know why code not working with addjs method, but it works now: obj := TclJSONObject.Create(); for i := 0 to 255 do begin obj.AddString(inttostr(i),uniDBgrid1.DataSource.DataSet.FieldByName('lux').AsString); uniDBgrid1.DataSource.DataSet.Next(); end; //UniSession.AddJS( HTML.HTML.Text:=( '<html>' +' <head>' +' <!--link rel="stylesheet" type="text/css" href="../css/c3.css" -->' +' </head>' +' <body>' +'<div id="chart1"></div>' +'<button onclick="load()">Load</button>' +'<label class="switch">' +' <input type="checkbox" id = "toggles" name = "toggles" onclick="ld()">' +' <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 json = '+obj.GetJSONString+';' +'var arr = [];' +'for(elem in json){' +'arr.push(json[elem]);' +'}' +'var chart1 = c3.generate({' +' bindto: '#39'#chart1'#39',' +' 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 ld() {' +' if (toggles.checked){' +' alert(toggles.checked);' +' chart1.data.colors({' +' luxs: d3.rgb('#39'#FF7F50'#39').darker(0),' +' });' +' }' +' else {' +' alert(toggles.checked);' +' chart1.data.colors({' +' luxs: d3.rgb('#39'#82a6cd'#39').darker(0),' +' });' +' };' +' }' +'' +' function generateData(n) {' +' var column = ['#39'luxs'#39'];' +' for (var i = 0; i < n; i++) {' +' column.push(arr[i]);' +' }' +' return column;' +' }' +'' +'function load() {' +' chart1.load({' +' columns: [' +' generateData(Math.random() * 1000)' +' ],' +' });' +' }' +'' +' </script>' +' </body>' +'</html>') ; If you can tell why addjs method not working in my variant I will be very grateful! Thank you a lot! <3 UniGUI
  2. novikov.alexander
    This works for me 2! But if do On UniButton1Click: HTMLFrame.HTML.LoadFromFile('F:\Projects\unigserv\Win32\Debug\files\zoom.html'); after loading i try On UniButton2Click: 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),' +' });' +' params = ["id="+"svet", "val="+1];' +' ajaxRequest(HTMLFrame, '#39'load'#39', params); ' +' }' +' else {' +' chart1.data.colors({' +' luxs: d3.rgb('#39'#82a6cd'#39').darker(0),' +' });' +' params = ["id="+"svet", "val="+2];' +' 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;' +' }') ; i change function generatedata and function load. Function generatedata works perfectly but function load doesnot work.
  3. novikov.alexander
    Thank you for answering! I dont recieve any error. Function "load" does not work when i switch toggle switch in my app, if i open html file it works perfect. Its my first try to make a web page, and maybe i have some incorrect syntax in my code, but i dont see it, so i need help.
  4. novikov.alexander
    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
  5. novikov.alexander
    No problem if client is PC user. But in my situation client that must write in DB is esp8266 wifi module. This thing can only connect and send a request like "demo:1234@192.168.xxx.1:8077/?luxs=46&onoff=0". Thank you for help!
  6. novikov.alexander
    Thank you so much. I have another question: I need to make the procedure of writing to the database which execute when some client(esp8266 wifi module) sending http requests. And after that other clients(PC) must refresh their data (timer can do this, but maybe someone have more elegant method to do this) . Which way is the best for identification client and for determine type of client request (post or get)? How can i use TUniServerModule.UniGUIServerModuleHTTPCommand for insert into database? Does anybody have samples?
  7. novikov.alexander
    I need to make one client send parameters, and others read them. I do not understand how to do this. Here is an example: in browser i sent "demo:1234@192.168.xxx.1:8077/?luxs=46&onoff=0" procedure TMainForm.UniTimer1Timer(Sender: TObject); begin if UniApplication.Parameters.Values['luxs']<>'' then lux1:=strtoint(UniApplication.Parameters.Values['luxs']); UniProgressBar1.Position:= lux1; end; It's work fine for client who sent it. But not for all client sessions. Trying to do an analysis leads to exception: procedure TUniServerModule.UniGUIServerModuleHTTPCommand( ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo; var Handled: Boolean); begin if ARequestInfo.AuthExists and (ARequestInfo.AuthPassword='1234') and (ARequestInfo.AuthUsername='demo') then begin if ARequestInfo.Params.Values['luxs']<>'' then MainForm.lux1:=strtoint(ARequestInfo.Params.Values['luxs']); Exit; // Authentication is successful end else begin AResponseInfo.AuthRealm := 'Enter credentials for ' + Title; handled:=True; end; end; If you have simple code examples, please write them in this thread/ Thank u!
×
×
  • Create New...