jQWidgets v7.1.0

What’s Fixed:

– Fixed an issue in jqxGrid regarding the ensurerowvisible method when grouping is enabled.
– Fixed an issue in jqxGrid regarding the keyboard navigation and selection when grouping is enabled.
– Fixed an issue in jqxGrid regarding the scrollbarsize property behavior.
– Fixed an issue in jqxGrid regarding the number input editor when the editor is localized.
– Fixed an issue in jqxGrid regarding the columnemenuopening column callback function.
– Fixed an issue in jqxGrid regarding the filter menu with datetimeinput and its popup.
– Fixed an issue in jqxGrid regarding the filter menu with the “show rows where” and “show rows where date” strings.
– Fixed an issue in jqxNumberInput regarding its resize rendering behavior.
– Fixed an issue in jqxScheduler regarding the appointmentOpacity.
– Fixed an issue in jqxScheduler – the labels of the resources disappeared on changing of the date in ‘timeline view
– Fixed an issue in jqxDateTimeInput with “allowNullDate” and initial ‘null’.
– Fixed an issue in jqxTextArea regarding the ‘selectAll’ method.


ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5, angular7, angular8, ASP.NET Core Tag Helpers, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxTree, PHP, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, VUE, VUEJS
, , , , , , , , , , , , , , , , , , , , ,

Leave a comment

Python, Zerynth and jQWidgets Knob

Build a Voltmeter with Python

When we read this post by Zerynth, we were excited how our components are used along with Python and how easy is to create amazing things with the proper Hardware and Software working together. The project is about building a Voltmeter in Python with the Zerynth App and jQWidgets Knob.



Python Code:

# DashBoard Voltage Converter. Voltage devidor by AbuFaisal
# Created at 2019-01-17

from wireless import wifi
from espressif.esp32net import esp32wifi as wifi_driver
import streams
import adc 
# import Zerynth App
from zadm import zadm

streams.serial()
sleep(1000)
print("STARTING...")

###################    WIFI Connection Setup    ##########################
wifi_driver.auto_init() 
try:
    for i in range(0,5):
        try:
            wifi.link("myWiFi",wifi.WIFI_WPA2,"123445678")
            print("Connection established..........................:)")
            break
        except Exception as e:
            print("Can't link",e)
    else:
        print("Impossible to link!")
        while True:
            sleep(1000)
            
except Exception as e:
    print(e)
    
###################    Zerynth App Configuration    ######################
z = zadm.Device("DEVICE UID HERE", "DEVICE TOKEN HERE")
z.start()
    
###################    Volt Reading Setup    #############################
while True:
    value = adc.read(A0)
    volt=value*(3.3/4095.0)
    print("sensor raw value:", value,"     Volte:",volt)
    # send the voltage value to the zerynth App
    z.send_event({"Voltage":volt})
    sleep(300)
        


