ホームページ ウェブフロントエンド jsチュートリアル Matlabと平均スタックでWebアプリを作成する

Matlabと平均スタックでWebアプリを作成する

Feb 19, 2025 pm 01:22 PM

Creating a Web App with MATLAB and the MEAN Stack

コアポイント

  • テクニカルコンピューティングの高レベル言語であるMATLABは、平均スタックと統合して強力なWebアプリケーションを作成できます。
  • 平均スタックは、mongodb、express.js、angularjs、node.jsで構成されており、Matlabと併用すると、Web上のリアルタイムのデータ視覚化が可能になります。
  • 統合プロセスには、Matlabのコンピューティングパワーを使用してデータを処理して結果を生成します。これは、平均スタックを使用して構築されたWebアプリケーションに表示されます。
  • MATLAB言語での無料のオープンソースJSONエンコーダー/デコーダー実装であるJSonLabは、Webアプリケーションで使用するためにMATLABデータをJSON形式に変換するために使用されます。
  • MATLAB Webアプリケーションの作成には、MATLABコンパイラを使用したスタンドアロンアプリケーションの作成、MATLAB WebアプリサーバーでWebアプリケーションプロジェクトの作成、Webアプリケーションプロジェクトへのスタンドアロンアプリケーションのアップロード、ユーザーへのWebアプリケーションの展開が含まれます。
MATLABは、問題やソリューションをおなじみの数学的表記で表現できる使いやすい環境で、コンピューティング、視覚化、プログラミングを統合する技術コンピューティングの高レベルの言語です。 Matlabで書かれ、何百万人もの科学者とエンジニアによって開発された世界中に多くのプロジェクトがあります。 MATLABから取得したさまざまな実験および運用データを使用して、Webアプリケーションをサポートすることができますが、いくつかの障害があります。

MATLABはマトリックス形式のデータを理解していますが、WebアプリケーションはJSONまたはXML形式でデータを好みます。
  • データは通常、MATLABプログラム内で作成および使用されます。これにより、データの節約と使用などの開発者の自由が制限されます。
  • MATLABがJSON形式でデータを提供し、WebアプリケーションがMATLABからこのJSONデータを使用して素晴らしいものを作成できる場合、アプリケーションの作成ははるかに簡単です。
  • この記事では、MATLABと平均スタックを一緒に動作させる方法を示すための小さなデモプログラムを開発します。
Webアプリケーションについて

このWebアプリケーションには、MATLABからブラウザへのリアルタイムデータ転送が含まれます。簡単にするために、現在の時刻をMATLABから転送し、ブラウザに表示します。 MATLABでJSONファイルをエンコード/デコードするためのツールボックスであるJSonLabを使用します。 Webアプリケーションは、平均スタックを使用して作成されます。平均スタックに慣れていない場合は、継続する前に「平均スタックの初心者」を読むことをお勧めします。

jsonlabの紹介

jsonlabは、matlab言語でのJSONエンコーダー/デコーダーの無料オープンソース実装です。 MATLABデータ構造(配列、構造、セル、構造配列、およびセル配列)をJSON形式の文字列に変換するか、JSONファイルをMATLABデータにデコードするために使用できます。

loadjson()savejson()loadubjson()、およびsaveubjson()の4つの関数へのアクセスを提供します。最後の2つの関数は、UBJSON形式を処理するために使用されます。 loadjson()は、JSON文字列を関連するMATLABオブジェクトに変換するために使用されます。私たちのプロジェクトでは、Matlabオブジェクト(セル、構造、または配列)をJSON文字列に変換するsavejson()関数のみを使用します。次のように使用できます

json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ファイルを記述する必要があるため、最初の署名を使用します。 JSON文字列を返し、文字列をファイルに書き込みます。

jsonlabのインストール

開始するには、jsonlabをダウンロードし、アーカイブを解凍し、次のコマンドを使用してMATLABのパスリストにフォルダーのパスを追加します。

このパスを永続的に追加する場合は、

と入力し、jsonlabルートフォルダーを参照してリストに追加する必要があります。終了したら、[保存]をクリックする必要があります。次に、matlabで
addpath('/path/to/jsonlab');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
を実行して

