Lier du C avec du javascript (d3.js)

Version imprimable

05/04/2017, 22h27
yoyozaza

Lier du C avec du javascript (d3.js)

Bonjour,

J'ai un projet en informatique dans lequel je dois afficher des courbes et pouvoir les manipuler.

Je dois coder en c pour lire des fichiers contenant des séries de points et je dois utiliser la bibliothèque d3.js pour toute l'interface graphique.

Mais j'ai beau cherché et je n'arrive pas à lier le c avec cette bibliothèque.

Si vous avez une solution à me proposer je suis preneur.

Merci d'avance ^^
06/04/2017, 00h09
epicboll

Hello, je pense que pour le plan de ton projet, il faudrait que tu créais un .svg avec tes données, et les interpréter avec d3.js !
06/04/2017, 00h26
foetus
epicboll n'a pas totalement raison :mrgreen:

Tu ne pourras jamais utilisé une bibliothèque javascript en C/ C++ (ni même en java, ...)
Mais tu peux générer une page HTML qui utilise cette bibliothèque (avec fopen, fwrite, fclose, ...)

Et wiki, rejoint epicboll:

Citation:

Intégrée dans une page web HTML, la bibliothèque JavaScript D3.js utilise des fonctions pré-construites de JavaScript pour sélectionner des éléments, créer des objets SVG, les styliser, ou y ajouter des transitions, des effets dynamiques ou des infobulles.

Donc il faut
1. Tu prennes la main sur cette bibliothèque, en codant une page HTML qui correspond à tes besoins.
2. Tu fasses le travail pour processer tes données en entrée
3. Que tu codes le "pont" entre les 2 points: le code qui permet de générer une page HTML conforme au point 1 avec les données en entrée (point 2)
06/04/2017, 10h30
yoyozaza

Salut tout le monde,

Merci pour vos réponses aussi rapide :D

foetus si j'ai bien compris ce que tu m'as répondu c'est qu'il faut que je code une page html qui va interagir avec le d3.s et que je code en c le programme qui me permettra d'extraire les données du fichier et qu'ensuite je fasse le pont entre le c et le html?

Si c'est le cas alors ma question revient avec le c et le html :calim2:
06/04/2017, 10h39
ternel

html est une langage de forme. Il suffit d'écrire dans un fichier.
html ne s'exécute pas, il s'affiche (ce que fait particulièrement bien un navigateur)

Affiche une courbe (artificielle) dans une page html, tu verras après comment produire la page en question dans un programme.
06/04/2017, 10h58
yoyozaza

Salut ternel,

J'ai pas bien compris ta réponse
Il faut que j'écrive à partir du c dans un fichier html avec fwrite et que je l'affiche à l'écran?
06/04/2017, 11h22
foetus

Citation:

Envoyé par yoyozaza

foetus si j'ai bien compris ce que tu m'as répondu c'est qu'il faut que je code une page html qui va interagir avec le d3.s et que je code en c le programme qui me permettra d'extraire les données du fichier et qu'ensuite je fasse le pont entre le c et le html?

C'est à peu près cela sauf "les données du fichier" :mrgreen: :mrgreen:

En gros: données en entrée -> [Code en C qui processe ces données -> Code en C qui génère une page HTML avec ces données] -> page HTML avec d3.js

Citation:

Envoyé par yoyozaza

Il faut que j'écrive à partir du c dans un fichier html avec fwrite et que je l'affiche à l'écran?

Tu ne connais pas HTML :mrgreen:

HTML c'est un langage à balise qui permet de décrire une page qu'un butineur (*) va afficher

*: browser en anglais, comme Firefox, Internet Explorer, Google Chrome, Apple Safari, Opera, ...
06/04/2017, 11h47
yoyozaza

Citation:

Envoyé par foetus

C'est à peu près cela sauf "les données du fichier" :mrgreen: :mrgreen:

En gros: données en entrée -> [Code en C qui processe ces données -> Code en C qui génère une page HTML avec ces données] -> page HTML avec d3.js

Tu ne connais pas HTML :mrgreen:

HTML c'est un langage à balise qui permet de décrire une page qu'un butineur (*) va afficher

*: browser en anglais, comme Firefox, Internet Explorer, Google Chrome, Apple Safari, Opera, ...