HTML Template

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="utf-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <title>Voltage Divider</title>  
    <!--Include jquery -->  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
   <!--Include zerynth ADM JS LIBRARY -->  
   <script src="https://api.zerynth.com/zadm/latest/z.js"></script>    
   <!-- jqWidget Call -->  
   <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" type="text/css" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
   <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />   
   <script type="text/javascript" src="https://jqwidgets.com/public/scripts/jquery-1.11.1.min.js"></script>  
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>  
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxdraw.js"></script>  
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxknob.js"></script>  
   <script type="text/javascript" src="https://jqwidgets.com/public/jqwidgets/jqxnumberinput.js"></script>  
   <style type="text/css">  
     #container {  
       position: relative;  
     }  
     .inputField {  
       left: 110px; //change the voltage reading location input field   
       top: 123px;  
       position: absolute;  
       background: transparent;  
       border: none;  
     }  
     text.jqx-knob-label {  
       font-size: 13px;  
     }  
     .inputField .jqx-input-content {  
       background: transparent;  
       font-size: 20px;  
       color: grey;  
     }  
   </style>  
   <script type="text/javascript">  
     $(document).ready(function () {  
       $('#container').jqxKnob({  
         width: 300, //Gadget size  
         value: 0, // Change the voltage from here  
         min: 0,  
         max: 3.3,  
         startAngle:120,  
         endAngle: 420,  
         snapToStep: false, //false to show voltage in decimal point  
         allowValueChangeOnClick: false,  
         allowValueChangeOnDrag: false,  
         allowValueChangeOnMouseWheel: false,  
         rotation: 'clockwise',  
         style: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } },  
         marks: {  
           colorRemaining: { color: 'grey', border: 'grey' },  
           colorProgress: { color: '#00a4e1', border: '#00a4e1' },  
           type: 'line',  
           offset: '71%',  
           thickness: 3,  
           size: '6%',  
           majorSize: '9%',  
           majorInterval: .5,  
           minorInterval: .1,  
         },  
         labels: {  
           offset: '88%',  
           step: .5,  
           visible: true  
         },  
         progressBar: {  
           style: { fill: '#00a4e1', stroke: 'grey' },  
           size: '9%',  
           offset: '60%',  
           background: { fill: 'grey', stroke: 'grey' }  
         },  
         pointer: { type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' }, size: '59%', offset: '49%', thickness: 20 }  
       });  
       var input = $('<div class="inputField">');  
       $('#container').append(input);  
       var inputOptions = {  
         width: 80,  
         height: 500,  
         decimal: 0, // starting value same as widget  
         min: 0, // same as widget  
         max: 3.3, // same as widget  
         textAlign: 'center',  
         decimalDigits: 2,  
         inputMode: 'simple'  
       };  
       $(input).jqxNumberInput(inputOptions);  
       $('#container').on('change', function (event) {  
         if (event.args.changeSource == 'propertyChange' || event.args.changeSource == 'val') { return; }  
         $(input).val(event.args.value);  
       })   
     });  
   </script>  
  </head>  
  <body class='default' style="text-align:center">  
   <div> <h1 id="status" style="background:#ddd;font-weight:bold"></h1></div>  
   <div id='container' style="width: 200px; height: 200px; margin:0 auto;"> </div>  
   <script>  
   <!-- CONFIGURE ADM LIBRARY ON READY -->  
   $(document).ready(function() {  
    Z.init({  
     on_connected:   function(){$("#status").html("CONNECTED")},  
     on_error:     function(){$("#status").html("ERROR")},  
     on_disconnected: function(){$("#status").html("DISCONNECTED"); return true},  
     on_online:    function(evt){$("#status").html("ONLINE");},  
     on_offline:    function(evt){$("#status").html("OFFLINE");},  
     on_event:     function(evt){  
                     var val = JSON.stringify(evt.payload.Voltage);  
                     $('#container').val(val);},  
     on_notify:    function(evt){$("#status").html("NOTIFICATION! "+JSON.stringify(evt));}  
    })  
   });  
   </script>  
  </body>  
 </html>  
Uncategorized
, , , , , , , , , , ,

Leave a comment

Angular more popular than React

Angular, which is powered by Google is a development platform for building mobile and desktop web applications. It enables building apps by reusing existing code and offers developers the possibility to create their own components.

React, which is powered by Facebook is targeted to simplify the creation of interactive UIs. By designing simple views for each state in your application, React will efficiently update and render just the right components when your data changes.

According to the latest Stack Overflow Developer Survey, Angular is more popular than React in 2018 with almost 10% lead both among professional and casual developers. There are numerous post and opinions which one is better however so far Angular keeps the lead especially in enterprise applications.

Our company provides user interface tools for Angular and React.
ANGULAR, React

Leave a comment

Awesome Web Components & Custom Elements

Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements.

A Curated List of Awesome Web Components & Custom Elements: https://htmlelements.github.io/awesome-custom-elements/.
Custom Elements by jQWidgets available here: https://www.jqwidgets.com/customelements/
Uncategorized

Leave a comment

jQWidgets ver.7.0.0

jQWidgets v7.0.0 Release, Jan-10-2019

What’s New:

– React Components with TSX.

What’s Improved:

– jqxGrid Columns and Cells custom styling. A ‘style’ column property has been introduced to make styling of cells and column headers easier. Ex: Javascript Grid Styling

What’s Fixed:

– Fixed an issue in jqxScheduler recurrenceException thrown error when recurrenceException is not set, but recurrenceRule is.
– Fixed an issue in jqxScheduler recurrence issue. Ref: #25
– Fixed an issue in jqxScheduler TimelineMonthView rendering of appointments with exactTime rendering mode. Appointments were not rendered correctly. Ref: #16 – Fixed an issue in jqxScheduler Timeline views. Dragging and Resizing of appointments when the Scheduler is with absolute position. Ref: #19
– Fixed an issue in jqxGrid Time Filtering issue. Ref: #27
– Fixed an issue in jqxGrid regarding the validation popup diisplay for last row.
– Fixed an issue in jqxTreeGrid regarding the Aggregates rendering. Ref: #14
– Fixed an issue in jqxNumberInput’s getvalue method when the decimalSeparator is ‘,’.




ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, angular7, angular8, AngularJS, ASP .NET, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxButton, jqxCalendar, jqxChart, jqxDropDownList, jqxExpander, jqxGrid, jqxInput, jqxListBox, jqxResponse, jqxRibbon, jqxScrollBar, jqxSlider, jqxSplitter, jqxTabs, jqxTooltip, jqxTree, jqxTreeMap, jqxValidator, jqxWindow, PHP, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, VUE, VUEJS
, , , , , , , , , , , , , , , , , , , , , , , , ,

