Using Computer Vision – How to Implement the Microsoft Azure Read REST API Using Sencha CMD and Ext JS – Sencha.com Sencha Home / Blog / Ext JS / Using Computer Vision – How to Implement the Microsoft Azure Read REST API Using Sencha CMD and Ext JS
Who loves AI algorithms? The Read service is an API that identifies any visible text, printed and handwritten on images or PDF files. The API returns the words on results with confidence percentual of that text found on the image/PDF. Using it, you can extract any texts from images/PDF even if someone wrote by hand. If is there any word, it can identify. Now let’s create our Javascript Ext JS application using best practices and applying this awesome API to scan images to extract texts from it. Incorporating computer vision into your Javascript applications like this can really help you stay ahead of the competition. Let’s get started! Prerequisites Before you start, there are some prerequisites to follow to access the API. You can follow the steps here to create a Computer Vision resource on Microsoft Azure to get your keys to access the API. Starting with Sencha CMD If you still don’t have Sencha CMD, you can download it for free here. Once you have it installed make sure it was installed and configured properly, running this command on terminal/shell: If it returns sencha cmd version, you are good to go. Here are more details on how to install, configure and use Sencha CMD, but this article will show all the important details. Creating the application The first thing you want to do is create your project structure and Sencha CMD can do it for you easily, just by running this command: sencha -sdk /Users/fabio/sencha-sdks/ext-7.3.1/ generate app modern ReadTextImage ./read-text-image-extjs /Users/fabio/sencha-sdks/ext-7.3.1/ is where your Ext JS SDK folder is. ReadTextImage is the name of our application that will be our namespace for our classes. ./read-text-image-extjs is the path where it will create our project structure with the needed files. modern is the toolkit selected for our application. Make sure when you run this command there is no error on the output. If everything was running correctly, it created your project structure. Let’s run our application with the initial structure. First navigate to your project folder: $ cd read-text-image-extjs/ Then, run the command that will up the server on a specific port: The output of this command will show you the URL where your app will be available. For our case, it is available on http://localhost:1841/. Open it on your browser and you will see a screen like this: Cleaning up Once we have our basic project running, we can remove from it the files and components that will not use. You can delete these files with the command bellow (open other terminal and keep sencha app running because it will update the application automatically): $ rm app/model/* app/store/* app/view/main/List.* Now let’s clean up our classes that are on app/view/main. Make sure your three classes are like this: Main.js: /** * This class is the main view for the application. It is specified in app.js as the * “mainView” property. That setting causes an instance of this class to be created and * added to the Viewport container. */ Ext.define(‘ReadTextImage.view.main.Main’, { extend: ‘Ext.Panel’, xtype: ‘app-main’, controller: ‘main’, viewModel: ‘main’ }); MainController.js: /** * This class is the controller for the main view for the application. It is specified as * the “controller” of the Main view class. */ Ext.define(‘ReadTextImage.view.main.MainController’, { extend: ‘Ext.app.ViewController’, alias: ‘controller.main’ }); MainModel.js: /** * This class is the view […]
In this global economic turmoil, it has become very important for investors to make the right financial decision based on accurate and up-to-date market data. With Sencha Ext JS and Marketstack API, you can build a stock market web application that provides real-time data and helps the investors uncover valuable insights. In this article, you will find all the details. What is Marketstack API? Marketstack is a REST API that provides real-time stock market data. It supports 25,000 stock tickers across the globe from 72 stock exchanges, including NYSE, Nasdaq, and ENX. Also, it offers accurate historical market data of more than 30 years. With an uptime of nearly 100%, it has become one of the most reliable stock market APIs that you can find online. Why should you use Marketstack API? Offers real-time, intraday, and historical stock market data in JSON format, which is very easy to integrate with web applications Supports integration with multiple languages and frameworks, including JavaScript, Python, Node, and Go Handles traffic spike efficiently Offers bank-grade security using the industry-standard 256-bit HTTPS encryption Provides easy-to-follow documentation How to Build a Real-Time Stock Market Web Application with Sencha Ext JS and Marketstack API Sencha Ext JS is a feature-rich JavaScript framework for building business-grade web applications. By integrating Marketstack API, you can create a real-time stock market application easily. Take a look at it: To create the stock market application shown above, you have to follow these steps: 1. First, you have to create the model. Go to app > model folder, create HomeModel.js file and add these codes: Ext.define(‘Demo.model.HomeModel’, { extend: ‘Ext.data.Model’, alternateClassName: [ ‘home’ ], requires: [ ‘Ext.data.field.Number’, ‘Ext.data.proxy.Rest’ ], fields: [ { type: ‘float’, name: ‘low’ }, { type: ‘float’, name: ‘high’ }, { type: ‘int’, name: ‘date’ }, { type: ‘float’, name: ‘close’ }, { type: ‘float’, name: ‘open’ } ], proxy: { type: ‘rest’ } }); Here, you are adding different fields, including open, close, data, high and low. Also, you are defining their types. 2. Then you have to create the view. Go inside view folder and create OHLCCharts.js file. Insert these codes: Ext.define(‘Demo.view.OHLCCharts’, { extend: ‘Ext.panel.Panel’, alias: ‘widget.OHLCCharts’, alternateClassName: [ ‘OHLCCharts’ ], requires: [ ‘Demo.view.OHLCChartsViewModel’, ‘Demo.view.OHLCChartsViewController’, ‘Ext.toolbar.Toolbar’, ‘Ext.toolbar.Fill’, ‘Ext.form.field.Date’, ‘Ext.button.Button’, ‘Ext.chart.CartesianChart’, ‘Ext.chart.axis.Time’, ‘Ext.chart.series.CandleStick’, ‘Ext.chart.interactions.PanZoom’, ‘Ext.chart.interactions.Crosshair’ ], controller: ‘ohlccharts’, viewModel: { type: ‘ohlccharts’ }, dock: ‘top’, height: ‘100vh’, padding: 0, style: { background: ‘#ffffff’ }, width: ‘100wh’, layout: ‘fit’, bodyPadding: 0, frameHeader: false, manageHeight: false, dockedItems: [ { xtype: ‘toolbar’, alignTarget: ”, border: 2, dock: ‘top’, style: { background: ‘#c6e4aa’ }, layout: { type: ‘hbox’, padding: ‘0 10 0 0’ }, items: [ { xtype: ‘tbfill’ }, { xtype: ‘textfield’, id: ‘tickerInput’, width: 100, fieldLabel: ‘Ticker’, labelWidth: 40, value: ‘AAPL’ }, { xtype: ‘datefield’, id: ‘fromDatePicker’, width: 250, fieldLabel: ‘From’, labelWidth: 50, value: ’01/01/2020′ }, { xtype: ‘datefield’, id: ‘toDatePicker’, resizable: false, width: 250, fieldLabel: ‘To’, labelWidth: 50, value: ’12/31/2020′ }, { xtype: ‘button’, id: ‘refreshBtn’, text: ‘Refresh’, listeners: { click: ‘onRefreshBtnClick’ } } ] }, { xtype: ‘cartesian’, dock: ‘top’, height: ’85vh’, id: ‘mycandlestickchart’, itemId: ‘mycandlestickchart’, margin: ‘0 0 0 […]
With the world turning into a global village for free trade, it has become vital for individuals to have avenues for converting currencies. Currencies like the United States Dollar, the Euro, and the British Pound are widely used around the world for international transactions. So, individuals and businesses keep a close eye on the exchange rates. As a developer, you can help people access exchange rates by creating a currency converter application with Sencha Ext JS and Exchange Rates API. In this post, you will find all the details. What is Exchange Rates API? Exchange Rates API is a JSON-based REST API that provides current and historical exchange rates. It supports 170 global currencies and over 14,000 exchange rate conversion pairs. It is one of the fastest and most scalable exchange rate APIs that you can find online. Why should you use Exchange Rates API? Delivers unmatched performance Offers quick data refresh rate (60 seconds) User-friendly interface Easy to integrate with web applications Offers dedicated support team for helping you implementing the API How to Create a Currency Converter Application Quickly with Sencha Ext JS and Exchange Rates API Sencha Ext JS is a powerful framework for building cross-platform web applications. By integrating Exchanges Rates API, you can develop a currency converter application easily. Take a look at the app: To build the currency converter web application shown above, you have to follow these steps: 1. First, you have to create the model for exchange rates. Go to the App folder. Then head to the model directory, create the new RateModel.js file and add these codes: Ext.define(‘HeaderLeftRight.model.RateModel’, { extend: ‘Ext.data.Model’, requires: [ ‘Ext.data.field.String’, ‘Ext.data.field.Number’ ], fields: [ { type: ‘string’, name: ‘symbol’ }, { type: ‘float’, name: ‘rate’ } ] }); Here, you are adding two fields, called ‘symbol’ and ‘rate.’ Also, you are defining their types. 2. You have to create models for the currency symbols. Create a new file, called SymbolModel.js, inside the model folder. Then add these codes: Ext.define(‘HeaderLeftRight.model.SymbolModel’, { extend: ‘Ext.data.Model’, requires: [ ‘Ext.data.field.String’ ], fields: [ { type: ‘string’, name: ‘symbol’ }, { type: ‘string’, name: ‘value’ } ] }); Here, you are defining two fields: symbol and value. 3. Next, you have to add the Views. Go to the view folder, create the MyPanelViewModel.js file and add these codes: Ext.define(‘HeaderLeftRight.view.MyPanelViewModel’, { extend: ‘Ext.app.ViewModel’, alias: ‘viewmodel.mypanel’ }); 4. Create the MyPanelViewController.js file and insert these codes: Ext.define(‘HeaderLeftRight.view.MyPanelViewController’, { extend: ‘Ext.app.ViewController’, alias: ‘controller.mypanel’, setRatesComapareValue: function(baseSymbol, rate, exchangeSymbol) { this.resultLbl.setText(`1 ${baseSymbol} = ${rate} ${exchangeSymbol}`); }, toggleSymbolGrid: function() { if(this.isSymbolGridShowed) { this.symbolGrid.hide(); this.isSymbolGridShowed = false; } else { this.symbolGrid.show(); this.isSymbolGridShowed = true; } }, […]
No matter how you look at it, Detect Labels is one of the most awesome Google APIs out there. It is the gateway to a full array of information that can be added to any picture. With it, you can read tags for almost everything you see in a given image, from its location to the products and activities you see within. Is there an animal in the image? If the answer is yes, you can even tag the species. Needless to say, there is endless potential in the Detect Label API. That’s why today we are going to create a project using Detect Labels to scan images in Sencha Architect. Starting with Sencha Architect Before you start, you are going to need to configure and open Sencha Architect on your machine. If it asks for them, install and update Sencha CMD and the Ext JS SDK as well. Creating a project Once everything is current, you can start by clicking on New Project on the Sencha Architect main screen: You will see a number of project options, for our purposes we will start with the Blank Project template. Select it and click on Create: This creates a new blank project ready for you to start selecting and dragging things into. Creating and configuring the view The first thing you want to do is select and drag a Form Panel from the right-side tool box. Drag it into your project and give it a title in the configurations panel on the bottom right of the Sencha Architect window. Let’s name it Detect Labels: Next, you will want to add a toolbar with a button at the bottom of the form. Call the button Run. We can assign the button an action later. Now it gets interesting, let’s add some fields that we will use to dynamically change our request parameters. You can rename them as you go by double-clicking on the name field. Add fields for API URL, API Key, Max. Results, Image URL, and Response. Now, let’s transform the Max. Results field to a Number field and disable the decimal flag because there will be an integer value for it. Configuring the View Model Now that you have created your view, it is time to work on the View Model. Here we connect the fields with values from the model using bind. To do this go to the tree files on the left panel, and select MyFormViewModel. Next, in the configuration panel, find config data and click on its value. This will change it in the code. This will also open the Architect code editor. To define the data for the view model we will enter our URL and parameters to call the Detect Labels API using an Ext Ajax request. As an example, we will use the image used on the API blog post. Don’t forget to change your Google API Key key as well! data: { apiUrl: ‘https://vision.googleapis.com/v1/images:annotate’, apiKey: ‘yourGoogleApiKey’, imageUri: ‘gs://cloud-samples-data/vision/label/setagaya.jpeg’, maxResults: 5, response: null } Binding the fields Once you are done, it is time to connect the data to our fields. To do this, head back to your form view on the Editor tab, select each field, and find the value property on the configurations panel. Make sure the option View Model Binding is […]
Quickly Build Amazing Cryptocurrency Charts in JavaScript with Coinlayer API and Sencha Ext JS – Sencha.com Sencha Home / Blog / Ext JS / Quickly Build Amazing Cryptocurrency Charts in JavaScript with Coinlayer API and Sencha Ext JS
Ext.define(‘GoogleNLPDemoApp.view.main.MainView’, { xtype: ‘mainview’, controller: ‘mainviewcontroller’, extend: ‘Ext.Panel’, layout: ‘vbox’, items: [{ xtype: ‘fieldset’, items: [ { xtype: ‘textfield’, label: ‘Text Content’, placeholder: ‘Enter text for analysis’, name: ‘textContent’, // validate not empty required: true, reference: ‘ct’ }, { xtype: ‘button’, text: ‘analyze’, handler: ‘onAnalyzeClick’ } ] }, { xtype: ‘reportgrid’, title: ‘Sentiment Analysis Report’, bind: { store: ‘{nlpStore}’ } }], viewModel: { stores: { nlpStore: { type: ‘store’, storeId: ‘dStore’, autoLoad: true, fields:[{ name: ‘content’, mapping: ‘text.content’ }, { name: ‘magnitude’, mapping: ‘sentiment.magnitude’ }, { name: ‘score’, mapping: ‘sentiment.score’ } ], proxy: { type: ‘memory’, data: null, reader: { rootProperty: ‘sentences’ } } } } }, defaults: { flex: 1, margin: 16 } });
The D3 package in Sencha Ext JS is a very popular and efficient way to visualize data. There are 2 main components to the tool — the first is D3, the powerful JavaScript library that helps you easily visualize data on the web using HTML tables or SVG. Next is Ext JS, the Sencha JavaScript framework for building interactive cross-platform applications. By using D3 with Ext JS, you can build powerful data visualizations that help organizations and individuals uncover valuable insights by seeing their data more effectively. If effective, intuitive, and easy-to-implement data visualization is what you are after, read on to learn more about how you can put Ext JS and D3 to work for you. What is D3? First off, you ask, what is D3? D3 stands for Data-Driven Documents. It is an open-source JavaScript library for producing dynamic, readable, and interactive data visualizations in web browsers. It uses all the modern web standards, including SVG, HTML, and CSS. What makes it effective is that you can use D3 to bind any arbitrary data to your Document Object Model (DOM) and apply data transformations from there. D3 is incredibly flexible. For example, you can use D3 to generate an HTML table from any array of numbers. You can also use D3 to create an interactive SVG bar chart using the same data. In short, D3 lets you present your information in a visually appealing way. More importantly, it gives you full control over the data selection process. Three Reasons to use D3 for data visualization There are many reasons why Sencha’s D3 is the perfect tool to visualize your data. but for now, let’s stick to these 3: It’s easy to build any kind of visualization that you want. The D3 library lets you present your complex numbers in a way that is easy for everyone to read. You can easily generate reports, it simplifies making comparisons and allows you to present your data that makes it easier to recognize patterns. It’s simple to reuse code and add specific functions. D3 is a JavaScript library with functional styles built in. As a result, creating attractive, powerful data visualization is a breeze. It creates memorable visualizations. Data Visualizations created with D3 stand out. Whether you are working to convince investors or present findings, nothing works better than properly transformed data to uncover valuable insights. How to Build Powerful Data Visualizations with D3 and Ext JS The Sencha D3 package is completely integrated with Ext JS. The result is powerful, easily implemented data visualizations. The D3 package supports multiple component types, including Hierarchical Components, Heatmap Components, and Custom Components. Here we will look at the details of integrating the hierarchical “Sunburst” and “Zoomable Sunburst” components in Ext JS. Sunburst The D3 sunburst component is a dynamic and compelling way to render your hierarchical data. Like a sunburst, it visualizes tree nodes as concentric wedge sectors, with the root circle in the center. It opens outward for every level of depth in the hierarchy. To produce the visualization shown above, you have to create the Model by using the following code: Ext.define(‘KitchenSink.model.Tree’, { extend: ‘Ext.data.TreeModel’, fields: [ ‘name’, ‘path’, ‘size’, { […]
D3 is a powerful JavaScript library for creating amazing data visualizations. It helps you to visualize the data on the web easily using HTML tables or SVG. On the other hand, Ext JS is a JavaScript framework for building interactive cross-platform applications. By using D3 with the Ext JS apps, you can build powerful data visualizations, helping organizations and individuals uncover valuable insights effectively. In this article, you will find all the details. What is D3? D3 stands for Data-Driven Documents. It is an open-source JavaScript library for producing dynamic, readable, and interactive data visualizations in web browsers. It utilizes modern web standards, including SVG, HTML, and CSS. D3 can bind any arbitrary data to Document Object Model (DOM) and apply data transformation. For example, it can generate an HTML table from an array of numbers. It can use the same data to produce an interactive SVG bar chart. D3 enables you to present information in a visually appealing way. Also, it gives you full control over the data selection process. Why should you use D3 for data visualization? You should use D3 because it helps you to build any kind of visualization that you want easily. It’s a tool that enables you to present the numbers in a readable form. Also, it helps you to generate reports easily, make comparisons effectively, and understand the pattern deeply. D3 is a JavaScript library, which utilizes a functional style. So, you can reuse codes and add specific functions easily. As a result, you can create powerful data visualizations conveniently. D3 helps you to create memorable presentations with amazing data visualization. If you are working at a startup, you can convince investors effectively by using properly transformed data that uncover valuable insights. How to Build Powerful Data Visualizations with D3 and Ext JS D3 can be easily integrated with Ext JS apps to produce amazing data visualizations. It supports different component types, including Hierarchical Components, Heatmap Components, and Custom Components. In this post, you will find the details of integrating the “Sunburst” and “Zoomable Sunburst” components, which fall under “Hierarchical Components,” in the Ext JS apps. Sunburst The D3 sunburst component provides a dynamically compelling rendering of hierarchical data. It visualizes tree nodes as concentric wedge sectors, with the root circle in the center. It opens outward for every level of depth in the hierarchy. To produce the visualization shown above, you have to create the Model by using the following codes: Ext.define(‘KitchenSink.model.Tree’, { extend: ‘Ext.data.TreeModel’, fields: [ ‘name’, ‘path’, ‘size’, { name: ‘leaf’, calculate: function(data) { return data.root ? false : !data.children; } }, { name: ‘text’, calculate: function(data) { return data.name; } } ], proxy: { type: ‘ajax’, url: ‘data/tree/tree.json’ }, idProperty: ‘path’ }); Next, you have to create the Controller. Ext.define(‘KitchenSink.view.d3.SunburstController’, { extend: ‘Ext.app.ViewController’, alias: ‘controller.sunburst’, […]
Ext JS is a JavaScript framework that enables developers to build web apps for any modern device. It includes 140+ fully supported components that easily integrate with React and Angular. It features a customizable tab control to easily allow you to add powerful tabs within your Javascript application. There are a number of advanced features it supports including overflow scroller tabs, icons on tabs, and bottom tabs. Take a look at the below tips for building tabs in a Javascript application. #1. How do I implement basic tabs in Ext JS? Tabs on a component enable handy user engaging means of displaying multiple related content, one iteration of a view at a time. #2. How do I implement advanced features in tabs? There are options for anchoring the collection of tabs along any position on the perimeter of the component container, and likewise within the collection of tabs, the option of rotating the tab itself within its container. Check out this video tip on our YouTube channel: https://www.youtube.com/watch?v=SCCn3FqdMwY #3. How do I implement the overflow scroller tabs? The Tab Panel component provides the means for managing tabs in such a way where “back” and “next” buttons can allow access to tabs not readily visible within the current display, called the overflow. #4. How do I implement icons on tabs in Ext JS? Text is the most common way to signal information in a tab header, but other options, called icons, exist as well, which can be just as engaging if not more so in initiating action in an application. #5. How do I implement positioning bottom tabs in Ext JS? Tabs on a component can be configured to be docked along any position on the component’s perimeter. ExtJS has Everything you need to Create Stunning Web Applications Ext JS includes amazing UI components, such as HTML5 calendar, grids, pivot grid, D3 adapter, trees, lists, forms, menus, toolbars, panels, windows, and much more. Hundreds of user extensions are also available from the Sencha community. Find out more about Ext JS and all of the amazing HTML5 components it offers.