を実行します。出力が表示された場合、JsonLabが正しくインストールされていることを意味します。 pathtool rehashwhich loadjsonmatlab code

現在の時刻が必要なので、コマンドを使用します。 [年、月、日、時間、秒]の形式で現在の日付と時刻を含む6要素の日付ベクトルを返します。繰り返し時間を取得するために、

コマンドを無限の

ループに配置します。したがって、MATLABコマンドウィンドウでCTRL Cを使用してスクリプトの実行が終了するまで、リアルタイムデータを取得し続けます。 clock clock次のコードは、このアイデアを実装しています:while

プロジェクトでは、営業時間、分、秒に焦点を当てています。上記のコードで使用されている

関数は、マトリックスのすべての要素を最も近い整数に丸めます。時間データを取得するには、マトリックスの列4の値が必要なため、コマンド
format shortg;
y=0;
while y == 0
    % c = [year month day hour minute seconds]
    c=clock;
    % 将每个值四舍五入为整数
    c=fix(c);
    x.clock=c;
    % 访问c的第4列,即小时
    x.hours=c(:,4);
    % 访问c的第5列,即分钟
    x.minutes=c(:,5);
    % 访问c的第6列,即秒
    x.seconds=c(:,6);
    % 将x转换为JSON并写入matlabData.json
    savejson('',x,'data/matlabData.json');
end
ログイン後にコピー
ログイン後にコピー
を使用します。同じ方法を使用して、分と秒を取得します。

fix(c)クロックといくつかの個別の変数をWebアプリケーションに個別に送信して、MATLABオブジェクトからJSONへの異なるデータ型の変換を表示します。クロックデータは配列に変換されますが、時間、分、秒の値は数値に変換され、後で表示されます。 c(:,4) 私たちのプロジェクトでは、JSON形式を使用して変数xを変換および書き込み、ファイルに書き込みます

に書き込みます。簡単にするために、

パラメーターは空の文字列になります。

前のコードを使用して、必要なすべてのMATLABコードを完了します。これで、スクリプトを実行すると、JSONファイルがデータフォルダーに作成され、ファイル内のデータが自動的かつ絶えず更新されることを観察できます。 JSONファイルコンテンツの例は次のとおりです savejson() matlabData.jsonこのファイルを監視し、node.jsを使用して最新のデータを読み取ります。それでは、Webアプリケーションの構築を開始しましょう。 rootname

webアプリケーション

{
   "hours": 19,
   "minutes": 28,
   "seconds": 28,
   "clock": [2015,5,27,19,28,28]
}
ログイン後にコピー

MATLABデータがJSONに変換され、ファイルに保存されたため、このファイルを独立して読み取り、変更を監視してデータを取得できます。この操作は、MATLABとは何の関係もありません。この記事の残りの部分では、基本的な概念の一部のみを使用していても、socket.ioと平均スタックを理解していると思います。

Webアプリケーションの作成を開始しましょう。

package.jsonファイルを作成

アプリケーションを開始するには、プロジェクトの依存関係を定義しましょう。これを行うには、次のようにpackage.jsonファイルを作成します。

json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ファイルを作成した後、プロジェクトのルートフォルダーで

を実行して、すべての依存関係をインストールします。 NPMに慣れていない場合は、「NPM Getting Guide -Node Package Manager」を読むことをお勧めします。 npm install

サーバーサイドコード コードのこの部分には、node.js、Express、およびMongodbの使用が含まれます。サーバーによって実行される操作には、

が含まれます

提供
    file
  • index.html jsonファイルのデータを監視および読み取り
  • mongodb
  • を使用してデータベースにデータを保存します
  • socket.io
  • を使用してブラウザにデータを送信します
  • ルートフォルダーに
という名前のファイルを作成し、説明されているすべての機能に必要なコードを記述します。

server.js Expressを使用して静的ファイルを提供します:

要求が
addpath('/path/to/jsonlab');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
に送信されるたびに、

ディレクトリに保存されているファイルが提供されます。 / appファイルへの変更を監視するには、index.htmlを使用し、ファイルが変更されるたびに読み取るには、

を使用します。変更が検出されると、ファイルが読み取られ、データが取得されます。プロセス全体が次のコードを使用して完了します。