Leave a comment

Happy New Year

<2019>Happy New Year

Uncategorized

Leave a comment

jQWidgets ver.6.2.0

jQWidgets v6.2.0 Release, December-04-2018

What’s New:

– Angular Modules for all components – jqwidgets-ng folder.

What’s Improved:

– When the Grid calls the DataAdapter’s sort function, it now passes an additional third parameter which contains all sort columns and sort directions.

What’s Fixed:

– Fixed an issue in the rendering of jqxTree with checkboxes and jqxEditor with Material styles.
– Fixed an issue in jqxGrid regarding the multiple-column sorting of Date columns.
– Fixed an issue in jqxGrid regarding the multiple-column sorting in virtual mode. Even when there is no data, the sort arrows are rendered as in the single-sort mode.
– Fixed an issue in jqxScheduler regarding jQuery 3.3.1 and rendering of appointments on IPad in MonthView.
– Fixed an issue in jqxDateTimeInput regarding dates selection before 1970.
– Fixed an issue in jqxTreeGrid regarding the export to excel when aggregates are turned on.
– Fixed an issue in jqx.base.css file regarding *expression css names.




ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, angular tree, Angular5, angular7, angular8, AngularJS, ASP .NET, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, ASP.NET Core Tag Helpers, Chart, custom elements, Grid, html elements, JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxButton, jqxCalendar, jqxChart, jqxCheckBox, jqxComboBox, jqxDateTimeInput, jqxDock, jqxDropDownList, jqxExpander, jqxGrid, jqxInput, jqxListBox, jqxMaskedInput, jqxMenu, jqxNavigationBar, jqxNumberInput, jqxProgressBar, jqxRadioButton, jqxRating, jqxResponse, jqxRibbon, jqxScrollBar, jqxSlider, jqxSplitter, jqxTooltip, jqxTree, jqxTreeMap, jqxValidator, jqxWindow, PHP, Pivot Grid, React, react grid, React Javascript Library, REACTJS, typescript, Uncategorized, VUE, VUEJS
, , , , , , , , , , , ,

Leave a comment

Vue.js popularity grows in 2018

Vue.js is a modern framework for building user interface applications. Vue is very flexible and is designed with the idea to be incrementally adoptable. The core library is targeting entirely the view layer, which makes it easy to use and to integrate with other libraries. This however is not a drawback compared to other frameworks like Angular and React, so Vue can be used to develop sophisticated Single-Page Applications in combination with other tooling and supporting libraries.

Vue.js popularity



All of this fuels the growth and the adoption of Vue.js which makes it one of the fastest growing UI frameworks for 2018. As can be seen from the information on W3Techs.com the usage of Vue.js has almost doubled during the last year. There are also more tools and frameworks which support Vue.js

Vue.js adoption rate



JQWidgets UI component for Vue.js



The JQWidgets UI framework offers more than 60 professional, enterprise grade UI components for building state of the art Vue.js applications. All of the components are responsive and optimized for top performance on PCs, mobile devices and phones. IN addition JQWidgets offers more than 500 ready to use demos, extensive documentation and professional support. All of this combined with the power and simplicity of Vue will make the time spent on development a pleasure.
VUE, VUEJS
, , , ,

Leave a comment

Vue Web Application

Yesterday, we announced the availability of Single Page Application for Angular. Today, we do the same for Vue.js. Our team prepared a Single Page Application built with Vue.js, jQWidgets and Bootstrap frameworks. See it on: https://jqwidgets.github.io/vue-grid/.
VUE, VUEJS

Leave a comment

Angular Grid GitHub Demo App

We are excited to announce our new Angular Web application. It is about our Angular Grid. You can see it on: https://jqwidgets.github.io/angular-grid/#/. Technologies used in the demo are Angular, HTML, CSS, Javascript and Bootstrap. The web application gives an overview about our Grid features and capabilities. We prepared new help tutorials, images and demos. Each feature description comes with illustrative image about it.
ANGULAR, Angular 2, angular 4, angular 5, Angular 6, ANGULAR GRID, Angular5, angular7, angular8

1 Comment