Je suis vraiment désolé mais je suis un peu dans le flou (faut pas m'en vouloir c'est mon premier projet^^ je ne suis qu'en L2 :oops:)

il faut que j'écris dans un fichier html les données que j'ai réussis à extraire avec le c et que je crée une autre page html avec le d3.js si j'ai bien compris?

Mais comment intéragir directement avec le c et le html c'est à dire qu'une fois que j'ai réussi à extraire les données afficher directement le fichier html créé ?
De plus il faut que je puisse intéragir dans l'autre sens c'est à dire que si je demande à l'utilisateur d'entrer un fichier avec la page codé en html il faut que le C puisse recevoir les données ?

En fait je suis complétement perdu :piou:

Un code à l'arrache :mrgreen:

Il faut lui passer en argument, le nombre de divisions d'un triangle.
Tu glisses le fichier HTML dans ton butineur, et avec F5 tu rafraîchis la page après chaque mise à jour

Sinon pour aller chercher les infos dans la page HTML, ouais là c'est assez difficile pour toi :koi: :koi:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
#include <stdio.h>
#include <stdlib.h>
 
 
int main(int argc, char** argv)
{
    FILE* output;
    unsigned int nb_bars;
    unsigned short count;
    unsigned char c, need_continue;
 
    if (argc != 2) {
        printf("main - error: need argument\n\n");
 
        return -1;
    }
 
//  Convert arg[1] to int
    nb_bars = 0;
    count   = 0;
    need_continue = 1;
 
    c = argv[1][count];
 
    while(need_continue && (c != '\0')) {
        if ((c >= '0') && (c <= '9')) {
            nb_bars = ((nb_bars * 10) + (c - '0'));
        } else {
            need_continue = 0;
        }
 
        ++count;
 
        c = argv[1][count];
    }
 
    if (need_continue) {
        if (nb_bars == 0) {
            printf("main - error: find argument == 0\n\n");
 
            return -1;
        } else if (nb_bars <= 25) {
            printf("main - debug: find argument %d\n\n", nb_bars);
        } else {
            printf("main - error: find argument > 25\n\n");
 
            return -1;
        }
    } else {
        printf("main - error: argument should be an int\n\n");
 
        return -1;
    }
 
    output = fopen("output.html", "wb");
 
    if (argc != 2) {
        printf("main - error: cannot open output file\n\n");
 
        return -1;
    }
 
    fprintf(output,"<!DOCTYPE html>\n\
<html lang='en'>\n\
<head>\n\
  <meta charset='utf-8'>\n\
  <title>Output</title>\n\
  <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script>\n\
  <style type='text/css'>\n\
    div.bar {\n\
      display: inline-block;\n\
      width: 20px;\n\
      height: 75px;\n\
      background-color: teal;\n\
    }\n\
  </style>\n\
</head>\n\
<body>\n\
  <script type='text/javascript'>\n\
    var dataset = [5");
 
    for(count = 1; count < nb_bars; ++count) {
        fprintf(output,", %d", ((count + 1) * 5));
    }
 
    fprintf(output,"]\n\
    d3.select(\"body\").selectAll(\"div\")\n\
      .data(dataset)\n\
      .enter()\n\
      .append(\"div\")\n\
      .attr(\"class\", \"bar\")\n\
      .style(\"height\", function(d) {\n\
\n\
        return d + \"px\";\n\
      });\n\
  </script>\n\
</body>\n\
</html>");
 
    fclose(output);
 
    return 1;
}

06/04/2017, 12h55
ternel

Si tu es perdu, demandes des informations complémentaires à ton professeur.
Il sera heureux d'avoir un élève qui veut faire le travail, et toi, tu auras des suggestions qui correspondent au désir de ton professeur.
06/04/2017, 13h22
yoyozaza

En fait le prof nous laisse un peu se débrouiller tout seul on a discuté de plusieurs solutions et aucune n'a fonctionné

La dernière qu'il nous a proposé est d'utiliser le libwebsocket pour faire les intéractions entre le c et le js donc c'est un peu hard...

Merci beaucoup foetus !
07/04/2017, 01h35
foetus
En effet, il faudrait demander à ton prof. ce qu'il en est :whistle:

Parce que si j'essaye d'interpréter ce que tu nous dis, ton programme devient un mini-projet :koi: :koi:
En gros, c'est une architecture client-serveur qu'il faut mettre en place.

Le client, qui est soit un programme C soit un formulaire/ page HTML (<- tu ne connais pas le HTML :aie:) va avoir 2 rôles:
1. Envoyer des données au serveur
2. Consulter/ afficher les données que le serveur "a" (<- donc ceci suppose que le serveur conserve les données)
Et le serveur codé en C, va répondre au client en envoyant des pages HTML :mrgreen:
Mais ceci pose une autre question :whistle: : comment est-ce que le client va gérer cette réponse ? Écriture sur le disque dur ? Client avec IHM (interface utilisateur) ? Page HTML ?
On peut penser qu'il va y avoir plusieurs clients :aie:

Si tu reprends ma première réponse, le point 3 correspond au serveur, et le point 2 à la moitié du client (seulement si ce n'est pas un formulaire HTML) ;)
07/04/2017, 15h17
yoyozaza

En fait je connais le html, css, js et un peu de php :mouarf:

Mais tu as raison ce n'est pas un simple programme c'est justement un projet qui est censé se faire sur tout le semestre.

Par rapport à ce projet le c doit s'occuper de toute la partie back-end tandis que pour la partie front-end il ne faut utiliser que le html et le d3.js.

Normalement l'utilisateur ne va interagir qu'avec une page html contenant du d3.js, et pour tout ce qui est la gestion de données c'est le c qui doit être utilisé.

Donc en vérité il me faudrait une sorte de programme qui pourrait me permettre de faire des interactions "dynamique" entre les 2.
Par exemple si j'affiche une page html demandant à l'utilisateur quel type de fichier veut-il ouvrir ainsi que le chemin pour y accéder il faut transmettre toutes ces données au c pour lire ce fichier et en extraire les données, et dans l'autre sens aussi, une fois que les données ont été extraite, il faut les envoyer à la page html pour afficher les courbes à l'écran.

Et je ne sais pas si une telle chose existe voila mon problème:calim2:
07/04/2017, 19h47
foetus
Toujours si j'essaye d'interpréter :mrgreen:

Édit: Ce que je soupçonne c'est que faire une IHM en C, à part en GTK, c'est très difficile.
Donc, ton prof transforme cette difficulté, en architecture client-serveur, avec un serveur codé en C et un client en HTML avec au moins un formulaire (envoie) et une page avec d3.js (consultation, affichage, ...)

Citation:

Envoyé par yoyozaza

Par exemple si j'affiche une page html demandant à l'utilisateur quel type de fichier veut-il ouvrir ainsi que le chemin pour y accéder il faut transmettre toutes ces données au c pour lire ce fichier et en extraire les données

Là il y a un truc que tu ne peux pas faire :mrgreen: (à moins que tu trouves le truc, plug-in ActiveX, ou tu passes en cgi): on ne peut pas appeler un programme à partir d'une page HTML.

Donc, soit:
- Tu codes un programme dont je parle qui fait tout (1): processe des données, génération page HTML, et/ ou éventuellement si IHM affichage
- Tu codes une architecture client-serveur. Le client (programme en C ou formulaire en HTML) va envoyer le fichier au serveur, et c'est le serveur (codé en C) qui va processer et stocker les informations (*)
Citation:

Envoyé par yoyozaza

Une fois que les données ont été extraite, il faut les envoyer à la page html pour afficher les courbes à l'écran.

Et justement, si tu fais un programme "tout en 1" (1), cela n'est pas possible: parce que le résultat sera une page internet.

Si "tu veux envoyer à une page" (envoyer), il faut un serveur qui stocke les informations et qui retourne ces informations à un client (page HTML ou IHM) pour les afficher, les consulter ... voire les modifier.

*: dans ce cas, le client (codé en C) peut déjà faire un pré-traitement, en ouvrant le fichiers et envoyer au serveur les informations. Il y a un protocole et des rôles à spécifier ici :mrgreen:
09/04/2017, 10h54
yoyozaza

Merci beaucoup pour toutes ces réponses je vais essayer de voir de mon côté ;)