fs.watch()クライアントとの接続が確立され、データの取得を開始すると、2つのことが行われます。 fs.readFile() functionを使用して、データをブラウザに送信します

format shortg;
y=0;
while y == 0
    % c = [year month day hour minute seconds]
    c=clock;
    % 将每个值四舍五入为整数
    c=fix(c);
    x.clock=c;
    % 访问c的第4列,即小时
    x.hours=c(:,4);
    % 访问c的第5列,即分钟
    x.minutes=c(:,5);
    % 访问c的第6列,即秒
    x.seconds=c(:,6);
    % 将x转换为JSON并写入matlabData.json
    savejson('',x,'data/matlabData.json');
end
ログイン後にコピー
ログイン後にコピー

Mongooseミドルウェアを使用してMongoDBにデータを保存します<」

2番目の操作を実行するには、データのスキーマを作成し、そのスキーマに基づいてモデルを作成します。これは、以下に示すコードを使用して行われます:
  1. 前のコードセグメントの最後のステートメントでは、定義されたパターンに基づいてモデルを作成します。関数に渡された最初のパラメーターは、モデルが属するセットの単数名です。 Mongooseは、複数の名前をコレクションに自動的に割り当てます。したがって、ここではemit()
  2. コレクションのモデルです。
  3. 新しいデータを取得すると、最新のデータを使用してスキーマの新しいインスタンスを作成し、
メソッドを使用してデータベースに保存します。このインスタンスはドキュメントと呼ばれます。次のコードでは、

はドキュメントです。

この部分の最終コードは次のとおりです。
json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

tryおよびcatchを使用して、アプリケーションのクラッシュを防ぎます。使用しないと、JSON.parseが急速な変更により予期しないユーザー入力エラーを引き起こした場合、アプリケーションがクラッシュする場合があります。これは私たちが避けたいものです!

また、MongoDBサーバーが実行されていることを確認してください。そうしないと、アプリケーションがクラッシュします。

クライアントコード

このセクションでは、単純な静的HTMLページを作成します。 socket.ioを介して新しいデータが受信されると、ページに表示されるデータを更新します。このデータは、リアルタイムチャートの作成にも使用できます。

以下は、

ファイルの単純なコードです:index.html

addpath('/path/to/jsonlab');
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

ディレクティブは、アプリケーションがロードされているときに、ブラウザが元の(コンパイルされていない)AngularJSテンプレートを簡単に表示しないようにするために使用されます。 ngCloak

アプリケーションを実行します

node.jsサーバーを起動する前に、MatlabコードとMongoDBサーバーが実行されていることを確認する必要があります。 MongoDBサーバーを実行するには、端末でコマンド

を実行する必要があります。 node.jsサーバーを実行するには、プロジェクトフォルダーのルートディレクトリでコマンドmongodを実行する必要があります。 node server.js

現在の時刻を示す静的ページは

で提供されます。 127.0.0.1:3000

結論 この記事では、平均スタックを使用して、MATLABプログラムからJSON形式のデータを取得するWebアプリケーションを作成します。データはJSonLabの助けを借りて変換されます。データはsocket.ioを使用してブラウザに送信されるため、ブラウザの変更はリアルタイムで反映されます。このデモの完全なソースコードは、GitHubで入手できます。

この記事を楽しんで、コメントを読むことを楽しみにしています。

(FAQSセクションは、記事の長さのために個別に処理するようにお勧めします。重要な質問と回答を抽出し、必要に応じて簡単に要約または再編成できます。

以上がMatlabと平均スタックでWebアプリを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptは学ぶのが難しいですか? JavaScriptは学ぶのが難しいですか? Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1)変数、データ型、関数などの基本概念を理解します。2)非同期プログラミングをマスターし、イベントループを通じて実装します。 3)DOM操作を使用し、非同期リクエストを処理することを約束します。 4)一般的な間違いを避け、デバッグテクニックを使用します。 5)パフォーマンスを最適化し、ベストプラクティスに従ってください。

JavaScriptの進化:現在の傾向と将来の見通し JavaScriptの進化:現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は? Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は?データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は?
または:
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は? または: Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか? Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト(https://www.shisido.co.co.jp/sb/wonderland/)と同様の達成方法について説明します。

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

See all articles